song info better

This commit is contained in:
2026-02-06 03:03:14 -08:00
parent c4d39c6f81
commit 722c133811

View File

@@ -254,6 +254,10 @@
return `${typeLabel}${n ? String(n) : ""}`;
}
function animeLabel(t: Track) {
return ((t.animeName ?? t.album ?? "").trim() || "Unknown anime").trim();
}
function trackLabel(t: Track): TrackLabel {
const title = (t.title ?? "").trim() || "Unknown title";
const artist = (t.artist ?? "").trim() || "Unknown Artist";
@@ -429,18 +433,34 @@
</button>
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-medium">
{#if snap.currentTrack}
{trackLabel(snap.currentTrack).primary}
{:else}
{nowPlayingLabel()}
{/if}
</div>
{#if snap.currentTrack && trackLabel(snap.currentTrack).secondary}
<div class="truncate text-xs text-muted-foreground">
{trackLabel(snap.currentTrack).secondary}
{#if snap.currentTrack}
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
{#if typeNumberLabel(snap.currentTrack)}
<span
class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>
{typeNumberLabel(snap.currentTrack)}
</span>
{/if}
<span class="truncate text-sm">
{(
snap.currentTrack.animeName ??
snap.currentTrack.album ??
""
).trim()}
</span>
</div>
<div class="mt-1 text-foreground/80">
{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
<span class="text-sm text-muted-foreground">
{(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
</span>
</div>
{:else}
<div class="truncate text-sm font-medium">{nowPlayingLabel()}</div>
{/if}
<div class="text-xs text-muted-foreground">
{formatTime(currentTime)} / {formatTime(duration)}
</div>
@@ -542,16 +562,28 @@
<span class="text-muted-foreground"></span>
{/if}
<div class="min-w-0 flex-1">
<div class="truncate text-left text-sm">
{trackLabel(item.track).primary}
</div>
{#if trackLabel(item.track).secondary}
<div
class="truncate text-left text-xs text-muted-foreground"
<div
class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
>
{#if typeNumberLabel(item.track)}
<span
class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>
{typeNumberLabel(item.track)}
</span>
{/if}
<span class="truncate text-sm"
>{animeLabel(item.track)}</span
>
{trackLabel(item.track).secondary}
</div>
{/if}
</div>
<div class="mt-1 text-foreground/80">
{(item.track.title ?? "").trim() || "Unknown title"}
<span class="text-sm text-muted-foreground">
{(item.track.artist ?? "").trim() ||
"Unknown Artist"}
</span>
</div>
</div>
</button>
@@ -573,17 +605,42 @@
</div>
{:else}
<!-- Desktop: sticky, in-flow sidebar (sticks vertically, flows horizontally in the layout column) -->
<aside class="sticky top-4 h-[calc(100dvh-2rem)] overflow-auto bg-background">
<aside
class="sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background"
>
<div class="flex items-center gap-2 border-b px-3 py-3">
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-semibold">Player</div>
<div class="truncate text-xs text-muted-foreground">
{#if snap.currentTrack}
{trackLabel(snap.currentTrack).primary}
{:else}
{#if snap.currentTrack}
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
{#if typeNumberLabel(snap.currentTrack)}
<span
class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>
{typeNumberLabel(snap.currentTrack)}
</span>
{/if}
<span class="truncate">
{(
snap.currentTrack.animeName ??
snap.currentTrack.album ??
""
).trim()}
</span>
</div>
<div class="mt-1 text-foreground/80">
{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
<span class="text-sm text-muted-foreground">
{(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
</span>
</div>
{:else}
<div class="truncate text-xs text-muted-foreground">
{nowPlayingLabel()}
{/if}
</div>
</div>
{/if}
</div>
<button
@@ -597,7 +654,7 @@
</div>
{#if snap.uiOpen}
<div class="flex h-[calc(100dvh-49px)] flex-col">
<div class="flex h-full flex-col">
<div class="space-y-2 px-3 py-3">
<div class="flex items-center justify-between gap-2">
<div class="text-xs text-muted-foreground">
@@ -680,7 +737,7 @@
</div>
</div>
<div class="min-h-0 flex-1 overflow-auto px-3 pb-3">
<div class="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
{#if snap.queue.length === 0}
<p class="text-sm text-muted-foreground">Queue is empty.</p>
{:else}
@@ -701,16 +758,28 @@
<span class="text-muted-foreground"></span>
{/if}
<div class="min-w-0 flex-1">
<div class="truncate text-left text-sm">
{trackLabel(item.track).primary}
</div>
{#if trackLabel(item.track).secondary}
<div
class="truncate text-left text-xs text-muted-foreground"
<div
class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
>
{#if typeNumberLabel(item.track)}
<span
class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>
{typeNumberLabel(item.track)}
</span>
{/if}
<span class="truncate text-sm"
>{animeLabel(item.track)}</span
>
{trackLabel(item.track).secondary}
</div>
{/if}
</div>
<div class="mt-1 text-foreground/80">
{(item.track.title ?? "").trim() || "Unknown title"}
<span class="text-sm text-muted-foreground">
{(item.track.artist ?? "").trim() ||
"Unknown Artist"}
</span>
</div>
</div>
</button>