Add Highlighter to currently playing song
This commit is contained in:
parent
1e535c9715
commit
c116aa8c47
2 changed files with 13 additions and 3 deletions
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue