Replace MudSlider seekbar with WaveformSeeker loudness-waveform control
DOM bar chart with clip-overlay progress split; pointer-capture drag; WaveformProfile fetched on load (fire-and-forget, cancellable); flat fallback when no profile; small lazily-loaded waveformSeeker.js for getBoundingClientRect and setPointerCapture.
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
|
||||
|
||||
@* High-density loudness-waveform seekbar. Replaces the MudSlider in PlayerSeekZone.
|
||||
Bars render once; the played/unplayed split is a single clip-width animation on the
|
||||
muted overlay (see .razor.css), so a seek never re-renders the 200 bar divs. *@
|
||||
<div class="@($"waveform-seeker {Class}".TrimEnd())"
|
||||
style="--played-fraction: @PlayedFraction.ToString("F4", System.Globalization.CultureInfo.InvariantCulture);"
|
||||
@ref="_seekerElement"
|
||||
@onpointerdown="HandlePointerDown"
|
||||
@onpointermove="HandlePointerMove"
|
||||
@onpointerup="HandlePointerUp"
|
||||
@onpointercancel="HandlePointerUp"
|
||||
@onpointerleave="HandlePointerLeave">
|
||||
|
||||
@* Played layer: every bar in the accent colour. *@
|
||||
<div class="waveform-layer waveform-layer-played">
|
||||
@for (var i = 0; i < _renderedBars.Length; i++)
|
||||
{
|
||||
<div class="waveform-bar" style="--bar-height: @FormatHeight(_renderedBars[i]);"></div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@* Unplayed overlay: an identical bar set in the muted colour, clipped to the
|
||||
unplayed portion. Only its clip width changes on seek — one CSS property. *@
|
||||
<div class="waveform-layer waveform-layer-unplayed">
|
||||
@for (var i = 0; i < _renderedBars.Length; i++)
|
||||
{
|
||||
<div class="waveform-bar" style="--bar-height: @FormatHeight(_renderedBars[i]);"></div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@* Playhead rule at the split point. *@
|
||||
<div class="waveform-playhead"></div>
|
||||
|
||||
@* Hover preview line + time tooltip (suppressed while dragging). *@
|
||||
@if (_showHover && !_isSeeking)
|
||||
{
|
||||
<div class="waveform-hover-line"
|
||||
style="left: @_hoverFraction.ToString("P2", System.Globalization.CultureInfo.InvariantCulture);"></div>
|
||||
<div class="waveform-hover-time"
|
||||
style="left: @_hoverFraction.ToString("P2", System.Globalization.CultureInfo.InvariantCulture);">
|
||||
@FormatTime(_hoverTime)
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
Reference in New Issue
Block a user