Added OfficialQueue on frontend

frontend/components/Modals/EditStation.vue

@@ -102,7 +102,7 @@
 			updatePartyMode: function () {
 				this.socket.emit('stations.updatePartyMode', this.data.stationId, this.data.partyMode, res => {
 					if (res.status === 'success') {
-					this.$parent.station.partyMode = this.data.partyMode;
+						this.$parent.station.partyMode = this.data.partyMode;
 						return Toast.methods.addToast(res.message, 4000);
 					}
 					Toast.methods.addToast(res.message, 8000);

frontend/components/Sidebars/OfficialQueue.vue

@@ -0,0 +1,98 @@
+<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 $parent.queue'>
+				<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 {
+		ready: function () {
+			let _this = this;
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				// get official station playlist
+			});
+		}
+	}
+</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/Station/CommunityHeader.vue

@@ -23,7 +23,7 @@
 				<span class='icon'>
 					<i class='material-icons'>skip_next</i>
 				</span>
-				<span class="skip-votes">{{$parent.currentSong.skipVotes}}</span>
+				<span class="skip-votes">{{ $parent.currentSong.skipVotes }}</span>
 			</a>
 			<a class='nav-item' href='#' v-if='isOwner() && $parent.paused' @click='$parent.resumeStation()'>
 				<span class='icon'>

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.sidebars.queue = !$parent.sidebars.queue' v-if='$parent.station.partyMode === true'>
+			<a class='nav-item' href='#' @click='$parent.sidebars.officialqueue = !$parent.sidebars.officialqueue'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>

frontend/components/Station/Station.vue

@@ -9,6 +9,7 @@
 	<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>
 	
@@ -83,6 +84,7 @@
 	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';
 
@@ -112,6 +114,7 @@
 				},
 				sidebars: {
 					queue: false,
+					officialqueue: true,
 					users: false,
 					playlist: false
 				},
@@ -493,6 +496,7 @@
 			EditStation,
 			Report,
 			QueueSidebar,
+			OfficialQueueSidebar,
 			PlaylistSidebar,
 			UsersSidebar
 		}