diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor index 645911d..ea42de1 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor @@ -30,15 +30,15 @@ @* Playhead rule at the split point. *@ -
+ @*
*@ @* Hover preview line + time tooltip (suppressed while dragging). *@ @if (_showHover && !_isSeeking) {
+ style="left: @HoverPercent;">
+ style="left: @HoverPercent;"> @FormatTime(_hoverTime)
} diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.cs index 25b2e50..77cb1b7 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.cs +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.cs @@ -48,6 +48,7 @@ public partial class WaveformSeeker : ComponentBase, IAsyncDisposable private bool _showHover; private double _hoverFraction; private double _hoverTime; + private string HoverPercent => $"{_hoverFraction * 100.0}%"; private double? Duration => PlayerService?.Duration; private bool CanSeek => (PlayerService?.IsLoaded ?? false) && Duration is > 0; diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.css index 0b4fdaa..c501271 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.css +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.css @@ -25,11 +25,10 @@ .waveform-bar { flex: 1; - min-width: 2px; - max-width: 6px; + width: 6px; height: var(--bar-height, 2%); min-height: 2px; - border-radius: 1px 1px 0 0; + border-radius: 2px 2px 0 0; } .waveform-layer-played .waveform-bar { @@ -46,18 +45,18 @@ background: var(--deepdrft-muted); } -/* Playhead rule at the split point. */ -.waveform-playhead { - position: absolute; - top: 0; - bottom: 0; - left: calc(var(--played-fraction, 0) * 100%); - width: 2px; - margin-left: -1px; - background: var(--deepdrft-green-accent); - pointer-events: none; - transition: left 0.08s linear; -} +/*!* Playhead rule at the split point. *!*/ +/*.waveform-playhead {*/ +/* position: absolute;*/ +/* top: 0;*/ +/* bottom: 0;*/ +/* left: calc(var(--played-fraction, 0) * 100%);*/ +/* width: 2px;*/ +/* margin-left: -1px;*/ +/* background: var(--deepdrft-green-accent);*/ +/* pointer-events: none;*/ +/* transition: left 0.08s linear;*/ +/*}*/ /* Hover preview line — faint vertical rule under the cursor. */ .waveform-hover-line { diff --git a/DeepDrftShared.Client/Components/TrackCard.razor b/DeepDrftShared.Client/Components/TrackCard.razor index 1c71843..379d565 100644 --- a/DeepDrftShared.Client/Components/TrackCard.razor +++ b/DeepDrftShared.Client/Components/TrackCard.razor @@ -38,7 +38,7 @@ @TrackModel.Genre @@ -58,7 +58,7 @@
} -