refactor: re-enabled and fixed station pausing when a media modal is playing

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

@@ -19,6 +19,7 @@ import { Song } from "@/types/song.js";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 import { useEditSongStore } from "@/stores/editSong";
+import { useStationStore } from "@/stores/station";
 
 const FloatingBox = defineAsyncComponent(
 	() => import("@/components/FloatingBox.vue")
@@ -55,6 +56,7 @@ const emit = defineEmits([
 ]);
 
 const editSongStore = useEditSongStore(props);
+const stationStore = useStationStore();
 const { socket } = useWebsocketsStore();
 
 const modalsStore = useModalsStore();
@@ -203,6 +205,8 @@ const {
 	setPlaybackRate
 } = editSongStore;
 
+const { updateMediaModalPlayingAudio } = stationStore;
+
 const showTab = payload => {
 	if (tabs.value[`${payload}-tab`])
 		tabs.value[`${payload}-tab`].scrollIntoView({ block: "nearest" });
@@ -336,6 +340,7 @@ const unloadSong = (_youtubeId, songId?) => {
 	songDeleted.value = false;
 	stopVideo();
 	pauseVideo(true);
+	updateMediaModalPlayingAudio(false);
 	resetSong(_youtubeId);
 	thumbnailNotSquare.value = false;
 	thumbnailWidth.value = null;
@@ -427,6 +432,7 @@ const drawCanvas = () => {
 
 const seekTo = position => {
 	pauseVideo(false);
+	updateMediaModalPlayingAudio(true);
 	video.value.player.seekTo(position);
 };
 
@@ -464,6 +470,7 @@ const init = () => {
 		) {
 			stopVideo();
 			pauseVideo(true);
+			updateMediaModalPlayingAudio(false);
 			drawCanvas();
 		}
 		if (
@@ -600,6 +607,7 @@ const init = () => {
 							if (song.value.duration > youtubeDuration + 1) {
 								stopVideo();
 								pauseVideo(true);
+								updateMediaModalPlayingAudio(false);
 								return new Toast(
 									"Video can't play. Specified duration is bigger than the YouTube song duration."
 								);
@@ -607,6 +615,7 @@ const init = () => {
 							if (song.value.duration <= 0) {
 								stopVideo();
 								pauseVideo(true);
+								updateMediaModalPlayingAudio(false);
 								return new Toast(
 									"Video can't play. Specified duration has to be more than 0 seconds."
 								);
@@ -951,16 +960,20 @@ const settings = type => {
 		case "stop":
 			stopVideo();
 			pauseVideo(true);
+			updateMediaModalPlayingAudio(false);
 			break;
 		case "hardStop":
 			hardStopVideo();
 			pauseVideo(true);
+			updateMediaModalPlayingAudio(false);
 			break;
 		case "pause":
 			pauseVideo(true);
+			updateMediaModalPlayingAudio(false);
 			break;
 		case "play":
 			pauseVideo(false);
+			updateMediaModalPlayingAudio(true);
 			break;
 		case "skipToLast10Secs":
 			seekTo(song.value.duration - 10 + song.value.skipDuration);

frontend/src/components/modals/ViewYoutubeVideo.vue

@@ -7,6 +7,7 @@ import ws from "@/ws";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 import { useViewYoutubeVideoStore } from "@/stores/viewYoutubeVideo";
+import { useStationStore } from "@/stores/station";
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
@@ -22,6 +23,7 @@ const activityWatchVideoLastStatus = ref("");
 const activityWatchVideoLastStartDuration = ref(0);
 
 const viewYoutubeVideoStore = useViewYoutubeVideoStore(props);
+const stationStore = useStationStore();
 const { videoId, youtubeId, video, player } = storeToRefs(
 	viewYoutubeVideoStore
 );
@@ -33,6 +35,7 @@ const {
 	setPlaybackRate,
 	viewYoutubeVideo
 } = viewYoutubeVideoStore;
+const { updateMediaModalPlayingAudio } = stationStore;
 
 const { openModal, closeCurrentModal } = useModalsStore();
 
@@ -70,6 +73,7 @@ const confirmAction = ({ message, action }) => {
 
 const seekTo = position => {
 	pauseVideo(false);
+	updateMediaModalPlayingAudio(true);
 	player.value.player.seekTo(position);
 };
 
@@ -78,12 +82,15 @@ const settings = type => {
 		case "stop":
 			stopVideo();
 			pauseVideo(true);
+			updateMediaModalPlayingAudio(false);
 			break;
 		case "pause":
 			pauseVideo(true);
+			updateMediaModalPlayingAudio(false);
 			break;
 		case "play":
 			pauseVideo(false);
+			updateMediaModalPlayingAudio(true);
 			break;
 		case "skipToLast10Secs":
 			seekTo(Number(player.value.duration) - 10);
@@ -230,6 +237,7 @@ const init = () => {
 					) {
 						stopVideo();
 						pauseVideo(true);
+						updateMediaModalPlayingAudio(false);
 						drawCanvas();
 					}
 					if (
@@ -383,6 +391,7 @@ const init = () => {
 										) {
 											stopVideo();
 											pauseVideo(true);
+											updateMediaModalPlayingAudio(false);
 											return new Toast(
 												"Video can't play. Specified duration is bigger than the YouTube song duration."
 											);
@@ -390,6 +399,7 @@ const init = () => {
 										if (video.value.duration <= 0) {
 											stopVideo();
 											pauseVideo(true);
+											updateMediaModalPlayingAudio(false);
 											return new Toast(
 												"Video can't play. Specified duration has to be more than 0 seconds."
 											);
@@ -448,6 +458,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	stopVideo();
 	pauseVideo(true);
+	updateMediaModalPlayingAudio(false);
 	player.value.duration = "0.000";
 	player.value.currentTime = 0;
 	player.value.playerReady = false;

frontend/src/pages/Station/index.vue

@@ -76,8 +76,9 @@ const activityWatchVideoLastStatus = ref("");
 const activityWatchVideoLastYouTubeId = ref("");
 // const activityWatchVideoLastStartDuration = ref("");
 const nextCurrentSong = ref(null);
-// const editSongModalWatcher = ref(null);
-// const beforeEditSongModalLocalPaused = ref(null);
+const mediaModalWatcher = ref(null);
+const beforeMediaModalLocalPausedLock = ref(false);
+const beforeMediaModalLocalPaused = ref(null);
 const socketConnected = ref(null);
 const persistentToastCheckerInterval = ref(null);
 const persistentToasts = ref([]);
@@ -1072,30 +1073,22 @@ watch(
 );
 
 onMounted(async () => {
-	// TODO
-	// editSongModalWatcher.value = store.watch(
-	// 	state =>
-	// 		state.modalVisibility.activeModals.length > 0 &&
-	// 		state.modalVisibility.modals[
-	// 			state.modalVisibility.activeModals[
-	// 				state.modalVisibility.activeModals.length - 1
-	// 			]
-	// 		] === "editSong"
-	// 			? state.modals.editSong[
-	// 					state.modalVisibility.activeModals[
-	// 						state.modalVisibility.activeModals.length - 1
-	// 					]
-	// 			  ].video.paused
-	// 			: null,
-	// 	paused => {
-	// 		if (paused && !beforeEditSongModalLocalPaused.value) {
-	// 			resumeLocalStation();
-	// 		} else if (!paused) {
-	// 			beforeEditSongModalLocalPaused.value = localPaused.value;
-	// 			pauseLocalStation();
-	// 		}
-	// 	}
-	// );
+	mediaModalWatcher.value = stationStore.$onAction(({ name, args }) => {
+		if (name === "updateMediaModalPlayingAudio") {
+			const [mediaModalPlayingAudio] = args;
+
+			if (mediaModalPlayingAudio) {
+				if (!beforeMediaModalLocalPausedLock.value) {
+					beforeMediaModalLocalPausedLock.value = true;
+					beforeMediaModalLocalPaused.value = localPaused.value;
+					pauseLocalStation();
+				}
+			} else {
+				beforeMediaModalLocalPausedLock.value = false;
+				if (!beforeMediaModalLocalPaused.value) resumeLocalStation();
+			}
+		}
+	});
 
 	window.scrollTo(0, 0);
 
@@ -1377,7 +1370,7 @@ onBeforeUnmount(() => {
 		keyboardShortcuts.unregisterShortcut(shortcutName);
 	});
 
-	// editSongModalWatcher.value(); // removes the watcher
+	mediaModalWatcher.value(); // removes the watcher
 
 	clearInterval(activityWatchVideoDataInterval.value);
 	clearTimeout(window.stationNextSongTimeout);

frontend/src/stores/station.ts

@@ -22,7 +22,8 @@ export const useStationStore = defineStore("station", {
 		localPaused: false,
 		noSong: true,
 		autofill: <Playlist[]>[],
-		blacklist: <Playlist[]>[]
+		blacklist: <Playlist[]>[],
+		mediaModalPlayingAudio: false
 	}),
 	actions: {
 		joinStation(station) {
@@ -127,6 +128,9 @@ export const useStationStore = defineStore("station", {
 					this.autoRequest.splice(index, 1);
 				}
 			});
+		},
+		updateMediaModalPlayingAudio(mediaModalPlayingAudio) {
+			this.mediaModalPlayingAudio = mediaModalPlayingAudio;
 		}
 	}
 });