feat: starting autoplay

frontend/src/lib/util.ts

@@ -1 +0,0 @@
-export type FetchError = { code: number, message: string }

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"]
+}

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}