refactor anime page

src/routes/anime/[annId]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
+	import SongEntry from "$lib/components/SongEntry.svelte";
 	import { ensureSeeded, getClientDb } from "$lib/db/client-db";
 	import { getAnimeWithSongsByAnnId } from "$lib/db/client-db/queries";
 	import { seasonName } from "$lib/utils/amq";
@@ -20,28 +21,6 @@
 		return n;
 	}
 
-	function songTypeLabel(type: number) {
-		// Matches schema comment in `anime_song_links.type`: 1(OP) | 2(ED) | 3(INS)
-		switch (type) {
-			case 1:
-				return "OP";
-			case 2:
-				return "ED";
-			case 3:
-				return "INS";
-			default:
-				return "SONG";
-		}
-	}
-
-	function songCode(type: number, number: number) {
-		return `${songTypeLabel(type)}${number}`;
-	}
-
-	function audioUrl(fileName: string) {
-		return `/cdn/${encodeURIComponent(fileName)}`;
-	}
-
 	async function load() {
 		status = "loading";
 		error = null;
@@ -105,42 +84,16 @@
 		{:else}
 			<ul class="mt-3 space-y-3">
 				{#each data.songs as s (s.annSongId)}
-					<li class="rounded border p-3">
-						<div class="flex flex-col gap-1">
-							<div
-								class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1"
-							>
-								<div class="font-medium">
-									<span
-										class="mr-2 inline-flex rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground"
-									>
-										{songCode(s.type, s.number)}
-									</span>
-									{s.songName}
-								</div>
-								{#if s.artistName}
-									<div class="text-sm text-muted-foreground">
-										{s.artistName}
-									</div>
-								{/if}
-							</div>
-
-							{#if s.fileName}
-								<audio
-									class="mt-2 w-full"
-									controls
-									preload="none"
-									src={audioUrl(s.fileName)}
-								></audio>
-								<div class="mt-1 text-xs text-muted-foreground">
-									Source: <span class="font-mono">{s.fileName}</span>
-								</div>
-							{:else}
-								<p class="mt-2 text-sm text-muted-foreground">
-									No audio filename in the snapshot for this song.
-								</p>
-							{/if}
-						</div>
+					<li>
+						<SongEntry
+							animeName={data.anime.mainName}
+							type={s.type}
+							number={s.number}
+							songName={s.songName}
+							artistName={s.artistName}
+							fileName={s.fileName}
+							showPlayer={true}
+						/>
 					</li>
 				{/each}
 			</ul>