Добавлен вывод названия трека и обложки в плеере

PlaylistShared.Api/Controllers/AudioController.cs

@@ -3,6 +3,8 @@ using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
 using PlaylistShared.Api.Entities;
 using PlaylistShared.Api.Services;
+using PlaylistShared.Shared;
+using PlaylistShared.Shared.DTO;
 using System.Security.Claims;
 
 namespace PlaylistShared.Api.Controllers;
@@ -70,6 +72,24 @@ public class AudioController : ControllerBase
         return new EmptyResult();
     }
 
+    [HttpGet("track-info/{trackId}")]
+    [AllowAnonymous]
+    public async Task<ActionResult<ApiResponse<TrackInfoDto>>> GetTrackInfo(string trackId, [FromQuery] string? access_token = null, [FromQuery] string? shared_id = null)
+    {
+        var user = await GetUserFromToken(access_token);
+        if (user == null) user = await GetUserFromSharedPlaylistId(shared_id);
+        if (user == null) return Unauthorized();
+
+        var track = await _yandexService.GetYTrackAsync(user, trackId);
+        if (track == null) return NotFound();
+
+        return Ok(ApiResponse<TrackInfoDto>.Ok(new TrackInfoDto
+        {
+            Title = track.Title,
+            CoverUri = track.CoverUri,
+        }));
+    }
+
     private async Task<ApplicationUser?> GetUserFromToken(string? token)
     {
         if (string.IsNullOrEmpty(token)) return null;

PlaylistShared.Api/Services/YandexMusicService.cs

@@ -4,6 +4,7 @@ using PlaylistShared.Shared.DTO;
 using YandexMusic;
 using YandexMusic.API.Extensions.API;
 using YandexMusic.API.Models.Playlist;
+using YandexMusic.API.Models.Track;
 
 namespace PlaylistShared.Api.Services;
 
@@ -74,12 +75,18 @@ public class YandexMusicService
     }
 
     public async Task<string?> GetTrackFileUrlAsync(ApplicationUser user, string trackId)
+    {
+        var track = await GetYTrackAsync(user, trackId);
+        if (track == null) return null;
+        return await track.GetLinkAsync();
+    }
+
+    public async Task<YTrack?> GetYTrackAsync(ApplicationUser user, string trackId)
     {
         using var client = await CreateClientAsync(user);
         if (client == null) return null;
         var track = await client.GetTrackAsync(trackId);
-        if (track == null) return null;
+        return track;
-        return await track.GetLinkAsync();
     }
 
     public string EncryptToken(string token) => _dataProtector.Protect(token);

PlaylistShared.Pwa/Components/Global/AudioPlayer.razor

@@ -7,8 +7,16 @@
 @inject ISnackbar Snackbar
 @inject HttpClient Http
 
-<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
+<MudPaper Class="pa-4" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
     <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            @if (!string.IsNullOrEmpty(_currentTrackCoverUrl))
+            {
+                <MudImage Src="@_currentTrackCoverUrl" Height="40" Width="40" Class="rounded" />
+            }
+            <MudText Typo="Typo.body1" Style="font-weight: 500;">@_currentTrackTitle</MudText>
+        </div>
+
         <div style="display: flex; gap: 8px;">
             <MudIconButton Icon="@(_isPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
                            Size="Size.Medium"
@@ -50,11 +58,13 @@
 <audio id="@_audioId" style="display: none;"></audio>
 
 @code {
+    private const double _defaultVolume = 50;
+
     private string _audioId = $"audio_{Guid.NewGuid():N}";
     private IJSObjectReference? _audioModule;
     private IJSObjectReference? _audioElement;
     private double _currentProgress;
-    private double _currentVolume = 70;
+    private double _currentVolume = _defaultVolume;
     private string _currentTime = "0:00";
     private string _totalTime = "0:00";
     private bool _isPlaying;
@@ -62,6 +72,8 @@
     private bool _isMuted;
     private string? _currentAccessToken;
     private string? _currentSharedPlaylistId;
+    private string? _currentTrackCoverUrl;
+    private string? _currentTrackTitle;
 
     protected override async Task OnInitializedAsync()
     {
@@ -71,6 +83,7 @@
         AudioPlayerService.OnStopRequested += OnStop;
         AudioPlayerService.OnSeekRequested += OnSeek;
         AudioPlayerService.OnVolumeChangeRequested += OnVolumeChange;
+        AudioPlayerService.OnStateChanged += OnStateChanged;
     
         await LoadSavedVolume();
         await AudioPlayerService.SetVolumeAsync(_currentVolume); // синхронизация
@@ -84,9 +97,16 @@
         }
     }
     
+    private void OnStateChanged()
+    {
+        _currentTrackTitle = AudioPlayerService.CurrentTrackTitle;
+        _currentTrackCoverUrl = AudioPlayerService.CurrentTrackCoverUrl?.FormatCoverUrl(40, 40);
+        InvokeAsync(StateHasChanged);
+    }
+
     private async Task LoadSavedVolume()
     {
-        var savedVolume = await PlayerStorage.GetVolumeAsync();
+        var savedVolume = await PlayerStorage.GetVolumeAsync() ?? _defaultVolume;
         _currentVolume = savedVolume;
         await AudioPlayerService.SetVolumeAsync(savedVolume);
     }

