daniel-c-harvey
46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
@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: @HoverPercent;"></div>
|
|
<div class="waveform-hover-time"
|
|
style="left: @HoverPercent;">
|
|
@FormatTime(_hoverTime)
|
|
</div>
|
|
}
|
|
</div>
|