diff --git a/DeepDrftPublic.Client/Controls/NowPlaying.razor b/DeepDrftPublic.Client/Controls/NowPlaying.razor index f351b79..1b70ba0 100644 --- a/DeepDrftPublic.Client/Controls/NowPlaying.razor +++ b/DeepDrftPublic.Client/Controls/NowPlaying.razor @@ -1,11 +1,42 @@ -@* Pulsing rings *@ -
-
-
+@using DeepDrftPublic.Client.Services -
- +@* Hero-right panel (owns the navy backdrop + clipping, formerly Home.razor's .hero-right wrapper). *@ +
+ @* 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). *@ +
+ +
- @* Stat row - hard-coded for now. TODO Phase 2: wire to real track count / identity model. *@ - -
\ No newline at end of file + @* 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. *@ +
+ +
+ + @* Pulsing rings *@ +
+
+
+ +
+ + + @* Stat row - hard-coded for now. TODO Phase 2: wire to real track count / identity model. *@ + +
+
+ + +@code { + [CascadingParameter] public IStreamingPlayerService? Player { get; set; } +} diff --git a/DeepDrftPublic.Client/Controls/NowPlaying.razor.css b/DeepDrftPublic.Client/Controls/NowPlaying.razor.css index 7c3d150..d8efd6c 100644 --- a/DeepDrftPublic.Client/Controls/NowPlaying.razor.css +++ b/DeepDrftPublic.Client/Controls/NowPlaying.razor.css @@ -3,6 +3,41 @@ 50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.03); } } +/* Hero-right panel (migrated from Home.razor's .hero-right). Owns the navy backdrop, clips the + full-bleed visualizer + ring overflow, and is the positioned ancestor for the inset:0 layers. */ +.now-playing-panel { + background: var(--deepdrft-navy); + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + overflow: hidden; + height: 100%; +} + +@media (max-width: 960px) { + .now-playing-panel { min-height: 50vh; } +} + +/* Full-bleed waveform background. WaveformVisualizer Fill="true" renders its layer as + position:absolute; inset:0, so this box only needs to be a positioned, sized ancestor. z-index:0 + pins it to the bottom of the panel's stacking order, beneath the rings and the now-playing-content. */ +.np-visualizer-bg { + position: absolute; + inset: 0; + z-index: 0; +} + +/* The lava-lamp popover trigger overlays the panel's top-right corner (full parity, §8e). Above the + canvas (z-index) and pointer-enabled so the icon is clickable even though the visualizer layer below + it is pointer-events:none. */ +.np-visualizer-controls { + position: absolute; + top: 1rem; + right: 1rem; + z-index: 3; +} + .now-playing-content { position: relative; z-index: 2; @@ -22,4 +57,4 @@ .circle-deco:nth-child(1) { width: 320px; height: 320px; animation-delay: 0s; } .circle-deco:nth-child(2) { width: 520px; height: 520px; animation-delay: 0.8s; } -.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; } \ No newline at end of file +.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; } diff --git a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor index 1c06266..a3731cd 100644 --- a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor +++ b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor @@ -7,23 +7,6 @@ ? $"{Player.CurrentTrack.Release?.Artist} · {Player.CurrentTrack.Release?.Title ?? "Single"}" : "Select a track to begin") - - @* Mode C (§3f, §6c): the real waveform visualizer, contained to this card and driven by the live - cascaded player. Fill="true" sizes the canvas to this positioned box instead of the viewport. - The bridge follows whatever is playing — 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 card visualizes, it never seeks. The lava-lamp popover sits in the corner (full parity, §8e). *@ -
- -
- -
-
diff --git a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css index 3561096..b7c1518 100644 --- a/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css +++ b/DeepDrftPublic.Client/Controls/NowPlayingCard.razor.css @@ -45,26 +45,3 @@ color: rgba(250, 250, 248, 0.45); letter-spacing: 0.08em; } - -/* Contained visualizer region (Phase 12 mode C). The visualizer mounts with Fill="true", whose - layer is `position: absolute; inset: 0` — so this box must be a positioned, sized ancestor for the - canvas to fill. `overflow: hidden` keeps the lava inside the card's rounded chrome. The height is the - card's bounded live readout — taller than the old synthetic-bar strip so the real waveform reads, but - still compact for a home-page hero panel. */ -.np-visualizer { - position: relative; - height: 120px; - margin-top: 1.2rem; - overflow: hidden; - border-radius: 2px; -} - -/* The lava-lamp popover trigger overlays the visualizer's top-right corner (full parity, §8e). Above - the canvas (z-index) and pointer-enabled so the icon is clickable even though the canvas layer below - it is pointer-events:none. */ -.np-visualizer-controls { - position: absolute; - top: 0.25rem; - right: 0.25rem; - z-index: 1; -} diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor index 893533e..b2d6d4b 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor +++ b/DeepDrftPublic.Client/Pages/Home.razor @@ -14,9 +14,7 @@ -
- -
+