diff --git a/src/lib/components/SongEntry.svelte b/src/lib/components/SongEntry.svelte index d05d393..44b01cc 100644 --- a/src/lib/components/SongEntry.svelte +++ b/src/lib/components/SongEntry.svelte @@ -8,6 +8,7 @@ } from "@lucide/svelte"; import { player } from "$lib/player/store.svelte"; import { type SongType, trackFromSongRow } from "$lib/player/types"; + import { songTypeNumberLabel } from "$lib/utils/amq"; import { Button } from "./ui/button"; type SongEntryProps = { @@ -18,9 +19,9 @@ songName: string; artistName: string | null; fileName?: string | null; - globalPercent: number | null; - dub: boolean | null; - rebroadcast: boolean | null; + globalPercent: number; + dub: boolean; + rebroadcast: boolean; }; let { @@ -36,14 +37,7 @@ rebroadcast, }: SongEntryProps = $props(); - const typeLabelMap: Record = { - 1: "OP", - 2: "ED", - 3: "INS", - }; - - const typeLabel = $derived(typeLabelMap[type] ?? `T${type}`); - const displayTypeNumber = $derived(`${typeLabel}${number || ""}`); + const displayTypeNumber = $derived(songTypeNumberLabel(type, number)); const artistDisplay = $derived.by( () => artistName?.trim() || "Unknown Artist", @@ -60,6 +54,7 @@ fileName, dub, rebroadcast, + globalPercent, }), ); diff --git a/src/lib/components/player/PlayerDesktop.svelte b/src/lib/components/player/PlayerDesktop.svelte index 34fea7e..2b01146 100644 --- a/src/lib/components/player/PlayerDesktop.svelte +++ b/src/lib/components/player/PlayerDesktop.svelte @@ -2,12 +2,22 @@ import { Disc, Volume1, Volume2, VolumeX } from "@lucide/svelte"; import { player } from "$lib/player/store.svelte"; + import { songTypeNumberLabel } from "$lib/utils/amq"; import Controls from "./Controls.svelte"; import { getAudioContext } from "./ctx.svelte"; import Queue from "./Queue.svelte"; import { formatTime } from "./utils"; const audio = getAudioContext(); + + const displayTypeNumber = $derived( + player.currentTrack + ? songTypeNumberLabel( + player.currentTrack.type, + player.currentTrack.number, + ) + : "", + );
-
-

- {player.currentTrack.title} +
+

+ {player.currentTrack.animeName} + {displayTypeNumber}

-

- {player.currentTrack.artist} +

+ {player.currentTrack.title} + · + {player.currentTrack.globalPercent}%

-

- {player.currentTrack.album || player.currentTrack.animeName || ""} +

+ {player.currentTrack.artist}

diff --git a/src/lib/components/player/PlayerMobile.svelte b/src/lib/components/player/PlayerMobile.svelte index 4a68f4c..7b905fd 100644 --- a/src/lib/components/player/PlayerMobile.svelte +++ b/src/lib/components/player/PlayerMobile.svelte @@ -2,6 +2,7 @@ import { Disc } from "@lucide/svelte"; import * as Drawer from "$lib/components/ui/drawer"; import { player } from "$lib/player/store.svelte"; + import { songTypeNumberLabel } from "$lib/utils/amq"; import Controls from "./Controls.svelte"; import { getAudioContext } from "./ctx.svelte"; import Queue from "./Queue.svelte"; @@ -9,6 +10,15 @@ const audio = getAudioContext(); let open = $state(false); + + const displayTypeNumber = $derived( + player.currentTrack + ? songTypeNumberLabel( + player.currentTrack.type, + player.currentTrack.number, + ) + : "", + );
@@ -19,19 +29,17 @@ class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer" onclick={() => (open = true)} > - -
- -
-
- {player.currentTrack?.title || "Unknown Title"} + {player.currentTrack?.animeName || "Unknown"} + {displayTypeNumber}
- {player.currentTrack?.artist || "Unknown Artist"} + {player.currentTrack?.title || "Unknown Title"} + · + {player.currentTrack?.globalPercent}%
@@ -59,14 +67,19 @@
-

