feat: started incorportating SoundCloud player in EditSong

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

@@ -13,6 +13,7 @@ import aw from "@/aw";
 import validation from "@/validation";
 import keyboardShortcuts from "@/keyboardShortcuts";
 import { useForm } from "@/composables/useForm";
+import { useSoundcloudPlayer } from "@/composables/useSoundcloudPlayer";
 
 import { Song } from "@/types/song.js";
 
@@ -60,6 +61,20 @@ const stationStore = useStationStore();
 const { socket } = useWebsocketsStore();
 const userAuthStore = useUserAuthStore();
 
+const {
+	soundcloudIframeElement,
+	soundcloudLoadTrack,
+	soundcloudSeekTo,
+	soundcloudPlay,
+	soundcloudPause,
+	soundcloudSetVolume,
+	soundcloudGetPosition,
+	soundcloudGetIsPaused,
+	soundcloudBindListener,
+	soundcloudDestroy,
+	soundcloudUnload
+} = useSoundcloudPlayer();
+
 const { openModal, closeCurrentModal, preventCloseCbs } = useModalsStore();
 const { hasPermission } = userAuthStore;
 
@@ -448,6 +463,23 @@ const { inputs, unsavedChanges, save, setValue, setOriginalValue } = useForm(
 	{ modalUuid: props.modalUuid, preventCloseUnsaved: false }
 );
 
+const currentSongMediaType = computed(() => {
+	if (
+		!inputs.value.mediaSource.value ||
+		inputs.value.mediaSource.value.indexOf(":") === -1
+	)
+		return "none";
+	return inputs.value.mediaSource.value.split(":")[0];
+});
+const currentSongMediaValue = computed(() => {
+	if (
+		!inputs.value.mediaSource.value ||
+		inputs.value.mediaSource.value.indexOf(":") === -1
+	)
+		return null;
+	return inputs.value.mediaSource.value.split(":")[1];
+});
+
 const showTab = payload => {
 	if (tabs.value[`${payload}-tab`])
 		tabs.value[`${payload}-tab`].scrollIntoView({ block: "nearest" });
@@ -1721,7 +1753,31 @@ onBeforeUnmount(() => {
 				>
 					<div class="top-section">
 						<div class="player-section">
-							<div :id="`editSongPlayer-${modalUuid}`" />
+							<div
+								v-show="currentSongMediaType === 'youtube'"
+								:id="`editSongPlayerYouTube-${modalUuid}`"
+							/>
+							<iframe
+								v-show="currentSongMediaType === 'soundcloud'"
+								:id="`editSongPlayerSoundCloud-${modalUuid}`"
+								ref="soundcloudIframeElement"
+								style="
+									width: 100%;
+									height: 100%;
+									min-height: 200px;
+								"
+								scrolling="no"
+								frameborder="no"
+								allow="autoplay"
+							></iframe>
+							<p
+								v-show="
+									currentSongMediaType !== 'youtube' &&
+									currentSongMediaType !== 'soundcloud'
+								"
+							>
+								No media source specified
+							</p>
 
 							<div v-show="youtubeError" class="player-error">
 								<h2>{{ youtubeErrorMessage }}</h2>

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

@@ -652,14 +652,20 @@ onMounted(() => {
 			</template>
 			<template #column-mediaSource="slotProps">
 				<a
+					v-if="
+						slotProps.item.mediaSource.split(':')[0] === 'youtube'
+					"
 					:href="
 						'https://www.youtube.com/watch?v=' +
-						`${slotProps.item.youtubeId}`
+						`${slotProps.item.mediaSource.split(':')[1]}`
 					"
 					target="_blank"
 				>
 					{{ slotProps.item.mediaSource }}
 				</a>
+				<span v-else>
+					{{ slotProps.item.mediaSource }}
+				</span>
 			</template>
 			<template #column-verified="slotProps">
 				<span :title="slotProps.item.verified">{{