Fixed add song to queue button & improved admin/songs tooltips and icons

frontend/src/components/ui/AddToPlaylistDropdown.vue

@@ -6,6 +6,16 @@
 		theme="addToPlaylist"
 		trigger="click"
 		append-to="parent"
+		@show="
+			() => {
+				$parent.showPlaylistDropdown = true;
+			}
+		"
+		@hide="
+			() => {
+				$parent.showPlaylistDropdown = false;
+			}
+		"
 	>
 		<template #trigger>
 			<slot name="button" />

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -89,14 +89,18 @@
 							<button
 								class="button is-primary"
 								@click="edit(song, index)"
+								content="Edit Song"
+								v-tippy
 							>
 								<i class="material-icons">edit</i>
 							</button>
 							<button
 								class="button is-success"
 								@click="unhide(song)"
+								content="Unhide Song"
+								v-tippy
 							>
-								<i class="material-icons">add</i>
+								<i class="material-icons">visibility</i>
 							</button>
 						</td>
 					</tr>

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -89,20 +89,26 @@
 							<button
 								class="button is-primary"
 								@click="edit(song, index)"
+								content="Edit Song"
+								v-tippy
 							>
 								<i class="material-icons">edit</i>
 							</button>
 							<button
 								class="button is-success"
 								@click="verify(song)"
+								content="Verify Song"
+								v-tippy
 							>
-								<i class="material-icons">add</i>
+								<i class="material-icons">check_circle</i>
 							</button>
 							<button
 								class="button is-danger"
 								@click="hide(song._id, index)"
+								content="Hide Song"
+								v-tippy
 							>
-								<i class="material-icons">cancel</i>
+								<i class="material-icons">visibility_off</i>
 							</button>
 						</td>
 					</tr>

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -118,12 +118,16 @@
 							<button
 								class="button is-primary"
 								@click="edit(song)"
+								content="Edit Song"
+								v-tippy
 							>
 								<i class="material-icons">edit</i>
 							</button>
 							<button
 								class="button is-danger"
 								@click="remove(song._id, index)"
+								content="Unverify Song"
+								v-tippy
 							>
 								<i class="material-icons">cancel</i>
 							</button>

frontend/src/pages/Station/index.vue

@@ -38,6 +38,7 @@
 			v-if="
 				currentSong &&
 					(currentSong.songId === 'l9PxOanFjxQ' ||
+						currentSong.songId === 'xKVcVSYmesU' ||
 						currentSong.songId === '60ItHLz5WEA')
 			"
 			class="bg-bubbles"
@@ -156,6 +157,8 @@
 										currentSong &&
 											(currentSong.songId ===
 												'l9PxOanFjxQ' ||
+												currentSong.songId ===
+													'xKVcVSYmesU' ||
 												currentSong.songId ===
 													'60ItHLz5WEA')
 									"
@@ -175,9 +178,7 @@
 								<div id="left-buttons">
 									<!-- Debug Box -->
 									<button
-										:v-if="
-											frontendDevMode === 'development'
-										"
+										v-if="frontendDevMode === 'development'"
 										class="button is-primary"
 										@click="togglePlayerDebugBox()"
 										@dblclick="resetPlayerDebugBox()"
@@ -334,19 +335,12 @@
 										<div
 											slot="button"
 											id="add-song-to-playlist"
-											v-click-outside="
-												() =>
-													(this.showPlaylistDropdown = false)
-											"
 											content="Add Song to Playlist"
 											v-tippy
 										>
 											<div class="control has-addons">
 												<button
 													class="button is-primary"
-													@click="
-														showPlaylistDropdown = !showPlaylistDropdown
-													"
 												>
 													<i class="material-icons"
 														>queue</i
@@ -355,9 +349,6 @@
 												<button
 													class="button"
 													id="dropdown-toggle"
-													@click="
-														showPlaylistDropdown = !showPlaylistDropdown
-													"
 												>
 													<i class="material-icons">
 														{{
@@ -690,7 +681,8 @@ export default {
 			volumeSliderValue: 0,
 			showPlaylistDropdown: false,
 			theme: "var(--primary-color)",
-			seekerbarPercentage: 0
+			seekerbarPercentage: 0,
+			frontendDevMode: "production"
 		};
 	},
 	computed: {
@@ -719,7 +711,7 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	mounted() {
+	async mounted() {
 		window.scrollTo(0, 0);
 
 		Date.currently = () => {
@@ -733,6 +725,8 @@ export default {
 		if (this.socket.readyState === 1) this.join();
 		ws.onConnect(() => this.join());
 
+		this.frontendDevMode = await lofig.get("mode");
+
 		this.socket.dispatch(
 			"stations.existsByName",
 			this.stationIdentifier,
@@ -1006,8 +1000,6 @@ export default {
 			localStorage.setItem("volume", volume);
 			this.volumeSliderValue = volume * 100;
 		}
-
-		this.frontendDevMode = lofig.get("mode");
 	},
 	beforeDestroy() {
 		document.body.style.cssText = "";