diff --git a/src/lib/components/player/PlayerDesktop.svelte b/src/lib/components/player/PlayerDesktop.svelte index cccad8f..742019a 100644 --- a/src/lib/components/player/PlayerDesktop.svelte +++ b/src/lib/components/player/PlayerDesktop.svelte @@ -9,7 +9,25 @@ const audio = getAudioContext(); + // Local state for slider to allow binding + let sliderValue = $state([0]); + + // Sync Audio -> Slider + $effect(() => { + // Only sync if the value is different to avoid unnecessary updates + // and potential loops if onValueChange fires on prop change. + // Using a small threshold or just direct assignment if we trust the loop break. + if (Math.abs(sliderValue[0] - audio.currentTime) > 0.1) { + sliderValue = [audio.currentTime]; + } + }); + function onSeek(v: number[]) { + // Guard against feedback loop: + // If the value matches current time (within tolerance), it's likely a feedback + // from the effect above -> component -> onValueChange. + if (Math.abs(v[0] - audio.currentTime) < 0.1) return; + audio.seek(v[0]); } @@ -55,9 +73,9 @@