Add Highlighter to currently playing song

This commit is contained in:
Neshura 2024-04-22 20:02:29 +02:00
parent 1e535c9715
commit c116aa8c47
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 13 additions and 3 deletions

View file

@ -6,7 +6,7 @@
import {timeFormat} from "$lib/time-format"; import {timeFormat} from "$lib/time-format";
import LoadingSpinner from "$lib/components/custom/LoadingSpinner.svelte"; 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); let loading = $state(false);
async function innerFetchQueue() { async function innerFetchQueue() {
@ -19,7 +19,11 @@
{#snippet playerQueue()} {#snippet playerQueue()}
{#each queue as song, idx} {#each queue as song, idx}
{#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> <p onclick={() => playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})<Button onclick={() => removeSongFromQueue(idx)}>X</Button></p>
{/if}
{/each} {/each}
<Button onclick={() => queue.push(queue[0])}>Add</Button> <Button onclick={() => queue.push(queue[0])}>Add</Button>

View file

@ -15,6 +15,10 @@
let source: HTMLAudioElement = $state(); let source: HTMLAudioElement = $state();
let title = $state(""); let title = $state("");
let queueIndex = $state(0);
let currentSong = $state({
queueIndex
});
let isPaused = $state(true); let isPaused = $state(true);
let volume = $state(0.2); let volume = $state(0.2);
let progress = $state(0); let progress = $state(0);
@ -44,6 +48,7 @@
} }
if (!foundInNowPlaying && queue.length != 0) { if (!foundInNowPlaying && queue.length != 0) {
newSong(queue[0]) newSong(queue[0])
currentSong.queueIndex = 0;
} }
} }
@ -76,6 +81,7 @@
//const chosenSong = queue[songIndex]; //const chosenSong = queue[songIndex];
pause(); pause();
newSong(song); newSong(song);
currentSong.queueIndex = songIndex;
play(); play();
} }
@ -161,7 +167,7 @@
<button onclick={() => volume += 0.1}>Louder</button> <button onclick={() => volume += 0.1}>Louder</button>
<button onclick={() => volume -= 0.1}>Quieter</button> <button onclick={() => volume -= 0.1}>Quieter</button>
</div> </div>
<QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} /> <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />
</div> </div>
<div class="border border-2 min-h-24 h-24"> <div class="border border-2 min-h-24 h-24">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">