Новый плеер

PlaylistShared.Pwa/Components/Global/AudioPlayer.razor

@@ -31,20 +31,29 @@
         </MudItem>
                 
         <!-- Название и прогресс -->
-        <MudStack AlignItems="AlignItems.Stretch" Class="flex-grow-1" Style="height: 100%;" Spacing="0">
+        <MudStack AlignItems="AlignItems.Stretch" Class="d-flex flex-grow-1 relative overflow-hidden align-center rounded-sm" Style="height: 50px;">
-            <MudStack Row AlignItems="AlignItems.Stretch" Class="flex-grow-1">
+            <MudItem Class="absolute " style="top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
-                <MudText Typo="Typo.body2" Style="font-weight: 500; line-height: 1.2;">@AudioPlayerService.CurrentTrackTitle</MudText>
+                <TrackProgress Value="@AudioPlayerService.CurrentProgress"
-                <MudSpacer />
+                               Min="0" Max="100"
-                <MudText Typo="Typo.body2" Style="font-weight: 500; line-height: 1.2;">@AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString</MudText>
+                               Height="50"
-            </MudStack>
+                               BufferValue="@_bufferValue"
+                               Color="Color.Primary"
+                               Icon=""
+                               Step="0.1"
+                               Opacity="0.3"
+                               Buffer
+                               ValueChanged="SeekTo" />
+            </MudItem>
 
-            <MudSlider Value="@AudioPlayerService.CurrentProgress" Class="mt-n1" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => SeekTo(newValue))" Step="0.01" />
+            <MudStack Row AlignItems="AlignItems.Center" Class="px-3 relative pointer-events-none" Style="z-index: 2; width: 100%;">
-            <MudProgressLinear Color="Color.Primary" Buffer="true" Value="@AudioPlayerService.CurrentProgress" BufferValue="@_bufferValue" Class="my-7" />
+                <MudText Typo="Typo.body2" Style="font-weight: 600; text-shadow: 0px 0px 4px rgba(255,255,255,0.8);">
-            <TrackProgress Value="@AudioPlayerService.CurrentProgress"
+                    @AudioPlayerService.CurrentTrackTitle
-                           Min="0"
+                </MudText>
-                           Max="100"
+                <MudSpacer />
-                           Color="Color.Primary"
+                <MudText Typo="Typo.body2" Style="font-family: monospace; font-weight: 600;">
-                           BufferValue="@_bufferValue" />
+                    @AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString
+                </MudText>
+            </MudStack>
         </MudStack>
             
         <!-- Громкость -->
@@ -58,14 +67,13 @@
                             Color="Color.Default" 
                             OnClick="ToggleMute" />
 
-            @* Попавер с минимальной шириной *@
             <MudPopover Open="@_volumeIsOpen"
                         AnchorOrigin="Origin.TopCenter" 
                         TransformOrigin="Origin.BottomCenter" 
-                        Fixed="true"
+                        Fixed
                         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" />
+                <MudProgressLinear Vertical Color="Color.Primary" Size="Size.Medium" Value="@AudioPlayerService.CurrentVolume" />
 
             </MudPopover>
         </MudItem>

PlaylistShared.Pwa/Components/Global/TrackProgress.razor

@@ -1,137 +1,127 @@
-<div class="track-progress-container @ColorClass" @onwheel="HandleWheel">
+@using MudBlazor
-    @* Фоновая дорожка *@
+
+<div class="track-progress-container @ColorClass" 
+     @onwheel="HandleWheel" 
+     style="--track-height: @(Height)px; height: @(Math.Max(Height, 24))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))%"></div>
+        {
-        @* Активная шкала (заполнение) *@
+            <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))%"></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="0.01"
+           step="@Step.ToString(System.Globalization.CultureInfo.InvariantCulture)" 
            value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)" 
            @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%;
-        height: 12px;
         display: flex;
         align-items: center;
-        --track-color: var(--mud-palette-primary); /* Дефолт */
+        --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-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: absolute;
+        position: relative;
         width: 100%;
-        height: 4px;
+        height: var(--track-height);
-        background: var(--mud-palette-action-disabled-background);
+        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;
+        left: 0; top: 0; bottom: 0;
-        top: 0;
+        background-color: var(--mud-palette-action-default-hover);
-        height: 100%;
+        opacity: calc(var(--track-opacity) * 0.5); /* Буфер чуть прозрачнее основного прогресса */
-        background: var(--mud-palette-action-default-hover);
-        transition: width 0.3s ease;
         z-index: 1;
     }
 
-    .progress-active-bar {
+    .track-icon-thumb {
         position: absolute;
-        height: 100%;
+        transform: translateX(-50%);
-        left: 0;
+        z-index: 11;
-        top: 0;
+        pointer-events: none;
-        background: var(--track-color);
+        color: var(--track-color);
-        border-radius: 4px;
+        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: 5;
+        z-index: 10;
-        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 {
+    .progress-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; }
-        height: 14px;
+    .progress-input::-moz-range-thumb { opacity: 0; }
-        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;
-    }
-}