From c116aa8c47e34e61eb431aba4252b45b5296f6b1 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 22 Apr 2024 20:02:29 +0200
Subject: [PATCH] Add Highlighter to currently playing song

---
 src/lib/components/custom/QueueFrame.svelte | 8 ++++++--
 src/routes/+page.svelte                     | 8 +++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/custom/QueueFrame.svelte b/src/lib/components/custom/QueueFrame.svelte
index 08bfa98..f2cd1da 100644
--- a/src/lib/components/custom/QueueFrame.svelte
+++ b/src/lib/components/custom/QueueFrame.svelte
@@ -6,7 +6,7 @@
     import {timeFormat} from "$lib/time-format";
     import LoadingSpinner from "$lib/components/custom/LoadingSpinner.svelte";
 
-    let { queue = [], fetchQueue, saveQueue, removeSongFromQueue, playSong } = $props();
+    let { queue = [], fetchQueue, saveQueue, removeSongFromQueue, playSong, currentIndex } = $props();
     let loading = $state(false);
 
     async function innerFetchQueue() {
@@ -19,7 +19,11 @@
 
 {#snippet playerQueue()}
     {#each queue as song, idx}
-        <p onclick={() => playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})<Button onclick={() => removeSongFromQueue(idx)}>X</Button></p>
+        {#if currentIndex == idx}
+            <p class="bg-secondary" onclick={() => playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})<Button onclick={() => removeSongFromQueue(idx)}>X</Button></p>
+        {:else}
+            <p onclick={() => playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})<Button onclick={() => removeSongFromQueue(idx)}>X</Button></p>
+        {/if}
     {/each}
 
     <Button onclick={() => queue.push(queue[0])}>Add</Button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index da1808b..5e1527d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,6 +15,10 @@
 
     let source: HTMLAudioElement = $state();
     let title = $state("");
+    let queueIndex = $state(0);
+    let currentSong = $state({
+        queueIndex
+    });
     let isPaused = $state(true);
     let volume = $state(0.2);
     let progress = $state(0);
@@ -44,6 +48,7 @@
         }
         if (!foundInNowPlaying && queue.length != 0) {
             newSong(queue[0])
+            currentSong.queueIndex = 0;
         }
     }
 
@@ -76,6 +81,7 @@
         //const chosenSong = queue[songIndex];
         pause();
         newSong(song);
+        currentSong.queueIndex = songIndex;
         play();
     }
 
@@ -161,7 +167,7 @@
         <button onclick={() => volume += 0.1}>Louder</button>
         <button onclick={() => volume -= 0.1}>Quieter</button>
     </div>
-    <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} />
+    <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />
 </div>
 <div class="border border-2 min-h-24 h-24">
     <div class="flex flex-row gap-2">