song player figuring out metadata

src/lib/components/SongEntry.svelte

@@ -1,3 +1,7 @@
+<script module lang="ts">
+	let activeMediaToken: symbol | null = null;
+</script>
+
 <script lang="ts">
 	type SongType = 1 | 2 | 3 | number;
 
@@ -21,6 +25,9 @@
 		showPlayer = false,
 	}: SongEntryProps = $props();
 
+	let paused = $state(true);
+	const mediaToken = Symbol("song-entry");
+
 	const typeLabelMap: Record<number, string> = {
 		1: "OP",
 		2: "ED",
@@ -51,11 +58,19 @@
 		const mediaSession = navigator.mediaSession;
 		if (!mediaSession || typeof MediaMetadata === "undefined") return;
 
-		mediaSession.metadata = new MediaMetadata({
+		if (!paused) {
-			title: songName,
+			activeMediaToken = mediaToken;
-			artist: mediaArtist,
+			mediaSession.metadata = new MediaMetadata({
-			album: mediaAlbum,
+				title: songName,
-		});
+				artist: mediaArtist,
+				album: mediaAlbum,
+			});
+			return;
+		}
+
+		if (activeMediaToken !== mediaToken) return;
+		activeMediaToken = null;
+		mediaSession.metadata = null;
 	});
 </script>
 
@@ -78,6 +93,7 @@
 				controls
 				preload="metadata"
 				title={`${mediaTitle} — ${songName} — ${mediaArtist}`}
+				bind:paused
 			>
 				<source src={`/cdn/${fileName}`} type="audio/mpeg" />
 				Your browser does not support the audio element.