Added vue-tippy for tooltips, fixed song item overflow issues, general tooltip improvements, etc

frontend/package.json

@@ -53,6 +53,7 @@
     "vue-content-loader": "^0.2.3",
     "vue-loader": "^15.9.6",
     "vue-router": "^3.5.1",
+    "vue-tippy": "^4.10.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
     "webpack": "5.27.2",

frontend/src/App.vue

@@ -239,6 +239,10 @@ export default {
 	.content {
 		background-color: var(--dark-grey-3) !important;
 	}
+
+	.tippy-tooltip.songActions-theme {
+		background-color: var(--dark-grey);
+	}
 }
 
 body.night-mode {
@@ -336,95 +340,181 @@ a {
 	z-index: 10000000;
 }
 
-.tooltip {
-	position: relative;
+.tippy-tooltip.dark-theme {
+	font-size: 14px;
+	padding: 5px 10px;
+}
 
-	&:after {
-		position: absolute;
-		min-width: 80px;
-		margin-left: -75%;
-		text-align: center;
-		padding: 7.5px 6px;
-		border-radius: 2px;
-		background-color: var(--dark-grey);
-		font-size: 14px;
-		line-height: 24px;
-		text-transform: none;
-		color: var(--white);
-		content: attr(data-tooltip);
-		opacity: 0;
-		transition: all 0.2s ease-in-out 0.1s;
-		visibility: hidden;
-		z-index: 5;
-	}
+.tippy-tooltip.songActions-theme {
+	font-size: 14px;
+	padding: 5px 10px;
+	border: 1px solid var(--light-grey-3);
+	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	background-color: white;
 
-	&:hover:after,
-	&:focus:after {
-		opacity: 1;
-		visibility: visible;
+	.button {
+		width: 146px;
 	}
-}
 
-.tooltip-top {
-	&:after {
-		bottom: 150%;
+	.queue-actions,
+	.addToPlaylistDropdown {
+		display: inline-block;
 	}
 
-	&:hover {
-		&:after {
-			bottom: 120%;
+	i,
+	a {
+		display: inline-block;
+		cursor: pointer;
+		color: var(--dark-grey);
+		vertical-align: middle;
+
+		&:hover,
+		&:focus {
+			filter: brightness(90%);
+		}
+
+		&:not(:first-of-type) {
+			margin-left: 5px;
 		}
 	}
-}
 
-.tooltip-bottom {
-	&:after {
-		top: 155%;
+	.play-icon {
+		color: var(--green);
 	}
 
-	&:hover {
-		&:after {
-			top: 125%;
-		}
+	.edit-icon,
+	.view-icon,
+	.add-to-playlist-icon {
+		color: var(--primary-color);
 	}
-}
 
-.tooltip-left {
-	&:after {
-		bottom: -10px;
-		right: 130%;
-		min-width: 100px;
+	.hide-icon {
+		color: var(--light-grey-3);
+	}
+
+	.stop-icon,
+	.delete-icon {
+		color: var(--red);
 	}
 
-	&:hover {
-		&:after {
-			right: 110%;
+	.report-icon {
+		color: var(--yellow);
+	}
+}
+.tippy-popper[x-placement^="top"] .tippy-tooltip {
+	&.songActions-theme,
+	&.addToPlaylist-theme {
+		.tippy-arrow {
+			border-top-color: var(--light-grey-3);
 		}
 	}
 }
-
-.tooltip-right {
-	&:after {
-		bottom: -10px;
-		left: 190%;
-		min-width: 100px;
+.tippy-popper[x-placement^="bottom"] .tippy-tooltip {
+	&.songActions-theme,
+	&.addToPlaylist-theme {
+		.tippy-arrow {
+			border-bottom-color: var(--light-grey-3);
+		}
 	}
-
-	&:hover {
-		&:after {
-			left: 200%;
+}
+.tippy-popper[x-placement^="left"] .tippy-tooltip {
+	&.songActions-theme,
+	&.addToPlaylist-theme {
+		.tippy-arrow {
+			border-left-color: var(--light-grey-3);
 		}
 	}
 }
-
-.tooltip-center {
-	&:after {
-		margin-left: 0;
+.tippy-popper[x-placement^="right"] .tippy-tooltip {
+	&.songActions-theme,
+	&.addToPlaylist-theme {
+		.tippy-arrow {
+			border-right-color: var(--light-grey-3);
+		}
 	}
+}
+
+.tippy-tooltip.addToPlaylist-theme {
+	font-size: 14px;
+	padding: 5px;
+	border: 1px solid var(--light-grey-3);
+	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	background-color: white;
+	color: var(--dark-grey);
+
+	.nav-dropdown-items {
+		.nav-item {
+			width: 100%;
+			justify-content: flex-start;
+			border: 0;
+			padding: 10px;
+			font-size: 15.5px;
+			height: 36px;
+			background: var(--light-grey);
+			border-radius: 5px;
+			cursor: pointer;
+
+			.checkbox-control {
+				display: flex;
+				align-items: center;
+				margin-bottom: 0 !important;
+				width: inherit;
+
+				input {
+					margin-right: 5px;
+				}
+
+				input[type="checkbox"] {
+					opacity: 0;
+					position: absolute;
+				}
+
+				label {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					width: inherit;
+
+					span {
+						cursor: pointer;
+						min-width: 24px;
+						height: 24px;
+						background-color: var(--white);
+						display: inline-block;
+						border: 1px solid var(--dark-grey-2);
+						position: relative;
+						border-radius: 3px;
+					}
+
+					p {
+						margin-left: 10px;
+						cursor: pointer;
+						color: var(--black);
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+				}
+
+				input[type="checkbox"]:checked + label span::after {
+					content: "";
+					width: 18px;
+					height: 18px;
+					left: 2px;
+					top: 2px;
+					border-radius: 3px;
+					background-color: var(--primary-color);
+					position: absolute;
+				}
+			}
+
+			&:focus {
+				outline-color: var(--light-grey-3);
+			}
 
-	&:hover {
-		&:after {
-			margin-left: 0;
+			&:not(:last-of-type) {
+				margin-bottom: 5px;
+			}
 		}
 	}
 }
@@ -634,6 +724,10 @@ h4.section-title {
 			flex-wrap: wrap;
 		}
 
+		.queue-actions {
+			display: flex;
+		}
+
 		.button {
 			width: 146px;
 		}
@@ -694,4 +788,13 @@ h4.section-title {
 	transform: translateX(20px);
 	opacity: 0;
 }
+
+.youtube-icon {
+	margin-right: 3px;
+	height: 20px;
+	width: 20px;
+	-webkit-mask: url("/assets/social/youtube.svg") no-repeat center;
+	mask: url("/assets/social/youtube.svg") no-repeat center;
+	background-color: var(--youtube);
+}
 </style>

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

@@ -25,7 +25,8 @@
 					<i
 						v-if="song.status === 'verified'"
 						class="material-icons verified-song"
-						title="Verified Song"
+						content="Verified Song"
+						v-tippy
 					>
 						check_circle
 					</i>
@@ -43,21 +44,59 @@
 			</div>
 		</div>
 		<div class="universal-item-actions">
-			<slot name="actions" />
-			<i
-				class="material-icons add-to-playlist-icon"
-				v-if="loggedIn"
-				@click="showPlaylistDropdown = !showPlaylistDropdown"
+			<tippy
+				interactive="true"
+				placement="left"
+				theme="songActions"
+				trigger="click"
 			>
-				queue
-			</i>
+				<template #trigger>
+					<i class="material-icons">more_horiz</i>
+				</template>
+				<a
+					target="_blank"
+					:href="`https://www.youtube.com/watch?v=${song.songId}`"
+					content="View on Youtube"
+					v-tippy
+				>
+					<div class="youtube-icon"></div>
+				</a>
+				<i
+					v-if="loggedIn"
+					class="material-icons report-icon"
+					@click="reportSongInPlaylist(song)"
+					content="Report Song"
+					v-tippy
+				>
+					flag
+				</i>
+				<add-to-playlist-dropdown v-if="loggedIn" :song="song">
+					<i
+						slot="button"
+						class="material-icons add-to-playlist-icon"
+						content="Add Song to Playlist"
+						v-tippy
+						>queue</i
+					>
+				</add-to-playlist-dropdown>
+				<i
+					v-if="userRole === 'admin'"
+					class="material-icons edit-icon"
+					@click="editSongInPlaylist(song)"
+					content="Edit Song"
+					v-tippy
+				>
+					edit
+				</i>
+				<slot name="remove" />
+				<slot name="actions" />
+			</tippy>
 		</div>
-		<add-to-playlist-dropdown v-if="showPlaylistDropdown" :song="song" />
 	</div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 import AddToPlaylistDropdown from "../../../ui/AddToPlaylistDropdown.vue";
 
@@ -69,14 +108,23 @@ export default {
 			default: () => {}
 		}
 	},
-	data() {
-		return {
-			showPlaylistDropdown: false
-		};
-	},
 	computed: mapState({
-		loggedIn: state => state.user.auth.loggedIn
-	})
+		loggedIn: state => state.user.auth.loggedIn,
+		userRole: state => state.user.auth.role
+	}),
+	methods: {
+		editSongInPlaylist(song) {
+			this.editSong(song);
+			this.openModal({ sector: "admin", modal: "editSong" });
+		},
+		reportSongInPlaylist(song) {
+			this.reportSong(song);
+			this.openModal({ sector: "station", modal: "report" });
+		},
+		...mapActions("modals/editSong", ["editSong"]),
+		...mapActions("modals/report", ["reportSong"]),
+		...mapActions("modalVisibility", ["openModal"])
+	}
 };
 </script>
 
@@ -124,7 +172,7 @@ export default {
 	}
 
 	#thumbnail-and-info {
-		width: calc(100% - 120px);
+		width: calc(100% - 50px);
 	}
 
 	#song-info {
@@ -132,7 +180,7 @@ export default {
 		flex-direction: column;
 		justify-content: center;
 		margin-left: 20px;
-		width: calc(100% - 65px);
+		width: calc(100% - 50px);
 
 		.item-title {
 			font-size: 16px;

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

@@ -249,73 +249,48 @@
 											'item-draggable': isEditable()
 										}"
 									>
-										<div slot="actions">
+										<div
+											v-if="isEditable()"
+											class="queue-actions"
+											slot="actions"
+										>
 											<i
 												class="material-icons"
-												v-if="isEditable() && index > 0"
+												v-if="index > 0"
 												@click="moveSongToTop(index)"
+												content="Move to top of Queue"
+												v-tippy
 												>vertical_align_top</i
 											>
-											<i
-												v-else
-												class="material-icons"
-												style="opacity: 0"
-												>error</i
-											>
-
 											<i
 												v-if="
-													isEditable() &&
-														playlist.songs.length -
-															1 !==
-															index
+													playlist.songs.length -
+														1 !==
+														index
 												"
 												@click="moveSongToBottom(index)"
 												class="material-icons"
+												content="Move to bottom of Queue"
+												v-tippy
 												>vertical_align_bottom</i
 											>
-											<i
-												v-else
-												class="material-icons"
-												style="opacity: 0"
-												>error</i
-											>
-
-											<i
-												v-if="userRole === 'admin'"
-												class="material-icons report-icon"
-												@click="
-													reportSongInPlaylist(song)
-												"
-											>
-												flag
-											</i>
-
-											<i
-												v-if="userRole === 'admin'"
-												class="material-icons edit-icon"
-												@click="
-													editSongInPlaylist(song)
-												"
-											>
-												edit
-											</i>
-
-											<i
-												v-if="
-													userId ===
-														playlist.createdBy ||
-														isEditable()
-												"
-												@click="
-													removeSongFromPlaylist(
-														song.songId
-													)
-												"
-												class="material-icons delete-icon"
-												>delete</i
-											>
 										</div>
+										<i
+											slot="remove"
+											v-if="
+												userId === playlist.createdBy ||
+													isEditable()
+											"
+											@click="
+												removeSongFromPlaylist(
+													song.songId
+												)
+											"
+											class="material-icons delete-icon"
+											content="Remove Song from Playlist"
+											v-tippy
+											>delete</i
+										>
 									</playlist-song-item>
 								</li>
 							</transition-group>
@@ -487,14 +462,6 @@ export default {
 		});
 	},
 	methods: {
-		editSongInPlaylist(song) {
-			this.$parent.editingSongId = song._id;
-			this.openModal({ sector: "admin", modal: "editSong" });
-		},
-		reportSongInPlaylist(song) {
-			this.reportSong(song);
-			this.openModal({ sector: "station", modal: "report" });
-		},
 		importPlaylist() {
 			let isImportingPlaylist = true;
 
@@ -722,7 +689,6 @@ export default {
 				);
 			}
 		},
-		...mapActions("modals/report", ["reportSong"]),
 		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };

frontend/src/components/modals/EditSong.vue

@@ -614,139 +614,151 @@ export default {
 
 		this.useHTTPS = await lofig.get("cookie.secure");
 
-		this.socket.dispatch(`songs.getSongFromMusareId`, this.songId, res => {
-			if (res.status === "success") {
-				const { song } = res.data;
-				// this.song = { ...song };
-				// if (this.song.discogs === undefined)
-				// 	this.song.discogs = null;
-				this.editSong(song);
-
-				this.songDataLoaded = true;
-
-				// this.edit(res.data.song);
-
-				this.discogsQuery = this.song.title;
-
-				this.interval = setInterval(() => {
-					if (
-						this.song.duration !== -1 &&
-						this.video.paused === false &&
-						this.playerReady &&
-						this.video.player.getCurrentTime() -
-							this.song.skipDuration >
-							this.song.duration
-					) {
-						this.video.paused = false;
-						this.video.player.stopVideo();
-						this.drawCanvas();
-					}
-					if (this.playerReady) {
-						this.youtubeVideoCurrentTime = this.video.player
-							.getCurrentTime()
-							.toFixed(3);
-					}
-
-					if (this.video.paused === false) this.drawCanvas();
-				}, 200);
-
-				this.video.player = new window.YT.Player("editSongPlayer", {
-					height: 298,
-					width: 530,
-					videoId: this.song.songId,
-					host: "https://www.youtube-nocookie.com",
-					playerVars: {
-						controls: 0,
-						iv_load_policy: 3,
-						rel: 0,
-						showinfo: 0,
-						autoplay: 1
-					},
-					startSeconds: this.song.skipDuration,
-					events: {
-						onReady: () => {
-							let volume = parseInt(
-								localStorage.getItem("volume")
-							);
-							volume = typeof volume === "number" ? volume : 20;
-							console.log(`Seekto: ${this.song.skipDuration}`);
-							this.video.player.seekTo(this.song.skipDuration);
-							this.video.player.setVolume(volume);
-							if (volume > 0) this.video.player.unMute();
-							this.youtubeVideoDuration = this.video.player
-								.getDuration()
+		this.socket.dispatch(
+			`songs.getSongFromMusareId`,
+			this.song._id,
+			res => {
+				if (res.status === "success") {
+					const { song } = res.data;
+					// this.song = { ...song };
+					// if (this.song.discogs === undefined)
+					// 	this.song.discogs = null;
+					this.editSong(song);
+
+					this.songDataLoaded = true;
+
+					// this.edit(res.data.song);
+
+					this.discogsQuery = this.song.title;
+
+					this.interval = setInterval(() => {
+						if (
+							this.song.duration !== -1 &&
+							this.video.paused === false &&
+							this.playerReady &&
+							this.video.player.getCurrentTime() -
+								this.song.skipDuration >
+								this.song.duration
+						) {
+							this.video.paused = false;
+							this.video.player.stopVideo();
+							this.drawCanvas();
+						}
+						if (this.playerReady) {
+							this.youtubeVideoCurrentTime = this.video.player
+								.getCurrentTime()
 								.toFixed(3);
-							this.youtubeVideoNote = "(~)";
-							this.playerReady = true;
+						}
 
-							this.drawCanvas();
+						if (this.video.paused === false) this.drawCanvas();
+					}, 200);
+
+					this.video.player = new window.YT.Player("editSongPlayer", {
+						height: 298,
+						width: 530,
+						videoId: this.song.songId,
+						host: "https://www.youtube-nocookie.com",
+						playerVars: {
+							controls: 0,
+							iv_load_policy: 3,
+							rel: 0,
+							showinfo: 0,
+							autoplay: 1
 						},
-						onStateChange: event => {
-							this.drawCanvas();
-
-							if (event.data === 1) {
-								if (!this.video.autoPlayed) {
-									this.video.autoPlayed = true;
-									return this.video.player.stopVideo();
-								}
-
-								this.video.paused = false;
-								let youtubeDuration = this.video.player.getDuration();
-								this.youtubeVideoDuration = youtubeDuration.toFixed(
-									3
+						startSeconds: this.song.skipDuration,
+						events: {
+							onReady: () => {
+								let volume = parseInt(
+									localStorage.getItem("volume")
 								);
-								this.youtubeVideoNote = "";
-
-								if (this.song.duration === -1)
-									this.song.duration = youtubeDuration;
-
-								youtubeDuration -= this.song.skipDuration;
-								if (this.song.duration > youtubeDuration + 1) {
-									this.video.player.stopVideo();
-									this.video.paused = true;
-									return new Toast({
-										content:
-											"Video can't play. Specified duration is bigger than the YouTube song duration.",
-										timeout: 4000
-									});
-								}
-								if (this.song.duration <= 0) {
-									this.video.player.stopVideo();
-									this.video.paused = true;
-									return new Toast({
-										content:
-											"Video can't play. Specified duration has to be more than 0 seconds.",
-										timeout: 4000
-									});
-								}
-
-								if (
-									this.video.player.getCurrentTime() <
+								volume =
+									typeof volume === "number" ? volume : 20;
+								console.log(
+									`Seekto: ${this.song.skipDuration}`
+								);
+								this.video.player.seekTo(
 									this.song.skipDuration
-								) {
-									return this.video.player.seekTo(
-										this.song.skipDuration
+								);
+								this.video.player.setVolume(volume);
+								if (volume > 0) this.video.player.unMute();
+								this.youtubeVideoDuration = this.video.player
+									.getDuration()
+									.toFixed(3);
+								this.youtubeVideoNote = "(~)";
+								this.playerReady = true;
+
+								this.drawCanvas();
+							},
+							onStateChange: event => {
+								this.drawCanvas();
+
+								if (event.data === 1) {
+									if (!this.video.autoPlayed) {
+										this.video.autoPlayed = true;
+										return this.video.player.stopVideo();
+									}
+
+									this.video.paused = false;
+									let youtubeDuration = this.video.player.getDuration();
+									this.youtubeVideoDuration = youtubeDuration.toFixed(
+										3
 									);
+									this.youtubeVideoNote = "";
+
+									if (this.song.duration === -1)
+										this.song.duration = youtubeDuration;
+
+									youtubeDuration -= this.song.skipDuration;
+									if (
+										this.song.duration >
+										youtubeDuration + 1
+									) {
+										this.video.player.stopVideo();
+										this.video.paused = true;
+										return new Toast({
+											content:
+												"Video can't play. Specified duration is bigger than the YouTube song duration.",
+											timeout: 4000
+										});
+									}
+									if (this.song.duration <= 0) {
+										this.video.player.stopVideo();
+										this.video.paused = true;
+										return new Toast({
+											content:
+												"Video can't play. Specified duration has to be more than 0 seconds.",
+											timeout: 4000
+										});
+									}
+
+									if (
+										this.video.player.getCurrentTime() <
+										this.song.skipDuration
+									) {
+										return this.video.player.seekTo(
+											this.song.skipDuration
+										);
+									}
+								} else if (event.data === 2) {
+									this.video.paused = true;
 								}
-							} else if (event.data === 2) {
-								this.video.paused = true;
-							}
 
-							return false;
+								return false;
+							}
 						}
-					}
-				});
-			} else {
-				new Toast({
-					content: "Song with that ID not found",
-					timeout: 3000
-				});
-				this.closeModal({
-					sector: this.sector,
-					modal: "editSong"
-				});
+					});
+				} else {
+					new Toast({
+						content: "Song with that ID not found",
+						timeout: 3000
+					});
+					this.closeModal({
+						sector: this.sector,
+						modal: "editSong"
+					});
+				}
 			}
-		});
+		);
 
 		let volume = parseFloat(localStorage.getItem("volume"));
 		volume =

frontend/src/components/modals/ViewReport.vue

@@ -24,7 +24,7 @@
 					/>
 					<br />
 					<strong>Time of report:</strong>
-					<span :title="report.createdAt">
+					<span :content="report.createdAt" v-tippy>
 						{{
 							formatDistance(
 								new Date(report.createdAt),

frontend/src/components/ui/AddToPlaylistDropdown.vue

@@ -1,18 +1,15 @@
 <template>
-	<div id="nav-dropdown">
-		<div
-			class="nav-dropdown-items"
-			v-if="playlists.length > 0"
-			v-click-outside="() => (this.$parent.showPlaylistDropdown = false)"
-		>
-			<!-- <a class="nav-item" id="nightmode-toggle">
-				<span>Nightmode</span>
-				<label class="switch">
-					<input type="checkbox" checked />
-					<span class="slider round"></span>
-				</label>
-			</a> -->
-
+	<tippy
+		class="addToPlaylistDropdown"
+		interactive="true"
+		:placement="placement"
+		theme="addToPlaylist"
+		trigger="click"
+	>
+		<template #trigger>
+			<slot name="button" />
+		</template>
+		<div class="nav-dropdown-items" v-if="playlists.length > 0">
 			<button
 				class="nav-item"
 				href="#"
@@ -34,10 +31,8 @@
 				</p>
 			</button>
 		</div>
-		<p class="nav-dropdown-items" id="no-playlists" v-else>
-			You haven't created any playlists.
-		</p>
-	</div>
+		<p v-else>You haven't created any playlists.</p>
+	</tippy>
 </template>
 
 <script>
@@ -49,6 +44,10 @@ export default {
 		song: {
 			type: Object,
 			default: () => {}
+		},
+		placement: {
+			type: String,
+			default: "left"
 		}
 	},
 	data() {
@@ -172,157 +171,4 @@ export default {
 		}
 	}
 }
-
-#nav-dropdown {
-	z-index: 1;
-}
-
-#nav-dropdown-triangle {
-	border-style: solid;
-	border-width: 15px 15px 0 15px;
-	border-color: var(--dark-grey-2) transparent transparent transparent;
-}
-
-.nav-dropdown-items {
-	border: 1px solid var(--light-grey-3);
-	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-	background-color: var(--white);
-	padding: 5px;
-	border-radius: 5px;
-	z-index: 1;
-
-	.nav-item {
-		width: 100%;
-		justify-content: flex-start;
-		border: 0;
-		padding: 10px;
-		font-size: 15.5px;
-		height: 36px;
-		background: var(--light-grey);
-		border-radius: 5px;
-		cursor: pointer;
-
-		.checkbox-control {
-			display: flex;
-			align-items: center;
-			margin-bottom: 0 !important;
-			width: inherit;
-
-			input {
-				margin-right: 5px;
-			}
-
-			input[type="checkbox"] {
-				opacity: 0;
-				position: absolute;
-			}
-
-			label {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				width: inherit;
-
-				span {
-					cursor: pointer;
-					min-width: 24px;
-					height: 24px;
-					background-color: var(--white);
-					display: inline-block;
-					border: 1px solid var(--dark-grey-2);
-					position: relative;
-					border-radius: 3px;
-				}
-
-				p {
-					margin-left: 10px;
-					cursor: pointer;
-					color: var(--black);
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-
-			input[type="checkbox"]:checked + label span::after {
-				content: "";
-				width: 18px;
-				height: 18px;
-				left: 2px;
-				top: 2px;
-				border-radius: 3px;
-				background-color: var(--primary-color);
-				position: absolute;
-			}
-		}
-
-		&:focus {
-			outline-color: var(--light-grey-3);
-		}
-
-		&:not(:last-of-type) {
-			margin-bottom: 5px;
-		}
-	}
-}
-
-#nightmode-toggle {
-	display: flex;
-	justify-content: space-evenly;
-}
-
-/*  CSS - Toggle Switch */
-
-.switch {
-	position: relative;
-	display: inline-block;
-	width: 50px;
-	height: 24px;
-
-	input {
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-}
-
-.slider {
-	position: absolute;
-	cursor: pointer;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: var(--light-grey-3);
-	transition: 0.4s;
-	border-radius: 34px;
-
-	&:before {
-		position: absolute;
-		content: "";
-		height: 16px;
-		width: 16px;
-		left: 4px;
-		bottom: 4px;
-		background-color: var(--white);
-		transition: 0.4s;
-		border-radius: 50%;
-	}
-}
-
-input:checked + .slider {
-	background-color: var(--primary-color);
-}
-
-input:focus + .slider {
-	box-shadow: 0 0 1px var(--primary-color);
-}
-
-input:checked + .slider:before {
-	transform: translateX(26px);
-}
-
-#no-playlists {
-	padding: 10px;
-}
 </style>

frontend/src/main.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 
+import VueTippy, { TippyComponent } from "vue-tippy";
 import VueRouter from "vue-router";
 import store from "./store";
 
@@ -12,6 +13,24 @@ const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;
 };
 
+Vue.use(VueTippy, {
+	directive: "tippy", // => v-tippy
+	flipDuration: 0,
+	popperOptions: {
+		modifiers: {
+			preventOverflow: {
+				enabled: true
+			}
+		}
+	},
+	allowHTML: true,
+	animation: "scale",
+	theme: "dark",
+	arrow: true
+});
+
+Vue.component("Tippy", TippyComponent);
+
 Vue.component("Metadata", {
 	watch: {
 		$attrs: {

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

@@ -28,7 +28,7 @@
 							/>
 						</td>
 						<td>
-							<span :title="report.createdAt">{{
+							<span :content="report.createdAt" v-tippy>{{
 								formatDistance(
 									new Date(report.createdAt),
 									new Date(),

frontend/src/pages/Home.vue

@@ -129,19 +129,24 @@
 									v-if="loggedIn && !station.isFavorited"
 									@click.prevent="favoriteStation(station)"
 									class="favorite material-icons"
+									content="Favorite Station"
+									v-tippy
 									>star_border</i
 								>
 								<i
 									v-if="loggedIn && station.isFavorited"
 									@click.prevent="unfavoriteStation(station)"
 									class="favorite material-icons"
+									content="Unfavorite Station"
+									v-tippy
 									>star</i
 								>
 								<h5>{{ station.displayName }}</h5>
 								<i
 									v-if="station.type === 'official'"
 									class="material-icons verified-station"
-									title="Verified station"
+									content="Verified Station"
+									v-tippy
 								>
 									check_circle
 								</i>
@@ -174,19 +179,22 @@
 											isOwner(station)
 									"
 									class="homeIcon material-icons"
-									title="This is your station."
+									content="This is your station."
+									v-tippy
 									>home</i
 								>
 								<i
 									v-if="station.privacy === 'private'"
 									class="privateIcon material-icons"
-									title="This station is not visible to other users."
+									content="This station is not visible to other users."
+									v-tippy
 									>lock</i
 								>
 								<i
 									v-if="station.privacy === 'unlisted'"
 									class="unlistedIcon material-icons"
-									title="Unlisted Station"
+									content="Unlisted Station"
+									v-tippy
 									>link</i
 								>
 							</div>
@@ -196,7 +204,8 @@
 						<i
 							v-if="station.paused && station.currentSong.title"
 							class="material-icons"
-							title="Station Paused"
+							content="Station Paused"
+							v-tippy
 							>pause</i
 						>
 						<i
@@ -228,11 +237,12 @@
 						<span v-else class="songTitle">No Songs Playing</span>
 						<i
 							class="material-icons stationMode"
-							:title="
+							:content="
 								station.partyMode
 									? 'Station in Party mode'
 									: 'Station in Playlist mode'
 							"
+							v-tippy
 							>{{
 								station.partyMode
 									? "emoji_people"
@@ -376,19 +386,24 @@
 									v-if="loggedIn && !station.isFavorited"
 									@click.prevent="favoriteStation(station)"
 									class="favorite material-icons"
+									content="Favorite Station"
+									v-tippy
 									>star_border</i
 								>
 								<i
 									v-if="loggedIn && station.isFavorited"
 									@click.prevent="unfavoriteStation(station)"
 									class="favorite material-icons"
+									content="Unfavorite Station"
+									v-tippy
 									>star</i
 								>
 								<h5>{{ station.displayName }}</h5>
 								<i
 									v-if="station.type === 'official'"
 									class="material-icons verified-station"
-									title="Verified station"
+									content="Verified Station"
+									v-tippy
 								>
 									check_circle
 								</i>
@@ -421,19 +436,22 @@
 											isOwner(station)
 									"
 									class="homeIcon material-icons"
-									title="This is your station."
+									content="This is your station."
+									v-tippy
 									>home</i
 								>
 								<i
 									v-if="station.privacy === 'private'"
 									class="privateIcon material-icons"
-									title="This station is not visible to other users."
+									content="This station is not visible to other users."
+									v-tippy
 									>lock</i
 								>
 								<i
 									v-if="station.privacy === 'unlisted'"
 									class="unlistedIcon material-icons"
-									title="Unlisted Station"
+									content="Unlisted Station"
+									v-tippy
 									>link</i
 								>
 							</div>
@@ -443,7 +461,8 @@
 						<i
 							v-if="station.paused && station.currentSong.title"
 							class="material-icons"
-							title="Station Paused"
+							content="Station Paused"
+							v-tippy
 							>pause</i
 						>
 						<i
@@ -475,11 +494,12 @@
 						<span v-else class="songTitle">No Songs Playing</span>
 						<i
 							class="material-icons stationMode"
-							:title="
+							:content="
 								station.partyMode
 									? 'Station in Party mode'
 									: 'Station in Playlist mode'
 							"
+							v-tippy
 							>{{
 								station.partyMode
 									? "emoji_people"

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

@@ -65,7 +65,8 @@
 					<i
 						v-if="song.status === 'verified'"
 						class="material-icons verified-song"
-						title="Verified Song"
+						content="Verified Song"
+						v-tippy
 					>
 						check_circle
 					</i>

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -41,6 +41,8 @@
 						<i
 							@click="edit(playlist._id)"
 							class="material-icons edit-icon"
+							content="Edit Playlist"
+							v-tippy
 							>edit</i
 						>
 					</div>

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

@@ -31,7 +31,8 @@
 					<i
 						v-if="song.status === 'verified'"
 						class="material-icons verified-song"
-						title="Verified Song"
+						content="Verified Song"
+						v-tippy
 					>
 						check_circle
 					</i>
@@ -70,38 +71,69 @@
 				</p>
 			</div>
 		</div>
-		<add-to-playlist-dropdown v-if="showPlaylistDropdown" :song="song" />
 
 		<div id="duration-and-actions">
 			<p id="song-duration">
 				{{ utils.formatTime(song.duration) }}
 			</p>
 			<div class="universal-item-actions">
-				<i
-					v-if="$parent.loggedIn"
-					class="material-icons report-icon"
-					@click="report(song)"
+				<tippy
+					interactive="true"
+					placement="left"
+					theme="songActions"
+					trigger="click"
 				>
-					flag
-				</i>
-				<i
-					class="material-icons add-to-playlist-icon"
-					@click="showPlaylistDropdown = !showPlaylistDropdown"
-					>queue</i
-				>
-				<i
-					v-if="$parent.isAdminOnly()"
-					class="material-icons edit-icon"
+					<template #trigger>
+						<i class="material-icons">more_horiz</i>
+					</template>
+					<a
+						target="_blank"
+						:href="`https://www.youtube.com/watch?v=${song.songId}`"
+						content="View on Youtube"
+						v-tippy
+					>
+						<div class="youtube-icon"></div>
+					</a>
+					<i
+						v-if="$parent.loggedIn"
+						class="material-icons report-icon"
+						@click="report(song)"
+						content="Report Song"
+						v-tippy
+					>
+						flag
+					</i>
+					<add-to-playlist-dropdown
+						v-if="$parent.loggedIn"
+						:song="song"
+					>
+						<i
+							slot="button"
+							class="material-icons add-to-playlist-icon"
+							content="Add Song to Playlist"
+							v-tippy
+							>queue</i
+						>
+					</add-to-playlist-dropdown>
+					<i
+						v-if="$parent.isAdminOnly()"
+						class="material-icons edit-icon"
 						@click="edit(song)"
-				>
-					edit
-				</i>
-				<i
-					v-if="$parent.isOwnerOnly() || $parent.isAdminOnly()"
-					class="material-icons delete-icon"
-					@click="$parent.removeFromQueue(song.songId)"
-					>delete_forever</i
-				>
+						content="Edit Song"
+						v-tippy
+					>
+						edit
+					</i>
+					<i
+						v-if="$parent.isOwnerOnly() || $parent.isAdminOnly()"
+						class="material-icons delete-icon"
+						@click="$parent.removeFromQueue(song.songId)"
+						content="Remove Song from Queue"
+						v-tippy
+						>delete_forever</i
+					>
+					<slot name="actions" />
+				</tippy>
 			</div>
 		</div>
 	</div>
@@ -131,8 +163,7 @@ export default {
 	},
 	data() {
 		return {
-			utils,
-			showPlaylistDropdown: false
+			utils
 		};
 	},
 	methods: {
@@ -190,7 +221,7 @@ export default {
 	}
 
 	#thumbnail-and-info {
-		width: calc(100% - 110px);
+		width: calc(100% - 90px);
 	}
 
 	#song-info {
@@ -198,7 +229,7 @@ export default {
 		flex-direction: column;
 		justify-content: center;
 		margin-left: 20px;
-		width: calc(100% - 65px);
+		width: calc(100% - 80px);
 
 		*:not(i) {
 			margin: 0;

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

@@ -15,7 +15,30 @@
 					type: station.type,
 					partyMode: station.partyMode
 				}"
-			/>
+			>
+				<div
+					v-if="isAdminOnly() || isOwnerOnly()"
+					class="queue-actions"
+					slot="actions"
+				>
+					<i
+						class="material-icons"
+						v-if="index > 0"
+						@click="moveSongToTop(index)"
+						content="Move to top of Queue"
+						v-tippy
+						>vertical_align_top</i
+					>
+					<i
+						v-if="songsList.length - 1 !== index"
+						@click="moveSongToBottom(index)"
+						class="material-icons"
+						content="Move to bottom of Queue"
+						v-tippy
+						>vertical_align_bottom</i
+					>
+				</div>
+			</queue-item>
 			<p class="nothing-here-text" v-if="songsList.length < 1">
 				There are no songs currently queued
 			</p>
@@ -44,7 +67,7 @@
 			<span class="optional-desktop-only-text"> Add Song To Queue </span>
 		</button>
 		<button
-			class="button is-primary tab-actionable-button tooltip tooltip-top tooltip-center disabled"
+			class="button is-primary tab-actionable-button disabled"
 			v-if="
 				!loggedIn &&
 					((station.type === 'community' &&
@@ -52,7 +75,8 @@
 						!station.locked) ||
 						station.type === 'official')
 			"
-			data-tooltip="Login to add songs to queue"
+			content="Login to add songs to queue"
+			v-tippy
 		>
 			<i class="material-icons icon-with-button">queue</i>
 			<span class="optional-desktop-only-text"> Add Song To Queue </span>

frontend/src/pages/Station/components/Sidebar/index.vue

@@ -25,8 +25,9 @@
 			</button>
 			<button
 				v-else
-				class="button is-default tooltip tooltip-top tooltip-center"
-				data-tooltip="Login to manage playlists"
+				class="button is-default"
+				content="Login to manage playlists"
+				v-tippy
 			>
 				My Playlists
 			</button>

frontend/src/pages/Station/index.vue

@@ -77,9 +77,14 @@
 								<div id="left-buttons">
 									<!-- Debug Box -->
 									<button
+										:v-if="
+											frontendDevMode === 'development'
+										"
 										class="button is-primary"
 										@click="togglePlayerDebugBox()"
 										@dblclick="resetPlayerDebugBox()"
+										content="Debug"
+										v-tippy
 									>
 										<i
 											class="material-icons icon-with-button"
@@ -94,6 +99,8 @@
 										@click="resumeLocalStation()"
 										id="local-resume"
 										v-if="localPaused"
+										content="Unpause Playback"
+										v-tippy
 									>
 										<i class="material-icons">play_arrow</i>
 									</button>
@@ -102,6 +109,8 @@
 										@click="pauseLocalStation()"
 										id="local-pause"
 										v-else
+										content="Pause Playback"
+										v-tippy
 									>
 										<i class="material-icons">pause</i>
 									</button>
@@ -111,6 +120,8 @@
 										v-if="loggedIn"
 										class="button is-primary"
 										@click="voteSkipStation()"
+										content="Vote to Skip Song"
+										v-tippy
 									>
 										<i
 											class="material-icons icon-with-button"
@@ -120,8 +131,9 @@
 									</button>
 									<button
 										v-else
-										class="button is-primary tooltip tooltip-top disabled"
-										data-tooltip="Login to vote to skip songs"
+										class="button is-primary disabled"
+										content="Login to vote to skip songs"
+										v-tippy
 									>
 										<i
 											class="material-icons icon-with-button"
@@ -145,12 +157,16 @@
 										v-if="muted"
 										class="material-icons"
 										@click="toggleMute()"
+										content="Unmute"
+										v-tippy
 										>volume_mute</i
 									>
 									<i
 										v-else
 										class="material-icons"
 										@click="toggleMute()"
+										content="Mute"
+										v-tippy
 										>volume_down</i
 									>
 									<input
@@ -165,6 +181,8 @@
 									<i
 										class="material-icons"
 										@click="increaseVolume()"
+										content="Increase Volume"
+										v-tippy
 										>volume_up</i
 									>
 								</p>
@@ -182,6 +200,8 @@
 											class="button is-success like-song"
 											id="like-song"
 											@click="toggleLike()"
+											content="Like Song"
+											v-tippy
 										>
 											<i
 												class="material-icons icon-with-button"
@@ -195,6 +215,8 @@
 											class="button is-danger dislike-song"
 											id="dislike-song"
 											@click="toggleDislike()"
+											content="Dislike Song"
+											v-tippy
 										>
 											<i
 												class="material-icons icon-with-button"
@@ -207,54 +229,59 @@
 									</div>
 
 									<!-- Add Song To Playlist Button & Dropdown -->
-									<div
-										id="add-song-to-playlist"
-										v-click-outside="
-											() =>
-												(this.showPlaylistDropdown = false)
-										"
+									<add-to-playlist-dropdown
+										:song="currentSong"
+										placement="top-end"
 									>
-										<div class="control has-addons">
-											<button
-												class="button is-primary"
-												@click="
-													showPlaylistDropdown = !showPlaylistDropdown
-												"
-											>
-												<i class="material-icons"
-													>queue</i
+										<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
+													"
 												>
-											</button>
-											<button
-												class="button"
-												id="dropdown-toggle"
-												@click="
-													showPlaylistDropdown = !showPlaylistDropdown
-												"
-											>
-												<i class="material-icons">
-													{{
-														showPlaylistDropdown
-															? "expand_more"
-															: "expand_less"
-													}}
-												</i>
-											</button>
+													<i class="material-icons"
+														>queue</i
+													>
+												</button>
+												<button
+													class="button"
+													id="dropdown-toggle"
+													@click="
+														showPlaylistDropdown = !showPlaylistDropdown
+													"
+												>
+													<i class="material-icons">
+														{{
+															showPlaylistDropdown
+																? "expand_more"
+																: "expand_less"
+														}}
+													</i>
+												</button>
+											</div>
 										</div>
-										<add-to-playlist-dropdown
-											v-if="showPlaylistDropdown"
-											:song="currentSong"
-										/>
-									</div>
+									</add-to-playlist-dropdown>
 								</div>
 								<div id="right-buttons" v-else>
 									<!-- Disabled Ratings (Like/Dislike) Buttons -->
 									<div id="ratings">
 										<!-- Disabled Like Song Button -->
 										<button
-											class="button is-success tooltip tooltip-top disabled"
+											class="button is-success disabled"
 											id="like-song"
-											data-tooltip="Login to like songs"
+											content="Login to like songs"
+											v-tippy
 										>
 											<i
 												class="material-icons icon-with-button"
@@ -264,9 +291,10 @@
 
 										<!-- Disabled Dislike Song Button -->
 										<button
-											class="button is-danger tooltip tooltip-top disabled"
+											class="button is-danger disabled"
 											id="dislike-song"
-											data-tooltip="Login to dislike songs"
+											content="Login to dislike songs"
+											v-tippy
 										>
 											<i
 												class="material-icons icon-with-button"
@@ -278,8 +306,9 @@
 									<div id="add-song-to-playlist">
 										<div class="control has-addons">
 											<button
-												class="button is-primary tooltip tooltip-top disabled"
-												data-tooltip="Login to add songs to playlist"
+												class="button is-primary disabled"
+												content="Login to add songs to playlist"
+												v-tippy
 											>
 												<i class="material-icons"
 													>queue</i
@@ -331,6 +360,8 @@
 												loggedIn && station.isFavorited
 											"
 											@click.prevent="unfavoriteStation()"
+											content="Unfavorite Station"
+											v-tippy
 											class="material-icons"
 											>star</i
 										>
@@ -340,16 +371,19 @@
 											"
 											@click.prevent="favoriteStation()"
 											class="material-icons"
+											content="Favorite Station"
+											v-tippy
 											>star_border</i
 										>
 									</a>
 									<i
 										class="material-icons stationMode"
-										:title="
+										:content="
 											station.partyMode
 												? 'Station in Party mode'
 												: 'Station in Playlist mode'
 										"
+										v-tippy
 										>{{
 											station.partyMode
 												? "emoji_people"
@@ -872,6 +906,8 @@ export default {
 			localStorage.setItem("volume", volume);
 			this.volumeSliderValue = volume * 100;
 		}
+
+		this.frontendDevMode = lofig.get("mode");
 	},
 	beforeDestroy() {
 		/** Reset Songslist */