Refactored EditSong.vue to use new Modal system

frontend/components/Admin/QueueSongs.vue

@@ -35,7 +35,7 @@
 			</tbody>
 		</table>
 	</div>
-	<edit-song v-show='isEditActive'></edit-song>
+	<edit-song v-show='modals.editSong'></edit-song>
 </template>
 
 <script>
@@ -50,7 +50,7 @@
 			return {
 				searchQuery: '',
 				songs: [],
-				isEditActive: false
+				modals: { editSong: false }
 			}
 		},
 		computed: {
@@ -60,7 +60,7 @@
 		},
 		methods: {
 			toggleModal: function () {
-				this.isEditActive = !this.isEditActive;
+				this.modals.editSong = !this.modals.editSong;
 			},
 			edit: function (song, index) {
 				this.$broadcast('editSong', song, index, 'queueSongs');

frontend/components/Admin/Songs.vue

@@ -34,7 +34,7 @@
 			</tbody>
 		</table>
 	</div>
-	<edit-song v-show='isEditActive'></edit-song>
+	<edit-song v-show='modals.editSong'></edit-song>
 </template>
 
 <script>
@@ -48,7 +48,7 @@
 		data() {
 			return {
 				songs: [],
-				isEditActive: false,
+				modals: { editSong: false },
 				editing: {
 					index: 0,
 					song: {}
@@ -67,10 +67,10 @@
 		},
 		methods: {
 			toggleModal: function () {
-				this.isEditActive = !this.isEditActive;
+				this.modals.editSong = !this.modals.editSong;
 			},
 			edit: function (song, index) {
-				this.$broadcast('editSong', song, index, 'songs');
+				this.$broadcast('editSong', song, index, 'queueSongs');
 			},
 			remove: function (id, index) {
 				this.socket.emit('songs.remove', id, res => {

frontend/components/Modals/EditSong.vue

@@ -1,9 +1,7 @@
 <template>
-	<div class='modal is-active'>
-		<div class='modal-background'></div>
-		<div class='modal-card'>
-			<section class='modal-card-body'>
-
+	<div>
+		<modal title='Edit Song'>
+			<div slot='body'>
 				<h5 class='has-text-centered'>Video Preview</h5>
 				<div class='video-container'>
 					<div id='player'></div>
@@ -93,9 +91,8 @@
 				<p class='control'>
 					<input class='input' type='text' v-model='editing.song.skipDuration'>
 				</p>
-
-			</section>
-			<footer class='modal-card-foot'>
+			</div>
+			<div slot='footer'>
 				<button class='button is-success' @click='save(editing.song, false)'>
 					<i class='material-icons save-changes'>done</i>
 					<span>&nbsp;Save</span>
@@ -107,16 +104,18 @@
 				<button class='button is-danger' @click='$parent.toggleModal()'>
 					<span>&nbsp;Close</span>
 				</button>
-			</footer>
-		</div>
+			</div>
+		</modal>
 	</div>
 </template>
 
 <script>
 	import io from '../../io';
 	import { Toast } from 'vue-roaster';
+	import Modal from './Modal.vue';
 
 	export default {
+		components: { Modal },
 		data() {
 			return {
 				editing: {
@@ -259,20 +258,20 @@
 		},
 		events: {
 			closeModal: function () {
-				this.$parent.toggleModal()
+				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;
+				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.toggleModal();
 			}
 		}
 	}