Fixed a few issues with importing a YouTube playlist

backend/logic/actions/playlists.js

@@ -985,15 +985,19 @@ export default {
 		async.waterfall(
 			[
 				next => {
-					YouTubeModule.runJob("GET_PLAYLIST", { url, musicOnly }, this).then(res => {
-						if (res.filteredSongs) {
-							videosInPlaylistTotal = res.songs.length;
-							songsInPlaylistTotal = res.filteredSongs.length;
-						} else {
-							songsInPlaylistTotal = videosInPlaylistTotal = res.songs.length;
-						}
-						next(null, res.songs);
-					});
+					YouTubeModule.runJob("GET_PLAYLIST", { url, musicOnly }, this)
+						.then(res => {
+							if (res.filteredSongs) {
+								videosInPlaylistTotal = res.songs.length;
+								songsInPlaylistTotal = res.filteredSongs.length;
+							} else {
+								songsInPlaylistTotal = videosInPlaylistTotal = res.songs.length;
+							}
+							next(null, res.songs);
+						})
+						.catch(err => {
+							next(err);
+						});
 				},
 				(songIds, next) => {
 					let successful = 0;

backend/logic/youtube.js

@@ -196,9 +196,7 @@ class _YouTubeModule extends CoreClass {
 	 */
 	GET_PLAYLIST(payload) {
 		return new Promise((resolve, reject) => {
-			const name = "list".replace(/[\\[]/, "\\[").replace(/[\]]/, "\\]");
-
-			const regex = new RegExp(`[\\?&]${name}=([^&#]*)`);
+			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
 			const splitQuery = regex.exec(payload.url);
 
 			if (!splitQuery) {
@@ -255,7 +253,7 @@ class _YouTubeModule extends CoreClass {
 				(err, response) => {
 					if (err && err !== true) {
 						YouTubeModule.log("ERROR", "GET_PLAYLIST", "Some error has occurred.", err.message);
-						reject(new Error("Some error has occurred."));
+						reject(new Error(err.message));
 					} else {
 						resolve({ songs: response.filteredSongs ? response.filteredSongs.songIds : response.songs });
 					}
@@ -305,7 +303,11 @@ class _YouTubeModule extends CoreClass {
 					})
 					.catch(err => {
 						YouTubeModule.log("ERROR", "GET_PLAYLIST_PAGE", `${err.message}`);
-						return reject(new Error("An error has occured. Please try again later."));
+						if (err.message === "Request failed with status code 404") {
+							return reject(new Error("Playlist not found. Is the playlist public/unlisted?"));
+						} else {
+							return reject(new Error("An error has occured. Please try again later."));
+						}
 					});
 			});
 		});

frontend/src/components/SongItem.vue

@@ -7,7 +7,9 @@
 				<h4
 					class="item-title"
 					:style="
-						song.artists.length < 1 ? { fontSize: '16px' } : null
+						song.artists && song.artists.length < 1
+							? { fontSize: '16px' }
+							: null
 					"
 					:title="song.title"
 				>

frontend/src/components/modals/AddSongToQueue.vue

@@ -307,6 +307,16 @@ export default {
 					timeout: 4000
 				});
 
+			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
+			const splitQuery = regex.exec(this.search.playlist.query);
+
+			if (!splitQuery) {
+				return new Toast({
+					content: "Please enter a valid YouTube playlist URL.",
+					timeout: 4000
+				});
+			}
+
 			// don't give starting import message instantly in case of instant error
 			setTimeout(() => {
 				if (isImportingPlaylist) {

frontend/src/components/modals/EditPlaylist.vue

@@ -488,6 +488,16 @@ export default {
 					timeout: 4000
 				});
 
+			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
+			const splitQuery = regex.exec(this.search.playlist.query);
+
+			if (!splitQuery) {
+				return new Toast({
+					content: "Please enter a valid YouTube playlist URL.",
+					timeout: 4000
+				});
+			}
+
 			// don't give starting import message instantly in case of instant error
 			setTimeout(() => {
 				if (isImportingPlaylist) {