Condensed officialqueue and queue into one file

frontend/components/Sidebars/OfficialQueue.vue

@@ -1,106 +0,0 @@
-<template>
-	<div class='sidebar' transition='slide' v-if='$parent.sidebars.officialqueue'>
-		<div class='inner-wrapper'>
-			<div class='title'>Official Queue</div>
-
-			<article class="media">
-				<figure class="media-left">
-					<p class="image is-64x64">
-						<img :src="$parent.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'">
-					</p>
-				</figure>
-				<div class="media-content">
-					<div class="content">
-						<p>
-							Current Song: <strong>{{ $parent.currentSong.title }}</strong>
-							<br>
-							<small>{{ $parent.currentSong.artists }}</small>
-						</p>
-					</div>
-				</div>
-				<div class="media-right">
-					{{ $parent.formatTime($parent.currentSong.duration) }}
-				</div>
-			</article>
-
-			<article class="media" v-for='song in playlist'>
-				<div class="media-content">
-					<div class="content">
-						<p>
-							<strong>{{ song.title }}</strong>
-							<br>
-							<small>{{ song.artists }}</small>
-						</p>
-					</div>
-				</div>
-			</article>
-		</div>
-	</div>
-</template>
-
-<script>
-	import io from '../../io';
-
-	export default {
-		data: function () {
-			return {
-				playlist: []
-			}
-		},
-		ready: function () {
-			let _this = this;
-			io.getSocket((socket) => {
-				_this.socket = socket;
-				_this.socket.emit('stations.getPlaylist', _this.$parent.stationId, res => {
-					console.log(res);
-					if (res.status == 'success') _this.playlist = res.data;
-				});
-			});
-		}
-	}
-</script>
-
-<style type='scss' scoped>
-	.sidebar {
-		position: fixed;
-		z-index: 1;
-		top: 0;
-		right: 0;
-		width: 300px;
-		height: 100vh;
-		background-color: #fff;
-		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-	}
-
-	.inner-wrapper {	
-		top: 64px;
-		position: relative;
-	}
-
-	.slide-transition {
-		transition: transform 0.6s ease-in-out;
-		transform: translateX(0);
-	}
-
-	.slide-enter, .slide-leave { transform: translateX(100%); }
-
-	.title {
-		background-color: rgb(3, 169, 244);
-		text-align: center;
-		padding: 10px;
-		color: white;
-		font-weight: 600;
-	}
-
-	.media { padding: 0px 25px;}
-
-	.media-content .content {
-		height: 64px;
-		display: flex;
-		align-items: center;
-
-		strong { word-break: break-word; }
-	}
-
-	.media-right { line-height: 64px; }
-</style>

frontend/components/Sidebars/Queue.vue

@@ -18,9 +18,12 @@
 						</p>
 					</div>
 				</div>
+				<div class="media-right">
+					{{ $parent.formatTime($parent.currentSong.duration) }}
+				</div>
 			</article>
 
-			<article class="media" v-for='song in $parent.queue'>
+			<article class="media" v-for='song in playlist'>
 				<div class="media-content">
 					<div class="content">
 						<p>
@@ -30,9 +33,10 @@
 						</p>
 					</div>
 				</div>
+				<div class="media-right">
+					{{ $parent.$parent.formatTime(song.duration) }}
+				</div>
 			</article>
-
-			<a class='button add-to-queue' href='#' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue'>Add Song to Queue</a>
 		</div>
 	</div>
 </template>
@@ -41,7 +45,7 @@
 	import io from '../../io';
 
 	export default {
-		data() {
+		data: function () {
 			return {
 				playlist: []
 			}
@@ -90,25 +94,15 @@
 		font-weight: 600;
 	}
 
-	.add-to-queue {
-		width: 100%;
-    	margin-top: 25px;
-		height: 40px;
-		border-radius: 0;
-		background: rgb(3, 169, 244);
-    	color: #fff !important;
-		border: 0;
-
-		&:active, &:focus { border: 0; }
-	}
-
-	.add-to-queue:focus { background: #029ce3; }
-
 	.media { padding: 0px 25px;}
 
 	.media-content .content {
 		height: 64px;
 		display: flex;
 		align-items: center;
+
+		strong { word-break: break-word; }
 	}
+
+	.media-right { line-height: 64px; }
 </style>

frontend/components/Station/OfficialHeader.vue

@@ -53,7 +53,7 @@
 		</span>
 
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
-			<a class='nav-item' href='#' @click='$parent.toggleSidebar("officialqueue")'>
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("queue")'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>

frontend/components/Station/Station.vue

@@ -9,7 +9,6 @@
 	<report v-if='modals.report'></report>
 
 	<queue-sidebar v-if='sidebars.queue'></queue-sidebar>
-	<official-queue-sidebar v-if='sidebars.officialqueue'></official-queue-sidebar>
 	<playlist-sidebar v-if='sidebars.playlist'></playlist-sidebar>
 	<users-sidebar v-if='sidebars.users'></users-sidebar>
 	
@@ -84,7 +83,6 @@
 	import Report from '../Modals/Report.vue';
 
 	import QueueSidebar from '../Sidebars/Queue.vue';
-	import OfficialQueueSidebar from '../Sidebars/OfficialQueue.vue';
 	import PlaylistSidebar from '../Sidebars/Playlist.vue';
 	import UsersSidebar from '../Sidebars/UsersList.vue';
 
@@ -114,7 +112,6 @@
 				},
 				sidebars: {
 					queue: false,
-					officialqueue: false,
 					users: false,
 					playlist: false
 				},
@@ -495,7 +492,6 @@
 			EditStation,
 			Report,
 			QueueSidebar,
-			OfficialQueueSidebar,
 			PlaylistSidebar,
 			UsersSidebar
 		}