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, triggerPlayNext } from "$lib/utils.js"

    let { data } = $props()

    let queueSongs = $state<Song[]>([])
    let playingIndex = $state<number>()
    let returnError = $state<FetchError | null>()

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

        queueSongs = songs

        playingIndex = index
    })

    $effect(() => {
        $inspect(queueSongs)
    })

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

        if (returnError) return

        if (songs.length != 0) queueSongs = songs
        playingIndex = index
    }
</script>

{returnError}

<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
    <QueueSlider {queueSongs} {playingIndex} />
    <button onclick={playNext}>Next</button>
</div>