feat(mix-visualizer): gate knob controls with Blazor @if in TopContent band; drop CSS collapse, glass, and TopRowCenter slot

This commit is contained in:
daniel-c-harvey
2026-06-16 20:31:42 -04:00
parent daafae8af6
commit fc7c9e978f
6 changed files with 39 additions and 117 deletions
@@ -2,12 +2,12 @@
@using DeepDrftPublic.Client.Services
@inject MixVisualizerControlState ControlState
@* The Mix visualizer controls (lava reframe Wave R4). SEVEN continuous RadialKnobs — scroll speed,
gradient rotation speed, lava gravity, lava heat, blob density, collision strength, waveform width —
each its own dedicated control with a Material-icon caption (no more R2 temp-remapping: no knob
caption misrepresents its function). The bar lives INLINE in the mix-detail controls area and
ANIMATES open/closed in place via CSS transition off the @Expanded flag — it reads as the controls
collapsing/expanding, NOT a floating popover/drawer (§7b).
@* The Mix visualizer controls. SEVEN continuous RadialKnobs — scroll speed, gradient rotation speed,
lava gravity, lava heat, blob density, collision strength, waveform width — each its own dedicated
control with a Material-icon caption. Visibility is controlled by Blazor, not CSS: the host page
renders this component only while the lava-lamp toggle is on (@if-guarded), so when off it is not in
the DOM at all. There is no collapse/expand animation and no glass surface — the knobs simply appear
in their own transparent band and disappear when un-rendered.
It owns NO JS interop: it mutates the shared, session-scoped MixVisualizerControlState and raises its
Changed event. The backdrop bridge (MixWaveformVisualizer) subscribes to that event and pushes the
@@ -17,13 +17,9 @@
RadialKnob has no icon slot (its Label renders as SVG text) and no aria attribute-capture, so each
control's Material icon rides beside its knob as an adjacent MudIcon caption and the accessible name
rides on the wrapping group div (§7d). HoldValue stays false so the knobs are live — ValueChanged
fires continuously during drag, preserving the Changed/NotifyChanged seam.
fires continuously during drag, preserving the Changed/NotifyChanged seam. *@
Aesthetic: the bar matches the session-hero NowPlaying overlay (§7e) — a translucent dark glass
surface with overlay-label captions and Color.Secondary accents, so it reads as of-a-piece with the
hero rather than a generic MudBlazor panel. *@
<div class="mix-visualizer-controls-bar @(Expanded ? "is-expanded" : "")" aria-hidden="@(!Expanded)">
<div class="mix-visualizer-controls-bar">
<div class="mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
<RadialKnob Value="@ControlState.ScrollSpeed"
@@ -91,12 +87,6 @@
</div>
@code {
/// <summary>
/// Whether the knob bar is expanded. Owned by the host page (the lava-lamp toggle button flips it);
/// drives the CSS open/close transition. When false the bar collapses to zero size in place.
/// </summary>
[Parameter] public bool Expanded { get; set; }
// Each handler mutates its own dedicated property then raises Changed — the bridge re-reads and
// pushes the affected dial. All values are already normalized [0,1]; the bridge maps scroll speed
// to a visible time-span and routes the rest straight to the lava/colour dials.