From a4cf9356a8274fee27f00a9a4d0ab673fca8fffe Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Mon, 9 Feb 2026 23:55:19 -0800
Subject: [PATCH] WIP: global player pt. 3 monstrosity

---
 src/lib/components/player/PlayerMobile.svelte | 210 +++++++++---------
 src/lib/components/player/PlayerRoot.svelte   |  15 +-
 2 files changed, 117 insertions(+), 108 deletions(-)

diff --git a/src/lib/components/player/PlayerMobile.svelte b/src/lib/components/player/PlayerMobile.svelte
index af3780e..500f338 100644
--- a/src/lib/components/player/PlayerMobile.svelte
+++ b/src/lib/components/player/PlayerMobile.svelte
@@ -17,119 +17,117 @@
 	}
 </script>
 
-{#if player.currentTrack}
-    <div
-        class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
-    >
-        <div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
-            <!-- Mini Player Info -->
-            <button
-                type="button"
-                class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
-                onclick={() => (open = true)}
-            >
-                <!-- Placeholder Art -->
-                <div
-                    class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
-                >
-                    <Disc class="h-6 w-6 text-muted-foreground" />
-                </div>
-
-                <div class="flex flex-col overflow-hidden">
-                    <div class="text-sm font-medium truncate leading-tight">
-                        {player.currentTrack.title || "Unknown Title"}
-                    </div>
-                    <div
-                        class="text-xs text-muted-foreground truncate leading-tight"
-                    >
-                        {player.currentTrack.artist || "Unknown Artist"}
-                    </div>
-                </div>
-            </button>
-
-            <!-- Mini Controls -->
-            <div class="flex items-center gap-1">
-                <Controls />
-                <!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
-                <!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
-                <!-- Let's just use simplified controls here for now, or just Play/Pause -->
-            </div>
-        </div>
-
-        <!-- Progress Bar (thin line at top of bar) -->
-        <div class="absolute top-0 left-0 right-0 h-1 bg-muted">
+<div
+    class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
+>
+    <div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
+        <!-- Mini Player Info -->
+        <button
+            type="button"
+            class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
+            onclick={() => (open = true)}
+        >
+            <!-- Placeholder Art -->
             <div
-                class="h-full bg-primary transition-all duration-100 ease-linear"
-                style="width: {(audio.currentTime / audio.duration) * 100}%"
-            ></div>
+                class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
+            >
+                <Disc class="h-6 w-6 text-muted-foreground" />
+            </div>
+
+            <div class="flex flex-col overflow-hidden">
+                <div class="text-sm font-medium truncate leading-tight">
+                    {player.currentTrack?.title || "Unknown Title"}
+                </div>
+                <div
+                    class="text-xs text-muted-foreground truncate leading-tight"
+                >
+                    {player.currentTrack?.artist || "Unknown Artist"}
+                </div>
+            </div>
+        </button>
+
+        <!-- Mini Controls -->
+        <div class="flex items-center gap-1">
+            <Controls />
+            <!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
+            <!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
+            <!-- Let's just use simplified controls here for now, or just Play/Pause -->
         </div>
     </div>
 
-    <Drawer.Root bind:open>
-        <Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
-            <div class="mx-auto w-Full max-w-sm flex-1 flex flex-col p-4 gap-6">
-                <!-- Header -->
-                <div class="flex justify-center pt-2">
-                    <div
-                        class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
-                    ></div>
-                </div>
+    <!-- Progress Bar (thin line at top of bar) -->
+    <div class="absolute top-0 left-0 right-0 h-1 bg-muted">
+        <div
+            class="h-full bg-primary transition-all duration-100 ease-linear"
+            style="width: {(audio.currentTime / audio.duration) * 100}%"
+        ></div>
+    </div>
+</div>
 
-                <!-- Expanded Art -->
+<Drawer.Root bind:open>
+    <Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
+        <div class="mx-auto w-Full max-w-sm flex-1 flex flex-col p-4 gap-6">
+            <!-- Header -->
+            <div class="flex justify-center pt-2">
                 <div
-                    class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg"
+                    class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
+                ></div>
+            </div>
+
+            <!-- Expanded Art -->
+            <div
+                class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg"
+            >
+                <Disc class="h-24 w-24 text-muted-foreground" />
+                <!-- If we had art, we'd show it here -->
+            </div>
+
+            <!-- Track Info -->
+            <div class="text-center space-y-1">
+                <h2 class="text-xl font-bold leading-tight line-clamp-2">
+                    {player.currentTrack?.title}
+                </h2>
+                <p
+                    class="text-muted-foreground font-medium text-lg line-clamp-1"
                 >
-                    <Disc class="h-24 w-24 text-muted-foreground" />
-                    <!-- If we had art, we'd show it here -->
-                </div>
+                    {player.currentTrack?.artist}
+                </p>
+                <p class="text-xs text-muted-foreground/80 mt-1">
+                    {player.currentTrack?.album ||
+                        player.currentTrack?.animeName}
+                </p>
+            </div>
 
-                <!-- Track Info -->
-                <div class="text-center space-y-1">
-                    <h2 class="text-xl font-bold leading-tight line-clamp-2">
-                        {player.currentTrack.title}
-                    </h2>
-                    <p
-                        class="text-muted-foreground font-medium text-lg line-clamp-1"
-                    >
-                        {player.currentTrack.artist}
-                    </p>
-                    <p class="text-xs text-muted-foreground/80 mt-1">
-                        {player.currentTrack.album ||
-                            player.currentTrack.animeName}
-                    </p>
-                </div>
-
-                <!-- Progress -->
-                <div class="space-y-2">
-                    <Slider
-                        value={[audio.currentTime]}
-                        max={audio.duration || 100}
-                        step={1}
-                        onValueChange={onSeek}
-                        type="multiple"
-                        class="w-full"
-                    />
-                    <div
-                        class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
-                    >
-                        <span>{formatTime(audio.currentTime)}</span>
-                        <span>{formatTime(audio.duration)}</span>
-                    </div>
-                </div>
-
-                <!-- Main Controls -->
-                <div class="flex justify-center py-4">
-                    <Controls />
-                </div>
-
-                <!-- Volume? Or Queue toggle? -->
-                <!-- Queue -->
-                <div class="flex-1 overflow-hidden relative mt-auto">
-                    <div class="absolute inset-0">
-                        <Queue />
-                    </div>
+            <!-- Progress -->
+            <div class="space-y-2">
+                <Slider
+                    value={[audio.currentTime]}
+                    max={audio.duration || 100}
+                    step={1}
+                    onValueChange={onSeek}
+                    type="multiple"
+                    class="w-full"
+                />
+                <div
+                    class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
+                >
+                    <span>{formatTime(audio.currentTime)}</span>
+                    <span>{formatTime(audio.duration)}</span>
                 </div>
             </div>
-        </Drawer.Content>
-    </Drawer.Root>
-{/if}
+
+            <!-- Main Controls -->
+            <div class="flex justify-center py-4">
+                <Controls />
+            </div>
+
+            <!-- Volume? Or Queue toggle? -->
+            <!-- Queue -->
+            <div class="flex-1 overflow-hidden relative mt-auto">
+                <div class="absolute inset-0">
+                    <Queue />
+                </div>
+            </div>
+        </div>
+    </Drawer.Content>
+</Drawer.Root>
diff --git a/src/lib/components/player/PlayerRoot.svelte b/src/lib/components/player/PlayerRoot.svelte
index d1c43d1..7958588 100644
--- a/src/lib/components/player/PlayerRoot.svelte
+++ b/src/lib/components/player/PlayerRoot.svelte
@@ -75,8 +75,19 @@
 	// ... existing effect for playback ...
 	$effect(() => {
 		const track = player.currentTrack;
-		if (track && audioEl) {
-			// ...
+		if (audioEl) {
+			if (track) {
+				const newSrc = track.src;
+				if (audioEl.src !== newSrc) {
+					audioEl.src = newSrc;
+					audioEl.play().catch((e) => {
+						console.warn("Autoplay blocked or failed", e);
+					});
+				}
+			} else {
+				audioEl.removeAttribute("src");
+			}
+
 			// Update MediaSession playback state
 			if ("mediaSession" in navigator) {
 				navigator.mediaSession.playbackState = audioEl.paused