Song youtube thumbnail improvements

frontend/src/components/modals/EditPlaylist/components/PlaylistSongItem.vue

@@ -2,16 +2,22 @@
 	<div class="universal-item playlist-song-item">
 		<div id="thumbnail-and-info">
 			<img
-				v-if="song.thumbnail"
 				class="item-thumbnail"
-				:src="song.thumbnail"
+				:src="
+					song.songId &&
+					(!song.thumbnail ||
+						(song.thumbnail &&
+							(song.thumbnail.lastIndexOf('notes-transparent') !==
+								-1 ||
+								song.thumbnail.lastIndexOf(
+									'/assets/notes.png'
+								) !== -1)) ||
+						song.thumbnail == ('empty' || null))
+						? `https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`
+						: song.thumbnail
+				"
 				onerror="this.src='/assets/notes-transparent.png'"
 			/>
-			<img
-				v-else
-				class="item-thumbnail"
-				src="/assets/notes-transparent.png"
-			/>
 			<div id="song-info">
 				<h4 class="item-title" :title="song.title">
 					{{ song.title }}

frontend/src/components/modals/EditStation.vue

@@ -292,9 +292,11 @@
 							<button
 								class="blue"
 								@click="
-									station.playMode === 'random'
-										? updatePlayModeLocal('sequential')
-										: updatePlayModeLocal('random')
+									(station.type === 'official' &&
+										station.playMode === 'random') ||
+									station.playMode === 'sequential'
+										? updatePlayModeLocal('random')
+										: updatePlayModeLocal('sequential')
 								"
 							>
 								<i class="material-icons">{{

frontend/src/pages/Home.vue

@@ -67,18 +67,44 @@
 					<div class="card-image">
 						<figure class="image is-square">
 							<div
-								v-if="station.currentSong.ytThumbnail"
+								v-if="
+									station.currentSong.songId &&
+										(!station.currentSong.thumbnail ||
+											(station.currentSong.thumbnail &&
+												(station.currentSong.thumbnail.lastIndexOf(
+													'notes-transparent'
+												) !== -1 ||
+													station.currentSong.thumbnail.lastIndexOf(
+														'/assets/notes.png'
+													) !== -1)) ||
+											station.currentSong.thumbnail ==
+												('empty' || null))
+								"
 								class="ytThumbnailBg"
 								:style="{
 									'background-image':
 										'url(' +
-										station.currentSong.ytThumbnail +
+										`https://img.youtube.com/vi/${station.currentSong.songId}/mqdefault.jpg` +
 										')'
 								}"
 							></div>
 							<img
-								v-if="station.currentSong.ytThumbnail"
-								:src="station.currentSong.ytThumbnail"
+								v-if="
+									station.currentSong.songId &&
+										(!station.currentSong.thumbnail ||
+											(station.currentSong.thumbnail &&
+												(station.currentSong.thumbnail.lastIndexOf(
+													'notes-transparent'
+												) !== -1 ||
+													station.currentSong.thumbnail.lastIndexOf(
+														'/assets/notes.png'
+													) !== -1)) ||
+											station.currentSong.thumbnail ==
+												('empty' || null))
+								"
+								:src="
+									`https://img.youtube.com/vi/${station.currentSong.songId}/mqdefault.jpg`
+								"
 								onerror="this.src='/assets/notes-transparent.png'"
 							/>
 							<img
@@ -286,18 +312,44 @@
 					<div class="card-image">
 						<figure class="image is-square">
 							<div
-								v-if="station.currentSong.ytThumbnail"
+								v-if="
+									station.currentSong.songId &&
+										(!station.currentSong.thumbnail ||
+											(station.currentSong.thumbnail &&
+												(station.currentSong.thumbnail.lastIndexOf(
+													'notes-transparent'
+												) !== -1 ||
+													station.currentSong.thumbnail.lastIndexOf(
+														'/assets/notes.png'
+													) !== -1)) ||
+											station.currentSong.thumbnail ==
+												('empty' || null))
+								"
 								class="ytThumbnailBg"
 								:style="{
 									'background-image':
 										'url(' +
-										station.currentSong.ytThumbnail +
+										`https://img.youtube.com/vi/${station.currentSong.songId}/mqdefault.jpg` +
 										')'
 								}"
 							></div>
 							<img
