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 @@
{#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}