From 1bb6e29e47135da93020ebbd975779bbe255d07e Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 6 Jun 2026 16:05:45 -0400
Subject: [PATCH] feature: Track Meta Labels on Player

---
 .../AudioPlayerBar/AudioPlayerBar.razor       |  5 ++-
 .../AudioPlayerBar/AudioPlayerBar.razor.cs    |  2 +
 .../AudioPlayerBar/PlayerSeekZone.razor       |  4 +-
 .../AudioPlayerBar/PlayerSeekZone.razor.cs    | 12 +++---
 .../AudioPlayerBar/PlayerTransportZone.razor  | 29 +++++++------
 .../PlayerTransportZone.razor.cs              |  2 +
 .../AudioPlayerBar/TrackMetaLabel.razor       | 36 ++++++++++++++++
 .../AudioPlayerBar/TrackMetaLabel.razor.cs    | 14 +++++++
 .../AudioPlayerBar/TrackMetaLabel.razor.css   | 42 +++++++++++++++++++
 9 files changed, 123 insertions(+), 23 deletions(-)
 create mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor
 create mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.cs
 create mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.css

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
index 92a13d3..051827b 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
@@ -19,14 +19,15 @@ else
                                          IsLoading="IsLoading"
                                          IsStreaming="IsStreaming"
                                          LoadProgress="LoadProgress"
+                                         DisplayTime="DisplayTime"
+                                         Duration="Duration"
                                          TogglePlayPause="@TogglePlayPause"
                                          Stop="@Stop"
                                          Class="transport-zone"/>
 
                     <VolumeZone Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
 
-                    <PlayerSeekZone DisplayTime="DisplayTime"
-                                    Duration="Duration"
+                    <PlayerSeekZone CurrentTrack="CurrentTrack"
                                     OnSeekStart="@OnSeekStart"
                                     OnSeekEnd="@OnSeekEnd"
                                     OnSeekChange="@OnSeekChange"
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs
index 159d0af..6fa678e 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs
@@ -1,3 +1,4 @@
+using DeepDrftModels.DTOs;
 using DeepDrftPublic.Client.Services;
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
@@ -28,6 +29,7 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
     private bool IsStreaming => PlayerService?.CanStartStreaming ?? false;
     private bool IsStreamingMode => PlayerService?.IsStreamingMode ?? false;
     private double? Duration => PlayerService?.Duration;
+    private TrackDto? CurrentTrack => PlayerService?.CurrentTrack;
     private double Volume => PlayerService?.Volume ?? 0;
     private double LoadProgress => PlayerService?.LoadProgress ?? 0;
     private string? ErrorMessage => PlayerService?.ErrorMessage;
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
index 2794227..10a0688 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
@@ -1,9 +1,9 @@
 @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
 
-<MudStack Row="false" Spacing="0" Class="@Class">
+<MudStack Row="false" Spacing="1" Class="@Class">
     <WaveformSeeker OnSeekStart="OnSeekStart"
                     OnSeekChange="OnSeekChange"
                     OnSeekEnd="OnSeekEnd"
                     Class="seek-waveform"/>
-    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+    <TrackMetaLabel Track="CurrentTrack"/>
 </MudStack>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor.cs
index b26e59e..eccf29d 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor.cs
@@ -1,17 +1,17 @@
+using DeepDrftModels.DTOs;
 using Microsoft.AspNetCore.Components;
 
 namespace DeepDrftPublic.Client.Controls.AudioPlayerBar;
 
 /// <summary>
