Added song thumbnail component

frontend/src/App.vue

@@ -692,6 +692,7 @@ h4.section-title {
 	padding: 7.5px;
 	border: 1px solid var(--light-grey-3);
 	border-radius: 3px;
+	overflow: hidden;
 
 	.item-thumbnail {
 		width: 65px;

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

@@ -1,24 +1,7 @@
 <template>
 	<div class="universal-item playlist-song-item">
 		<div id="thumbnail-and-info">
-			<img
-				class="item-thumbnail"
-				:src="
-					song.songId &&
-					(!song.thumbnail ||
-						(song.thumbnail &&
-							(song.thumbnail.lastIndexOf('notes-transparent') !==
-								-1 ||
-								song.thumbnail.lastIndexOf(
-									'/assets/notes.png'
-								) !== -1)) ||
-						song.thumbnail === 'empty' ||
-						song.thumbnail == null)
-						? `https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`
-						: song.thumbnail
-				"
-				onerror="this.src='/assets/notes-transparent.png'"
-			/>
+			<song-thumbnail :song="song" />
 			<div id="song-info">
 				<h4 class="item-title" :title="song.title">
 					{{ song.title }}
@@ -113,9 +96,10 @@
 import { mapState, mapActions } from "vuex";
 
 import AddToPlaylistDropdown from "../../../ui/AddToPlaylistDropdown.vue";
+import SongThumbnail from "../../../ui/SongThumbnail.vue";
 
 export default {
-	components: { AddToPlaylistDropdown },
+	components: { AddToPlaylistDropdown, SongThumbnail },
 	props: {
 		song: {
 			type: Object,
@@ -165,6 +149,7 @@ export default {
 
 .playlist-song-item {
 	width: 100%;
+	min-height: 50px;
 
 	#thumbnail-and-info,
 	.universal-item-actions div {
@@ -180,7 +165,8 @@ export default {
 		}
 	}
 
-	.item-thumbnail {
+	.thumbnail {
+		min-width: 55px;
 		width: 55px;
 		height: 55px;
 	}

frontend/src/components/ui/SongThumbnail.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class="thumbnail">
+		<div
+			v-if="
+				song.songId &&
+					(!song.thumbnail ||
+						(song.thumbnail &&
+							(song.thumbnail.lastIndexOf('notes-transparent') !==
+								-1 ||
+								song.thumbnail.lastIndexOf(
+									'/assets/notes.png'
+								) !== -1 ||
+								song.thumbnail.lastIndexOf('i.ytimg.com') !==
+									-1)) ||
+						song.thumbnail === 'empty' ||
+						song.thumbnail == null)
+			"
+			class="yt-thumbnail-bg"
+			:style="{
+				'background-image':
+					'url(' +
+					`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg` +
+					')'
+			}"
+		></div>
+		<img
+			v-if="
+				song.songId &&
+					(!song.thumbnail ||
+						(song.thumbnail &&
+							(song.thumbnail.lastIndexOf('notes-transparent') !==
+								-1 ||
+								song.thumbnail.lastIndexOf(
+									'/assets/notes.png'
+								) !== -1 ||
+								song.thumbnail.lastIndexOf('i.ytimg.com') !==
+									-1)) ||
+						song.thumbnail === 'empty' ||
+						song.thumbnail == null)
+			"
+			:src="`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`"
+			onerror="this.src='/assets/notes-transparent.png'"
+		/>
+		<img
+			v-else
+			:src="song.thumbnail"
+			onerror="this.src='/assets/notes-transparent.png'"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		song: {
+			type: Object,
+			default: () => {}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.thumbnail {
+	min-width: 130px;
+	height: 130px;
+	position: relative;
+	margin-top: -15px;
+	margin-bottom: -15px;
+	margin-left: -10px;
+
+	.yt-thumbnail-bg {
+		height: 100%;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		filter: blur(1px);
+		background: url("/assets/notes-transparent.png") no-repeat center center;
+	}
+
+	img {
+		height: auto;
+		width: 100%;
+		margin-top: auto;
+		margin-bottom: auto;
+		z-index: 1;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+}
+</style>

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

@@ -1,57 +1,6 @@
 <template>
 	<div class="currently-playing">
-		<figure class="thumbnail">
-			<div
-				v-if="
-					song.songId &&
-						(!song.thumbnail ||
-							(song.thumbnail &&
-								(song.thumbnail.lastIndexOf(
-									'notes-transparent'
-								) !== -1 ||
-									song.thumbnail.lastIndexOf(
-										'/assets/notes.png'
-									) !== -1 ||
-									song.thumbnail.lastIndexOf(
-										'i.ytimg.com'
-									) !== -1)) ||
-							song.thumbnail === 'empty' ||
-							song.thumbnail == null)
-				"
-				id="yt-thumbnail-bg"
-				:style="{
-					'background-image':
-						'url(' +
-						`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg` +
-						')'
-				}"
-			></div>
-			<img
-				v-if="
-					song.songId &&
-						(!song.thumbnail ||
-							(song.thumbnail &&
-								(song.thumbnail.lastIndexOf(
-									'notes-transparent'
-								) !== -1 ||
-									song.thumbnail.lastIndexOf(
-										'/assets/notes.png'
-									) !== -1 ||
-									song.thumbnail.lastIndexOf(
-										'i.ytimg.com'
-									) !== -1)) ||
-							song.thumbnail === 'empty' ||
-							song.thumbnail == null)
-				"
-				:src="`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`"
-				onerror="this.src='/assets/notes-transparent.png'"
-			/>
-			<img
-				v-else
-				:src="song.thumbnail"
-				onerror="this.src='/assets/notes-transparent.png'"
-			/>
-		</figure>
+		<song-thumbnail :song="song" />
 		<div id="song-info">
 			<div id="song-details">
 				<h6 v-if="type === 'current'">Currently Playing...</h6>
@@ -139,9 +88,10 @@ import { mapState, mapActions } from "vuex";
 import { formatDistance, parseISO } from "date-fns";
 
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
+import SongThumbnail from "../../../components/ui/SongThumbnail.vue";
 
 export default {
-	components: { UserIdToUsername },
+	components: { UserIdToUsername, SongThumbnail },
 	props: {
 		song: {
 			type: Object,
@@ -188,38 +138,6 @@ export default {
 	padding: 10px;
 	min-height: 130px;
 
-	.thumbnail {
-		min-width: 130px;
-		height: 130px;
-		position: relative;
-		margin-top: -15px;
-		margin-bottom: -15px;
-		margin-left: -10px;
-
-		#yt-thumbnail-bg {
-			height: 100%;
-			width: 100%;
-			position: absolute;
-			top: 0;
-			filter: blur(1px);
-			background: url("/assets/notes-transparent.png") no-repeat center
-				center;
-		}
-
-		img {
-			height: auto;
-			width: 100%;
-			margin-top: auto;
-			margin-bottom: auto;
-			z-index: 1;
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-
 	#song-info {
 		display: flex;
 		flex-direction: column;

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

@@ -1,24 +1,7 @@
 <template>
 	<div class="universal-item queue-item">
 		<div id="thumbnail-and-info">
-			<img
-				class="item-thumbnail"
-				:src="
-					song.songId &&
-					(!song.thumbnail ||
-						(song.thumbnail &&
-							(song.thumbnail.lastIndexOf('notes-transparent') !==
-								-1 ||
-								song.thumbnail.lastIndexOf(
-									'/assets/notes.png'
-								) !== -1)) ||
-						song.thumbnail === 'empty' ||
-						song.thumbnail == null)
-						? `https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`
-						: song.thumbnail
-				"
-				onerror="this.src='/assets/notes-transparent.png'"
-			/>
+			<song-thumbnail :song="song" />
 			<div id="song-info">
 				<h4
 					class="item-title"
@@ -156,10 +139,11 @@ import { formatDistance, parseISO } from "date-fns";
 
 import AddToPlaylistDropdown from "../../../../../components/ui/AddToPlaylistDropdown.vue";
 import UserIdToUsername from "../../../../../components/common/UserIdToUsername.vue";
+import SongThumbnail from "../../../../../components/ui/SongThumbnail.vue";
 import utils from "../../../../../../js/utils";
 
 export default {
-	components: { UserIdToUsername, AddToPlaylistDropdown },
+	components: { UserIdToUsername, AddToPlaylistDropdown, SongThumbnail },
 	props: {
 		song: {
 			type: Object,
@@ -235,6 +219,13 @@ export default {
 		width: calc(100% - 90px);
 	}
 
+	.thumbnail {
+		min-width: 65px;
+		width: 65px;
+		height: 65px;
+		margin: -7.5px;
+	}
+
 	#song-info {
 		display: flex;
 		flex-direction: column;