Minor styling tweaks

frontend/src/App.vue

@@ -556,9 +556,8 @@ button.delete:focus {
 }
 
 .verified-song {
-	font-size: 22px;
+	font-size: 17px;
 	color: var(--primary-color);
-	vertical-align: top;
 }
 
 .section-title,

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

@@ -12,7 +12,8 @@
 								song.thumbnail.lastIndexOf(
 									'/assets/notes.png'
 								) !== -1)) ||
-						song.thumbnail == ('empty' || null))
+						song.thumbnail === 'empty' ||
+						song.thumbnail == null)
 						? `https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`
 						: song.thumbnail
 				"

frontend/src/pages/Home.vue

@@ -76,6 +76,9 @@
 												) !== -1 ||
 													station.currentSong.thumbnail.lastIndexOf(
 														'/assets/notes.png'
+													) !== -1 ||
+													station.currentSong.thumbnail.lastIndexOf(
+														'i.ytimg.com'
 													) !== -1)) ||
 											station.currentSong.thumbnail ==
 												('empty' || null))
@@ -98,9 +101,14 @@
 												) !== -1 ||
 													station.currentSong.thumbnail.lastIndexOf(
 														'/assets/notes.png'
+													) !== -1 ||
+													station.currentSong.thumbnail.lastIndexOf(
+														'i.ytimg.com'
 													) !== -1)) ||
+											station.currentSong.thumbnail ===
+												'empty' ||
 											station.currentSong.thumbnail ==
-												('empty' || null))
+												null)
 								"
 								:src="
 									`https://img.youtube.com/vi/${station.currentSong.songId}/mqdefault.jpg`
@@ -322,8 +330,10 @@
 													station.currentSong.thumbnail.lastIndexOf(
 														'/assets/notes.png'
 													) !== -1)) ||
+											station.currentSong.thumbnail ===
+												'empty' ||
 											station.currentSong.thumbnail ==
-												('empty' || null))
+												null)
 								"
 								class="ytThumbnailBg"
 								:style="{

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

@@ -11,8 +11,12 @@
 								) !== -1 ||
 									song.thumbnail.lastIndexOf(
 										'/assets/notes.png'
+									) !== -1 ||
+									song.thumbnail.lastIndexOf(
+										'i.ytimg.com'
 									) !== -1)) ||
-							song.thumbnail == ('empty' || null))
+							song.thumbnail === 'empty' ||
+							song.thumbnail == null)
 				"
 				id="yt-thumbnail-bg"
 				:style="{
@@ -32,8 +36,12 @@
 								) !== -1 ||
 									song.thumbnail.lastIndexOf(
 										'/assets/notes.png'
+									) !== -1 ||
+									song.thumbnail.lastIndexOf(
+										'i.ytimg.com'
 									) !== -1)) ||
-							song.thumbnail == ('empty' || null))
+							song.thumbnail === 'empty' ||
+							song.thumbnail == null)
 				"
 				:src="`https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`"
 				onerror="this.src='/assets/notes-transparent.png'"
@@ -76,12 +84,23 @@
 							station.partyMode === true
 					"
 				>
-					Requested
-					<strong>{{
-						formatDistance(parseISO(song.requestedAt), Date.now(), {
-							addSuffix: true
-						})
-					}}</strong>
+					Requested by
+					<strong>
+						<user-id-to-username
+							:user-id="song.requestedBy"
+							:link="true"
+						/>
+						{{
+							formatDistance(
+								parseISO(song.requestedAt),
+								new Date(),
+								{
+									includeSeconds: true
+								}
+							)
+						}}
+						ago
+					</strong>
 				</p>
 			</div>
 			<div id="song-actions">
@@ -118,7 +137,10 @@
 import { mapState, mapActions } from "vuex";
 import { formatDistance, parseISO } from "date-fns";
 
+import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
+
 export default {
+	components: { UserIdToUsername },
 	props: {
 		song: {
 			type: Object,

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

@@ -12,7 +12,8 @@
 								song.thumbnail.lastIndexOf(
 									'/assets/notes.png'
 								) !== -1)) ||
-						song.thumbnail == ('empty' || null))
+						song.thumbnail === 'empty' ||
+						song.thumbnail == null)
 						? `https://img.youtube.com/vi/${song.songId}/mqdefault.jpg`
 						: song.thumbnail
 				"
@@ -60,10 +61,11 @@
 								parseISO(song.requestedAt),
 								new Date(),
 								{
-									addSuffix: true
+									includeSeconds: true
 								}
 							)
 						}}
+						ago
 					</strong>
 				</p>
 			</div>