Move NowPlaying waveform visualizer to full-bleed hero-right background

Lift the WaveformVisualizer + control popover out of the 120px NowPlayingCard box into NowPlaying as a full-panel background layer; migrate the hero-right wrapper and its scoped styles from Home into NowPlaying.
2026-06-17 13:06:48 -04:00
parent 0dce46bcab
commit 528f09d96a
6 changed files with 77 additions and 64 deletions
@@ -1,11 +1,42 @@
-@* Pulsing rings *@
-<div class="circle-deco"></div>
-<div class="circle-deco"></div>
-<div class="circle-deco"></div>
+@using DeepDrftPublic.Client.Services

-<div class="now-playing-content">
-    <NowPlayingCard />
+@* Hero-right panel (owns the navy backdrop + clipping, formerly Home.razor's .hero-right wrapper). *@
+<div class="now-playing-panel">
+    @* Full-bleed waveform background. The visualizer mounts with Fill="true" (position:absolute; inset:0),
+       so .np-visualizer-bg is the positioned, sized ancestor that lets the lava fill the whole hero-right
+       panel. Driven by the live cascaded player — keyed on the current track via ReleaseEntryKey/TrackId/
+       TrackEntryKey so it scrolls to the real signal and sits at-rest when nothing plays. Read-only: the
+       background visualizes, it never seeks. Sits behind the rings + content (z-order via stacking below). *@
+    <div class="np-visualizer-bg">
+        <WaveformVisualizer Fill="true"
+                            ReleaseEntryKey="@(Player?.CurrentTrack?.Release?.EntryKey ?? string.Empty)"
+                            TrackId="@Player?.CurrentTrack?.Id"
+                            TrackEntryKey="@Player?.CurrentTrack?.EntryKey" />
+    </div>

-    @* Stat row - hard-coded for now. TODO Phase 2: wire to real track count / identity model. *@
-    <NowPlayingStats />
-</div>
+    @* The lava-lamp popover trigger lands in the panel's top-right corner (full parity, §8e). Above the
+       canvas and pointer-enabled so the icon is clickable even though the visualizer layer is
+       pointer-events:none. *@
+    <div class="np-visualizer-controls">
+        <WaveformVisualizerControlPopover IconSize="Size.Small"
+                                          AnchorOrigin="Origin.BottomRight"
+                                          TransformOrigin="Origin.TopLeft" />
+    </div>
+
+    @* Pulsing rings *@
+    <div class="circle-deco"></div>
+    <div class="circle-deco"></div>
+    <div class="circle-deco"></div>
+
+    <div class="now-playing-content">
+        <NowPlayingCard />
+
+        @* Stat row - hard-coded for now. TODO Phase 2: wire to real track count / identity model. *@
+        <NowPlayingStats />
+    </div>
+</div>
+
+
+@code {
+    [CascadingParameter] public IStreamingPlayerService? Player { get; set; }
+}