team-1/frontend/src/routes/admin/[id]/+page.svelte

<script lang="ts">
    import QueueSlider from "$lib/components/QueueSlider.svelte"
    import { type Song } from "$lib/types"
    import { onMount } from "svelte"
    import type { FetchError } from "$lib/types"
    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>(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
            await audioController.play()
        }
    }

    onMount(async () => {
        let songs, index
        ;[returnError, songs, index] = await getQueueSongs(data.roomId)

        queueSongs = songs
        playingIndex = index
    })

    $effect(() => {
        playOnEnd()
    })

    async function playNext() {
        let songs, index
        ;[returnError, songs, index] = await triggerPlayNext(data.roomId)

        if (returnError) return

        queueSongs = songs
        playingIndex = index
    }
</script>

{#if returnError}
    <Error {returnError} />
{:else}
    <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={playNext}></audio>
    </div>
{/if}