Merge p10-reframe-w1-fix into dev (minimized-footer clip + lava-lamp SVG glyph)
This commit is contained in:
daniel-c-harvey
@@ -1,6 +1,6 @@
|
||||
@if (_isMinimized)
|
||||
{
|
||||
<div class="minimized-dock">
|
||||
<div class="minimized-dock" @ref="_miniDock">
|
||||
<LevelMeterFab OnClick="@ToggleMinimized" />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -27,7 +27,15 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
|
||||
// var via a ResizeObserver (see Interop/layout/spacer.ts) rather than a static
|
||||
// value, because the player reflows across breakpoints and grows with the
|
||||
// error banner.
|
||||
//
|
||||
// _miniDock is the minimized FAB container. We observe it in minimized state so
|
||||
// --player-height stays non-zero (the FAB's actual height) and the MixWaveformVisualizer
|
||||
// clips to the top of the FAB rather than extending to the viewport bottom (fix §1).
|
||||
// The player-spacer's .minimized class uses a hardcoded 60px and ignores the var,
|
||||
// so publishing the FAB height here does not regress the spacer.
|
||||
private ElementReference _playerRoot;
|
||||
private ElementReference _miniDock;
|
||||
private ElementReference _lastObservedElement;
|
||||
private IJSObjectReference? _spacerModule;
|
||||
private bool _spacerObserved;
|
||||
|
||||
@@ -114,22 +122,27 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
// Only the docked, expanded shape needs a spacer: the Fixed embed is
|
||||
// already in normal flow, and the minimized FAB floats clear of content.
|
||||
// Toggle the observer on the minimized/expanded transition only — the
|
||||
// ResizeObserver itself handles every size change in between.
|
||||
var shouldObserve = !_isMinimized && !Fixed;
|
||||
if (shouldObserve == _spacerObserved) return;
|
||||
// The Fixed embed is already in normal flow — no spacer/clip needed.
|
||||
// For the docked player: we observe in BOTH expanded and minimized states
|
||||
// so --player-height always reflects the live height of whichever element
|
||||
// is visible. This keeps the MixWaveformVisualizer clipped to the top of
|
||||
// the footer in both states (fix §1).
|
||||
// expanded → observe _playerRoot (full player bar, reflows across breakpoints)
|
||||
// minimized → observe _miniDock (floating FAB container, ~56–60px)
|
||||
// The player-spacer's .minimized class uses a hardcoded height and ignores
|
||||
// the var, so publishing the FAB height here does not regress the spacer.
|
||||
if (Fixed) return;
|
||||
|
||||
var elementToObserve = _isMinimized ? _miniDock : _playerRoot;
|
||||
var alreadyOnThisElement = _spacerObserved && elementToObserve.Id == _lastObservedElement.Id;
|
||||
if (alreadyOnThisElement) return;
|
||||
|
||||
var module = await GetSpacerModuleAsync();
|
||||
if (module is null) return;
|
||||
|
||||
if (shouldObserve)
|
||||
await module.InvokeVoidAsync("observe", _playerRoot);
|
||||
else
|
||||
await module.InvokeVoidAsync("unobserve");
|
||||
|
||||
_spacerObserved = shouldObserve;
|
||||
await module.InvokeVoidAsync("observe", elementToObserve);
|
||||
_spacerObserved = true;
|
||||
_lastObservedElement = elementToObserve;
|
||||
}
|
||||
|
||||
private async Task<IJSObjectReference?> GetSpacerModuleAsync()
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
|
||||
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 the player bar's LIVE height — `--player-height`, the custom property the player
|
||||
already publishes on :root via its ResizeObserver (AudioPlayerBar + Interop/layout/spacer.ts). That
|
||||
var tracks the expanded bar's border-box height across breakpoints/error-banner reflow, and resets to
|
||||
0 when the bar is minimized — so the clip line follows the bar's actual current height with no extra
|
||||
coupling: when minimized the var is 0 and the backdrop reaches the viewport bottom (the floating FAB,
|
||||
z-index 1300, simply sits over it — there is no full-width bar to clip to), matching spec §2c. The
|
||||
0px fallback keeps the backdrop full-height on any page that doesn't host the player. */
|
||||
`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;
|
||||
|
||||
@@ -24,24 +24,13 @@ public static class DDIcons
|
||||
""";
|
||||
|
||||
/// <summary>
|
||||
/// Lava lamp - the Mix visualizer settings glyph. Classic 1970s "Lava" silhouette, redrawn (Phase 10
|
||||
/// W1). Inner path/shape markup for MudBlazor's Icon= slot (no outer <svg> wrapper — MudBlazor
|
||||
/// supplies that); coordinates in the 24×24 space matching viewBox="0 0 24 24".
|
||||
///
|
||||
/// Bottom→top: a WIDE truncated-cone metal BASE (widest at the very bottom, tapering up to a narrow
|
||||
/// waist); a tall tapered GLASS VESSEL on the base — bulbous/rounded at the bottom, tapering up to a
|
||||
/// roundedly-pointed (teardrop/bullet) top; a small truncated-cone metal CAP on top mirroring the base.
|
||||
/// The metal base + cap are <c>currentColor</c> so the silhouette stays tintable with its context
|
||||
/// (Color.Secondary, light/dark). The fluid + blobs are hard navy/moss so the lamp reads as "lit" at
|
||||
/// icon size: navy (#17283F) vessel fluid with 3 varied moss (#429D6A) lava blobs suspended in it.
|
||||
/// NOTE: these hexes mirror the app theme tokens (navy ~#17283F/#0D1B2A, moss ~#3D7A68/#429D6A).
|
||||
/// Lava lamp - the Mix visualizer settings glyph. Sourced from lava-lamp-svgrepo-com.svg
|
||||
/// (SVG Repo, viewBox="0 0 50 50"). Wrapped in a scale(0.48) transform to fit MudBlazor's
|
||||
/// inner 24×24 coordinate space (50 × 0.48 = 24). Fill uses currentColor so it themes with
|
||||
/// its context (Color.Secondary, light/dark). Inner markup only — no outer <svg> wrapper,
|
||||
/// MudBlazor supplies viewBox="0 0 24 24".
|
||||
/// </summary>
|
||||
public const string LavaLamp = """
|
||||
<path fill="currentColor" d="M5 23L8 19.6H16L19 23Z"/>
|
||||
<path fill="#17283F" d="M12 4C14.4 7 16 11 16 14.5 16 18 14.3 19.6 12 19.6 9.7 19.6 8 18 8 14.5 8 11 9.6 7 12 4Z"/>
|
||||
<path fill="currentColor" d="M10.7 4L11.1 2H12.9L13.3 4Z"/>
|
||||
<circle cx="12" cy="16" r="2" fill="#429D6A"/>
|
||||
<circle cx="10.3" cy="12" r="1.4" fill="#429D6A"/>
|
||||
<circle cx="13.2" cy="8.5" r="1" fill="#429D6A"/>
|
||||
<g transform="scale(0.48)"><path fill="currentColor" d="M21.664062 1C20.224267 1 18.975662 2.037745 18.712891 3.453125 A 1.0001 1.0001 0 0 0 18.710938 3.4667969L14.138672 30.160156C14.020414 30.800846 14.113312 31.464453 14.40625 32.048828L15.382812 34L16.105469 35.447266L18.626953 40.488281C18.777181 40.788737 18.768091 41.142169 18.601562 41.433594L18.587891 41.455078L16.261719 46.052734L16.287109 46.007812C15.549312 47.299441 16.535819 49 18.023438 49L31.976562 49C33.464182 49 34.451628 47.299149 33.712891 46.007812L33.738281 46.052734L31.412109 41.457031L31.400391 41.435547C31.23378 41.143097 31.223214 40.789893 31.373047 40.490234L33.894531 35.447266L35.595703 32.048828L35.595703 32.046875C35.887939 31.462932 35.98142 30.800197 35.863281 30.160156L31.289062 3.4667969 A 1.0001 1.0001 0 0 0 31.287109 3.453125C31.024385 2.0377451 29.777686 1 28.337891 1L21.664062 1 z M 21.664062 3L28.337891 3C28.826095 3 29.231083 3.3377394 29.320312 3.8183594L29.865234 7L20.136719 7L20.681641 3.8164062C20.772037 3.3374317 21.176907 3 21.664062 3 z M 19.792969 9L23.804688 9C23.611137 9.9884222 23.227461 11.137087 22.425781 12.203125C21.573716 13.336163 20.392353 14.295227 18.802734 14.777344L19.792969 9 z M 25.816406 9L30.207031 9L33.337891 27.267578C33.337891 27.267578 33.335938 27.267578 33.335938 27.267578C32.564245 27.077767 31.81046 27.092539 31.123047 27.007812C27.275457 26.533917 25.885411 25.052928 24.652344 23.5C24.03581 22.723536 23.491366 21.900529 22.708984 21.205078C21.926603 20.509628 20.846926 20 19.5 20C18.908925 20 18.354767 20.12187 17.851562 20.333984L18.435547 16.921875C20.926866 16.437188 22.800171 15.030943 24.023438 13.404297C25.113022 11.955415 25.619737 10.408026 25.816406 9 z M 27 15C26.083334 15 25.268559 15.379756 24.751953 15.960938C24.235347 16.542119 24 17.277778 24 18C24 18.722222 24.235347 19.457881 24.751953 20.039062C25.268559 20.620244 26.083334 21 27 21C27.916666 21 28.731441 20.620244 29.248047 20.039062C29.764653 19.457881 30 18.722222 30 18C30 17.277778 29.764653 16.542119 29.248047 15.960938C28.731441 15.379755 27.916666 15 27 15 z M 27 17C27.416666 17 27.601893 17.120244 27.751953 17.289062C27.902014 17.457881 28 17.722222 28 18C28 18.277778 27.90201 18.542119 27.751953 18.710938C27.601893 18.879756 27.416666 19 27 19C26.583334 19 26.398107 18.879756 26.248047 18.710938C26.097986 18.542119 26 18.277778 26 18C26 17.722222 26.097986 17.457881 26.248047 17.289062C26.398107 17.120244 26.583334 17 27 17 z M 19.5 22C20.403074 22 20.863866 22.239669 21.380859 22.699219C21.897853 23.158768 22.41297 23.896605 23.085938 24.744141C24.43187 26.439213 26.540543 28.458083 30.876953 28.992188C31.964402 29.126219 32.872051 29.16627 33.273438 29.351562C33.474131 29.444212 33.563548 29.518411 33.669922 29.722656C33.773897 29.922296 33.874264 30.298504 33.878906 30.917969C33.861094 30.99784 33.843686 31.078426 33.806641 31.152344L32.382812 34L27.298828 34C27.159652 33.665616 27.044757 33.303105 26.992188 32.876953C26.701429 30.51628 25.299037 28.945081 23.773438 28.091797C22.247838 27.238512 20.623079 27 19.5 27C18.146065 27 17.224609 25.858489 17.224609 24.388672C17.224609 22.918855 18.068811 22 19.5 22 z M 16.582031 27.744141C17.325464 28.504516 18.325661 29 19.5 29C20.309921 29 21.681725 29.214175 22.796875 29.837891C23.912025 30.461606 24.79457 31.39172 25.007812 33.123047C25.04516 33.425802 25.107037 33.716105 25.181641 34L17.619141 34L16.195312 31.152344 A 1.0001 1.0001 0 0 0 16.193359 31.152344C16.096299 30.958719 16.065727 30.738748 16.105469 30.523438 A 1.0001 1.0001 0 0 0 16.107422 30.509766L16.582031 27.744141 z M 18.617188 36L31.382812 36L29.583984 39.595703C29.135813 40.492045 29.166715 41.556232 29.662109 42.425781L31.964844 46.978516L31.976562 47L18.023438 47L18.035156 46.978516L20.337891 42.425781C20.835362 41.555206 20.863783 40.491247 20.416016 39.595703L18.617188 36 z"/></g>
|
||||
""";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user