-/// Centre zone of the player: the <see cref="WaveformSeeker"/> over a timestamp label.
-/// The seeker owns the pointer-gesture seek logic and reads playback state off the cascaded
-/// player service directly; this zone just forwards the seek callbacks up to
-/// <see cref="AudioPlayerBar"/> (whose wiring is unchanged) and renders the timestamp.
+/// Centre zone of the player: the <see cref="WaveformSeeker"/> over the now-playing metadata row
+/// (<see cref="TrackMetaLabel"/>). The seeker owns the pointer-gesture seek logic and reads playback
+/// state off the cascaded player service directly; this zone just forwards the seek callbacks up to
+/// <see cref="AudioPlayerBar"/> (whose wiring is unchanged) and renders the current track's metadata.
 /// </summary>
 public partial class PlayerSeekZone : ComponentBase
 {
-    [Parameter] public double DisplayTime { get; set; }
-    [Parameter] public double? Duration { get; set; }
+    [Parameter] public TrackDto? CurrentTrack { get; set; }
     [Parameter] public EventCallback OnSeekStart { get; set; }
     [Parameter] public EventCallback<double> OnSeekEnd { get; set; }
     [Parameter] public EventCallback<double> OnSeekChange { get; set; }
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
index 63c38c3..9d295f2 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
@@ -1,16 +1,19 @@
 @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
 
-<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="@Class">
-    <PlayerControls IsLoaded="IsLoaded"
-                    CanPlay="CanPlay"
-                    TogglePlayPause="TogglePlayPause"
-                    Stop="Stop"/>
-    @if (IsLoading && !IsStreaming)
-    {
-        <MudProgressCircular Color="Color.Tertiary"
-                             Size="Size.Small"
-                             Max="1D"
-                             Value="@LoadProgress"
-                             Indeterminate="@(LoadProgress == 0)"/>
-    }
+<MudStack Row="false" AlignItems="AlignItems.Center" Spacing="1" Class="@Class">
+    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
+        <PlayerControls IsLoaded="IsLoaded"
+                        CanPlay="CanPlay"
+                        TogglePlayPause="TogglePlayPause"
+                        Stop="Stop"/>
+        @if (IsLoading && !IsStreaming)
+        {
+            <MudProgressCircular Color="Color.Tertiary"
+                                 Size="Size.Small"
+                                 Max="1D"
+                                 Value="@LoadProgress"
+                                 Indeterminate="@(LoadProgress == 0)"/>
+        }
+    </MudStack>
+    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
 </MudStack>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
index 68d81bd..0b11ace 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
@@ -9,6 +9,8 @@ public partial class PlayerTransportZone : ComponentBase
     [Parameter] public bool IsLoading { get; set; }
     [Parameter] public bool IsStreaming { get; set; }
     [Parameter] public double LoadProgress { get; set; }
+    [Parameter] public double DisplayTime { get; set; }
+    [Parameter] public double? Duration { get; set; }
     [Parameter] public EventCallback TogglePlayPause { get; set; }
     [Parameter] public EventCallback Stop { get; set; }
     [Parameter] public string? Class { get; set; }
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor
new file mode 100644
index 0000000..5748711
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor
@@ -0,0 +1,36 @@
+@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
+
+@if (Track is not null)
+{
+    <div class="track-meta-row">
+        <div class="track-meta-identity">
+            <MudText Typo="Typo.subtitle2" Class="track-meta-title text-truncate">
+                @Track.TrackName
+            </MudText>
+            <MudText Typo="Typo.subtitle2"> - </MudText>
+            <MudText Typo="Typo.caption" Class="track-meta-artist text-truncate">
+                @Track.Artist
+            </MudText>
+        </div>
+
+        <div class="track-meta-accents">
+            @if (!string.IsNullOrEmpty(Track.Genre))
+            {
+                <MudChip T="string"
+                         Size="Size.Small"
+                         Variant="Variant.Outlined"
+                         Color="Color.Tertiary"
+                         Class="deepdrft-genre-chip">
+                    @Track.Genre
+                </MudChip>
+            }
+
+            @if (Track.ReleaseDate.HasValue)
+            {
+                <MudText Typo="Typo.caption" Class="track-meta-year">
+                    @Track.ReleaseDate.Value.Year
+                </MudText>
+            }
+        </div>
+    </div>
+}
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.cs
new file mode 100644
index 0000000..9baa21b
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.cs
@@ -0,0 +1,14 @@
+using DeepDrftModels.DTOs;
+using Microsoft.AspNetCore.Components;
+
+namespace DeepDrftPublic.Client.Controls.AudioPlayerBar;
+
+/// <summary>
+/// The now-playing metadata row beneath the <see cref="WaveformSeeker"/>: track title + artist on
+/// the left, genre chip + release year on the right. Reads nothing from the player service itself —
+/// the current <see cref="TrackDto"/> is passed in by <see cref="PlayerSeekZone"/>.
+/// </summary>
+public partial class TrackMetaLabel : ComponentBase
+{
+    [Parameter] public TrackDto? Track { get; set; }
+}
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.css
new file mode 100644
index 0000000..caaa3bc
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.css
@@ -0,0 +1,42 @@
+/* Single space-between row under the waveform: identity on the left, accents on the right.
+   Colours come from the MudBlazor theme (the dock surface is theme-aware), so unlike the
+   always-dark TrackCard glass we do not hard-code green-accent overrides here. */
+.track-meta-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+    padding: 2px 4px 0;
+}
+
+/* Left group shrinks and truncates so a long title never pushes the chip off-screen. */
+.track-meta-identity {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+::deep .track-meta-title {
+    font-family: var(--deepdrft-font-mono);
+    min-width: 0;
+}
+
+::deep .track-meta-artist {
+    opacity: 0.75;
+    min-width: 0;
+}
+
+/* Right group keeps its natural size and never shrinks. */
+.track-meta-accents {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+}
+
+::deep .track-meta-year {
+    opacity: 0.75;
+}