global player pt. 1

src/routes/list/+page.svelte

@@ -5,6 +5,8 @@
 	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
 	import { db as clientDb } from "$lib/db/client-db";
+	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
+	import { trackFromSongRow } from "$lib/player/types";
 	import {
 		MalAnimeListQuerySchema,
 		MalAnimeListStatusEnum,
@@ -47,6 +49,22 @@
 	function makeMalHref(username: string) {
 		return `https://myanimelist.net/profile/${encodeURIComponent(username)}`;
 	}
+
+	const tracksFromResults = $derived.by(() =>
+		data.songRows
+			.map((r) =>
+				trackFromSongRow({
+					annSongId: r.annSongId,
+					animeName: r.animeName,
+					type: r.type,
+					number: r.number,
+					songName: r.songName,
+					artistName: songArtistLabel(r),
+					fileName: r.fileName,
+				}),
+			)
+			.filter((t) => t !== null),
+	);
 </script>
 
 <h1 class="text-2xl font-semibold">MAL List → Songs</h1>
@@ -115,6 +133,34 @@
 		{/if}
 	</div>
 
+	{#if data.songRows.length > 0}
+		<div class="mt-3 flex flex-wrap gap-2">
+			<button
+				type="button"
+				class="rounded border px-3 py-2 text-sm"
+				onclick={() => addAllToQueue(tracksFromResults)}
+				disabled={tracksFromResults.length === 0}
+			>
+				Add all to queue
+			</button>
+
+			<button
+				type="button"
+				class="rounded border px-3 py-2 text-sm"
+				onclick={() => playAllNext(tracksFromResults)}
+				disabled={tracksFromResults.length === 0}
+			>
+				Play all next
+			</button>
+
+			{#if tracksFromResults.length !== data.songRows.length}
+				<span class="self-center text-sm text-muted-foreground">
+					({tracksFromResults.length} playable)
+				</span>
+			{/if}
+		</div>
+	{/if}
+
 	{#if data.username}
 		<div class="text-sm">
 			<a
@@ -149,13 +195,13 @@
 		{#each data.songRows as r (String(r.annId) + ":" + String(r.annSongId))}
 			<li>
 				<SongEntry
+					annSongId={r.annSongId}
 					animeName={r.animeName}
 					type={r.type}
 					number={r.number}
 					songName={r.songName}
 					artistName={songArtistLabel(r)}
 					fileName={r.fileName}
-					showPlayer={true}
 				/>
 			</li>
 		{/each}