PlaylistShared/PlaylistShared.Pwa/Components/Global/TrackProgress.razor

@using MudBlazor

<div class="track-progress-container @ColorClass" 
     @onwheel="HandleWheel" 
     style="--track-height: @(Height)px; height: @(Height)px; --track-opacity: @(Opacity.ToString(System.Globalization.CultureInfo.InvariantCulture));">
    
    <div class="progress-base-track">
        @if (Buffer)
        {
            <div class="progress-buffer-bar" style="width:@(CalculatePercentage(BufferValue).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture))%;"></div>
        }
        <div class="progress-active-bar" style="width:@(CalculatePercentage(Value).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture))%;"></div>
    </div>

    @if (!string.IsNullOrEmpty(Icon))
    {
        <div class="track-icon-thumb" style="left: @(CalculatePercentage(Value).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture))%;">
            <MudIcon Icon="@Icon" Size="Size.Small" />
        </div>
    }

    <input type="range" 
           min="@Min.ToString(System.Globalization.CultureInfo.InvariantCulture)" 
           max="@Max.ToString(System.Globalization.CultureInfo.InvariantCulture)" 
           step="@Step.ToString(System.Globalization.CultureInfo.InvariantCulture)" 
           value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)"
           height="@Height"
           @oninput="OnInput"
           class="progress-input" />
</div>

@code {
    [Parameter] public double Value { get; set; }
    [Parameter] public double BufferValue { get; set; }
    [Parameter] public bool Buffer { get; set; } = true;
    [Parameter] public double Min { get; set; } = 0;
    [Parameter] public double Max { get; set; } = 100;
    [Parameter] public double Step { get; set; } = 1;
    [Parameter] public double Opacity { get; set; } = 1.0;
    [Parameter] public int Height { get; set; } = 4;
    [Parameter] public Color Color { get; set; } = Color.Primary;
    [Parameter] public string Icon { get; set; } = "";
    [Parameter] public EventCallback<double> ValueChanged { get; set; }

    private string ColorClass => $"track-color-{Color.ToString().ToLower()}";

    private double CalculatePercentage(double val) => Max <= Min ? 0 : ((Math.Clamp(val, Min, Max) - Min) / (Max - Min)) * 100;

    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 wheelStep = range * 0.02; 
        var newValue = e.DeltaY < 0 ? Math.Min(Value + wheelStep, Max) : Math.Max(Value - wheelStep, Min);
        await ValueChanged.InvokeAsync(newValue);
    }
}

<style>
    .track-progress-container {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        --track-color: var(--mud-palette-primary);
    }
    
    .track-color-primary { --track-color: var(--mud-palette-primary); }
    .track-color-secondary { --track-color: var(--mud-palette-secondary); }
    .track-color-success { --track-color: var(--mud-palette-success); }
    .track-color-info { --track-color: var(--mud-palette-info); }
    .track-color-warning { --track-color: var(--mud-palette-warning); }
    .track-color-error { --track-color: var(--mud-palette-error); }

    .progress-base-track {
        position: relative;
        width: 100%;
        height: var(--track-height);
        background-color: var(--mud-palette-action-disabled-background, rgba(0,0,0,0.1));
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-active-bar {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        background-color: var(--track-color);
        opacity: var(--track-opacity); /* Применяем opacity */
        z-index: 2;
    }

    .progress-buffer-bar {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        background-color: var(--mud-palette-action-default-hover);
        opacity: calc(var(--track-opacity) * 0.5); /* Буфер чуть прозрачнее основного прогресса */
        z-index: 1;
    }

    .track-icon-thumb {
        position: absolute;
        transform: translateX(-50%);
        z-index: 11;
        pointer-events: none;
        color: var(--track-color);
        opacity: 0;
        display: flex;
    }

    .track-progress-container:hover .track-icon-thumb { opacity: 1; }

    .progress-input {
        position: absolute;
        width: 100%;
        background: transparent;
        -webkit-appearance: none;
        z-index: 10;
        cursor: pointer;
    }

    .progress-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; }
    .progress-input::-moz-range-thumb { opacity: 0; }
</style>