feat: finished SoundCloud player initial implementation on station page

frontend/src/composables/useSoundcloudPlayer.ts

@@ -1,6 +1,12 @@
 import { ref, watch } from "vue";
 
+const TAG = "[USP]";
+
+const soundcloudDomain = "https://w.soundcloud.com";
+
 export const useSoundcloudPlayer = () => {
+	console.debug(TAG, "Init start");
+
 	const soundcloudIframeElement = ref();
 	const widgetId = ref();
 	const volume = ref();
@@ -19,17 +25,28 @@ export const useSoundcloudPlayer = () => {
 		};
 
 		if (!soundcloudIframeElement.value) return;
+		if (
+			!soundcloudIframeElement.value.src ||
+			!soundcloudIframeElement.value.src.startsWith(soundcloudDomain)
+		)
+			return;
+
+		// if (method !== "getPosition")
+		// 	console.debug(TAG, "Dispatch message", method, value);
 
 		soundcloudIframeElement.value.contentWindow.postMessage(
 			JSON.stringify(payload),
-			"https://w.soundcloud.com/player"
+			`${soundcloudDomain}/player`
 		);
 	};
 
 	const onLoadListener = () => {};
 
 	const onMessageListener = event => {
-		if (event.origin !== "https://w.soundcloud.com") return;
+		if (event.origin !== soundcloudDomain) return;
+
+		// if (event.data.indexOf("getPosition") === -1)
+		// 	console.debug(TAG, "On message", event.data);
 
 		const data = JSON.parse(event.data);
 		if (data.method !== "getPosition") console.log("MESSAGE DATA", data);
@@ -97,6 +114,8 @@ export const useSoundcloudPlayer = () => {
 
 		console.log("SC PLAY");
 
+		console.debug(TAG, "Soundcloud play");
+
 		dispatchMessage("play");
 	};
 
@@ -105,18 +124,24 @@ export const useSoundcloudPlayer = () => {
 
 		console.log("SC PAUSE");
 
+		console.debug(TAG, "Soundcloud pause");
+
 		dispatchMessage("pause");
 	};
 
 	const soundcloudSetVolume = _volume => {
 		volume.value = _volume;
 
+		console.debug(TAG, "Soundcloud set volume");
+
 		dispatchMessage("setVolume", _volume);
 	};
 
 	const soundcloudSeekTo = time => {
 		console.log("SC SEEK TO", time);
 
+		console.debug(TAG, "Soundcloud seek to");
+
 		dispatchMessage("seekTo", time);
 	};
 
@@ -151,7 +176,9 @@ export const useSoundcloudPlayer = () => {
 	const soundcloudLoadTrack = (trackId, startTime, _paused) => {
 		if (!soundcloudIframeElement.value) return;
 
-		const url = `https://w.soundcloud.com/player?autoplay=false&buying=false&sharing=false&download=false&show_artwork=false&show_playcount=false&show_user=false&url=${`https://api.soundcloud.com/tracks/${trackId}`}`;
+		console.debug(TAG, "Soundcloud load track");
+
+		const url = `${soundcloudDomain}/player?autoplay=false&buying=false&sharing=false&download=false&show_artwork=false&show_playcount=false&show_user=false&url=${`https://api.soundcloud.com/tracks/${trackId}`}`;
 
 		soundcloudIframeElement.value.setAttribute("src", url);
 
@@ -180,7 +207,7 @@ export const useSoundcloudPlayer = () => {
 	const soundcloudDestroy = () => {
 		if (!soundcloudIframeElement.value) return;
 
-		const url = `https://w.soundcloud.com/player?autoplay=false&buying=false&sharing=false&download=false&show_artwork=false&show_playcount=false&show_user=false&url=${`https://api.soundcloud.com/tracks/${0}`}`;
+		const url = `${soundcloudDomain}/player?autoplay=false&buying=false&sharing=false&download=false&show_artwork=false&show_playcount=false&show_user=false&url=${`https://api.soundcloud.com/tracks/${0}`}`;
 		soundcloudIframeElement.value.setAttribute("src", url);
 	};
 
@@ -188,6 +215,8 @@ export const useSoundcloudPlayer = () => {
 		window.removeEventListener("message", onMessageListener);
 	};
 
+	console.debug(TAG, "Init end");
+
 	return {
 		soundcloudIframeElement,
 		soundcloudPlay,

frontend/src/pages/Station/index.vue

@@ -23,6 +23,8 @@ import ms from "@/ms";
 import keyboardShortcuts from "@/keyboardShortcuts";
 import utils from "@/utils";
 
+const TAG = "[STATION]";
+
 const MainHeader = defineAsyncComponent(
 	() => import("@/components/MainHeader.vue")
 );
@@ -529,6 +531,7 @@ const calculateTimeElapsed = async () => {
 			typeof duration === "number" ? utils.formatTime(duration) : "0";
 };
 const playVideo = () => {
+	console.debug(TAG, "Play video start");
 	if (currentSongMediaType.value === "youtube") {
 		if (youtubePlayerReady.value) {
 			videoLoading.value = true;
@@ -554,6 +557,7 @@ const playVideo = () => {
 			calculateTimeElapsed();
 		}
 	}, 150);
+	console.debug(TAG, "Play video end");
 };
 const changeSoundcloudPlayerVolume = () => {
 	if (muted.value) soundcloudSetVolume(0);
@@ -770,6 +774,8 @@ const youtubeReady = () => {
 	}
 };
 const setCurrentSong = data => {
+	console.debug(TAG, "Set current song start");
+
 	const {
 		currentSong: _currentSong,
 		startedAt: _startedAt,
@@ -917,6 +923,8 @@ const setCurrentSong = data => {
 
 	calculateTimeElapsed();
 	resizeSeekerbar();
+
+	console.debug(TAG, "Set current song end");
 };
 const changeVolume = () => {
 	const volume = volumeSliderValue.value;
@@ -1121,6 +1129,8 @@ watch(
 );
 
 onMounted(async () => {
+	console.debug(TAG, "On mounted start");
+
 	mediaModalWatcher.value = stationStore.$onAction(({ name, args }) => {
 		if (name === "updateMediaModalPlayingAudio") {
 			const [mediaModalPlayingAudio] = args;
@@ -1162,10 +1172,13 @@ onMounted(async () => {
 	const experimental = await lofig.get("experimental");
 
 	socket.onConnect(() => {
+		console.debug(TAG, "On socked connect start");
+
 		clearTimeout(window.stationNextSongTimeout);
 
 		socket.dispatch("stations.join", stationIdentifier.value, async res => {
 			if (res.status === "success") {
+				console.debug(TAG, "Station join start");
 				setTimeout(() => {
 					loading.value = false;
 				}, 1000); // prevents popping in of youtube embed etc.
@@ -1424,6 +1437,7 @@ onMounted(async () => {
 						systemDifference.value = difference;
 					}
 				});
+				console.debug(TAG, "Station join end");
 			} else {
 				loading.value = false;
 				exists.value = false;
@@ -1449,6 +1463,8 @@ onMounted(async () => {
 				}
 			}
 		);
+
+		console.debug(TAG, "On socked connect end");
 	});
 
 	socket.onDisconnect(() => {
@@ -1747,51 +1763,55 @@ onMounted(async () => {
 	changePlayerVolume();
 
 	soundcloudBindListener("play", () => {
+		console.debug(TAG, "Bind on play");
 		if (currentSongMediaType.value !== "soundcloud") {
 			soundcloudPause();
 			return;
 		}
-		console.log("PLAY BIND", localPaused.value, stationPaused.value);
 		if (localPaused.value || stationPaused.value) {
-			soundcloudSeekTo(
+			console.debug(
+				TAG,
+				"Bind on play - pause and seek to",
 				(getTimeElapsed() / 1000 + currentSong.value.skipDuration) *
 					1000
 			);
 			soundcloudPause();
+			soundcloudSeekTo(
+				(getTimeElapsed() / 1000 + currentSong.value.skipDuration) *
+					1000
+			);
 		}
 	});
 
 	soundcloudBindListener("pause", () => {
+		console.debug(TAG, "Bind on pause");
 		if (currentSongMediaType.value !== "soundcloud") return;
-		console.log("PAUSE BIND", localPaused.value, stationPaused.value);
 		if (!localPaused.value && !stationPaused.value) {
-			// soundcloudSeekTo(
-			// 	(getTimeElapsed() / 1000 + currentSong.value.skipDuration) *
-			// 		1000
-			// );
-			// soundcloudPlay();
-
-			// let called = false;
-
-			// soundcloudGetIsPaused(isPaused => {
-			// 	if (called) return;
-			// 	called = true;
-
-			// 	console.log(123, isPaused);
-			// 	if (isPaused) {
-			// 		setTimeout(soundcloudPlay, 500);
-			// 	}
-			// });
+			console.debug(
+				TAG,
+				"Bind on pause - seeking to",
+				(getTimeElapsed() / 1000 + currentSong.value.skipDuration) *
+					1000,
+				"and playing"
+			);
+			soundcloudSeekTo(
+				(getTimeElapsed() / 1000 + currentSong.value.skipDuration) *
+					1000
+			);
+			soundcloudPlay();
 		}
 	});
 
 	soundcloudBindListener("seek", () => {
+		console.debug(TAG, "Bind on seek");
 		if (seeking.value) seeking.value = false;
 	});
 
 	soundcloudBindListener("error", value => {
-		console.log("SOUNDCLOUD ERROR", value);
+		console.debug(TAG, "Bind on error", value);
 	});
+
+	console.debug(TAG, "On mounted end");
 });
 
 onBeforeUnmount(() => {