- {player.currentTrack?.title} +

+ {player.currentTrack?.animeName} + {displayTypeNumber}

-

- {player.currentTrack?.artist} +

+ {player.currentTrack?.title} + · + {player.currentTrack?.globalPercent}%

-

- {player.currentTrack?.album || player.currentTrack?.animeName} +

+ {player.currentTrack?.artist}

@@ -87,7 +100,7 @@
-
+
diff --git a/src/lib/components/player/PlayerRoot.svelte b/src/lib/components/player/PlayerRoot.svelte index bca01e8..566e67a 100644 --- a/src/lib/components/player/PlayerRoot.svelte +++ b/src/lib/components/player/PlayerRoot.svelte @@ -1,7 +1,8 @@
-
-

Up Next

- -
+
+

Up Next

+ +
-
- {#if player.displayQueue.length === 0} -
- Queue is empty -
- {:else} - {#each player.displayQueue as track, i (track.id)} -
onDragStart(e, i)} - ondragover={(e) => onDragOver(e, i)} - ondrop={(e) => onDrop(e, i)} - onclick={() => onJump(track)} - onkeydown={(e) => e.key === "Enter" && onJump(track)} - class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm" - class:active={player.currentId === track.id} - class:border-t-2={dragOverIndex === i} - class:border-primary={dragOverIndex === i} - > -
- -
- {#if player.currentId === track.id} -
- {:else} - {i + 1} - {/if} -
+
+ {#if player.displayQueue.length === 0} +
+ Queue is empty +
+ {:else} + {#each player.displayQueue as track, i (track.id)} +
onDragStart(e, i)} + ondragover={(e) => onDragOver(e, i)} + ondrop={(e) => onDrop(e, i)} + onclick={() => onJump(track)} + onkeydown={(e) => e.key === "Enter" && onJump(track)} + class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm" + class:active={player.currentId === track.id} + class:border-t-2={dragOverIndex === i} + class:border-primary={dragOverIndex === i} + > +
+ +
+ {#if player.currentId === track.id} +
+ {:else} + {i + 1} + {/if} +
- - -
+ + +
-
-
- {track.title} -
-
- {track.artist} -
-
+
+
+ {track.animeName} + {songTypeNumberLabel( + track.type, + track.number, + )} + {track.globalPercent}% +
+
+ {track.title} — + {track.artist} +
+
- -
- {/each} - {/if} -
+ +
+ {/each} + {/if} +
diff --git a/src/lib/db/schema/tables/songs.ts b/src/lib/db/schema/tables/songs.ts index 87decde..1a89afb 100644 --- a/src/lib/db/schema/tables/songs.ts +++ b/src/lib/db/schema/tables/songs.ts @@ -37,7 +37,7 @@ export const songs = sqliteTable( fileName: text("file_name"), fileName480: text("file_name_480"), fileName720: text("file_name_720"), - globalPercent: integer("global_percent"), + globalPercent: integer("global_percent").notNull(), meanVolume: real("mean_volume"), /** diff --git a/src/lib/player/types.ts b/src/lib/player/types.ts index 5f360a4..9198dde 100644 --- a/src/lib/player/types.ts +++ b/src/lib/player/types.ts @@ -18,11 +18,12 @@ export type Track = { /** Optional extra context for rendering/debugging */ animeName?: string; - type?: SongType; - number?: number; + type: SongType; + number: number; fileName?: string | null; - dub?: boolean | null; - rebroadcast?: boolean | null; + dub: boolean; + rebroadcast: boolean; + globalPercent: number; }; export type SongRowLike = { @@ -33,8 +34,9 @@ export type SongRowLike = { songName: string; artistName: string | null; fileName?: string | null; - dub: boolean | null; - rebroadcast: boolean | null; + dub: boolean; + rebroadcast: boolean; + globalPercent: number; }; /** @@ -61,5 +63,6 @@ export function trackFromSongRow(row: SongRowLike): Track | null { fileName, dub: row.dub, rebroadcast: row.rebroadcast, + globalPercent: row.globalPercent, }; } diff --git a/src/lib/utils/amq/song-utils.ts b/src/lib/utils/amq/song-utils.ts index 8cfcd95..fc10118 100644 --- a/src/lib/utils/amq/song-utils.ts +++ b/src/lib/utils/amq/song-utils.ts @@ -1,20 +1,5 @@ -export const SongTypeMap: Record = { - OP: 1, - ED: 2, - INS: 3, -}; +import { AmqSongLinkTypeMapReverse } from "$lib/types/amq"; -// Map number back to string for displaying in UI -export const SongTypeReverseMap: Record = { - 1: "OP", - 2: "ED", - 3: "INS", -}; - -export const SongCategoryMap: Record = { - 0: "None", - 1: "Instrumental", - 2: "Chanting", - 3: "Character", - 4: "Standard", -}; +export function songTypeNumberLabel(type: number, number: number) { + return `${AmqSongLinkTypeMapReverse[type as keyof typeof AmqSongLinkTypeMapReverse] ?? `T${type}`}${number ? number : ""}`; +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0cc93a6..fd4d15f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -74,6 +74,9 @@ songName: s.songName, artistName: s.artistName, fileName: s.fileName ?? null, + dub: Boolean(s.dub), + rebroadcast: Boolean(s.rebroadcast), + globalPercent: s.globalPercent, }), ) .filter((t) => t !== null); @@ -98,6 +101,9 @@ songName: s.songName, artistName: s.artistName, fileName: s.fileName ?? null, + dub: Boolean(s.dub), + rebroadcast: Boolean(s.rebroadcast), + globalPercent: s.globalPercent, }), ) .filter((t) => t !== null); @@ -157,8 +163,7 @@ class="rounded border px-3 py-2 text-sm" placeholder="Type to search by name…" value={params.q} - oninput={(e) => - (params.q = (e.currentTarget as HTMLInputElement).value)} + oninput={(e) => (params.q = (e.currentTarget as HTMLInputElement).value)} autocomplete="off" spellcheck={false} /> @@ -176,10 +181,7 @@
  • - + {a.mainName}
    @@ -196,8 +198,7 @@ type="button" class="btn-icon" onclick={() => void playAllNextForAnime(a)} - disabled={a.opCount + a.edCount + a.insertCount === - 0} + disabled={a.opCount + a.edCount + a.insertCount === 0} title="Play all next" aria-label="Play all next" > @@ -208,8 +209,7 @@ type="button" class="btn-icon" onclick={() => void queueAllForAnime(a)} - disabled={a.opCount + a.edCount + a.insertCount === - 0} + disabled={a.opCount + a.edCount + a.insertCount === 0} title="Queue all" aria-label="Queue all" > diff --git a/src/routes/anime/[annId]/+page.svelte b/src/routes/anime/[annId]/+page.svelte index 13f55a3..43deb77 100644 --- a/src/routes/anime/[annId]/+page.svelte +++ b/src/routes/anime/[annId]/+page.svelte @@ -38,6 +38,7 @@ fileName: s.fileName ?? null, dub: Boolean(s.dub), rebroadcast: Boolean(s.rebroadcast), + globalPercent: s.globalPercent, }), ) .filter((t) => t !== null); diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte index 57dffd4..3d0919e 100644 --- a/src/routes/list/+page.svelte +++ b/src/routes/list/+page.svelte @@ -64,6 +64,7 @@ fileName: r.fileName, dub: Boolean(r.dub), rebroadcast: Boolean(r.rebroadcast), + globalPercent: r.globalPercent, }), ) .filter((t) => t !== null), diff --git a/src/routes/songs/+page.svelte b/src/routes/songs/+page.svelte index 52c1cfa..e1ee395 100644 --- a/src/routes/songs/+page.svelte +++ b/src/routes/songs/+page.svelte @@ -51,6 +51,7 @@ fileName: r.fileName, dub: Boolean(r.dub), rebroadcast: Boolean(r.rebroadcast), + globalPercent: r.globalPercent, }), ) .filter((t) => t !== null),