refactor: cleaned up EditSong and EditSongs a little bit, fixed small issues

frontend/src/components/modals/EditSong/index.vue

@@ -658,6 +658,7 @@ export default {
 		}
 	},
 	async mounted() {
+		console.log("MOUNTED");
 		this.activityWatchVideoDataInterval = setInterval(() => {
 			this.sendActivityWatchVideoData();
 		}, 1000);
@@ -860,15 +861,13 @@ export default {
 		*/
 	},
 	beforeUnmount() {
+		console.log("UNMOUNT");
 		this.unloadSong(this.songId);
 
-		// this.video.player.stopVideo();
 		this.playerReady = false;
 		clearInterval(this.interval);
 		clearInterval(this.activityWatchVideoDataInterval);
 
-		// this.socket.dispatch("apis.leaveRoom", `edit-song.${this.song._id}`);
-
 		const shortcutNames = [
 			"editSong.pauseResume",
 			"editSong.stopVideo",
@@ -963,10 +962,6 @@ export default {
 							this.video.player.setVolume(volume);
 							if (volume > 0) this.video.player.unMute();
 
-							// const duration = this.video.player.getDuration();
-
-							// this.youtubeVideoDuration = duration.toFixed(3);
-							// this.youtubeVideoNote = "(~)";
 							this.playerReady = true;
 
 							if (this.song && this.song._id)
@@ -1087,7 +1082,7 @@ export default {
 			this.songDataLoaded = false;
 			if (this.video.player && this.video.player.stopVideo)
 				this.video.player.stopVideo();
-			// this.resetSong(songId);
+			this.resetSong(songId);
 			this.youtubeVideoCurrentTime = "0.000";
 			this.youtubeVideoDuration = "0.000";
 			this.socket.dispatch("apis.leaveRoom", `edit-song.${songId}`);
@@ -1096,52 +1091,33 @@ export default {
 		loadSong(songId) {
 			console.log(`LOAD SONG ${songId}`);
 			this.songNotFound = false;
-			this.socket.dispatch(
-				`songs.getSongFromSongId`,
-				songId, // Was this.song._id
-				res => {
-					if (res.status === "success") {
-						let { song } = res.data;
-
-						song = Object.assign(song, this.prefillData);
-
-						this.setSong(song);
-
-						this.songDataLoaded = true;
-
-						this.socket.dispatch(
-							"apis.joinRoom",
-							`edit-song.${this.song._id}`
-						);
+			this.socket.dispatch(`songs.getSongFromSongId`, songId, res => {
+				if (res.status === "success") {
+					let { song } = res.data;
 
-						// console.log(this.video.player);
-						// console.log(this.video.player.loadVideoById);
+					song = Object.assign(song, this.prefillData);
 
-						if (
-							this.video.player &&
-							this.video.player.cueVideoById
-						) {
-							this.video.player.cueVideoById(
-								this.song.youtubeId,
-								this.song.skipDuration
-							);
+					this.setSong(song);
 
-							// const duration = this.video.player.getDuration();
+					this.songDataLoaded = true;
 
-							// if (duration !== undefined) {
-							// 	this.youtubeVideoDuration = duration.toFixed(3);
-							// 	this.youtubeVideoNote = "(~)";
+					this.socket.dispatch(
+						"apis.joinRoom",
+						`edit-song.${this.song._id}`
+					);
 
-							// 	this.drawCanvas();
-							// }
-						}
-					} else {
-						new Toast("Song with that ID not found");
-						if (this.bulk) this.songNotFound = true;
-						if (!this.bulk) this.closeModal("editSong");
+					if (this.video.player && this.video.player.cueVideoById) {
+						this.video.player.cueVideoById(
+							this.song.youtubeId,
+							this.song.skipDuration
+						);
 					}
+				} else {
+					new Toast("Song with that ID not found");
+					if (this.bulk) this.songNotFound = true;
+					if (!this.bulk) this.closeModal("editSong");
 				}
-			);
+			});
 
 			this.socket.dispatch(
 				"reports.getReportsForSong",

frontend/src/components/modals/EditSongs.vue

@@ -198,7 +198,6 @@
 </template>
 
 <script>
-// eslint-disable-next-line no-unused-vars
 import { mapState, mapActions, mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
@@ -312,9 +311,6 @@ export default {
 				prefill: this.songPrefillData[song._id]
 			});
 			this.currentSong = song;
-			// this.items[
-			// 	this.items.findIndex(item => item.song._id === song._id)
-			// ].status = "editing";
 		},
 		editNextSong() {
 			const currentlyEditingSongIndex = this.filteredEditingItemIndex;

frontend/src/pages/Admin/tabs/Songs.vue

@@ -274,7 +274,7 @@
 			</advanced-table>
 		</div>
 		<import-album v-if="modals.importAlbum" />
-		<edit-song v-if="modals.editSong" song-type="songs" :key="song._id" />
+		<edit-song v-if="modals.editSong" song-type="songs" />
 		<edit-songs v-if="modals.editSongs" />
 		<report v-if="modals.report" />
 		<request-song v-if="modals.requestSong" />

frontend/src/store/modules/modals/editSong.js

@@ -62,13 +62,10 @@ export default {
 			state.originalSong = JSON.parse(JSON.stringify(song));
 		},
 		resetSong(state, songId) {
-			state.originalSong = {};
-			state.song = {};
-			if (state.songId === songId) this.songId = "";
-
-			// if (state.originalSong._id === songId) state.originalSong = {};
-			// if (state.song._id === songId) state.song = {};
-			// if (state.songId === songId) this.songId = "";
+			if (state.songId === songId) state.songId = "";
+			if (state.song && state.song._id === songId) state.song = {};
+			if (state.originalSong && state.originalSong._id === songId)
+				state.originalSong = {};
 		},
 		stopVideo(state) {
 			state.video.player.stopVideo();