Files
deepdrft/DeepDrftPublic.Client/Controls/NowPlaying.razor
T
daniel-c-harvey 528f09d96a 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

43 lines
1.9 KiB
Plaintext

@using DeepDrftPublic.Client.Services
@* 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>
@* 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; }
}