Merge branch 'polishing' of https://github.com/Musare/MusareNode into polishing

frontend/src/pages/Home/index.vue

@@ -279,23 +279,18 @@ export default {
 			this.socket.emit("apis.joinRoom", "home", () => {});
 		},
 		filteredStations() {
-			const favoriteStations = [];
-			const otherStations = [];
-			this.stations
+			return this.stations
 				.filter(
 					station =>
 						JSON.stringify(Object.values(station)).indexOf(
 							this.searchQuery
 						) !== -1
 				)
-				.forEach(station => {
-					if (this.favoriteStations.indexOf(station._id) !== -1) {
-						favoriteStations.push(station);
-					} else {
-						otherStations.push(station);
-					}
-				});
-			return [...favoriteStations, ...otherStations];
+				.sort(
+					(a, b) =>
+						this.isFavorite(b) - this.isFavorite(a) ||
+						this.isOwner(b) - this.isOwner(a)
+				);
 		},
 		isOwner(station) {
 			return station.owner === this.userId;
@@ -543,7 +538,7 @@ html {
 				width: 100%;
 				position: absolute;
 				top: 0;
-				filter: blur(3px);
+				filter: blur(1px);
 			}
 			img {
 				height: auto;

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

@@ -1,19 +1,24 @@
 <template>
 	<div id="currently-playing">
-		<div
-			v-if="currentSong.ytThumbnail"
-			class="thumbnail"
-			id="yt-thumbnail"
-			:style="{
-				'background-image': 'url(' + currentSong.ytThumbnail + ')'
-			}"
-		/>
-		<img
-			v-if="currentSong.thumbnail"
-			class="thumbnail"
-			:src="currentSong.thumbnail"
-			onerror="this.src='/assets/notes-transparent.png'"
-		/>
+		<figure class="thumbnail">
+			<div
+				v-if="currentSong.ytThumbnail"
+				class="ytThumbnailBg"
+				:style="{
+					'background-image': 'url(' + currentSong.ytThumbnail + ')'
+				}"
+			></div>
+			<img
+				v-if="currentSong.ytThumbnail"
+				:src="currentSong.ytThumbnail"
+				onerror="this.src='/assets/notes-transparent.png'"
+			/>
+			<img
+				v-else
+				:src="currentSong.thumbnail"
+				onerror="this.src='/assets/notes-transparent.png'"
+			/>
+		</figure>
 		<div id="song-info">
 			<h6>Currently playing...</h6>
 			<h4
