WIP: global player pt. 3 monstrosity

src/lib/components/player/PlayerMobile.svelte

@@ -17,7 +17,6 @@
 	}
 </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"
 >
@@ -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>
@@ -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>
 
@@ -132,4 +131,3 @@
         </div>
     </Drawer.Content>
 </Drawer.Root>
-{/if}

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