-								v-if="station.currentSong.ytThumbnail"
-								:src="station.currentSong.ytThumbnail"
+								v-if="
+									station.currentSong.songId &&
+										(!station.currentSong.thumbnail ||
+											(station.currentSong.thumbnail &&
+												(station.currentSong.thumbnail.lastIndexOf(
+													'notes-transparent'
+												) !== -1 ||
+													station.currentSong.thumbnail.lastIndexOf(
+														'/assets/notes.png'
+													) !== -1)) ||
+											station.currentSong.thumbnail ==
+												('empty' || null))
+								"
+								:src="
+									`https://img.youtube.com/vi/${station.currentSong.songId}/mqdefault.jpg`
+								"
 								onerror="this.src='/assets/notes-transparent.png'"
 							/>
 							<img
@@ -601,8 +653,6 @@ export default {
 						newSong = {
 							thumbnail: "/assets/notes-transparent.png"
 						};
-					if (newSong && !newSong.thumbnail)
-						newSong.ytThumbnail = `https://img.youtube.com/vi/${newSong.songId}/mqdefault.jpg`;
 					station.currentSong = newSong;
 				}
 			});

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -2,15 +2,40 @@
 	<div class="currently-playing">
 		<figure class="thumbnail">
 			<div
-				v-if="song.ytThumbnail"
+				v-if="
+					song.songId &&
+						(!song.thumbnail ||
+							(song.thumbnail &&
+								(song.thumbnail.lastIndexOf(
+									'notes-transparent'
+								) !== -1 ||
+									song.thumbnail.lastIndexOf(
+										'/assets/notes.png'
+									) !== -1)) ||
+							song.thumbnail == ('empty' || null))
+				"
 				id="yt-thumbnail-bg"
 				:style="{
-					'background-image': 'url(' + song.ytThumbnail + ')'
+					'background-image':
+						'url(' +
+						`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg` +
+						')'
 				}"
 			></div>
 			<img
-				v-if="song.ytThumbnail"
-				:src="song.ytThumbnail"
+				v-if="
+					song.songId &&
+						(!song.thumbnail ||
+							(song.thumbnail &&
+								(song.thumbnail.lastIndexOf(
+									'notes-transparent'
+								) !== -1 ||
+									song.thumbnail.lastIndexOf(
+										'/assets/notes.png'
+									) !== -1)) ||
+							song.thumbnail == ('empty' || null))
+				"
+				:src="`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`"
 				onerror="this.src='/assets/notes-transparent.png'"
 			/>
 			<img

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -3,7 +3,19 @@
 		<div id="thumbnail-and-info">
 			<img
 				class="item-thumbnail"
-				:src="song.ytThumbnail ? song.ytThumbnail : song.thumbnail"
+				:src="
+					song.songId &&
+					(!song.thumbnail ||
+						(song.thumbnail &&
+							(song.thumbnail.lastIndexOf('notes-transparent') !==
+								-1 ||
+								song.thumbnail.lastIndexOf(
+									'/assets/notes.png'
+								) !== -1)) ||
+						song.thumbnail == ('empty' || null))
+						? `https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`
+						: song.thumbnail
+				"
 				onerror="this.src='/assets/notes-transparent.png'"
 			/>
 			<div id="song-info">

frontend/src/pages/Station/index.vue

@@ -631,9 +631,6 @@ export default {
 
 			const { currentSong } = data;
 
-			if (currentSong && !currentSong.thumbnail)
-				currentSong.ytThumbnail = `https://img.youtube.com/vi/${currentSong.songId}/mqdefault.jpg`;
-
 			this.updateCurrentSong(currentSong || {});
 
 			let nextSong = null;
@@ -1525,9 +1522,6 @@ export default {
 							? res.data.currentSong
 							: {};
 
-						if (currentSong && !currentSong.thumbnail)
-							currentSong.ytThumbnail = `https://img.youtube.com/vi/${currentSong.songId}/mqdefault.jpg`;
-
 						this.updateCurrentSong(currentSong);
 
 						this.startedAt = res.data.startedAt;