refactor(Station): Replaced autoPause with common autoSkipVote and toasts

frontend/src/pages/Station/index.vue

@@ -121,8 +121,6 @@ const stationIdentifier = ref();
 const playerDebugBox = ref();
 const keyboardShortcutsHelper = ref();
 
-const autoPaused = ref(false);
-
 const modalsStore = useModalsStore();
 const { activeModals } = storeToRefs(modalsStore);
 
@@ -184,7 +182,7 @@ const stationState = computed(() => {
 		experimentalChangableListenMode.value === "participate"
 	)
 		return "participate";
-	if (localPaused.value || autoPaused.value) return "local_paused";
+	if (localPaused.value) return "local_paused";
 	if (volumeSliderValue.value === 0 || muted.value) return "muted";
 	if (youtubePlayerReady.value && youtubePlayerState.value === "PLAYING")
 		return "playing";
@@ -268,7 +266,7 @@ const updateMediaSessionData = song => {
 	if (song) {
 		ms.setMediaSessionData(
 			0,
-			!localPaused.value && !stationPaused.value && !autoPaused.value, // This should be improved later
+			!localPaused.value && !stationPaused.value, // This should be improved later
 			song.title,
 			song.artists ? song.artists.join(", ") : null,
 			null,
@@ -485,12 +483,7 @@ const calculateTimeElapsed = async () => {
 		}
 	}
 
-	if (
-		!stationPaused.value &&
-		!localPaused.value &&
-		!autoPaused.value &&
-		!isApple.value
-	) {
+	if (!stationPaused.value && !localPaused.value && !isApple.value) {
 		const timeElapsed = getTimeElapsed();
 		const currentPlayerTime = await getCurrentPlayerTime();
 
@@ -623,8 +616,6 @@ const playerStop = () => {
 		youtubePlayer.value.stopVideo();
 	}
 
-	autoPaused.value = false;
-
 	soundcloudDestroy();
 };
 const toggleSkipVote = (message?) => {
@@ -636,6 +627,44 @@ const toggleSkipVote = (message?) => {
 			);
 	});
 };
+const autoSkipVote = () => {
+	if (
+		!(localPaused.value || stationPaused.value) &&
+		!currentSong.value.voted
+	) {
+		// automatically vote to skip
+		toggleSkipVote(
+			"Automatically voted to skip as this song isn't available for you."
+		);
+	}
+
+	// persistent message while song is playing
+	const persistentToast = new Toast({
+		content:
+			"This song is unavailable for you, but is playing for everyone else.",
+		persistent: true
+	});
+
+	// save current song id
+	const erroredMediaSource = currentSong.value.mediaSource;
+
+	const self = {
+		toast: persistentToast,
+		checkIfCanRemove: () => {
+			if (currentSong.value.mediaSource !== erroredMediaSource) {
+				persistentToast.destroy();
+				persistentToasts.value.splice(
+					persistentToasts.value.indexOf(self),
+					1
+				);
+				return true;
+			}
+			return false;
+		}
+	};
+
+	persistentToasts.value.push(self);
+};
 const resumeLocalPlayer = () => {
 	if (experimental.value.media_session)
 		updateMediaSessionData(currentSong.value);
@@ -646,7 +675,6 @@ const resumeLocalPlayer = () => {
 };
 const resumeLocalStation = () => {
 	updateLocalPaused(false);
-	autoPaused.value = false;
 	if (!stationPaused.value) resumeLocalPlayer();
 };
 const pauseLocalPlayer = () => {
@@ -709,50 +737,7 @@ const youtubeReady = () => {
 					console.log("error with youtube video", err);
 
 					if (err.data === 150 && loggedIn.value) {
-						if (
-							!(
-								localPaused.value ||
-								stationPaused.value ||
-								autoPaused.value
-							) &&
-							!currentSong.value.voted
-						) {
-							// automatically vote to skip
-							toggleSkipVote(
-								"Automatically voted to skip as this song isn't available for you."
-							);
-						}
-
-						// persistent message while song is playing
-						const persistentToast = new Toast({
-							content:
-								"This song is unavailable for you, but is playing for everyone else.",
-							persistent: true
-						});
-
-						// save current song id
-						const erroredMediaSource =
-							currentSong.value.mediaSource;
-
-						const self = {
-							toast: persistentToast,
-							checkIfCanRemove: () => {
-								if (
-									currentSong.value.mediaSource !==
-									erroredMediaSource
-								) {
-									persistentToast.destroy();
-									persistentToasts.value.splice(
-										persistentToasts.value.indexOf(self),
-										1
-									);
-									return true;
-								}
-								return false;
-							}
-						};
-
-						persistentToasts.value.push(self);
+						autoSkipVote();
 					} else {
 						new Toast(
 							"There has been an error with the YouTube Embed"
@@ -973,11 +958,7 @@ const setCurrentSong = data => {
 						if (
 							autoSkipDisliked.value &&
 							res.data.disliked === true &&
-							!(
-								localPaused.value ||
-								stationPaused.value ||
-								autoPaused.value
-							) &&
+							!(localPaused.value || stationPaused.value) &&
 							!currentSong.value.voted
 						) {
 							toggleSkipVote(
@@ -1085,7 +1066,6 @@ const resetKeyboardShortcutsHelper = () => {
 const sendActivityWatchMediaData = () => {
 	// TODO have this support soundcloud
 	if (
-		!autoPaused.value &&
 		!stationPaused.value &&
 		(!localPaused.value ||
 			experimentalChangableListenMode.value === "participate") &&
@@ -1173,8 +1153,6 @@ const experimentalChangableListenModeChange = newMode => {
 			youtubePlayerState.value = null;
 		}
 
-		autoPaused.value = false;
-
 		soundcloudDestroy();
 	} else {
 		// Recreate the YouTube player
@@ -1824,16 +1802,22 @@ onMounted(async () => {
 
 		if (
 			newState === "attempting_to_play" ||
-			newState === "failed_to_play"
+			newState === "failed_to_play" ||
+			newState === "sound_unavailable"
 		) {
 			if (currentSongMediaType.value !== "soundcloud") return;
-			if (!localPaused.value && !stationPaused.value) {
-				if (newState === "failed_to_play")
-					new Toast(
-						"Failed to start SoundCloud player. Please try to manually start it."
-					);
-
-				autoPaused.value = true;
+			if (newState === "failed_to_play") {
+				new Toast(
+					"Failed to start SoundCloud player. Please try to manually start it."
+				);
+			} else if (newState === "sound_unavailable") {
+				if (!localPaused.value && !stationPaused.value) {
+					if (loggedIn.value) autoSkipVote();
+					else
+						new Toast(
+							"This song is unavailable for you, but is playing for everyone else."
+						);
+				}
 			}
 		} else if (newState === "paused") {
 			if (currentSongMediaType.value !== "soundcloud") return;
@@ -1846,10 +1830,6 @@ onMounted(async () => {
 				return;
 			}
 
-			if (autoPaused.value) {
-				autoPaused.value = false;
-			}
-
 			if (localPaused.value) resumeLocalStation();
 
 			if (stationPaused.value) {
@@ -1861,7 +1841,9 @@ onMounted(async () => {
 					1000
 			);
 		} else if (newState === "error") {
-			autoPaused.value = true;
+			new Toast(
+				"Failed to start SoundCloud player. Please try to manually start it."
+			);
 		}
 	});
 
@@ -2374,7 +2356,7 @@ onBeforeUnmount(() => {
 										class="button is-primary"
 										@click="resumeLocalStation()"
 										id="local-resume"
-										v-if="localPaused || autoPaused"
+										v-if="localPaused"
 										content="Unpause Playback"
 										v-tippy
 									>
@@ -2763,7 +2745,6 @@ onBeforeUnmount(() => {
 				<span><b>Time elapsed</b>: {{ timeElapsed }}</span>
 				<span><b>Volume slider value</b>: {{ volumeSliderValue }}</span>
 				<span><b>Local paused</b>: {{ localPaused }}</span>
-				<span><b>Auto paused</b>: {{ autoPaused }}</span>
 				<span><b>Station paused</b>: {{ stationPaused }}</span>
 				<span :title="new Date(pausedAt).toString()"
 					><b>Paused at</b>: {{ pausedAt }}</span