43 lines
1.1 KiB
Svelte
43 lines
1.1 KiB
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>
|