Новый плеер

PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor

@@ -1,11 +1,12 @@
 @using Microsoft.AspNetCore.Components.Web
+@using PlaylistShared.Shared.DTO
 @inject IAudioPlayerService AudioPlayerService
 
 <MudItem @onmouseenter="HandleMouseEnter"
           @onmouseleave="HandleMouseLeave"
           style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden;">
     
-    <MudImage Src="@CoverUrl.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
+    <MudImage Src="@Track?.CoverUri.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
     
     @if (CanPlay && (_isHovered || IsCurrentTrackPlaying))
     {
@@ -20,8 +21,7 @@
 </MudItem>
 
 @code {
-    [Parameter] public string CoverUrl { get; set; } = string.Empty;
+    [Parameter] public YandexTrack? Track { get; set; } = null;
-    [Parameter] public string TrackTitle { get; set; } = string.Empty;
     [Parameter] public string TrackId { get; set; } = string.Empty;
     [Parameter] public int Height { get; set; } = 50;
     [Parameter] public int Width { get; set; } = 50;
@@ -53,8 +53,7 @@
             await AudioPlayerService.LoadAndPlayAsync(
                 trackId: TrackId,
                 playlistShareToken: playlistShareToken,
-                title: TrackTitle,
+                track: Track);
-                coverUrl: CoverUrl);
         }
     }
 

PlaylistShared.Pwa/Components/Common/TrackItem.razor

@@ -5,9 +5,8 @@
 <MudStack Row AlignItems="AlignItems.Center">
     <!-- Обложка с фиксированной шириной -->
     <MudItem>
-        <TrackCoverWithPlay CoverUrl="@Track.CoverUri"
+        <TrackCoverWithPlay TrackId="@Track.TrackId"
-                            TrackId="@Track.TrackId"
+                            Track="@Track"
-                            TrackTitle="@Track.Title"
                             PlaylistShareToken="@PlaylistShareToken"
                             CanPlay="@CanPlay"
                             Width="40" Height="40" />

PlaylistShared.Pwa/Components/Global/AudioPlayer.razor

@@ -7,20 +7,21 @@
 @inject ISnackbar Snackbar
 @inject HttpClient Http
 
-<MudPaper Class="pa-2" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
+<MudPaper Class="pa-2 rounded" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05);">
     <MudStack Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
         <!-- Кнопки управления -->
         <MudItem @onmouseenter="() => { _isPlayHovered = true; }"
                  @onmouseleave="() => { _isPlayHovered = false; }"
-                 style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden; width: 50px; height: 50px;">
+                 Class="relative d-inline-block rounded-sm overflow-hidden"
+                 style="cursor: pointer; width: 50px; height: 50px;">
     
-            @if (!string.IsNullOrEmpty(AudioPlayerService.CurrentTrackCoverUrl))
+            @if (!string.IsNullOrEmpty(AudioPlayerService.CurrentTrack?.CoverUri))
             {
-                <MudImage Src="@AudioPlayerService.CurrentTrackCoverUrl.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded" Style="display: block;" />
+                <MudImage Src="@AudioPlayerService.CurrentTrack.CoverUri.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded d-block" />
             }
     
-            <MudItem class="play-overlay"
+            <MudItem class="absolute d-flex align-center justify-center rounded"
-                     style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 4px;">
+                     style="top: 0; left: 0; right: 0; bottom: 0; background: transparent;">
                 <MudToggleIconButton Toggled="@AudioPlayerService.IsPlaying"
                                      Icon="@Icons.Material.Filled.PlayArrow"
                                      Color="@Color.Primary"
@@ -31,20 +32,37 @@
         </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.CurrentTime"
-                <MudSpacer />
+                               Min="0" Max="@AudioPlayerService.TotalTime"
-                <MudText Typo="Typo.body2" Style="font-weight: 500; line-height: 1.2;">@AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString</MudText>
+                               Height="50"
+                               BufferValue="@_bufferSecond"
+                               Color="Color.Primary"
+                               Icon=""
+                               Step="0.1"
+                               Opacity="0.3"
+                               Buffer
+                               ValueChanged="SeekTo" />
+            </MudItem>
+
+            <MudStack Row AlignItems="AlignItems.Center" Class="px-3 relative pointer-events-none" Style="z-index: 2; width: 100%; height: 100%;">
+                <MudStack AlignItems="AlignItems.Start" Spacing="0">
+                    <MudText Typo="Typo.body2" Color="Color.Default" Style="font-weight: 600;">
+                        @AudioPlayerService.CurrentTrack?.Title
+                    </MudText>
+
+                    <MudText Typo="Typo.body2" Style="font-weight: 600;">
+                        @if (AudioPlayerService.CurrentTrack != null) @string.Join(", ", AudioPlayerService.CurrentTrack.Artists)
+                    </MudText>
                 </MudStack>
 
