daniel-c-harvey
05486a61af
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.
46 lines
2.4 KiB
CSS
46 lines
2.4 KiB
CSS
/* Full-viewport fixed backdrop. Sits behind the detail content (.mix-detail-foreground is z-index:1)
|
||
and never intercepts pointer events — except the zoom slider, which re-enables them on itself.
|
||
|
||
Footer clip (Phase 10 W1, spec §2c): the backdrop must stop cleanly ABOVE the audio player bar so
|
||
no lava/waveform pixel paints over or under it. `overflow: hidden` clips the canvas to this box, and
|
||
`bottom` is inset by `--player-height`, which AudioPlayerBar publishes on :root via its ResizeObserver
|
||
(Interop/layout/spacer.ts). The observer now points at whichever element is live:
|
||
expanded → the full player dock (tracks breakpoint reflow + error-banner growth)
|
||
minimized → the minimized-dock FAB container (~56–60 px)
|
||
so --player-height is always non-zero while the player is mounted and the clip line follows the bar in
|
||
BOTH states (fix §1 / p10-reframe-w1-fix). The 0px fallback keeps the backdrop full-height on any
|
||
page that does not host the player. */
|
||
.mix-waveform-bg {
|
||
position: fixed;
|
||
inset: 0;
|
||
bottom: var(--player-height, 0px);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
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);
|
||
the glass treatment returns in-shader in Wave 3. */
|
||
.mix-waveform-canvas {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|