WIP: global player pt. 6 fix playback finally

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 @@
             <!-- Progress -->
             <div class="space-y-2">
                 <Slider
-                    value={[audio.currentTime]}
+                    bind:value={sliderValue}
                     max={audio.duration || 100}
-                    step={1}
+                    step={0.01}
                     onValueChange={onSeek}
                     type="multiple"
                     class="w-full"

src/lib/components/player/PlayerMobile.svelte

@@ -11,8 +11,17 @@
 
 	const audio = getAudioContext();
 	let open = $state(false);
+	let sliderValue = $state([0]);
+
+	// Sync Audio -> Slider
+	$effect(() => {
+		if (Math.abs(sliderValue[0] - audio.currentTime) > 0.1) {
+			sliderValue = [audio.currentTime];
+		}
+	});
 
 	function onSeek(v: number[]) {
+		if (Math.abs(v[0] - audio.currentTime) < 0.1) return;
 		audio.seek(v[0]);
 	}
 </script>
@@ -101,9 +110,9 @@
             <!-- Progress -->
             <div class="space-y-2">
                 <Slider
-                    value={[audio.currentTime]}
+                    bind:value={sliderValue}
                     max={audio.duration || 100}
-                    step={1}
+                    step={0.01}
                     onValueChange={onSeek}
                     type="multiple"
                     class="w-full"

src/lib/components/player/PlayerRoot.svelte

@@ -16,7 +16,6 @@
 	// ... existing imports ...
 
 	onMount(() => {
-		console.log("PlayerRoot mounted");
 		audioCtx.setElement(audioEl);
 
 		// Load state
@@ -37,10 +36,6 @@
 	// ... existing effect for playback ...
 	$effect(() => {
 		const track = player.currentTrack;
-		console.log("Playback effect triggered", {
-			trackId: track?.id,
-			src: track?.src,
-		});
 		if (audioEl) {
 			if (track) {
 				const newSrc = track.src;
@@ -49,14 +44,9 @@
 				// audioEl.src sets the attribute, currentSrc is the resolved URL
 				const newSrcAbsolute = new URL(newSrc, document.baseURI).href;
 
-				console.log("Src check", {
-					currentSrc,
-					newSrcAbsolute,
-					match: currentSrc === newSrcAbsolute,
-				});
+				// audioEl.src sets the attribute, currentSrc is the resolved URL
 
 				if (currentSrc !== newSrcAbsolute) {
-					console.log("Setting new src", newSrc);
 					audioEl.src = newSrc;
 					audioEl.play().catch((e) => {
 						console.warn("Autoplay blocked or failed", e);