Lydstyrke/lydstyrke
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

Add Highlighter to currently playing song

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/custom/QueueFrame.svelte
View file

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

8
src/routes/+page.svelte
View file

@ -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">