daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

WaveformSeeker Improvements

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-06 09:52:31 -04:00
parent ab9db6d0ec
commit b746645f97
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor
+3 -3
View File
@@ -30,15 +30,15 @@
</div> </div>
@* Playhead rule at the split point. *@ @* Playhead rule at the split point. *@
<div class="waveform-playhead"></div> @* <div class="waveform-playhead"></div> *@
@* Hover preview line + time tooltip (suppressed while dragging). *@ @* Hover preview line + time tooltip (suppressed while dragging). *@
@if (_showHover && !_isSeeking) @if (_showHover && !_isSeeking)
{ {
<div class="waveform-hover-line" <div class="waveform-hover-line"
style="left: @_hoverFraction.ToString("P2", System.Globalization.CultureInfo.InvariantCulture);"></div> style="left: @HoverPercent;"></div>
<div class="waveform-hover-time" <div class="waveform-hover-time"
style="left: @_hoverFraction.ToString("P2", System.Globalization.CultureInfo.InvariantCulture);"> style="left: @HoverPercent;">
@FormatTime(_hoverTime) @FormatTime(_hoverTime)
</div> </div>
} }
DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.cs
+1
View File
@@ -48,6 +48,7 @@ public partial class WaveformSeeker : ComponentBase, IAsyncDisposable
private bool _showHover; private bool _showHover;
private double _hoverFraction; private double _hoverFraction;
private double _hoverTime; private double _hoverTime;
private string HoverPercent => $"{_hoverFraction * 100.0}%";
private double? Duration => PlayerService?.Duration; private double? Duration => PlayerService?.Duration;
private bool CanSeek => (PlayerService?.IsLoaded ?? false) && Duration is > 0; private bool CanSeek => (PlayerService?.IsLoaded ?? false) && Duration is > 0;
DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor.css
+14 -15
View File
@@ -25,11 +25,10 @@
.waveform-bar { .waveform-bar {
flex: 1; flex: 1;
min-width: 2px; width: 6px;
max-width: 6px;
height: var(--bar-height, 2%); height: var(--bar-height, 2%);
min-height: 2px; min-height: 2px;
border-radius: 1px 1px 0 0; border-radius: 2px 2px 0 0;
} }
.waveform-layer-played .waveform-bar { .waveform-layer-played .waveform-bar {
@@ -46,18 +45,18 @@
background: var(--deepdrft-muted); background: var(--deepdrft-muted);
} }
/* Playhead rule at the split point. */ /*!* Playhead rule at the split point. *!*/
.waveform-playhead { /*.waveform-playhead {*/
position: absolute; /* position: absolute;*/
top: 0; /* top: 0;*/
bottom: 0; /* bottom: 0;*/
left: calc(var(--played-fraction, 0) * 100%); /* left: calc(var(--played-fraction, 0) * 100%);*/
width: 2px; /* width: 2px;*/
margin-left: -1px; /* margin-left: -1px;*/
background: var(--deepdrft-green-accent); /* background: var(--deepdrft-green-accent);*/
pointer-events: none; /* pointer-events: none;*/
transition: left 0.08s linear; /* transition: left 0.08s linear;*/
} /*}*/
/* Hover preview line — faint vertical rule under the cursor. */ /* Hover preview line — faint vertical rule under the cursor. */
.waveform-hover-line { .waveform-hover-line {
DeepDrftShared.Client/Components/TrackCard.razor
+2 -2
View File
@@ -38,7 +38,7 @@
<MudChip T="string" <MudChip T="string"
Size="Size.Small" Size="Size.Small"
Variant="Variant.Outlined" Variant="Variant.Outlined"
Color="Color.Primary" Color="Color.Tertiary"
Class="deepdrft-genre-chip"> Class="deepdrft-genre-chip">
@TrackModel.Genre @TrackModel.Genre
</MudChip> </MudChip>
@@ -58,7 +58,7 @@
<div></div> <div></div>
} }
<MudFab Color="Color.Primary" <MudFab Color="Color.Tertiary"
Size="Size.Medium" Size="Size.Medium"
StartIcon="@PlayPauseIcon" StartIcon="@PlayPauseIcon"
OnClick="@PlayClick"/> OnClick="@PlayClick"/>