From 2b94bfddfb5d942c55c1b430515da0a6fccd3757 Mon Sep 17 00:00:00 2001
From: Mat12143 <skymatt12@gmail.com>
Date: Sat, 2 Aug 2025 06:07:14 +0200
Subject: [PATCH] feat: starting autoplay

---
 frontend/src/lib/util.ts                    |  1 -
 frontend/src/lib/utils.ts                   |  8 ++++++++
 frontend/src/routes/admin/[id]/+page.svelte | 21 +++++++++++++++++++--
 3 files changed, 27 insertions(+), 3 deletions(-)
 delete mode 100644 frontend/src/lib/util.ts

diff --git a/frontend/src/lib/util.ts b/frontend/src/lib/util.ts
deleted file mode 100644
index df0d44e..0000000
--- a/frontend/src/lib/util.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type FetchError = { code: number, message: string }
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 203d6f8..1b806c5 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -65,3 +65,11 @@ export const triggerPlayNext = async function (roomId: string): Promise<[FetchEr
     })
     return [null, songs, json["index"]]
 }
+
+export const getStreamingUrl = async function (uuid: string) {
+    let resp = await fetch("/api/song/audio?song=" + uuid)
+
+    let json = await resp.json()
+
+    return json["url"]
+}
diff --git a/frontend/src/routes/admin/[id]/+page.svelte b/frontend/src/routes/admin/[id]/+page.svelte
index 9bcb9b4..e017cc5 100644
--- a/frontend/src/routes/admin/[id]/+page.svelte
+++ b/frontend/src/routes/admin/[id]/+page.svelte
@@ -3,21 +3,37 @@
     import { type Song } from "$lib/types"
     import { onMount } from "svelte"
     import type { FetchError } from "$lib/types"
-    import { getQueueSongs, triggerPlayNext } from "$lib/utils.js"
+    import { getQueueSongs, getStreamingUrl, triggerPlayNext } from "$lib/utils.js"
     import Error from "$lib/components/Error.svelte"
 
     let { data } = $props()
 
     let queueSongs = $state<Song[]>([])
-    let playingIndex = $state<number>()
+    let playingIndex = $state<number>(0)
     let returnError = $state<FetchError | null>()
 
+    let currentPlaying = $derived<Song>(queueSongs[playingIndex])
+    let audioController = $state<HTMLAudioElement>()
+
+    async function playOnEnd() {
+        let url = await getStreamingUrl(currentPlaying.uuid)
+        if (audioController) {
+            audioController.src = url
+            audioController.play()
+        }
+    }
+
     onMount(async () => {
         let songs, index
         ;[returnError, songs, index] = await getQueueSongs(data.roomId)
 
         queueSongs = songs
         playingIndex = index
+
+        if (audioController) {
+            audioController.src = await getStreamingUrl(currentPlaying.uuid)
+            audioController.play()
+        }
     })
 
     async function playNext() {
@@ -37,5 +53,6 @@
     <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
         <QueueSlider {queueSongs} {playingIndex} />
         <button onclick={playNext}>Next</button>
+        <audio controls autoplay bind:this={audioController} onended={playOnEnd}></audio>
     </div>
 {/if}