feat(now-playing): mount real waveform visualizer in NowPlaying card (mode C) + Fill container-sizing mode

Replace the 20 synthetic bars with a contained WaveformVisualizer driven by the live player, pointed at the current track; add a Fill mode (CSS-only, defaults off) sizing the canvas to its container; place the lava-lamp icon to popover on the card.
This commit is contained in:
daniel-c-harvey
2026-06-17 12:15:49 -04:00
parent 9009f2c8cf
commit 05486a61af
5 changed files with 58 additions and 50 deletions
@@ -19,6 +19,19 @@
overflow: hidden;
}
/* Fill / container-sizing mode (Phase 12 §6c, mode C). The contained hosts (the NowPlaying card)
set Fill="true": the canvas fills its nearest positioned ancestor instead of the viewport, and the
footer clip drops (there is no player bar to clear — the bounding box IS the clip). The host is
responsible for giving this layer a positioned, sized parent. `inset: 0` over `position: absolute`
makes the box exactly that parent's content box; `overflow: hidden` still clips the canvas to it.
The canvas backing-store sizing in WaveformVisualizer.ts is unchanged — it already measures the
canvas's own box, so this purely re-parents the box from the viewport to the container. */
.mix-waveform-bg--fill {
position: absolute;
inset: 0;
z-index: 0;
}
/* The canvas fills the viewport. All ribbon shading (luminous depth, soft edges) is drawn inside the
canvas by the WebGL2 fragment shader. NO CSS backdrop-filter: it was a confirmed per-frame perf killer
on the Canvas predecessor and is exactly the cost the GPU move exists to eliminate (spec §2, §5.2);