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.
This commit is contained in:
daniel-c-harvey
2026-06-05 16:38:13 -04:00
parent eed99df0dd
commit cc1fa60a4d
9 changed files with 37 additions and 25 deletions
@@ -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; }
}