PlaylistShared.Pwa/Layout/MainLayout.razor

@@ -22,13 +22,14 @@
         <NavMenu />
     </MudDrawer>
     
-    <MudMainContent Class="pt-16 pa-4">
+    <MudMainContent Class="pt-16 pa-4" Style="display: flex; flex-direction: column; min-height: 100vh;">
-        @Body
+        <div style="flex: 1;">
+            @Body
+        </div>
+        <div style="width: 100%; margin-top: 16px;">
+            <AudioPlayer />
+        </div>
     </MudMainContent>
-
-    <div class="fixed-player" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;">
-        <AudioPlayer />
-    </div>
 </MudLayout>
 
 @code {

PlaylistShared.Pwa/Services/AudioPlayerService.cs

@@ -1,4 +1,7 @@
 using MudBlazor;
+using PlaylistShared.Shared;
+using PlaylistShared.Shared.DTO;
+using System.Net.Http.Json;
 
 namespace PlaylistShared.Pwa.Services;
 
@@ -6,8 +9,11 @@ public class AudioPlayerService : IAudioPlayerService
 {
     private readonly TokenStorage _tokenStorage;
     private readonly ISnackbar _snackbar;
+    private readonly HttpClient _http;
 
     private string? _currentTrackId;
+    private string? _currentTrackTitle;
+    private string? _currentTrackCoverUrl;
     private bool _isPlaying;
     private double _currentVolume = 70;
     private double _currentProgress;
@@ -15,6 +21,8 @@ public class AudioPlayerService : IAudioPlayerService
     private string _totalTime = "0:00";
 
     public string? CurrentTrackId => _currentTrackId;
+    public string? CurrentTrackTitle => _currentTrackTitle;
+    public string? CurrentTrackCoverUrl => _currentTrackCoverUrl;
     public bool IsPlaying => _isPlaying;
     public double CurrentVolume
     {
@@ -31,14 +39,15 @@ public class AudioPlayerService : IAudioPlayerService
 
     public event Action? OnStateChanged;
 
-    public AudioPlayerService(TokenStorage tokenStorage, ISnackbar snackbar)
+    public AudioPlayerService(TokenStorage tokenStorage, ISnackbar snackbar, HttpClient httpClient)
     {
         _tokenStorage = tokenStorage;
         _snackbar = snackbar;
+        _http = httpClient;
     }
 
     // Внешние команды (вызываются из компонентов)
-    public async Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? sharedPlaylistId = null)
+    public async Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? sharedPlaylistId = null, string? title = null, string? coverUrl = null)
     {
         // Если accessToken не передан, пытаемся получить его из хранилища
         if (string.IsNullOrWhiteSpace(accessToken))
@@ -54,7 +63,25 @@ public class AudioPlayerService : IAudioPlayerService
             return;
         }
 
+        // Если title и coverUrl не переданы, нужно запросить через API
+        if (string.IsNullOrEmpty(title) || string.IsNullOrEmpty(coverUrl))
+        {
+            try
+            {
+                var trackInfo = await GetTrackInfo(trackId, accessToken, sharedPlaylistId);
+                title = trackInfo?.Title;
+                coverUrl = trackInfo?.CoverUri;
+            }
+            catch (Exception ex)
+            {
+                // Логируем ошибку, но продолжаем без обложки/названия
+                Console.WriteLine($"Failed to fetch track info: {ex.Message}");
+            }
+        }
+
         _currentTrackId = trackId;
+        _currentTrackTitle = title ?? "Неизвестный трек";
+        _currentTrackCoverUrl = coverUrl;
         _isPlaying = true;
         OnStateChanged?.Invoke();
         OnLoadAndPlayRequested?.Invoke(trackId, accessToken, sharedPlaylistId);
@@ -133,4 +160,27 @@ public class AudioPlayerService : IAudioPlayerService
         _currentTime = "0:00";
         OnStateChanged?.Invoke();
     }
+
+    /// <summary>
+    /// Вспомогательный метод для получения информации о треке через API
+    /// </summary>
+    /// <param name="trackId"></param>
+    /// <param name="accessToken"></param>
+    /// <param name="sharedPlaylistId"></param>
+    /// <returns></returns>
+    private async Task<(string? Title, string? CoverUri)?> GetTrackInfo(string trackId, string? accessToken, string? sharedPlaylistId)
+    {
+        var url = $"/api/audio/track-info/{trackId}";
+        if (!string.IsNullOrEmpty(accessToken))
+            url += $"?access_token={accessToken}";
+        else if (!string.IsNullOrEmpty(sharedPlaylistId))
+            url += $"?shared_id={sharedPlaylistId}";
+
+        var response = await _http.GetFromJsonAsync<ApiResponse<TrackInfoDto>>(url);
+        if (response?.Success == true)
+        {
+            return (response.Data.Title, response.Data.CoverUri);
+        }
+        return null;
+    }
 }

