Added UsersList Sidebar on frontend

frontend/components/Sidebars/Playlist.vue

@@ -0,0 +1,104 @@
+<template>
+	<div class='sidebar' transition='slide' v-if='$parent.sidebars.queue'>
+		<div class='inner-wrapper'>
+			<div class='title'>
+				Queue
+			</div>
+
+			<article class="media">
+				<figure class="media-left">
+					<p class="image is-64x64">
+						<img :src="$parent.currentSong.thumbnail">
+					</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>
+			</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>
+	export default {
+		data() {
+			return {
+				playlist: []
+			}
+		},
+		ready: function () {
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.$parent.socket) {
+					_this.socket = _this.$parent.$parent.socket;
+					_this.socket.emit('stations.getPlaylist', _this.$parent.stationId, res => {
+						if (res.status == 'success') _this.playlist = res.data;
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
+		}
+	}
+</script>
+
+<style type='scss' scoped>
+	.sidebar {
+		position: fixed;
+		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: 50px;
+		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;
+	}
+</style>

frontend/components/Sidebars/Queue.vue

@@ -1,9 +1,7 @@
 <template>
 	<div class='sidebar' transition='slide' v-if='$parent.sidebars.queue'>
 		<div class='inner-wrapper'>
-			<div class='title'>
+			<div class='title'>Queue</div>
-				Queue
-			</div>
 
 			<article class="media">
 				<figure class="media-left">

frontend/components/Sidebars/UsersList.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class='sidebar' transition='slide' v-if='$parent.sidebars.users'>
+		<div class='inner-wrapper'>
+			<div class='title'>Users</div>
+
+			<aside class="menu">
+				<ul class="menu-list">
+					<li><a href="#" v-link="{ path: '/u/atjonathan' }" target="_blank">@atjonathan</a></li>
+				</ul>
+			</aside>
+		</div>
+	</div>
+</template>
+
+<style type='scss' scoped>
+	.sidebar {
+		position: fixed;
+		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: 50px;
+		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;
+	}
+
+	.menu {
+		padding: 0 20px;
+	}
+</style>

frontend/components/Station/Station.vue

@@ -2,6 +2,8 @@
 	<station-header></station-header>
 
 	<queue-sidebar v-if='sidebars.queue'></queue-sidebar>
+	<playlist-sidebar v-if='sidebars.playlist'></playlist-sidebar>
+	<users-sidebar v-if='sidebars.users'></users-sidebar>
 	
 	<div class="station">
 		<div class="columns is-mobile">
@@ -16,8 +18,6 @@
 		</div>
 		<div class="columns is-mobile">
 			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
-				<!--<button v-if="paused" @click="unpauseStation()">Unpause</button>-->
-				<!--<button v-if="!paused" @click="pauseStation()">Pause</button>-->
 				<div class="columns is-mobile">
 					<div class="column is-8-desktop is-12-mobile">
 						<h4 id="time-display">{{timeElapsed}} / {{formatTime(currentSong.duration)}}</h4>
@@ -92,6 +92,8 @@
 	import { Toast } from 'vue-roaster';
 
 	import QueueSidebar from '../Sidebars/Queue.vue';
+	import PlaylistSidebar from '../Sidebars/Playlist.vue';
+	import UsersSidebar from '../Sidebars/UsersList.vue';
 
 	import StationHeader from './StationHeader.vue';
 
@@ -112,7 +114,9 @@
 				liked: false,
 				disliked: false,
 				sidebars: {
-					queue: false
+					queue: false,
+					users: false,
+					playlist: false
 				}
 			}
 		},
@@ -378,7 +382,7 @@
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
-		components: { StationHeader, QueueSidebar }
+		components: { StationHeader, QueueSidebar, PlaylistSidebar, UsersSidebar }
 	}
 </script>
 

frontend/components/Station/StationHeader.vue

@@ -64,12 +64,12 @@
 					<i class="material-icons">queue_music</i>
 				</span>
 			</a>
-			<a class="nav-item" href="#">
+			<!--<a class="nav-item" href="#">
 				<span class="icon">
 					<i class="material-icons">chat</i>
 				</span>
-			</a>
+			</a>-->
-			<a class="nav-item" href="#">
+			<a class="nav-item" href="#" @click='$parent.sidebars.users = !$parent.sidebars.users'>
 				<span class="icon">
 					<i class="material-icons">people</i>
 				</span>