58 lines
1.7 KiB
Svelte
58 lines
1.7 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, 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
|
|
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() {
|
|
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={playOnEnd}></audio>
|
|
</div>
|
|
{/if}
|