WIP: global player pt. 3 monstrosity

src/lib/components/player/PlayerMobile.svelte

@@ -17,10 +17,9 @@
 	}
 </script>
 
-{#if player.currentTrack}
-    <div
+<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
@@ -37,12 +36,12 @@
 
             <div class="flex flex-col overflow-hidden">
                 <div class="text-sm font-medium truncate leading-tight">
-                        {player.currentTrack.title || "Unknown Title"}
+                    {player.currentTrack?.title || "Unknown Title"}
                 </div>
                 <div
                     class="text-xs text-muted-foreground truncate leading-tight"
                 >
-                        {player.currentTrack.artist || "Unknown Artist"}
+                    {player.currentTrack?.artist || "Unknown Artist"}
                 </div>
             </div>
         </button>
@@ -63,9 +62,9 @@
             style="width: {(audio.currentTime / audio.duration) * 100}%"
         ></div>
     </div>
-    </div>
+</div>
 
-    <Drawer.Root bind:open>
+<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 -->
@@ -86,16 +85,16 @@
             <!-- Track Info -->
             <div class="text-center space-y-1">
                 <h2 class="text-xl font-bold leading-tight line-clamp-2">
-                        {player.currentTrack.title}
+                    {player.currentTrack?.title}
                 </h2>
                 <p
                     class="text-muted-foreground font-medium text-lg line-clamp-1"
                 >
-                        {player.currentTrack.artist}
+                    {player.currentTrack?.artist}
                 </p>
                 <p class="text-xs text-muted-foreground/80 mt-1">
-                        {player.currentTrack.album ||
-                            player.currentTrack.animeName}
+                    {player.currentTrack?.album ||
+                        player.currentTrack?.animeName}
                 </p>
             </div>
 
@@ -131,5 +130,4 @@
             </div>
         </div>
     </Drawer.Content>
-    </Drawer.Root>
-{/if}
+</Drawer.Root>

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