From 87f722fa581ffa43d7440626a062955cecd75213 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 5 Jun 2026 14:38:38 -0400
Subject: [PATCH] refactor(player): move TimestampLabel from
 PlayerTransportZone to PlayerSeekZone so volume centers against buttons row
 height

---
 .../AudioPlayerBar/AudioPlayerBar.razor       |  2 --
 .../AudioPlayerBar/AudioPlayerBar.razor.css   |  2 +-
 .../AudioPlayerBar/PlayerSeekZone.razor       |  1 +
 .../AudioPlayerBar/PlayerTransportZone.razor  | 29 +++++++++----------
 .../PlayerTransportZone.razor.cs              |  2 --
 .../PlayerTransportZone.razor.css             | 10 -------
 6 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
index d07f3dd..422a3dc 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
@@ -18,8 +18,6 @@ else
                                          IsLoading="IsLoading"
                                          IsStreaming="IsStreaming"
                                          LoadProgress="LoadProgress"
-                                         DisplayTime="DisplayTime"
-                                         Duration="Duration"
                                          TogglePlayPause="@TogglePlayPause"
                                          Stop="@Stop"
                                          Class="transport-zone"/>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
index ce23ac6..38848b5 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
@@ -89,7 +89,7 @@
 @media (min-width: 600px) {
     ::deep .transport-zone { order: 1; }
     ::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
-    ::deep .volume-controls { order: 3; align-self: flex-start; }
+    ::deep .volume-controls { order: 3; }
 }
 
 /* Narrow (< 600px): transport + volume on top row, seek full-width below */
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
index 5a9b9b7..cfa5ced 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
@@ -15,4 +15,5 @@
                    Immediate="true"
                    Disabled="@(!CanSeek)"/>
     </div>
+    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
 </MudStack>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
index 25a4fd6..7ca56ba 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
@@ -1,19 +1,16 @@
 @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
 
-<MudStack Row="false" AlignItems="AlignItems.Center" Spacing="2" Class="@Class">
-    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
-        <PlayerControls IsPlaying="IsPlaying"
-                        IsLoaded="IsLoaded"
-                        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 Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="@Class">
+    <PlayerControls IsPlaying="IsPlaying"
+                    IsLoaded="IsLoaded"
+                    TogglePlayPause="TogglePlayPause"
+                    Stop="Stop"/>
+    @if (IsLoading && !IsStreaming)
+    {
+        <MudProgressCircular Color="Color.Tertiary"
+                             Size="Size.Small"
+                             Max="1D"
+                             Value="@LoadProgress"
+                             Indeterminate="@(LoadProgress == 0)"/>
+    }
 </MudStack>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
index 9990a2d..d30a2dc 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
@@ -9,8 +9,6 @@ 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/PlayerTransportZone.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.css
index 32881b0..c465eda 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.css
@@ -2,13 +2,3 @@
 .transport-zone {
     min-width: 180px;
 }
-
-/* Narrow (< 600px): lay the transport root horizontally (controls beside
-   timestamp) so it fits on one line next to VolumeControls. Scoped to the
-   root .transport-zone stack so the nested controls stack is untouched. */
-@media (max-width: 599.98px) {
-    .transport-zone {
-        flex-direction: row !important;
-        align-items: center;
-    }
-}