WaveformSeeker Improvements

DeepDrftPublic.Client/Controls/AudioPlayerBar/WaveformSeeker.razor

@@ -30,15 +30,15 @@
     </div>
 
     @* Playhead rule at the split point. *@
-    <div class="waveform-playhead"></div>
+    @* <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>
+             style="left: @HoverPercent;"></div>
         <div class="waveform-hover-time"
-             style="left: @_hoverFraction.ToString("P2", System.Globalization.CultureInfo.InvariantCulture);">
+             style="left: @HoverPercent;">
             @FormatTime(_hoverTime)
         </div>
     }

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;

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 {

DeepDrftShared.Client/Components/TrackCard.razor

@@ -38,7 +38,7 @@
                 <MudChip T="string"
                          Size="Size.Small"
                          Variant="Variant.Outlined"
-                         Color="Color.Primary"
+                         Color="Color.Tertiary"
                          Class="deepdrft-genre-chip">
                     @TrackModel.Genre
                 </MudChip>
@@ -58,7 +58,7 @@
                 <div></div>
             }
 
-            <MudFab Color="Color.Primary"
+            <MudFab Color="Color.Tertiary"
                     Size="Size.Medium"
                     StartIcon="@PlayPauseIcon"
                     OnClick="@PlayClick"/>