From cc1fa60a4d89f4e3b43c14af901fe8bd3d34192d Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 5 Jun 2026 16:38:13 -0400
Subject: [PATCH] refactor(player): move SpectrumVisualizer into VolumeZone
 above volume slider

Rename VolumeControls to VolumeZone; stack 24-bucket SpectrumVisualizer above volume
slider; remove it from PlayerSeekZone. MudSlider stays as seek placeholder. Pin
flex-shrink:0 on volume-zone; add Class param to VolumeZone for layout flexibility.
---
 .../Controls/AudioPlayerBar/AudioPlayerBar.razor  |  2 +-
 .../AudioPlayerBar/AudioPlayerBar.razor.css       |  6 +++---
 .../Controls/AudioPlayerBar/PlayerSeekZone.razor  |  1 -
 .../AudioPlayerBar/SpectrumVisualizer.razor.cs    |  2 +-
 .../Controls/AudioPlayerBar/VolumeControls.razor  | 10 ----------
 .../AudioPlayerBar/VolumeControls.razor.css       |  8 --------
 .../Controls/AudioPlayerBar/VolumeZone.razor      | 15 +++++++++++++++
 ...olumeControls.razor.cs => VolumeZone.razor.cs} |  3 ++-
 .../Controls/AudioPlayerBar/VolumeZone.razor.css  | 15 +++++++++++++++
 9 files changed, 37 insertions(+), 25 deletions(-)
 delete mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor
 delete mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
 create mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor
 rename DeepDrftPublic.Client/Controls/AudioPlayerBar/{VolumeControls.razor.cs => VolumeZone.razor.cs} (83%)
 create mode 100644 DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.css

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
index 422a3dc..d9cff22 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
@@ -22,7 +22,7 @@ else
                                          Stop="@Stop"
                                          Class="transport-zone"/>
 
-                    <VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
+                    <VolumeZone Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
 
                     <PlayerSeekZone DisplayTime="DisplayTime"
                                     Duration="Duration"
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
index 6f3b374..6d742b2 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
@@ -74,7 +74,7 @@
 
 /* Unified responsive player layout.
    Wide and narrow shapes are pure CSS — no runtime breakpoint subscription.
-   Children are targeted by their stable classes (transport-zone, volume-controls,
+   Children are targeted by their stable classes (transport-zone, volume-zone,
    seek-zone) rather than positional nth-child, since all three render a .mud-stack
    root and positional selectors would be fragile. */
 .player-layout {
@@ -89,12 +89,12 @@
 @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; }
+    ::deep .volume-zone { order: 3; flex-shrink: 0; }
 }
 
 /* Narrow (< 600px): transport + volume on top row, seek full-width below */
 @media (max-width: 599.98px) {
     ::deep .transport-zone { order: 1; }
-    ::deep .volume-controls { order: 2; }
+    ::deep .volume-zone { order: 2; }
     ::deep .seek-zone { flex-basis: 100%; order: 3; }
 }
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
index cfa5ced..48b8b80 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
@@ -1,7 +1,6 @@
 @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
 
 <MudStack Row="false" Spacing="0" Class="@Class">
-    <SpectrumVisualizer/>
     <div class="mx-3"
          @onpointerdown="HandlePointerDown"
          @onpointerup="HandlePointerUp"
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.cs
index bb14db0..b4d6dce 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.cs
@@ -9,7 +9,7 @@ public partial class SpectrumVisualizer : ComponentBase, IAsyncDisposable
 
     [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
 
-    [Parameter] public int BucketCount { get; set; } = 32;
+    [Parameter] public int BucketCount { get; set; } = 24;
 
     private readonly string _instanceId = Guid.NewGuid().ToString();
     private double[] _spectrumData = Array.Empty<double>();
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor
deleted file mode 100644
index 94be941..0000000
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor
+++ /dev/null
@@ -1,10 +0,0 @@
-<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="volume-controls">
-    <MudIcon Icon="@GetVolumeIcon()"/>
-    <MudSlider T="double"
-               Min="0"
-               Max="1"
-               Step="0.01"
-               Value="@Volume"
-               ValueChanged="@VolumeChanged"
-               Class="volume-slider"/>
-</MudStack>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
deleted file mode 100644
index 89f4198..0000000
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Width caps only — layout/colour come from MudStack + theme */
-.volume-controls {
-    width: 70px;
-}
-
-.volume-slider {
-    width: 50px;
-}
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor
new file mode 100644
index 0000000..a1e6a22
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor
@@ -0,0 +1,15 @@
+@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
+
+<MudStack Row="false" AlignItems="AlignItems.Center" Spacing="1" Class="@($"volume-zone {Class}".TrimEnd())">
+    <SpectrumVisualizer BucketCount="24"/>
+    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="volume-row">
+        <MudIcon Icon="@GetVolumeIcon()"/>
+        <MudSlider T="double"
+                   Min="0"
+                   Max="1"
+                   Step="0.01"
+                   Value="@Volume"
+                   ValueChanged="@VolumeChanged"
+                   Class="volume-slider"/>
+    </MudStack>
+</MudStack>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.cs
similarity index 83%
rename from DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs
rename to DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.cs
index eec58e4..e6fb5b2 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.cs
@@ -3,8 +3,9 @@ using MudBlazor;
 
 namespace DeepDrftPublic.Client.Controls.AudioPlayerBar;
 
-public partial class VolumeControls : ComponentBase
+public partial class VolumeZone : ComponentBase
 {
+    [Parameter] public string? Class { get; set; }
     [Parameter] public required double Volume { get; set; }
     [Parameter] public required EventCallback<double> VolumeChanged { get; set; }
     private string GetVolumeIcon()
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.css
new file mode 100644
index 0000000..acbf638
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeZone.razor.css
@@ -0,0 +1,15 @@
+/* Width caps only — layout/colour come from MudStack + theme.
+   The zone stacks the spectrum visualizer above the volume row. Width is sized
+   so 24 spectrum bars (4px min + 2px gap ≈ 140px) render without clipping under
+   the container's overflow:hidden, while staying compact. */
+.volume-zone {
+    width: 150px;
+}
+
+.volume-row {
+    width: 100%;
+}
+
+.volume-slider {
+    flex: 1;
+}