Re-refactored a lot of the Admin Songs/QueueSongs logic into the EditSong modal

frontend/components/Admin/QueueSongs.vue

@@ -50,17 +50,7 @@
 			return {
 				searchQuery: '',
 				songs: [],
-				isEditActive: false,
-				editing: {
-					index: 0,
-					song: {}
-				},
-				video: {
-					player: null,
-					paused: false,
-					playerReady: false
-				},
-				timeout: 0
+				isEditActive: false
 			}
 		},
 		computed: {
@@ -69,86 +59,11 @@
 			}
 		},
 		methods: {
-			settings: function (type) {
-				let _this = this;
-				switch(type) {
-					case 'stop':
-						_this.video.player.stopVideo();
-						_this.video.paused = true;
-						break;
-					case 'pause':
-						_this.video.player.pauseVideo();
-						_this.video.paused = true;
-						break;
-					case 'play':
-						_this.video.player.playVideo();
-						_this.video.paused = false;
-						break;
-					case 'skipToLast10Secs':
-						_this.video.player.seekTo((_this.editing.song.duration - 10) + _this.editing.song.skipDuration);
-						break;
-				}
-			},
-			changeVolume: function() {
-				let local = this;
-				let volume = $("#volumeSlider").val();
-				localStorage.setItem("volume", volume);
-				local.video.player.setVolume(volume);
-				if (volume > 0) local.video.player.unMute();
-			},
 			toggleModal: function () {
 				this.isEditActive = !this.isEditActive;
-				this.settings('stop');
-			},
-			addTag: function (type) {
-				if (type == 'genres') {
-					let genre = $('#new-genre').val().toLowerCase().trim();
-					if (this.editing.song.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
-					if (genre) {
-						this.editing.song.genres.push(genre);
-						$('#new-genre').val('');
-					} else Toast.methods.addToast('Genre cannot be empty', 3000);
-				} else if (type == 'artists') {
-					let artist = $('#new-artist').val();
-					if (this.editing.song.artists.indexOf(artist) !== -1) return Toast.methods.addToast('Artist already exists', 3000);
-					if ($('#new-artist').val() !== '') {
-						this.editing.song.artists.push(artist);
-						$('#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) {
-				if (this.video.player) {
-					this.video.player.loadVideoById(song._id, this.editing.song.skipDuration);
-					let songCopy = {};
-					for (let n in song) {
-						songCopy[n] = song[n];
-					}
-					this.editing = { index, song: songCopy };
-					this.isEditActive = true;
-				}
-			},
-			save: function (song, close) {
-				let _this = this;
-				this.socket.emit('queueSongs.update', song._id, song, function (res) {
-					Toast.methods.addToast(res.message, 4000);
-					if (res.status === 'success') {
-						_this.songs.forEach((lSong) => {
-							if (song._id === lSong._id) {
-								for (let n in song) {
-									lSong[n] = song[n];
-								}
-							}
-						});
-					}
-					if (close) {
-						_this.toggleModal();
-					}
-				});
+				this.$broadcast('editSong', song, index, 'queueSongs');
 			},
 			add: function (song) {
 				this.socket.emit('songs.add', song, res => {
@@ -187,56 +102,6 @@
 					_this.init();
 				});
 			});
-
-			setInterval(() => {
-				if (_this.video.paused === false && _this.playerReady && _this.video.player.getCurrentTime() - _this.editing.song.skipDuration > _this.editing.song.duration) {
-					_this.video.paused = false;
-					_this.video.player.stopVideo();
-				}
-			}, 200);
-
-			this.video.player = new YT.Player('player', {
-				height: 315,
-				width: 560,
-				videoId: this.editing.song._id,
-				playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0 },
-				startSeconds: _this.editing.song.skipDuration,
-				events: {
-					'onReady': () => {
-						let volume = parseInt(localStorage.getItem("volume"));
-						volume = (typeof volume === "number") ? volume : 20;
-						_this.video.player.seekTo(_this.editing.song.skipDuration);
-						_this.video.player.setVolume(volume);
-						if (volume > 0) _this.video.player.unMute();
-						_this.playerReady = true;
-					},
-					'onStateChange': event => {
-						if (event.data === 1) {
-							_this.video.paused = false;
-							let youtubeDuration = _this.video.player.getDuration();
-							youtubeDuration -= _this.editing.song.skipDuration;
-							if (_this.editing.song.duration > youtubeDuration) {
-								this.video.player.stopVideo();
-								_this.video.paused = true;
-								Toast.methods.addToast("Video can't play. Specified duration is bigger than the YouTube song duration.", 4000);
-							} else if (_this.editing.song.duration <= 0) {
-								this.video.player.stopVideo();
-								_this.video.paused = true;
-								Toast.methods.addToast("Video can't play. Specified duration has to be more than 0 seconds.", 4000);
-							}
-
-							if (_this.video.player.getCurrentTime() < _this.editing.song.skipDuration) {
-								_this.video.player.seekTo(10);
-							}
-						} else if (event.data === 2) {
-							this.video.paused = true;
-						}
-					}
-				}
-			});
-			let volume = parseInt(localStorage.getItem("volume"));
-			volume = (typeof volume === "number") ? volume : 20;
-			$("#volumeSlider").val(volume);
 		}
 	}
 </script>

frontend/components/Admin/Songs.vue

@@ -66,84 +66,11 @@
 			}
 		},
 		methods: {
-			settings: function (type) {
-				let _this = this;
-				switch(type) {
-					case 'stop':
-						_this.video.player.stopVideo();
-						_this.video.paused = true;
-						break;
-					case 'pause':
-						_this.video.player.pauseVideo();
-						_this.video.paused = true;
-						break;
-					case 'play':
-						_this.video.player.playVideo();
-						_this.video.paused = false;
-						break;
-					case 'skipToLast10Secs':
-						_this.video.player.seekTo((_this.editing.song.duration - 10) + _this.editing.song.skipDuration);
-						break;
-				}
-			},
-			changeVolume: function() {
-				let local = this;
-				let volume = $("#volumeSlider").val();
-				localStorage.setItem("volume", volume);
-				local.video.player.setVolume(volume);
-				if (volume > 0) local.video.player.unMute();
-			},
 			toggleModal: function () {
 				this.isEditActive = !this.isEditActive;
-				this.settings('stop');
-			},
-			addTag: function (type) {
-				if (type == 'genres') {
-					let genre = $('#new-genre').val().toLowerCase().trim();
-					if (this.editing.song.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
-					if (genre) {
-						this.editing.song.genres.push(genre);
-						$('#new-genre').val('');
-					} else Toast.methods.addToast('Genre cannot be empty', 3000);
-				} else if (type == 'artists') {
-					let artist = $('#new-artist').val();
-					if (this.editing.song.artists.indexOf(artist) !== -1) return Toast.methods.addToast('Artist already exists', 3000);
-					if ($('#new-artist').val() !== '') {
-						this.editing.song.artists.push(artist);
-						$('#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) {
-				if (this.video.player) {
-					this.video.player.loadVideoById(song._id, this.editing.song.skipDuration);
-					let songCopy = {};
-					for (let n in song) {
-						songCopy[n] = song[n];
-					}
-					this.editing = { index, song: songCopy };
-					this.isEditActive = true;
-				}
-			},
-			save: function (song, close) {
-				let _this = this;
-				this.socket.emit('songs.update', song._id, song, function (res) {
-					Toast.methods.addToast(res.message, 4000);
-					if (res.status === 'success') {
-						_this.songs.forEach((lSong) => {
-							if (song._id === lSong._id) {
-								for (let n in song) {
-									lSong[n] = song[n];
-								}
-							}
-						});
-					}
-					if (close) _this.toggleModal();
-				});
+				this.$broadcast('editSong', song, index, 'songs');
 			},
 			remove: function (id, index) {
 				this.socket.emit('songs.remove', id, res => {
@@ -178,56 +105,6 @@
 					_this.init();
 				});
 			});
-
-			setInterval(() => {
-				if (_this.video.paused === false && _this.playerReady && _this.video.player.getCurrentTime() - _this.editing.song.skipDuration > _this.editing.song.duration) {
-					_this.video.paused = false;
-					_this.video.player.stopVideo();
-				}
-			}, 200);
-
-			this.video.player = new YT.Player('player', {
-				height: 315,
-				width: 560,
-				videoId: this.editing.song._id,
-				playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0 },
-				startSeconds: _this.editing.song.skipDuration,
-				events: {
-					'onReady': () => {
-						let volume = parseInt(localStorage.getItem("volume"));
-						volume = (typeof volume === "number") ? volume : 20;
-						_this.video.player.seekTo(_this.editing.song.skipDuration);
-						_this.video.player.setVolume(volume);
-						if (volume > 0) _this.video.player.unMute();
-						_this.playerReady = true;
-					},
-					'onStateChange': event => {
-						if (event.data === 1) {
-							_this.video.paused = false;
-							let youtubeDuration = _this.video.player.getDuration();
-							youtubeDuration -= _this.editing.song.skipDuration;
-							if (_this.editing.song.duration > youtubeDuration) {
-								this.video.player.stopVideo();
-								_this.video.paused = true;
-								Toast.methods.addToast("Video can't play. Specified duration is bigger than the YouTube song duration.", 4000);
-							} else if (_this.editing.song.duration <= 0) {
-								this.video.player.stopVideo();
-								_this.video.paused = true;
-								Toast.methods.addToast("Video can't play. Specified duration has to be more than 0 seconds.", 4000);
-							}
-
-							if (_this.video.player.getCurrentTime() < _this.editing.song.skipDuration) {
-								_this.video.player.seekTo(10);
-							}
-						} else if (event.data === 2) {
-							this.video.paused = true;
-						}
-					}
-				}
-			});
-			let volume = parseInt(localStorage.getItem("volume"));
-			volume = (typeof volume === "number") ? volume : 20;
-			$("#volumeSlider").val(volume);
 		}
 	}
 </script>

frontend/components/Modals/EditSong.vue

@@ -10,34 +10,34 @@
 					<div class="controls">
 						<form action="#" class="column is-7-desktop is-4-mobile">
 							<p style="margin-top: 0; position: relative;">
-								<input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="$parent.changeVolume()" v-on:input="$parent.changeVolume()">
+								<input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
 							</p>
 						</form>
 						<p class='control has-addons'>
-							<button class='button' @click='$parent.settings("pause")' v-if='!$parent.video.paused'>
+							<button class='button' @click='settings("pause")' v-if='!video.paused'>
 								<i class='material-icons'>pause</i>
 							</button>
-							<button class='button' @click='$parent.settings("play")' v-if='$parent.video.paused'>
+							<button class='button' @click='settings("play")' v-if='video.paused'>
 								<i class='material-icons'>play_arrow</i>
 							</button>
-							<button class='button' @click='$parent.settings("stop")'>
+							<button class='button' @click='settings("stop")'>
 								<i class='material-icons'>stop</i>
 							</button>
-							<button class='button' @click='$parent.settings("skipToLast10Secs")'>
+							<button class='button' @click='settings("skipToLast10Secs")'>
 								<i class='material-icons'>fast_forward</i>
 							</button>
 						</p>
 					</div>
 				</div>
 				<h5 class='has-text-centered'>Thumbnail Preview</h5>
-				<img class='thumbnail-preview' :src='$parent.editing.song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
+				<img class='thumbnail-preview' :src='editing.song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
 
 				<div class="control is-horizontal">
 					<div class="control-label">
 						<label class="label">Thumbnail URL</label>
 					</div>
 					<div class="control">
-						<input class='input' type='text' v-model='$parent.editing.song.thumbnail'>
+						<input class='input' type='text' v-model='editing.song.thumbnail'>
 					</div>
 				</div>
 
@@ -45,7 +45,7 @@
 
 				<p class='control'>
 					<label class='checkbox'>
-						<input type='checkbox' v-model='$parent.editing.song.explicit'>
+						<input type='checkbox' v-model='editing.song.explicit'>
 						Explicit
 					</label>
 				</p>
@@ -53,10 +53,10 @@
 				<div class="control is-horizontal">
 					<div class="control is-grouped">
 						<p class='control is-expanded'>
-							<input class='input' type='text' v-model='$parent.editing.song._id'>
+							<input class='input' type='text' v-model='editing.song._id'>
 						</p>
 						<p class='control is-expanded'>
-							<input class='input' type='text' v-model='$parent.editing.song.title' autofocus>
+							<input class='input' type='text' v-model='editing.song.title' autofocus>
 						</p>
 					</div>
 				</div>
@@ -68,7 +68,7 @@
 								<input class='input' id='new-artist' type='text' placeholder='Artist'>
 								<button class='button is-info' @click='$parent.addTag("artists")'>Add Artist</button>
 							</p>
-							<span class='tag is-info' v-for='(index, artist) in $parent.editing.song.artists' track-by='$index'>
+							<span class='tag is-info' v-for='(index, artist) in editing.song.artists' track-by='$index'>
 								{{ artist }}
 								<button class='delete is-info' @click='$parent.$parent.removeTag("artists", index)'></button>
 							</span>
@@ -78,7 +78,7 @@
 								<input class='input' id='new-genre' type='text' placeholder='Genre'>
 								<button class='button is-info' @click='$parent.addTag("genres")'>Add Genre</button>
 							</p>
-							<span class='tag is-info' v-for='(index, genre) in $parent.editing.song.genres' track-by='$index'>
+							<span class='tag is-info' v-for='(index, genre) in editing.song.genres' track-by='$index'>
 								{{ genre }}
 								<button class='delete is-info' @click='$parent.$parent.removeTag("genres", index)'></button>
 							</span>
@@ -87,20 +87,20 @@
 				</div>
 				<label class='label'>Song Duration</label>
 				<p class='control'>
-					<input class='input' type='text' v-model='$parent.editing.song.duration'>
+					<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='$parent.editing.song.skipDuration'>
+					<input class='input' type='text' v-model='editing.song.skipDuration'>
 				</p>
 
 			</section>
 			<footer class='modal-card-foot'>
-				<button class='button is-success' @click='$parent.save($parent.editing.song, false)'>
+				<button class='button is-success' @click='save(editing.song, false)'>
 					<i class='material-icons save-changes'>done</i>
 					<span>&nbsp;Save</span>
 				</button>
-				<button class='button is-success' @click='$parent.save($parent.editing.song, true)'>
+				<button class='button is-success' @click='save(editing.song, true)'>
 					<i class='material-icons save-changes'>done</i>
 					<span>&nbsp;Save and close</span>
 				</button>
@@ -113,19 +113,166 @@
 </template>
 
 <script>
+	import io from '../../io';
+	import { Toast } from 'vue-roaster';
+
 	export default {
+		data() {
+			return {
+				editing: {
+					index: 0,
+					song: {},
+					type: ''
+				},
+				video: {
+					player: null,
+					paused: false,
+					playerReady: false
+				}
+			}
+		},
 		methods: {
-			toggleModal: function () {
-				this.$dispatch('toggleModal', 'login');
+			save: function (song, close) {
+				let _this = this;
+				this.socket.emit(`${_this.editing.type}.update`, song._id, song, res => {
+					Toast.methods.addToast(res.message, 4000);
+					if (res.status === 'success') {
+						_this.$parent.songs.forEach(lSong => {
+							if (song._id === lSong._id) {
+								for (let n in song) {
+									lSong[n] = song[n];
+								}
+							}
+						});
+					}
+					if (close) _this.$parent.toggleModal();
+				});
+			},
+			settings: function (type) {
+				let _this = this;
+				switch(type) {
+					case 'stop':
+						_this.video.player.stopVideo();
+						_this.video.paused = true;
+						break;
+					case 'pause':
+						_this.video.player.pauseVideo();
+						_this.video.paused = true;
+						break;
+					case 'play':
+						_this.video.player.playVideo();
+						_this.video.paused = false;
+						break;
+					case 'skipToLast10Secs':
+						_this.video.player.seekTo((_this.editing.song.duration - 10) + _this.editing.song.skipDuration);
+						break;
+				}
+			},
+			changeVolume: function () {
+				let local = this;
+				let volume = $("#volumeSlider").val();
+				localStorage.setItem("volume", volume);
+				local.video.player.setVolume(volume);
+				if (volume > 0) local.video.player.unMute();
+			},
+			addTag: function (type) {
+				if (type == 'genres') {
+					let genre = $('#new-genre').val().toLowerCase().trim();
+					if (this.editing.song.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
+					if (genre) {
+						this.editing.song.genres.push(genre);
+						$('#new-genre').val('');
+					} else Toast.methods.addToast('Genre cannot be empty', 3000);
+				} else if (type == 'artists') {
+					let artist = $('#new-artist').val();
+					if (this.editing.song.artists.indexOf(artist) !== -1) return Toast.methods.addToast('Artist already exists', 3000);
+					if ($('#new-artist').val() !== '') {
+						this.editing.song.artists.push(artist);
+						$('#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);
 			},
-			submitModal: function () {
-				this.$dispatch('login');
-				this.toggleModal();
-			}
+		},
+		ready: function () {
+
+			let _this = this;
+
+			io.getSocket(socket => {
+				_this.socket = socket;
+			});
+			
+			setInterval(() => {
+				if (_this.video.paused === false && _this.playerReady && _this.video.player.getCurrentTime() - _this.editing.song.skipDuration > _this.editing.song.duration) {
+					_this.video.paused = false;
+					_this.video.player.stopVideo();
+				}
+			}, 200);
+
+			this.video.player = new YT.Player('player', {
+				height: 315,
+				width: 560,
+				videoId: this.editing.song._id,
+				playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0 },
+				startSeconds: _this.editing.song.skipDuration,
+				events: {
+					'onReady': () => {
+						let volume = parseInt(localStorage.getItem("volume"));
+						volume = (typeof volume === "number") ? volume : 20;
+						_this.video.player.seekTo(_this.editing.song.skipDuration);
+						_this.video.player.setVolume(volume);
+						if (volume > 0) _this.video.player.unMute();
+						_this.playerReady = true;
+					},
+					'onStateChange': event => {
+						if (event.data === 1) {
+							_this.video.paused = false;
+							let youtubeDuration = _this.video.player.getDuration();
+							youtubeDuration -= _this.editing.song.skipDuration;
+							if (_this.editing.song.duration > youtubeDuration) {
+								this.video.player.stopVideo();
+								_this.video.paused = true;
+								Toast.methods.addToast("Video can't play. Specified duration is bigger than the YouTube song duration.", 4000);
+							} else if (_this.editing.song.duration <= 0) {
+								this.video.player.stopVideo();
+								_this.video.paused = true;
+								Toast.methods.addToast("Video can't play. Specified duration has to be more than 0 seconds.", 4000);
+							}
+
+							if (_this.video.player.getCurrentTime() < _this.editing.song.skipDuration) {
+								_this.video.player.seekTo(10);
+							}
+						} else if (event.data === 2) {
+							this.video.paused = true;
+						}
+					}
+				}
+			});
+
+			let volume = parseInt(localStorage.getItem("volume"));
+			volume = (typeof volume === "number") ? volume : 20;
+			$("#volumeSlider").val(volume);
+			
 		},
 		events: {
-			closeModal: function() {
+			closeModal: function () {
 				this.$parent.toggleModal()
+			},
+			editSong: function (song, index, type) {
+				if (this.video.player) {
+					this.video.player.loadVideoById(song._id, this.editing.song.skipDuration);
+					let newSong = {};
+					for (let n in song) { newSong[n] = song[n]; }
+					this.editing = {
+						index,
+						song: newSong,
+						type
+					};
+					this.$parent.isEditActive = true;
+				}
 			}
 		}
 	}