global player pt. 5 client only

src/lib/components/util/ClientOnly.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	type ClientOnlyProps = {
+		/**
+		 * If true, render `fallback` content until the component mounts on the client.
+		 * Defaults to true.
+		 */
+		showFallback?: boolean;
+
+		/**
+		 * Main content to render once mounted (client-only).
+		 */
+		children: import("svelte").Snippet;
+
+		/**
+		 * Optional fallback content to render during SSR / before mount.
+		 */
+		fallback?: import("svelte").Snippet;
+	};
+
+	let { showFallback = true, children, fallback }: ClientOnlyProps = $props();
+
+	let mounted = $state(false);
+
+	onMount(() => {
+		mounted = true;
+	});
+</script>
+
+{#if mounted}
+	{@render children()}
+{:else if showFallback && fallback}
+	{@render fallback()}
+{/if}

src/lib/player/player.svelte.ts

@@ -623,7 +623,7 @@ export function insertTrack(track: Track, mode: InsertMode): void {
 }
 
 export function insertTracks(tracks: Track[], mode: InsertMode): void {
-	const incoming = dedupeTracks(tracks).filter((t) => t && t.src);
+	const incoming = dedupeTracks(tracks).filter((t) => t?.src);
 
 	if (incoming.length === 0) return;
 

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import "./layout.css";
 	import favicon from "$lib/assets/favicon.svg";
 	import GlobalPlayer from "$lib/components/GlobalPlayer.svelte";
+	import ClientOnly from "$lib/components/util/ClientOnly.svelte";
 
 	let { children } = $props();
 </script>
@@ -10,4 +11,8 @@
 	><link rel="icon" href={favicon} /><title>AMQ Train</title></svelte:head
 >
 {@render children()}
+<ClientOnly showFallback={false}>
+	{#snippet children()}
 		<GlobalPlayer />
+	{/snippet}
+</ClientOnly>