Added Songs Tab to Admin

backend/logic/actions/songs.js

@@ -55,7 +55,7 @@ module.exports = {
 		//TODO Require admin/login
 		db.models.song.findOneAndUpdate({ id }, song, { upsert: true }, (err, updatedSong) => {
 			if (err) throw err;
-			cb(updatedSong);
+			return cb({ status: 'success', message: 'Song has been successfully updated', data: updatedSong });
 		});
 	},
 

frontend/components/Admin/Songs.vue

@@ -0,0 +1,277 @@
+<template>
+	<div class='columns is-mobile'>
+		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
+			<table class='table is-striped'>
+				<thead>
+					<tr>
+						<td>Thumbnail</td>
+						<td>Title</td>
+						<td>YouTube ID</td>
+						<td>Artists</td>
+						<td>Genres</td>
+						<td>Requested By</td>
+						<td>Options</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for='(index, song) in songs' track-by='$index'>
+						<td>
+							<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes.png'">
+						</td>
+						<td>
+							<strong>{{ song.title }}</strong>
+						</td>
+						<td>{{ song._id }}</td>
+						<td>{{ song.artists.join(', ') }}</td>
+						<td>{{ song.genres.join(', ') }}</td>
+						<td>{{ song.requestedBy }}</td>
+						<td>
+							<a class='button is-primary' @click='edit(song, index)'>Edit</a>
+							<a class='button is-success' @click='add(song)'>Add</a>
+							<a class='button is-danger' @click='remove(song._id, index)'>Remove</a>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+	<div class='modal' :class="{ 'is-active': isEditActive }">
+		<div class='modal-background'></div>
+		<div class='modal-card'>
+			<section class='modal-card-body'>
+
+				<h5 class='has-text-centered'>Video Preview</h5>
+				<div class='video-container'>
+					<div id='player'></div>
+					<p class='control has-addons'>
+						<a class='button'>
+							<i class='material-icons' @click='video.settings("pause")' v-if='!video.paused'>pause</i>
+							<i class='material-icons' @click='video.settings("play")' v-else>play_arrow</i>
+						</a>
+						<a class='button' @click='video.settings("stop")'>
+							<i class='material-icons'>stop</i>
+						</a>
+						<a class='button' @click='video.settings("skipToLast10Secs")'>
+							<i class='material-icons'>fast_forward</i>
+						</a>
+					</p>
+				</div>
+
+				<h5 class='has-text-centered'>Thumbnail Preview</h5>
+				<img class='thumbnail-preview' :src='editing.song.thumbnail'>
+
+				<label class='label'>Thumbnail URL</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='editing.song.thumbnail'>
+				</p>
+
+				<h5 class='has-text-centered'>Edit Info</h5>
+
+				<p class='control'>
+					<label class='checkbox'>
+						<input type='checkbox' v-model='editing.song.explicit'>
+						Explicit
+					</label>
+				</p>
+				<label class='label'>Song ID</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='editing.song._id'>
+				</p>
+				<label class='label'>Song Title</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='editing.song.title'>
+				</p>
+				<div class='control is-horizontal'>
+					<div class='control is-grouped'>
+						<div>
+							<p class='control has-addons'>
+								<input class='input' id='new-artist' type='text' placeholder='Artist'>
+								<a class='button is-info' @click='addTag("artists")'>Add Artist</a>
+							</p>
+							<span class='tag is-info' v-for='(index, artist) in editing.song.artists' track-by='$index'>
+								{{ artist }}
+								<button class='delete is-info' @click='removeTag("artists", index)'></button>
+							</span>
+						</div>
+						<div>
+							<p class='control has-addons'>
+								<input class='input' id='new-genre' type='text' placeholder='Genre'>
+								<a class='button is-info' @click='addTag("genres")'>Add Genre</a>
+							</p>
+							<span class='tag is-info' v-for='(index, genre) in editing.song.genres' track-by='$index'>
+								{{ genre }}
+								<button class='delete is-info' @click='removeTag("genres", index)'></button>
+							</span>
+						</div>
+					</div>
+				</div>
+				<label class='label'>Song Duration</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='editing.song.duration'>
+				</p>
+				<label class='label'>Skip Duration</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='editing.song.skipDuration'>
+				</p>
+
+			</section>
+			<footer class='modal-card-foot'>
+				<a class='button is-success' @click='save(editing.song)'>
+					<i class='material-icons save-changes'>done</i>
+					<span>&nbsp;Save</span>
+				</a>
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script>
+	import { Toast } from 'vue-roaster';
+
+	export default {
+		data() {
+			return {
+				songs: [],
+				isEditActive: false,
+				editing: {
+					index: 0,
+					song: {}
+				},
+				video: {
+					player: null,
+					paused: false,
+					settings: function (type) {
+						switch(type) {
+							case 'stop':
+								this.player.stopVideo();
+								this.paused = true;
+								break;
+							case 'pause':
+								this.player.pauseVideo();
+								this.paused = true;
+								break;
+							case 'play':
+								this.player.playVideo();
+								this.paused = false;
+								break;
+							case 'skipToLast10Secs':
+								this.player.seekTo(this.player.getDuration() - 10);
+								break;
+						}
+					}
+				}
+			}
+		},
+		methods: {
+			toggleModal: function () {
+				this.isEditActive = !this.isEditActive;
+				this.video.settings('stop');
+			},
+			addTag: function (type) {
+				if (type == 'genres') {
+					for (let z = 0; z < this.editing.song.genres.length; z++) {
+						if (this.editing.song.genres[z] == $('#new-genre').val()) return Toast.methods.addToast('Genre already exists', 3000);
+					}
+					if ($('#new-genre').val() !== '') this.editing.song.genres.push($('#new-genre').val());
+					else Toast.methods.addToast('Genre cannot be empty', 3000);
+				} else if (type == 'artists') {
+					for (let z = 0; z < this.editing.song.artists.length; z++) {
+						if (this.editing.song.artists[z] == $('#new-artist').val()) return Toast.methods.addToast('Artist already exists', 3000);
+					}
+					if ($('#new-artist').val() !== '') this.editing.song.artists.push($('#new-artist').val());
+					else Toast.methods.addToast('Artist cannot be empty', 3000);
+				}
+			},
+			removeTag: function (type, index) {
+				if (type == 'genres') this.editing.song.genres.splice(index, 1);
+				else if (type == 'artists') this.editing.song.artists.splice(index, 1);
+			},
+			edit: function (song, index) {
+				this.editing = { index, song };
+				this.video.player.loadVideoById(song._id);
+				this.isEditActive = true;
+			},
+			save: function (song) {
+				let _this = this;
+				this.socket.emit('songs.update', song._id, song, function (res) {
+					if (res.status == 'success' || res.status == 'error') Toast.methods.addToast(res.message, 2000);
+					_this.toggleModal();
+				});
+			},
+			add: function (song) {
+				this.socket.emit('songs.add', song, res => {
+					if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
+				});
+			},
+			remove: function (id, index) {
+				this.songs.splice(index, 1);
+				this.socket.emit('songs.remove', id, res => {
+					if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
+				});
+			}
+		},
+		ready: function () {
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.$parent.socket) {
+					_this.socket = _this.$parent.$parent.socket;
+					_this.socket.emit('songs.index', data => {
+						_this.songs = data;
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
+
+			this.video.player = new YT.Player('player', {
+				height: 315,
+				width: 560,
+				videoId: this.editing.song._id,
+				playerVars: { controls: 1, iv_load_policy: 3, rel: 0, showinfo: 0 },
+				events: {
+					'onStateChange': event => {
+						if (event.data == 1) {
+							let youtubeDuration = _this.video.player.getDuration();
+							youtubeDuration -= _this.editing.song.skipDuration;
+							if (_this.editing.song.duration > youtubeDuration) this.stopVideo();
+						}
+					}
+				}
+			});
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	body { font-family: 'Roboto', sans-serif; }
+
+	.thumbnail-preview {
+		display: flex;
+		margin: 0 auto;
+		padding: 10px 0 20px 0;
+	}
+
+	.modal-card-body, .modal-card-foot { border-top: 0; }
+
+	.label, .checkbox, h5 {
+		font-weight: normal;
+	}
+
+	.video-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 10px;
+	}
+
+	.save-changes { color: #fff; }
+
+	.song-thumbnail {
+		display: block;
+		max-width: 50px;
+		margin: 0 auto;
+	}
+
+	td { vertical-align: middle; }
+
+	.tag:not(:last-child) { margin-right: 5px; }	
+</style>

frontend/components/pages/Admin.vue

@@ -1,47 +1,55 @@
 <template>
-	<div class="app">
+	<div class='app'>
 		<main-header></main-header>
-		<div class="tabs is-centered">
+		<div class='tabs is-centered'>
 			<ul>
-				<li :class="{ 'is-active': currentTab == 'queueSongs' }" @click="showTab('queueSongs')">
+				<li :class='{ "is-active": currentTab == "queueSongs" }' @click='showTab("queueSongs")'>
 					<a>
-						<span class="icon is-small"><i class="fa fa-music"></i></span>
-						<span>Queue Songs</span>
+						<i class='material-icons'>queue_music</i>
+						<span>&nbsp;Queue Songs</span>
 					</a>
 				</li>
-				<li :class="{ 'is-active': currentTab == 'stations' }" @click="showTab('stations')">
+				<li :class='{ "is-active": currentTab == "songs" }' @click='showTab("songs")'>
 					<a>
-						<span class="icon is-small"><i class="fa fa-headphones"></i></span>
-						<span>Stations</span>
+						<i class='material-icons'>music_note</i>
+						<span>&nbsp;Songs</span>
+					</a>
+				</li>
+				<li :class='{ "is-active": currentTab == "stations" }' @click='showTab("stations")'>
+					<a>
+						<i class='material-icons'>hearing</i>
+						<span>&nbsp;Stations</span>
 					</a>
 				</li>
 			</ul>
 		</div>
-		<queue-songs v-if="currentTab == 'queueSongs'"></queue-songs>
-		<stations v-if="currentTab == 'stations'"></stations>
+		<queue-songs v-if='currentTab == "queueSongs"'></queue-songs>
+		<songs v-if='currentTab == "songs"'></songs>
+		<stations v-if='currentTab == "stations"'></stations>
 	</div>
 </template>
 
 <script>
-	import MainHeader from '../MainHeader.vue'
-	import MainFooter from '../MainFooter.vue'
+	import MainHeader from '../MainHeader.vue';
+	import MainFooter from '../MainFooter.vue';
 
-	import QueueSongs from '../Admin/QueueSongs.vue'
-	import Stations from '../Admin/Stations.vue'
+	import QueueSongs from '../Admin/QueueSongs.vue';
+	import Songs from '../Admin/Songs.vue';
+	import Stations from '../Admin/Stations.vue';
 
 	export default {
-		components: { MainHeader, MainFooter, QueueSongs, Stations },
+		components: { MainHeader, MainFooter, QueueSongs, Songs, Stations },
 		data() {
 			return {
 				currentTab: 'queueSongs'
 			}
 		},
 		methods: {
-			showTab: function(tab) {
+			showTab: function (tab) {
 				this.currentTab = tab;
 			}
 		}
 	}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang='scss' scoped></style>