-            <MudSlider Value="@AudioPlayerService.CurrentProgress" Class="mt-n1" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => SeekTo(newValue))" Step="0.01" />
+                <MudSpacer />
-            <MudProgressLinear Color="Color.Primary" Buffer="true" Value="@AudioPlayerService.CurrentProgress" BufferValue="@_bufferValue" Class="my-7" />
+
-            <TrackProgress Value="@AudioPlayerService.CurrentProgress"
+                <MudText Typo="Typo.body2" Style="font-family: monospace; font-weight: 600;">
-                           Min="0"
+                    @AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString
-                           Max="100"
+                </MudText>
-                           Color="Color.Primary"
+            </MudStack>
-                           BufferValue="@_bufferValue" />
         </MudStack>
             
         <!-- Громкость -->
@@ -58,14 +76,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>
@@ -85,7 +102,7 @@
     // Громкость
     private bool _volumeIsOpen;
     private double _volumeBeforeMute;
-    private double _bufferValue;
+    private double _bufferSecond;
 
     private bool _isPlayHovered;
 
@@ -115,6 +132,7 @@
             _audioElement = await _audioModule.InvokeAsync<IJSObjectReference>("init", _audioId, DotNetObjectReference.Create(this));
     }
 
+    #region Обработка JS
     [JSInvokable]
     public async Task OnAudioEnded()
     {
@@ -133,19 +151,9 @@
     [JSInvokable]
     public async Task OnDownloadProgress(double second)
     {
-        _bufferValue = second / AudioPlayerService.TotalTime * 100;
+        _bufferSecond = second;
-    }
-
-    private async Task<bool> CheckAuthAsync()
-    {
-        var authState = await AuthProvider.GetAuthenticationStateAsync();
-        if (!authState.User.Identity?.IsAuthenticated == true)
-        {
-            Snackbar.Add("Воспроизведение доступно только авторизованным пользователям", Severity.Warning);
-            return false;
-        }
-        return true;
     }
+    #endregion
 
     #region Обработка сервиса
     private async Task OnServiceLoadAndPlay(string trackId, string? accessToken, string? sharedPlaylistId)
@@ -214,6 +222,17 @@
     }
     #endregion
 
+    private async Task<bool> CheckAuthAsync()
+    {
+        var authState = await AuthProvider.GetAuthenticationStateAsync();
+        if (!authState.User.Identity?.IsAuthenticated == true)
+        {
+            Snackbar.Add("Воспроизведение доступно только авторизованным пользователям", Severity.Warning);
+            return false;
+        }
+        return true;
+    }
+
     private async Task OnVolumeHandleWheel(WheelEventArgs e)
     {
         // Изменяем громкость на 5 единиц за один тик колесика

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;
-    }
-}

PlaylistShared.Pwa/Services/AudioPlayerService.cs

@@ -13,8 +13,7 @@ public class AudioPlayerService : IAudioPlayerService
     private readonly PlayerStorage _playerStorage;
 
     private string? _currentTrackId;
-    private string? _currentTrackTitle;
+    private YandexTrack? _currentTrack;
-    private string? _currentTrackCoverUrl;
     private bool _isPlaying;
     private double _currentVolume = 50;
     private double _currentProgress;
@@ -24,8 +23,7 @@ public class AudioPlayerService : IAudioPlayerService
     private string _totalTimeString = "0:00";
 
     public string? CurrentTrackId => _currentTrackId;
-    public string? CurrentTrackTitle => _currentTrackTitle;
+    public YandexTrack? CurrentTrack => _currentTrack;
-    public string? CurrentTrackCoverUrl => _currentTrackCoverUrl;
     public bool IsPlaying => _isPlaying;
     public double CurrentVolume
     {
@@ -65,7 +63,7 @@ public class AudioPlayerService : IAudioPlayerService
     }
 
     // Внешние команды (вызываются из компонентов)
