-
- @if (IsLoading && !IsStreaming)
- {
-
- }
+
+
+
+ @if (IsLoading && !IsStreaming)
+ {
+
+ }
+
+
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)
+{
+
+}
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;
+
+///
+/// The now-playing metadata row beneath the : track title + artist on
+/// the left, genre chip + release year on the right. Reads nothing from the player service itself —
+/// the current is passed in by .
+///
+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;
+}