Seperated Community and Official Station Headers

backend/logic/actions/stations.js

@@ -126,19 +126,25 @@ module.exports = {
 						}
 						cb({
 							status: 'success',
-							currentSong: station.currentSong,
-							startedAt: station.startedAt,
-							paused: station.paused,
-							timePaused: station.timePaused
+							data: {
+								type: station.type,
+								currentSong: station.currentSong,
+								startedAt: station.startedAt,
+								paused: station.paused,
+								timePaused: station.timePaused
+							}
 						});
 					});
 				} else {
 					cb({
 						status: 'success',
-						currentSong: null,
-						startedAt: station.startedAt,
-						paused: station.paused,
-						timePaused: station.timePaused
+						data: {
+							type: station.type,
+							currentSong: null,
+							startedAt: station.startedAt,
+							paused: station.paused,
+							timePaused: station.timePaused
+						}
 					});
 				}
 				//});

frontend/components/Station/StationHeader.vue → frontend/components/Station/CommunityHeader.vue

@@ -9,11 +9,6 @@
 					<i class="material-icons">playlist_add</i>
 				</span>
 			</a>
-			<a class="nav-item" href="#">
-				<span class="icon">
-					<i class="material-icons">flag</i>
-				</span>
-			</a>
 			<a v-if="$parent.$parent.role === 'admin'" class="nav-item" href="#" @click="$parent.skipStation()">
 				<span class="icon">
 					<i class="material-icons">skip_next</i>
@@ -72,6 +67,11 @@
 					<i class="material-icons">people</i>
 				</span>
 			</a>
+			<a class="nav-item" href="#" @click='$parent.sidebars.playlist = !$parent.sidebars.playlist'>
+				<span class="icon">
+					<i class="material-icons">library_music</i>
+				</span>
+			</a>
 		</div>
 	</nav>
 </template>

frontend/components/Station/OfficialHeader.vue

