diff --git a/frontend/src/lib/components/QueueSlider.svelte b/frontend/src/lib/components/QueueSlider.svelte index d20003f..adbaf45 100644 --- a/frontend/src/lib/components/QueueSlider.svelte +++ b/frontend/src/lib/components/QueueSlider.svelte @@ -28,7 +28,7 @@ Song cover {#if i === 1} -

{song.title} - {song.artist}

+

{song.title} - {song.artist}

{/if} {:else} diff --git a/frontend/src/lib/components/SuggestionInput.svelte b/frontend/src/lib/components/SuggestionInput.svelte index 9659e0d..91053d0 100644 --- a/frontend/src/lib/components/SuggestionInput.svelte +++ b/frontend/src/lib/components/SuggestionInput.svelte @@ -2,14 +2,17 @@ let { roomId } = $props() let input = $state("") + let disabled = $state(false) async function sendSong() { + disabled = true await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" }) input = "" + disabled = false } -
+
(queueSongs[playingIndex]) let audioController = $state() + let playerInfo = $state({ + playing: false, + currentTime: 0, + duration: 0, + }) + async function playOnEnd() { let url = await getStreamingUrl(currentPlaying.uuid) if (audioController) { @@ -23,6 +29,23 @@ } } + $effect(() => { + if (audioController) { + audioController.ontimeupdate = () => { + playerInfo.currentTime = audioController?.currentTime || 0 + } + audioController.onloadedmetadata = () => { + playerInfo.duration = audioController?.duration || 0 + } + audioController.onplay = () => { + playerInfo.playing = true + } + audioController.onpause = () => { + playerInfo.playing = false + } + } + }) + onMount(async () => { let songs, index ;[returnError, songs, index] = await getQueueSongs(data.roomId) @@ -35,6 +58,12 @@ playOnEnd() }) + const formatTime = (t: number) => { + const min = Math.floor(t / 60) + const sec = Math.floor(t % 60) + return `${min}:${sec.toString().padStart(2, "0")}` + } + async function playNext() { let songs, index ;[returnError, songs, index] = await triggerPlayNext(data.roomId) @@ -51,7 +80,16 @@ {:else}
- - + + + +
+

{formatTime(playerInfo.currentTime)} - {formatTime(playerInfo.duration)}

+ +
+ + +
+
{/if}