PlaylistShared.Pwa/Services/IAudioPlayerService.cs

@@ -6,8 +6,7 @@
 /// </summary>
 public interface IAudioPlayerService
 {
-    // ---------- Состояние плеера (для чтения) ----------
+    #region Состояние плеера (для чтения)
-
     /// <summary>ID текущего воспроизводимого трека (null, если ничего не играет).</summary>
     string? CurrentTrackId { get; }
 
@@ -26,13 +25,21 @@ public interface IAudioPlayerService
     /// <summary>Отформатированная общая длительность (мм:сс).</summary>
     string TotalTime { get; }
 
-    // ---------- Команды управления (вызываются из компонентов) ----------
+    /// <summary>Отформатированное название текущего трека.</summary>
+    string? CurrentTrackTitle { get; }
 
+    /// <summary>URL обложки текущего трека.</summary>
+    string? CurrentTrackCoverUrl { get; }
+    #endregion
+
+    #region Команды управления (вызываются из компонентов)
     /// <summary>Загрузить и начать воспроизведение трека.</summary>
     /// <param name="trackId">ID трека.</param>
     /// <param name="accessToken">Опциональный access-токен (если не указан, будет взят из хранилища).</param>
     /// <param name="sharedPlaylistId">ID расшаренного плейлиста (для неавторизованного доступа).</param>
-    Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? sharedPlaylistId = null);
+    /// <param name="title">Название трека. (Если не передано, вызывает api для получения)</param>
+    /// <param name="coverUrl">URL обложки трека. (Если не передано, вызывает api для получения)</param>
+    Task LoadAndPlayAsync(string trackId, string? accessToken = null, string? sharedPlaylistId = null, string? title = null, string? coverUrl = null);
 
     /// <summary>Воспроизвести (если трек загружен и на паузе).</summary>
     Task PlayAsync();
@@ -48,20 +55,18 @@ public interface IAudioPlayerService
 
     /// <summary>Установить громкость (0–100).</summary>
     Task SetVolumeAsync(double volume);
+    #endregion
 
-    // ---------- События для подписки на изменения состояния ----------
+    #region События для подписки на изменения состояния
-
     /// <summary>
     /// Событие, возникающее при любом изменении состояния плеера:
     /// смена трека, старт/пауза/стоп, обновление прогресса, изменение громкости, окончание трека.
     /// Подписывайтесь на него, чтобы перерисовывать UI (например, иконку "пауза/плей").
     /// </summary>
     event Action? OnStateChanged;
+    #endregion
 
-    // ---------- События для связи с реальным компонентом AudioPlayer ----------
+    #region События для связи с реальным компонентом AudioPlayer (Эти события вызываются сервисом)
-    // (Эти события вызываются сервисом, а компонент AudioPlayer на них подписывается,
-    //  чтобы выполнить фактические операции с HTML5 Audio.)
-
     /// <summary>Запрос на загрузку и воспроизведение трека.</summary>
     event Func<string, string?, string?, Task>? OnLoadAndPlayRequested;
 
@@ -79,10 +84,9 @@ public interface IAudioPlayerService
 
     /// <summary>Запрос на изменение громкости (0–100).</summary>
     event Func<double, Task>? OnVolumeChangeRequested;
+    #endregion
 
-    // ---------- Методы для обновления состояния из AudioPlayer ----------
+    #region Методы для обновления состояния из AudioPlayer (Вызываются компонентом AudioPlayer, когда реальный аудиоэлемент меняет своё состояние.)
-    // (Вызываются компонентом AudioPlayer, когда реальный аудиоэлемент меняет своё состояние.)
-
     /// <summary>Уведомить сервис о том, что трек начал или прекратил играть.</summary>
     void SetPlayingState(bool isPlaying);
 
@@ -94,4 +98,5 @@ public interface IAudioPlayerService
 
     /// <summary>Уведомить об окончании трека.</summary>
     void NotifyTrackEnded();
+    #endregion
 }

PlaylistShared.Pwa/Services/PlayerStorage.cs

@@ -14,7 +14,7 @@ public class PlayerStorage
         await _js.InvokeVoidAsync("localStorage.setItem", VolumeKey, volume);
     }
 
-    public async Task<double> GetVolumeAsync()
+    public async Task<double?> GetVolumeAsync()
     {
         var volume = await _js.InvokeAsync<string>("localStorage.getItem", VolumeKey);
 
@@ -25,6 +25,6 @@ public class PlayerStorage
             return result;
         }
 
-        return 0;
+        return null;
     }
 }

PlaylistShared.Shared/DTO/TrackInfoDto.cs

@@ -0,0 +1,7 @@
+namespace PlaylistShared.Shared.DTO;
+
+public class TrackInfoDto
+{
+    public string Title { get; set; }
+    public string CoverUri { get; set; }
+}