@@ -0,0 +1,129 @@
+<template>
+	<nav class="nav">
+		<div class="nav-left">
+			<a class="nav-item logo" href="#" v-link="{ path: '/' }" @click="this.$dispatch('leaveStation', title)">
+				Musare
+			</a>
+			<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="material-icons">flag</i>
+				</span>
+			</a>
+			<a v-if="$parent.$parent.role === 'admin'" class="nav-item" href="#" @click="$parent.skipStation()">
+				<span class="icon">
+					<i class="material-icons">skip_next</i>
+				</span>
+			</a>
+			<a v-if="$parent.$parent.role !== 'admin' && $parent.$parent.loggedIn" class="nav-item" href="#" @click="$parent.voteSkipStation()">
+				<span class="icon">
+					<i class="material-icons">skip_next</i>
+				</span>
+			</a>
+			<a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && $parent.locked" @click="$parent.unlockStation()">
+				<span class="icon">
+					<i class="material-icons">lock_outline</i>
+				</span>
+			</a>
+			<a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && !$parent.locked" @click="$parent.lockStation()">
+				<span class="icon">
+					<i class="material-icons">lock_open</i>
+				</span>
+			</a>
+			<a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && $parent.paused" @click="$parent.resumeStation()">
+				<span class="icon">
+					<i class="material-icons">play_arrow</i>
+				</span>
+			</a>
+			<a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && !$parent.paused" @click="$parent.pauseStation()">
+				<span class="icon">
+					<i class="material-icons">pause</i>
+				</span>
+			</a>
+		</div>
+
+		<div class="nav-center">
+			{{title}}
+		</div>
+
+		<!--<span class="nav-toggle" :class="{ 'is-active': isActive }" @click="toggleMobileMenu()">
+			<span></span>
+			<span></span>
+			<span></span>
+		</span>-->
+
+		<div class="nav-right">
+			<a class="nav-item" href="#" @click='$parent.sidebars.queue = !$parent.sidebars.queue'>
+				<span class="icon">
+					<i class="material-icons">queue_music</i>
+				</span>
+			</a>
+			<!--<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="material-icons">chat</i>
+				</span>
+			</a>-->
+			<a class="nav-item" href="#" @click='$parent.sidebars.users = !$parent.sidebars.users'>
+				<span class="icon">
+					<i class="material-icons">people</i>
+				</span>
+			</a>
+		</div>
+	</nav>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: this.$route.params.id,
+				isActive: false
+			}
+		},
+		methods: {
+			toggleMobileMenu: function() {
+				this.isActive = !this.isActive;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import 'theme.scss';
+	.nav {
+		background-color: #03a9f4;
+	}
+
+	a.nav-item {
+		color: $white;
+
+		&:hover {
+			color: $white;
+		}
+
+		padding: 0 18px;
+		.icon {
+			height: 64px;
+			i {
+				font-size: 2rem;
+				line-height: 64px;
+				height: 64px;
+				width: 34px;
+			}
+		}
+	}
+
+	.logo {
+		font-size: 2.1rem;
+		line-height: 64px;
+		padding-left: 20px !important;
+		padding-right: 20px !important;
+	}
+
+	.nav-center {
+		display: flex;
+    	align-items: center;
+		text-transform: uppercase;
+		color: $blue;
+		font-size: 22px;
+	}
+</style>

frontend/components/Station/Station.vue

@@ -1,5 +1,6 @@
 <template>
-	<station-header></station-header>
+	<official-header v-if='type == "official"'></official-header>
+	<community-header v-if='type == "community"'></community-header>
 
 	<song-queue v-if='modals.addSongToQueue'></song-queue>
 	<edit-playlist v-if='modals.editPlaylist'></edit-playlist>
@@ -68,11 +69,13 @@
 	import PlaylistSidebar from '../Sidebars/Playlist.vue';
 	import UsersSidebar from '../Sidebars/UsersList.vue';
 
-	import StationHeader from './StationHeader.vue';
+	import OfficialHeader from './OfficialHeader.vue';
+	import CommunityHeader from './CommunityHeader.vue';
 
 	export default {
 		data() {
 			return {
+				type: '',
 				playerReady: false,
 				currentSong: {},
 				player: undefined,
@@ -278,6 +281,7 @@
 			let socketInterval = setInterval(() => {
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
+<<<<<<< 10e2c9a208c1e4d81b218d7782ef618b4f49990c
 					_this.socket.emit('stations.join', _this.stationId, data => {
 						if (data.status === "success") {
 							_this.currentSong = (data.currentSong) ? data.currentSong : {};
@@ -287,9 +291,19 @@
 							if (data.currentSong) {
 								_this.noSong = false;
 								_this.simpleSong = (data.currentSong.likes === -1 && data.currentSong.dislikes === -1);
+=======
+					_this.socket.emit('stations.join', _this.stationId, res => {
+						if (res.status === "success") {
+							_this.currentSong = (res.data.currentSong) ? res.data.currentSong : {};
+							_this.type = res.data.type;
+							_this.startedAt = res.data.startedAt;
+							_this.paused = res.data.paused;
+							_this.timePaused = res.data.timePaused;
+							if (res.data.currentSong) {
+>>>>>>> Seperated Community and Official Station Headers
 								_this.youtubeReady();
 								_this.playVideo();
-								_this.socket.emit('songs.getOwnSongRatings', data.currentSong._id, data => {
+								_this.socket.emit('songs.getOwnSongRatings', res.data.currentSong._id, data => {
 									if (_this.currentSong._id === data.songId) {
 										_this.liked = data.liked;
 										_this.disliked = data.disliked;
@@ -312,13 +326,9 @@
 						if (data.currentSong) {
 							_this.noSong = false;
 							_this.simpleSong = (data.currentSong.likes === -1 && data.currentSong.dislikes === -1);
-							if (!_this.playerReady) {
-								_this.youtubeReady();
-							} else {
-								_this.playVideo();
-							}
+							if (!_this.playerReady) _this.youtubeReady();
+							else _this.playVideo();
 							_this.socket.emit('songs.getOwnSongRatings', data.currentSong._id, (data) => {
-								console.log(data);
 								if (_this.currentSong._id === data.songId) {
 									_this.liked = data.liked;
 									_this.disliked = data.disliked;
@@ -386,7 +396,7 @@
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
-		components: { StationHeader, SongQueue, EditPlaylist, CreatePlaylist, QueueSidebar, PlaylistSidebar, UsersSidebar }
+		components: { OfficialHeader, CommunityHeader, SongQueue, EditPlaylist, CreatePlaylist, QueueSidebar, PlaylistSidebar, UsersSidebar }
 	}
 </script>
 

frontend/components/pages/Home.vue

@@ -66,18 +66,14 @@
 					_this.socket = _this.$parent.socket;
 					_this.socket.emit("stations.index", data => {
 						if (data.status === "success")  data.stations.forEach(station => {
-							if (!station.currentSong) {
-								station.currentSong = {thumbnail: '/assets/notes.png'};
-							}
+							if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes.png' };
 							if (station.type == 'official') _this.stations.official.push(station);
 							else _this.stations.community.push(station);
 						});
 					});
 					_this.socket.emit("apis.joinRoom", 'home', () => {});
-					_this.socket.on('event:stations.created', (station) => {
-						if (!station.currentSong) {
-							station.currentSong = {};
-						}
+					_this.socket.on('event:stations.created', station => {
+						if (!station.currentSong) station.currentSong = {};
 						_this.stations[station.type].push(station);
 					});
 					clearInterval(socketInterval);