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

2026-04-14 19:38:33 +03:00
parent acf02c85a7
commit 0381ef74ab
8 changed files with 139 additions and 29 deletions
--- a/PlaylistShared.Api/Controllers/AudioController.cs
+++ b/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;
--- a/PlaylistShared.Api/Services/YandexMusicService.cs
+++ b/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 await track.GetLinkAsync();
+        return track;
    }

    public string EncryptToken(string token) => _dataProtector.Protect(token);
--- a/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
+++ b/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); // синхронизация
@@ -83,10 +96,17 @@
            await EnsureAudioModuleAsync();
        }
    }
+    
+    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);
    }
--- a/PlaylistShared.Pwa/Layout/MainLayout.razor
+++ b/PlaylistShared.Pwa/Layout/MainLayout.razor
@@ -21,14 +21,15 @@
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
-
-    <MudMainContent Class="pt-16 pa-4">
-        @Body
+    
+    <MudMainContent Class="pt-16 pa-4" Style="display: flex; flex-direction: column; min-height: 100vh;">
+        <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 {
--- a/PlaylistShared.Pwa/Services/AudioPlayerService.cs
+++ b/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;
+    }
 }
--- a/PlaylistShared.Pwa/Services/IAudioPlayerService.cs
+++ b/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 ----------
-    // (Эти события вызываются сервисом, а компонент AudioPlayer на них подписывается,
-    //  чтобы выполнить фактические операции с HTML5 Audio.)
-
+    #region События для связи с реальным компонентом AudioPlayer (Эти события вызываются сервисом)
    /// <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 ----------
-    // (Вызываются компонентом AudioPlayer, когда реальный аудиоэлемент меняет своё состояние.)
-
+    #region Методы для обновления состояния из AudioPlayer (Вызываются компонентом AudioPlayer, когда реальный аудиоэлемент меняет своё состояние.)
    /// <summary>Уведомить сервис о том, что трек начал или прекратил играть.</summary>
    void SetPlayingState(bool isPlaying);

@@ -94,4 +98,5 @@ public interface IAudioPlayerService

    /// <summary>Уведомить об окончании трека.</summary>
    void NotifyTrackEnded();
+    #endregion
 }
--- a/PlaylistShared.Pwa/Services/PlayerStorage.cs
+++ b/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;
    }
 }
--- a/PlaylistShared.Shared/DTO/TrackInfoDto.cs
+++ b/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; }
+}