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

2026-04-16 04:35:05 +03:00
parent 35140b71b7
commit 41a9d27005
2 changed files with 146 additions and 1 deletions
--- a/PlaylistShared.Pwa/Components/Global/TrackProgress.razor
+++ b/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;
+    }
+}