| 
														
															@@ -4,35 +4,27 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			<table class='table is-striped'> 
														 | 
														
														 | 
														
															 			<table class='table is-striped'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<thead> 
														 | 
														
														 | 
														
															 				<thead> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					<tr> 
														 | 
														
														 | 
														
															 					<tr> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						<td>Thumbnail</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td>Title</td> 
														 | 
														
														 | 
														
															 						<td>Title</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td>YouTube ID</td> 
														 | 
														
														 | 
														
															 						<td>YouTube ID</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td>Artists</td> 
														 | 
														
														 | 
														
															 						<td>Artists</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td>Genres</td> 
														 | 
														
														 | 
														
															 						<td>Genres</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						<td>Requested By</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td>Options</td> 
														 | 
														
														 | 
														
															 						<td>Options</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					</tr> 
														 | 
														
														 | 
														
															 					</tr> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</thead> 
														 | 
														
														 | 
														
															 				</thead> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<tbody> 
														 | 
														
														 | 
														
															 				<tbody> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					<tr v-for='(index, song) in songs' track-by='$index'> 
														 | 
														
														 | 
														
															 					<tr v-for='(index, song) in songs' track-by='$index'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td> 
														 | 
														
														 | 
														
															 						<td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							<p class='control'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-								<input class='input' type='text' v-model='song.title'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							</p> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+							<img class='song-thumbnail' :src='song.thumbnail'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						</td> 
														 | 
														
														 | 
														
															 						</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td> 
														 | 
														
														 | 
														
															 						<td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							<p class='control'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-								<input class='input' type='text' v-model='song._id'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							</p> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-						</td> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-						<td> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							<div class='control'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-								<input v-for='artist in song.artists' track-by='$index' class='input' type='text' v-model='artist'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							</div> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-						</td> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-						<td> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							<div class='control'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-								<input v-for='genre in song.genres' track-by='$index' class='input' type='text' v-model='genre'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-							</div> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+							<strong>{{ song.title }}</strong> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						</td> 
														 | 
														
														 | 
														
															 						</td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						<td> {{ song._id }} </td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						<td><span v-for='artist in song.artists'>{{ artist }}</span></td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						<td><span v-for='genre in song.genres'>{{ genre }}</span></td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						<td> {{ song.requestedBy }} </td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						<td> 
														 | 
														
														 | 
														
															 						<td> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 							<a class='button is-primary' @click='edit(song, index)'>Edit</a> 
														 | 
														
														 | 
														
															 							<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-success' @click='add(song)'>Add</a> 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -47,6 +39,7 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		<div class='modal-background'></div> 
														 | 
														
														 | 
														
															 		<div class='modal-background'></div> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		<div class='modal-card'> 
														 | 
														
														 | 
														
															 		<div class='modal-card'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			<section class='modal-card-body'> 
														 | 
														
														 | 
														
															 			<section class='modal-card-body'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<h5 class='has-text-centered'>Video Preview</h5> 
														 | 
														
														 | 
														
															 				<h5 class='has-text-centered'>Video Preview</h5> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<div class='video-container'> 
														 | 
														
														 | 
														
															 				<div class='video-container'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					<div id='player'></div> 
														 | 
														
														 | 
														
															 					<div id='player'></div> 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -63,13 +56,23 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 						</a> 
														 | 
														
														 | 
														
															 						</a> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					</p> 
														 | 
														
														 | 
														
															 					</p> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</div> 
														 | 
														
														 | 
														
															 				</div> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<h5 class='has-text-centered'>Thumbnail Preview</h5> 
														 | 
														
														 | 
														
															 				<h5 class='has-text-centered'>Thumbnail Preview</h5> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<img class='thumbnail-preview' :src='editing.song.thumbnail'> 
														 | 
														
														 | 
														
															 				<img class='thumbnail-preview' :src='editing.song.thumbnail'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<label class='label'>Thumbnail URL</label> 
														 | 
														
														 | 
														
															 				<label class='label'>Thumbnail URL</label> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<p class='control'> 
														 | 
														
														 | 
														
															 				<p class='control'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					<input class='input' type='text' v-model='editing.song.thumbnail'> 
														 | 
														
														 | 
														
															 					<input class='input' type='text' v-model='editing.song.thumbnail'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</p> 
														 | 
														
														 | 
														
															 				</p> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<h5 class='has-text-centered'>Edit Info</h5> 
														 | 
														
														 | 
														
															 				<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> 
														 | 
														
														 | 
														
															 				<label class='label'>Song ID</label> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<p class='control'> 
														 | 
														
														 | 
														
															 				<p class='control'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					<input class='input' type='text' v-model='editing.song._id'> 
														 | 
														
														 | 
														
															 					<input class='input' type='text' v-model='editing.song._id'> 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -80,11 +83,11 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</p> 
														 | 
														
														 | 
														
															 				</p> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<label class='label'>Artists</label> 
														 | 
														
														 | 
														
															 				<label class='label'>Artists</label> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<div class='control'> 
														 | 
														
														 | 
														
															 				<div class='control'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-					<input v-for='artist in editing.song.artists' track-by='$index' class='input' type='text' v-model='artist'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+					<input v-repeat='editing.song.artists' class='input' type='text' v-model='editing.song.artists[$index]'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</div> 
														 | 
														
														 | 
														
															 				</div> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<label class='label'>Genres</label> 
														 | 
														
														 | 
														
															 				<label class='label'>Genres</label> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<div class='control'> 
														 | 
														
														 | 
														
															 				<div class='control'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-					<input v-for='genre in editing.song.genres' track-by='$index' class='input' type='text' v-model='genre'> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+					<input v-repeat='editing.song.genres' class='input' type='text' v-model='editing.song.genres[$index]'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</div> 
														 | 
														
														 | 
														
															 				</div> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<label class='label'>Song Duration</label> 
														 | 
														
														 | 
														
															 				<label class='label'>Song Duration</label> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<p class='control'> 
														 | 
														
														 | 
														
															 				<p class='control'> 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -94,10 +97,13 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				<p class='control'> 
														 | 
														
														 | 
														
															 				<p class='control'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					<input class='input' type='text' v-model='editing.song.skipDuration'> 
														 | 
														
														 | 
														
															 					<input class='input' type='text' v-model='editing.song.skipDuration'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				</p> 
														 | 
														
														 | 
														
															 				</p> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			</section> 
														 | 
														
														 | 
														
															 			</section> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			<footer class='modal-card-foot'> 
														 | 
														
														 | 
														
															 			<footer class='modal-card-foot'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-				<i class='material-icons save-changes' @click='save(editing.song)'>save</i> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-				<button class='delete' @click='toggleModal()'></button> 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+				<a class='button is-success' @click='save(editing.song)'> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+					<i class='material-icons save-changes'>done</i> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+					<span> Save</span> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+				</a> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			</footer> 
														 | 
														
														 | 
														
															 			</footer> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		</div> 
														 | 
														
														 | 
														
															 		</div> 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 	</div> 
														 | 
														
														 | 
														
															 	</div> 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -158,10 +164,17 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				}); 
														 | 
														
														 | 
														
															 				}); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			}, 
														 | 
														
														 | 
														
															 			}, 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			add: function (song) { 
														 | 
														
														 | 
														
															 			add: function (song) { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-				this.socket.emit('queueSongs.remove', song._id); 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-				this.socket.emit('songs.add', song, res => { 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+				this.socket.emit('queueSongs.remove', song._id, res => { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 					if (res.status == 'success') Toast.methods.addToast(res.message, 2000); 
														 | 
														
														 | 
														
															 					if (res.status == 'success') Toast.methods.addToast(res.message, 2000); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				}); 
														 | 
														
														 | 
														
															 				}); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+				this.socket.emit('users.findBySession', res => { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+					if (res.status == 'success') { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						song.acceptedBy = res.data.username; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						this.socket.emit('songs.add', song, res => { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+							if (res.status == 'success') Toast.methods.addToast(res.message, 2000); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+						}); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+					} 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+				}); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			}, 
														 | 
														
														 | 
														
															 			}, 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 			remove: function (id, index) { 
														 | 
														
														 | 
														
															 			remove: function (id, index) { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 				this.songs.splice(index, 1); 
														 | 
														
														 | 
														
															 				this.songs.splice(index, 1); 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -217,7 +230,7 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		background-color: rgb(66, 165, 245); 
														 | 
														
														 | 
														
															 		background-color: rgb(66, 165, 245); 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 	} 
														 | 
														
														 | 
														
															 	} 
														 | 
													
												
											
												
													
														| 
														 | 
														
															  
														 | 
														
														 | 
														
															  
														 | 
													
												
											
												
													
														| 
														 | 
														
															-	.label, h5 { 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+	.label, .checkbox, h5 { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		color: #fff; 
														 | 
														
														 | 
														
															 		color: #fff; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		font-weight: normal; 
														 | 
														
														 | 
														
															 		font-weight: normal; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 	} 
														 | 
														
														 | 
														
															 	} 
														 | 
													
												
											
										
											
												
													
														 | 
														
															@@ -231,7 +244,15 @@ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															  
														 | 
														
														 | 
														
															  
														 | 
													
												
											
												
													
														| 
														 | 
														
															 	.save-changes { 
														 | 
														
														 | 
														
															 	.save-changes { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 		color: #fff; 
														 | 
														
														 | 
														
															 		color: #fff; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-		margin-right: 5px; 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															-		cursor: pointer; 
														 | 
														
														 | 
														
															 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+	} 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+	.song-thumbnail { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+		display: block; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+		max-width: 50px; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+		margin: 0 auto; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+	} 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+ 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+	td { 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 
														 | 
														
														 | 
														
															+		vertical-align: middle; 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 	} 
														 | 
														
														 | 
														
															 	} 
														 | 
													
												
											
												
													
														| 
														 | 
														
															 </style> 
														 | 
														
														 | 
														
															 </style> 
														 |