@@ -84,12 +89,36 @@ export default {
 	align-items: center;
 	width: 100%;
 	height: 100%;
-	padding: 10px 20px;
+	padding: 10px;
 
 	.thumbnail {
 		min-width: 140px;
 		max-height: 140px;
 		height: 100%;
+		position: relative;
+
+		.ytThumbnailBg {
+			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;
+		}
 	}
 
 	#yt-thumbnail {

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

@@ -16,6 +16,7 @@
 				v-if="
 					loggedIn &&
 						((station.type === 'community' &&
+							station.partyMode &&
 							((station.locked && isOwnerOnly()) ||
 								!station.locked ||
 								(station.locked &&

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

@@ -68,7 +68,7 @@ export default {
 	display: flex;
 
 	.button {
-		border-radius: 0;
+		border-radius: 5px 5px 0 0;
 		border: 0;
 		text-transform: uppercase;
 		font-size: 17px;

frontend/src/pages/Station/index.vue

@@ -45,20 +45,6 @@
 								</span>
 							</button>
 
-							<!-- Debug Box -->
-							<button
-								class="button is-primary"
-								@click="togglePlayerDebugBox()"
-								@dblclick="resetPlayerDebugBox()"
-							>
-								<i class="material-icons icon-with-button">
-									bug_report
-								</i>
-								<span class="optional-desktop-only-text">
-									Debug player box
-								</span>
-							</button>
-
 							<!-- (Admin) Skip Button -->
 							<button
 								class="button is-danger"
@@ -131,7 +117,21 @@
 							<div id="seeker-bar" style="width: 0%" />
 						</div>
 						<div id="control-bar-container">
-							<div id="left-buttons" v-if="loggedIn">
+							<div id="left-buttons">
+								<!-- Debug Box -->
+								<button
+									class="button is-primary"
+									@click="togglePlayerDebugBox()"
+									@dblclick="resetPlayerDebugBox()"
+								>
+									<i class="material-icons icon-with-button">
+										bug_report
+									</i>
+									<span class="optional-desktop-only-text">
+										Debug
+									</span>
+								</button>
+
 								<!-- Local Pause/Resume Button -->
 								<button
 									class="button is-primary"
@@ -158,6 +158,7 @@
 
 								<!-- Vote to Skip Button -->
 								<button
+									v-if="loggedIn"
 									class="button is-primary"
 									@click="voteSkipStation()"
 								>
@@ -609,7 +610,8 @@ export default {
 			"station.lowerVolumeLarge",
 			"station.lowerVolumeSmall",
 			"station.increaseVolumeLarge",
-			"station.increaseVolumeSmall"
+			"station.increaseVolumeSmall",
+			"station.toggleDebug"
 		];
 
 		shortcutNames.forEach(shortcutName => {
@@ -1233,6 +1235,7 @@ export default {
 								keyCode: 32,
 								shift: false,
 								ctrl: true,
+								preventDefault: true,
 								handler: () => {
 									if (this.stationPaused)
 										this.resumeStation();
@@ -1247,6 +1250,7 @@ export default {
 								keyCode: 39,
 								shift: false,
 								ctrl: true,
+								preventDefault: true,
 								handler: () => {
 									this.skipStation();
 								}
@@ -1260,6 +1264,7 @@ export default {
 							keyCode: 40,
 							shift: false,
 							ctrl: true,
+							preventDefault: true,
 							handler: () => {
 								this.volumeSliderValue -= 1000;
 								this.changeVolume();
@@ -1273,6 +1278,7 @@ export default {
 							keyCode: 40,
 							shift: true,
 							ctrl: true,
+							preventDefault: true,
 							handler: () => {
 								this.volumeSliderValue -= 100;
 								this.changeVolume();
@@ -1286,6 +1292,7 @@ export default {
 							keyCode: 38,
 							shift: false,
 							ctrl: true,
+							preventDefault: true,
 							handler: () => {
 								this.volumeSliderValue += 1000;
 								this.changeVolume();
@@ -1299,6 +1306,7 @@ export default {
 							keyCode: 38,
 							shift: true,
 							ctrl: true,
+							preventDefault: true,
 							handler: () => {
 								this.volumeSliderValue += 100;
 								this.changeVolume();
@@ -1306,6 +1314,16 @@ export default {
 						}
 					);
 
+					keyboardShortcuts.registerShortcut("station.toggleDebug", {
+						keyCode: 68,
+						shift: false,
+						ctrl: true,
+						preventDefault: true,
+						handler: () => {
+							this.togglePlayerDebugBox();
+						}
+					});
+
 					// UNIX client time before ping
 					const beforePing = Date.now();
 					this.socket.emit("apis.ping", pong => {
@@ -1624,12 +1642,13 @@ export default {
 				background-color: #fff;
 				display: flex;
 				flex-direction: column;
+				border: 1px solid $light-grey-2;
+				border-radius: 5px;
+				overflow: hidden;
 
 				#video-container {
 					width: 100%;
 					height: 100%;
-					border: 1px solid $light-grey-2;
-					border-bottom: 0;
 
 					.player-cannot-autoplay {
 						position: absolute;
@@ -1671,9 +1690,6 @@ export default {
 					padding: 10px 0;
 					width: 100%;
 					background: #fff;
-					border: 1px solid $light-grey-2;
-					border-radius: 0 0 5px 5px;
-					border-top: 0;
 
 					@media (max-width: 1450px) {
 						flex-direction: column;