-    public async Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? playlistShareToken = null, string? title = null, string? coverUrl = null)
+    public async Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? playlistShareToken = null, YandexTrack? track = null)
     {
         if (_currentTrackId == trackId)
         {
@@ -88,13 +86,11 @@ public class AudioPlayerService : IAudioPlayerService
         }
 
         // Если title и coverUrl не переданы, нужно запросить через API
-        if (string.IsNullOrEmpty(title) || string.IsNullOrEmpty(coverUrl))
+        if (track is null)
         {
             try
             {
-                var trackInfo = await GetTrackInfo(trackId, accessToken, playlistShareToken);
+                track = await GetTrackInfo(trackId, accessToken, playlistShareToken);
-                title = trackInfo?.Title;
-                coverUrl = trackInfo?.CoverUri;
             }
             catch (Exception ex)
             {
@@ -103,9 +99,7 @@ public class AudioPlayerService : IAudioPlayerService
             }
         }
 
-        _currentTrackId = trackId;
+        _currentTrack = track;
-        _currentTrackTitle = title ?? "Неизвестный трек";
-        _currentTrackCoverUrl = coverUrl;
         _isPlaying = true;
         OnStateChanged?.Invoke();
         OnLoadAndPlayRequested?.Invoke(trackId, accessToken, playlistShareToken);
@@ -125,10 +119,9 @@ public class AudioPlayerService : IAudioPlayerService
         OnPauseRequested?.Invoke();
     }
 
-    public async Task SeekToAsync(double percent)
+    public async Task SeekToAsync(double second)
     {
-        var newTime = (percent / 100) * _totalTime;
+        OnSeekRequested?.Invoke(second);
-        OnSeekRequested?.Invoke(newTime);
     }
 
     public async Task SetVolumeAsync(double volume)
@@ -189,7 +182,7 @@ public class AudioPlayerService : IAudioPlayerService
     /// <param name="accessToken"></param>
     /// <param name="sharedPlaylistId"></param>
     /// <returns></returns>
-    private async Task<(string? Title, string? CoverUri)?> GetTrackInfo(string trackId, string? accessToken, string? sharedPlaylistId)
+    private async Task<YandexTrack?> GetTrackInfo(string trackId, string? accessToken, string? sharedPlaylistId)
     {
         var url = $"/api/audio/track-info/{trackId}";
         if (!string.IsNullOrEmpty(accessToken))
@@ -200,7 +193,7 @@ public class AudioPlayerService : IAudioPlayerService
         var response = await _http.GetFromJsonAsync<ApiResponse<YandexTrack>>(url);
         if (response?.Success == true)
         {
-            return (response.Data.Title, response.Data.CoverUri);
+            return response.Data;
         }
         return null;
     }

PlaylistShared.Pwa/Services/IAudioPlayerService.cs

@@ -1,4 +1,6 @@
-namespace PlaylistShared.Pwa.Services;
+using PlaylistShared.Shared.DTO;
+
+namespace PlaylistShared.Pwa.Services;
 
 /// <summary>
 /// Глобальный сервис управления аудиоплеером.
@@ -31,11 +33,8 @@ public interface IAudioPlayerService
     /// <summary>Отформатированная общая длительность (мм:сс).</summary>
     string TotalTimeString { get; }
 
-    /// <summary>Отформатированное название текущего трека.</summary>
+    /// <summary>Текущий трек.</summary>
-    string? CurrentTrackTitle { get; }
+    YandexTrack? CurrentTrack { get; }
-
-    /// <summary>URL обложки текущего трека.</summary>
-    string? CurrentTrackCoverUrl { get; }
     #endregion
 
     #region Команды управления (вызываются из компонентов)
@@ -45,7 +44,7 @@ public interface IAudioPlayerService
     /// <param name="sharedPlaylistId">ID расшаренного плейлиста (для неавторизованного доступа).</param>
     /// <param name="title">Название трека. (Если не передано, вызывает api для получения)</param>
     /// <param name="coverUrl">URL обложки трека. (Если не передано, вызывает api для получения)</param>
-    Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? playlistShareToken = null, string? title = null, string? coverUrl = null);
+    Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? playlistShareToken = null, YandexTrack? track = null);
 
     /// <summary>Воспроизвести (если трек загружен и на паузе).</summary>
     Task PlayAsync();
@@ -53,8 +52,8 @@ public interface IAudioPlayerService
     /// <summary>Поставить на паузу.</summary>
     Task PauseAsync();
 
-    /// <summary>Перемотать на указанный процент (0–100).</summary>
+    /// <summary>Перемотать на секунды.</summary>
-    Task SeekToAsync(double percent);
+    Task SeekToAsync(double second);
 
     /// <summary>Установить громкость (0–100).</summary>
     Task SetVolumeAsync(double volume);