From c4d39c6f815d39b66cbe7cdbffd68f2740e6face Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 02:39:45 -0800
Subject: [PATCH] display all the other song info on global player

---
 src/lib/components/GlobalPlayer.svelte | 77 ++++++++++++++++++++++++--
 src/routes/+layout.svelte              |  2 +-
 2 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index e7f67f4..0fc1edc 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -8,6 +8,11 @@
 		queueIndex: number;
 		isCurrent: boolean;
 	};
+
+	export type TrackLabel = {
+		primary: string;
+		secondary: string | null;
+	};
 </script>
 
 <script lang="ts">
@@ -233,10 +238,33 @@
 		return `${m}:${String(r).padStart(2, "0")}`;
 	}
 
-	function titleForTrack(t: Track) {
+	function typeNumberLabel(t: Track) {
+		const type = t.type;
+		const n = Number(t.number ?? 0);
+
+		let typeLabel: string | null = null;
+		if (typeof type === "number") {
+			if (type === 1) typeLabel = "OP";
+			else if (type === 2) typeLabel = "ED";
+			else if (type === 3) typeLabel = "INS";
+			else typeLabel = `T${type}`;
+		}
+
+		if (!typeLabel) return null;
+		return `${typeLabel}${n ? String(n) : ""}`;
+	}
+
+	function trackLabel(t: Track): TrackLabel {
 		const title = (t.title ?? "").trim() || "Unknown title";
 		const artist = (t.artist ?? "").trim() || "Unknown Artist";
-		return `${title} — ${artist}`;
+		const primary = `${title} — ${artist}`;
+
+		const anime = (t.animeName ?? t.album ?? "").trim();
+		const typeNo = typeNumberLabel(t);
+
+		const secondary = [anime, typeNo].filter(Boolean).join(" • ") || null;
+
+		return { primary, secondary };
 	}
 
 	function computeQueueDisplay(): QueueDisplayItem[] {
@@ -401,7 +429,18 @@
 			</button>
 
 			<div class="min-w-0 flex-1">
-				<div class="truncate text-sm font-medium">{nowPlayingLabel()}</div>
+				<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}
+					</div>
+				{/if}
 				<div class="text-xs text-muted-foreground">
 					{formatTime(currentTime)} / {formatTime(duration)}
 				</div>
@@ -502,7 +541,18 @@
 											{#if item.isCurrent}
 												<span class="text-muted-foreground">▶ </span>
 											{/if}
-											{titleForTrack(item.track)}
+											<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"
+													>
+														{trackLabel(item.track).secondary}
+													</div>
+												{/if}
+											</div>
 										</button>
 
 										<button
@@ -528,7 +578,11 @@
 			<div class="min-w-0 flex-1">
 				<div class="truncate text-sm font-semibold">Player</div>
 				<div class="truncate text-xs text-muted-foreground">
-					{nowPlayingLabel()}
+					{#if snap.currentTrack}
+						{trackLabel(snap.currentTrack).primary}
+					{:else}
+						{nowPlayingLabel()}
+					{/if}
 				</div>
 			</div>
 
@@ -646,7 +700,18 @@
 										{#if item.isCurrent}
 											<span class="text-muted-foreground">▶ </span>
 										{/if}
-										{titleForTrack(item.track)}
+										<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"
+												>
+													{trackLabel(item.track).secondary}
+												</div>
+											{/if}
+										</div>
 									</button>
 
 									<button
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7dcd820..b694d9b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,7 +16,7 @@
 	- Mobile/tablet: single column, player renders client-only (mobile bar/drawer)
 	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
 -->
-<div class="min-h-dvh lg:grid gap-16 lg:grid-cols-[1fr_340px]">
+<div class="min-h-dvh lg:grid gap-16 lg:grid-cols-[1fr_420px]">
 	<main>
 		{@render children()}
 	</main>