Создание своего прогресса загрузки трека

PlaylistShared.Pwa/Components/Global/AudioPlayer.razor

@@ -39,6 +39,12 @@
             </MudStack>
 
             <MudSlider Value="@AudioPlayerService.CurrentProgress" Class="mt-n1" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => SeekTo(newValue))" Step="0.01" />
+            <MudProgressLinear Color="Color.Primary" Buffer="true" Value="@AudioPlayerService.CurrentProgress" BufferValue="@_bufferValue" Class="my-7" />
+            <TrackProgress Value="@AudioPlayerService.CurrentProgress"
+                           Min="0"
+                           Max="100"
+                           Color="Color.Primary"
+                           BufferValue="@_bufferValue" />
         </MudStack>
             
         <!-- Громкость -->
@@ -60,6 +66,7 @@
                         Class="pa-0 mt-n5"
                         Style="height:120px; width: 10px; background-color: transparent !important; overflow: visible !important;">
                 <MudProgressLinear Vertical="true" Color="Color.Primary" Size="Size.Medium" Value="@AudioPlayerService.CurrentVolume" />
+
             </MudPopover>
         </MudItem>
     </MudStack>
@@ -78,6 +85,7 @@
     // Громкость
     private bool _volumeIsOpen;
     private double _volumeBeforeMute;
+    private double _bufferValue;
 
     private bool _isPlayHovered;
 
@@ -125,7 +133,7 @@
     [JSInvokable]
     public async Task OnDownloadProgress(double second)
     {
-        var x = second;
+        _bufferValue = second / AudioPlayerService.TotalTime * 100;
     }
 
     private async Task<bool> CheckAuthAsync()

PlaylistShared.Pwa/Components/Global/TrackProgress.razor

@@ -0,0 +1,137 @@
+<div class="track-progress-container @ColorClass" @onwheel="HandleWheel">
+    @* Фоновая дорожка *@
+    <div class="progress-base-track">
+        @* Буфер *@
+        <div class="progress-buffer-bar" style="width: @(CalculatePercentage(BufferValue))%"></div>
+        @* Активная шкала (заполнение) *@
+        <div class="progress-active-bar" style="width: @(CalculatePercentage(Value))%"></div>
+    </div>
+
+    @* Ползунок *@
+    <input type="range"
+           min="@Min.ToString(System.Globalization.CultureInfo.InvariantCulture)"
+           max="@Max.ToString(System.Globalization.CultureInfo.InvariantCulture)"
+           step="0.01"
+           value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)"
+           @oninput="OnInput"
+           class="progress-input" />
+</div>
+
+<style>
+    .track-progress-container {
+        position: relative;
+        width: 100%;
+        height: 12px;
+        display: flex;
+        align-items: center;
+        --track-color: var(--mud-palette-primary); /* Дефолт */
+    }
+
+    /* Привязка цветов MudBlazor */
+    .track-color-primary { --track-color: var(--mud-palette-primary); }
+    .track-color-secondary { --track-color: var(--mud-palette-secondary); }
+    .track-color-info { --track-color: var(--mud-palette-info); }
+    .track-color-success { --track-color: var(--mud-palette-success); }
+    .track-color-warning { --track-color: var(--mud-palette-warning); }
+    .track-color-error { --track-color: var(--mud-palette-error); }
+
+    .progress-base-track {
+        position: absolute;
+        width: 100%;
+        height: 4px;
+        background: var(--mud-palette-action-disabled-background);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+    
+    .progress-buffer-bar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        background: var(--mud-palette-action-default-hover);
+        transition: width 0.3s ease;
+        z-index: 1;
+    }
+
+    .progress-active-bar {
+        position: absolute;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background: var(--track-color);
+        border-radius: 4px;
+    }
+
+    .progress-input {
+        position: absolute;
+        width: 100%;
+        background: transparent;
+        -webkit-appearance: none;
+        z-index: 5;
+        margin: 0;
+    }
+
+    /* Стили шарика (Thumb) */
+    .progress-input::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background: var(--track-color);
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
+        box-shadow: var(--mud-elevation-2);
+        border: 2px solid var(--mud-palette-surface);
+    }
+
+    .progress-input::-moz-range-thumb {
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background: var(--track-color);
+        cursor: pointer;
+        opacity: 0;
+        border: 2px solid var(--mud-palette-surface);
+    }
+
+    .track-progress-container:hover .progress-input::-webkit-slider-thumb { opacity: 1; }
+    .track-progress-container:hover .progress-input::-moz-range-thumb { opacity: 1; }
+
+    .progress-input:focus { outline: none; }
+</style>
+
+@code {
+    [Parameter] public double Value { get; set; }
+    [Parameter] public double BufferValue { get; set; }
+    [Parameter] public double Min { get; set; } = 0;
+    [Parameter] public double Max { get; set; } = 100;
+    [Parameter] public Color Color { get; set; } = Color.Primary;
+    [Parameter] public EventCallback<double> ValueChanged { get; set; }
+
+    // Генерируем CSS класс на основе перечисления Color
+    private string ColorClass => $"track-color-{Color.ToString().ToLower()}";
+
+    private async Task OnInput(ChangeEventArgs e)
+    {
+        if (double.TryParse(e.Value?.ToString(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out var newValue))
+        {
+            await ValueChanged.InvokeAsync(newValue);
+        }
+    }
+
+    private async Task HandleWheel(WheelEventArgs e)
+    {
+        double range = Max - Min;
+        double step = range * 0.02;
+        var newValue = e.DeltaY < 0 ? Math.Min(Value + step, Max) : Math.Max(Value - step, Min);
+        await ValueChanged.InvokeAsync(newValue);
+    }
+
+    private double CalculatePercentage(double val)
+    {
+        if (Max <= Min) return 0;
+        return ((Math.Clamp(val, Min, Max) - Min) / (Max - Min)) * 100;
+    }
+}