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} -

playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})

+ {#if currentIndex == idx} +

playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})

+ {:else} +

playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})

+ {/if} {/each} 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 @@ - +