custom bar

frontend/src/lib/components/QueueSlider.svelte

@@ -28,7 +28,7 @@
                         <img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={`https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`} alt="Song cover" />
                     </div>
                     {#if i === 1}
-                        <h1 class="mt-2">{song.title} - {song.artist}</h1>
+                        <h1 class="mt-5">{song.title} - {song.artist}</h1>
                     {/if}
                 </div>
             {:else}

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
     }
 </script>
 
-<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600 bg-lime-500">
+<div class={`flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600 bg-lime-500 ${disabled ? "disabled" : ""}`}>
     <input
         type="text"
         placeholder="Song & Artist"

frontend/src/routes/admin/[id]/+page.svelte

@@ -15,6 +15,12 @@
     let currentPlaying = $derived<Song>(queueSongs[playingIndex])
     let audioController = $state<HTMLAudioElement>()
 
+    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}
     <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={playNext}></audio>
+        <audio autoplay bind:this={audioController} hidden onended={playNext}></audio>
+
+        <div class="flex w-[30vw] flex-col items-start justify-start gap-4 p-2">
+            <p>{formatTime(playerInfo.currentTime)} - {formatTime(playerInfo.duration)}</p>
+            <input type="range" min="0" max={playerInfo.duration} disabled step="0.1" value={playerInfo.currentTime} class="w-full accent-blue-500" />
+            <div class="flex w-full flex-row items-center justify-center gap-6">
+                <button onclick={audioController.pause}>Pause</button>
+                <button onclick={playNext}>Next</button>
+            </div>
+        </div>
     </div>
 {/if}