Доработка компонентка добавления треков

2026-04-16 17:40:33 +03:00
parent 68d7c7fc12
commit 5a8ae3d680
11 changed files with 222 additions and 62 deletions
--- a/PlaylistShared.Api/Controllers/YandexSearchController.cs
+++ b/PlaylistShared.Api/Controllers/YandexSearchController.cs
@@ -82,6 +82,6 @@ public class YandexSearchController : ControllerBase
            results = await _yandexService.SearchAsync(user, query, searchType, limit);
        }

-        return Ok(ApiResponse<List<YandexTrack>>.Ok(results));
+        return Ok(ApiResponse<YandexSearchResult>.Ok(results));
    }
 }
--- a/PlaylistShared.Api/Services/YandexMusicService.cs
+++ b/PlaylistShared.Api/Services/YandexMusicService.cs
@@ -158,7 +158,7 @@ public class YandexMusicService
                Id = a.Id,
                Name = a.Name,
                CoverUrl = a.Cover.GetUrl(),
-                Description = a.Description.Text,
+                Description = a.Description?.Text ?? string.Empty,
            }).ToList(),

            Albums = searchResult.Albums?.Results.Select(a => new YandexAlbum
@@ -170,7 +170,7 @@ public class YandexMusicService
                    Id = t.Id,
                    Name = t.Name,
                    CoverUrl = t.Cover.GetUrl(),
-                    Description = t.Description.Text,
+                    Description = t.Description?.Text ?? string.Empty,
                }).ToList(),
                CoverUrl = string.IsNullOrEmpty(a.CoverUri) ? a.Cover.GetUrl() : a.CoverUri,
                Description = a.Description,
--- a/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
+++ b/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
@@ -1,5 +1,6 @@
@using Microsoft.AspNetCore.Components.Web
@using PlaylistShared.Shared.DTO
+@using PlaylistShared.Shared.Yandex
@inject IAudioPlayerService AudioPlayerService

 <MudItem @onmouseenter="HandleMouseEnter"
--- a/PlaylistShared.Pwa/Components/Common/TrackItem.razor
+++ b/PlaylistShared.Pwa/Components/Common/TrackItem.razor
@@ -1,6 +1,7 @@
@using PlaylistShared.Shared.DTO
@using PlaylistShared.Pwa.Components.Common
@using PlaylistShared.Pwa.Extensions
+@using PlaylistShared.Shared.Yandex

 <MudStack Row AlignItems="AlignItems.Center">
    <!-- Обложка с фиксированной шириной -->
--- a/PlaylistShared.Pwa/Components/Global/TrackProgress.razor
+++ b/PlaylistShared.Pwa/Components/Global/TrackProgress.razor
@@ -2,7 +2,7 @@

 <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));">
+     style="--track-height: @(Height)px; height: @(Height)px; --track-opacity: @(Opacity.ToString(System.Globalization.CultureInfo.InvariantCulture));">
    
    <div class="progress-base-track">
        @if (Buffer)
@@ -23,7 +23,8 @@
           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)" 
+           value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)"
+           height="@Height"
           @oninput="OnInput"
           class="progress-input" />
 </div>
--- a/PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackSection.razor
+++ b/PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackSection.razor
@@ -1,4 +1,5 @@
@using PlaylistShared.Pwa.Components.Common
+@using PlaylistShared.Pwa.Components.SharedPlaylist.Cards
@using PlaylistShared.Shared.DTO
@using PlaylistShared.Shared.Enums
@using PlaylistShared.Shared.SharedPlaylist
@@ -9,7 +10,7 @@
 <MudStack Style="height: 100%; overflow: hidden;">
    <MudItem>
        <MudTextField @bind-Value="_searchQuery"
-                      @bind-Value:after="SearchTracks"
+                      @bind-Value:after="OnSearchQueryChanged"
                      Variant="Variant.Outlined"
                      FullWidth
                      Label="Название или ссылка на трек Яндекс.Музыки"
@@ -18,39 +19,100 @@

        <MudToggleGroup T="TrackSearchType"
                        @bind-Value="_searchType"
-                        @bind-Value:after="SearchTracks"
+                        @bind-Value:after="OnSearchTypeChanged"
                        Size="Size.Small"
                        Color="Color.Primary"
                        Disabled="@(_isSearching)">
            <MudToggleItem Value="TrackSearchType.All" Text="Все" />
-            <MudToggleItem Value="TrackSearchType.Track" Text="Трек" />
-            <MudToggleItem Value="TrackSearchType.Album" Text="Альбом" />
-            <MudToggleItem Value="TrackSearchType.Artist" Text="Исполнитель" />
+            <MudToggleItem Value="TrackSearchType.Track" Text="Треки" />
+            <MudToggleItem Value="TrackSearchType.Album" Text="Альбомы" />
+            <MudToggleItem Value="TrackSearchType.Playlist" Text="Плейлисты" />
+            <MudToggleItem Value="TrackSearchType.Artist" Text="Исполнители" />
        </MudToggleGroup>
    </MudItem>

-    <MudTable Items="@_searchResults"
-              Virtualize
-              Hover
-              Elevation="0"
-              Class="d-flex flex-grow-1 flex-column"
-              Style="min-height: 0;"
-              Breakpoint="Breakpoint.Sm"
-              Loading="@_isSearching">
-        <RowTemplate>
-            <MudTd Class="pa-1" Style="width: 100%;">
-                <TrackItem Track="@context" PlaylistShareToken="@ShareToken" />
-            </MudTd>
-            <MudTd Class="pa-1">
-                <MudToggleIconButton Toggled="@ExistingTrackIds.Contains(context.TrackId)"
-                                     Icon="@Icons.Material.Filled.AddCircle"
-                                     Color="@Color.Primary"
-                                     ToggledIcon="@Icons.Material.Filled.RemoveCircle"
-                                     ToggledColor="@Color.Error"
-                                     ToggledChanged="() => ToggleTrack(context)" />
-            </MudTd>
-        </RowTemplate>
-    </MudTable>
+    <MudItem Style="overflow: auto; flex-grow:1;">
+        @if (_isSearching)
+        {
+            <MudProgressCircular Indeterminate Class="mx-auto my-8" />
+        }
+        else if (_searchResult != null)
+        {
+            <MudExpansionPanels>
+                @* Секция исполнителей *@
+                @if (ShouldShowSection(TrackSearchType.Artist))
+                {
+                    <MudExpansionPanel Text="Исполнители" Expanded="true">
+                        <MudGrid>
+                            @foreach (var artist in _searchResult.Artists!)
+                            {
+                                <MudItem xs="12" sm="6" md="4" lg="3">
+                                    <ArtistCard Item="artist" OnClick="() => SearchTracksByEntity(artist.Id, TrackSearchType.Artist)" />
+                                </MudItem>
+                            }
+                        </MudGrid>
+                    </MudExpansionPanel>
+                }
+
+                @* Секция альбомов *@
+                @if (ShouldShowSection(TrackSearchType.Album))
+                {
+                    <MudExpansionPanel Text="Альбомы" Expanded="true">
+                        <MudGrid>
+                            @foreach (var album in _searchResult.Albums!)
+                            {
+                                <MudItem xs="12" sm="6" md="4" lg="3">
+                                    <AddTrackSection Item="album" OnClick="() => SearchTracksByEntity(album.Id, TrackSearchType.Album)" />
+                                </MudItem>
+                            }
+                        </MudGrid>
+                    </MudExpansionPanel>
+                }
+
+                @* Секция плейлистов *@
+                @if (ShouldShowSection(TrackSearchType.Playlist))
+                {
+                    <MudExpansionPanel Text="Плейлисты" Expanded="true">
+                        <MudGrid>
+                            @foreach (var playlist in _searchResult.Playlists!)
+                            {
+                                <MudItem xs="12" sm="6" md="4" lg="3">
+                                    <PlaylistCard Item="playlist" OnClick="() => SearchTracksByEntity(playlist.Kind, TrackSearchType.Playlist)" />
+                                </MudItem>
+                            }
+                        </MudGrid>
+                    </MudExpansionPanel>
+                }
+
+                @* Секция треков *@
+                @if (ShouldShowSection(TrackSearchType.Track))
+                {
+                    <MudExpansionPanel Text="Треки" Expanded="true">
+                        <MudTable Items="@_searchResult.Tracks"
+                                    Hover
+                                    Elevation="0"
+                                    Class="d-flex flex-grow-1 flex-column"
+                                    Style="min-height: 0;"
+                                    Breakpoint="Breakpoint.Sm">
+                            <RowTemplate>
+                                <MudTd Class="pa-1" Style="width: 100%;">
+                                    <TrackItem Track="@context" PlaylistShareToken="@ShareToken" />
+                                </MudTd>
+                                <MudTd Class="pa-1">
+                                    <MudToggleIconButton Toggled="@ExistingTrackIds.Contains(context.TrackId)"
+                                                            Icon="@Icons.Material.Filled.AddCircle"
+                                                            Color="@Color.Primary"
+                                                            ToggledIcon="@Icons.Material.Filled.RemoveCircle"
+                                                            ToggledColor="@Color.Error"
+                                                            ToggledChanged="() => ToggleTrack(context)" />
+                                </MudTd>
+                            </RowTemplate>
+                        </MudTable>
+                    </MudExpansionPanel>
+                }
+            </MudExpansionPanels>
+        }
+    </MudItem>
 </MudStack>

@code {
@@ -63,20 +125,44 @@
    private bool _isSearching = false;
    private bool _isFirstSearch = true;
    private TrackSearchType _searchType = TrackSearchType.All;
-    private List<YandexTrack> _searchResults = new();
+    private YandexSearchResult? _searchResult = null;

-    private async Task SearchTracks()
-    {
-        if (string.IsNullOrWhiteSpace(_searchQuery))
+    private bool ShouldShowSection(TrackSearchType sectionType)
+    {        
+        return sectionType switch
        {
+            TrackSearchType.Track => _searchResult?.Tracks?.Any() == true,
+            TrackSearchType.Album => _searchResult?.Albums?.Any() == true,
+            TrackSearchType.Playlist => _searchResult?.Playlists?.Any() == true,
+            TrackSearchType.Artist => _searchResult?.Artists?.Any() == true,
+            _ => false
+        };
+    }
+
+    private async Task OnSearchQueryChanged()
+    {
+        await SearchTracks(byId: false);
+    }
+
+    private async Task OnSearchTypeChanged()
+    {
+        await SearchTracks(byId: false);
+    }
+
+    private async Task SearchTracks(bool byId = false, string? forcedQuery = null)
+    {
+        var query = forcedQuery ?? _searchQuery;
+        if (string.IsNullOrWhiteSpace(query))
+        {
+            _searchResult = null;
+            _isFirstSearch = true;
            return;
        }

-        var query = _searchQuery.Trim();
        var type = _searchType;
-        bool byId = false;

-        if (Uri.TryCreate(_searchQuery, UriKind.Absolute, out var uri) && uri.Host == "music.yandex.ru")
+        // Распознавание ссылки Яндекс.Музыки
+        if (!byId && Uri.TryCreate(query, UriKind.Absolute, out var uri) && uri.Host == "music.yandex.ru")
        {
            try
            {
@@ -92,56 +178,59 @@

        _isFirstSearch = false;
        _isSearching = true;
+        _searchResult = null;
+        StateHasChanged();
+
        try
        {
-            var url = $"/api/yandexsearch/tracks?query={Uri.EscapeDataString(query)}&searchType={Uri.EscapeDataString(type.ToString())}&limit=20";
+            var url = $"/api/yandexsearch/search?query={Uri.EscapeDataString(query)}&searchType={Uri.EscapeDataString(type.ToString())}&limit=20";
+            if (byId)
+                url += "&byId=true";
            if (!string.IsNullOrEmpty(ShareToken))
                url += $"&shared_id={Uri.EscapeDataString(ShareToken)}";
-            if (byId)
-                url += $"&byId={byId}";

-            var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexTrack>>>(url);
+            var response = await Http.GetFromJsonAsync<ApiResponse<YandexSearchResult>>(url);
            if (response?.Success == true)
-                _searchResults = response.Data ?? new();
+            {
+                _searchResult = response.Data ?? new YandexSearchResult();
+            }
            else
+            {
                Snackbar.Add(response?.Error?.Message ?? "Ошибка поиска", Severity.Error);
+                _searchResult = null;
+            }
        }
        catch (Exception ex)
        {
            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+            _searchResult = null;
        }
        finally
        {
            _isSearching = false;
            StateHasChanged();
        }
-
    }

-    private async Task SearchTracksByQuery(string query)
+    private async Task SearchTracksByEntity(string entityId, TrackSearchType entityType)
    {
-        if (string.IsNullOrWhiteSpace(query))
-            return;
-
+        // Переключаем тип на треки и ищем по ID
+        _searchType = TrackSearchType.Track;
+        await SearchTracks(byId: true, forcedQuery: entityId);
    }

    private async Task ToggleTrack(YandexTrack track)
    {
        if (ExistingTrackIds.Contains(track.TrackId))
-        {
            await RemoveTrack(track);
-        }
        else
-        {
            await AddTrack(track);
-        }
    }

    private async Task RemoveTrack(YandexTrack track)
    {
        if (!ExistingTrackIds.Remove(track.TrackId)) return;

-
        try
        {
            await RemoveTrackById(track.TrackId);
@@ -165,7 +254,7 @@
        var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/remove-tracks", request);
        if (response.IsSuccessStatusCode)
        {
-            await OnTrackAdded.InvokeAsync(); // уведомляем родителя, что список треков изменился
+            await OnTrackAdded.InvokeAsync();
        }
        else
        {
@@ -202,7 +291,7 @@
        var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/add-tracks", request);
        if (response.IsSuccessStatusCode)
        {
-            await OnTrackAdded.InvokeAsync(); // уведомляем родителя, что список треков изменился
+            await OnTrackAdded.InvokeAsync();
        }
        else
        {
--- a/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/AlbumCard.razor
+++ b/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/AlbumCard.razor
@@ -0,0 +1,24 @@
+@using PlaylistShared.Shared.Yandex
+
+<MudPaper Class="d-flex flex-column align-center pa-2 cursor-pointer" Elevation="0" OnClick="OnClick.InvokeAsync">
+    @if (!string.IsNullOrEmpty(Item.CoverUrl))
+    {
+        <MudAvatar Image="@Item.CoverUrl.FormatCoverUrl(Size, Size)" Size="MudBlazor.Size.Large" />
+    }
+    else
+    {
+        <MudAvatar Size="MudBlazor.Size.Large" Variant="Variant.Filled">
+            <MudIcon Icon="@Icons.Material.Filled.AccountCircle" />
+        </MudAvatar>
+    }
+    <MudText Typo="Typo.body2" Align="Align.Center" Class="mt-2">@Item.Title</MudText>
+    <MudText Typo="Typo.caption" Align="Align.Center" Color="Color.Secondary">
+        @string.Join(", ", Item.Artists.Select(a => a.Name))
+    </MudText>
+</MudPaper>
+
+@code {
+    [Parameter] public YandexAlbum Item { get; set; } = null!;
+    [Parameter] public EventCallback OnClick { get; set; }
+    [Parameter] public int Size { get; set; } = 50;
+}
--- a/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/ArtistCard.razor
+++ b/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/ArtistCard.razor
@@ -0,0 +1,21 @@
+@using PlaylistShared.Shared.Yandex
+
+<MudPaper Class="d-flex flex-column align-center pa-2 cursor-pointer" Elevation="0" OnClick="OnClick.InvokeAsync">
+    @if (!string.IsNullOrEmpty(Item.CoverUrl))
+    {
+        <MudAvatar Image="@Item.CoverUrl.FormatCoverUrl(Size, Size)" Size="MudBlazor.Size.Large" />
+    }
+    else
+    {
+        <MudAvatar Size="MudBlazor.Size.Large" Variant="Variant.Filled">
+            <MudIcon Icon="@Icons.Material.Filled.Album" />
+        </MudAvatar>
+    }
+    <MudText Typo="Typo.body2" Align="Align.Center" Class="mt-2">@Item.Name</MudText>
+</MudPaper>
+
+@code {
+    [Parameter] public YandexArtist Item { get; set; } = null!;
+    [Parameter] public EventCallback OnClick { get; set; }
+    [Parameter] public int Size { get; set; } = 50;
+}
--- a/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/PlaylistCard.razor
+++ b/PlaylistShared.Pwa/Components/SharedPlaylist/Cards/PlaylistCard.razor
@@ -0,0 +1,21 @@
+@using PlaylistShared.Shared.Yandex
+
+<MudPaper Class="d-flex flex-column align-center pa-2 cursor-pointer" Elevation="0" OnClick="OnClick.InvokeAsync">
+    @if (!string.IsNullOrEmpty(Item.CoverUrl))
+    {
+        <MudAvatar Image="@Item.CoverUrl.FormatCoverUrl(Size, Size)" Size="MudBlazor.Size.Large" />
+    }
+    else
+    {
+        <MudAvatar Size="MudBlazor.Size.Large" Variant="Variant.Filled">
+            <MudIcon Icon="@Icons.Material.Filled.PlaylistPlay" />
+        </MudAvatar>
+    }
+    <MudText Typo="Typo.body2" Align="Align.Center" Class="mt-2">@Item.Title</MudText>
+</MudPaper>
+
+@code {
+    [Parameter] public YandexPlaylist Item { get; set; } = null!;
+    [Parameter] public EventCallback OnClick { get; set; }
+    [Parameter] public int Size { get; set; } = 50;
+}
--- a/PlaylistShared.Pwa/Pages/MyPlaylists.razor
+++ b/PlaylistShared.Pwa/Pages/MyPlaylists.razor
@@ -3,7 +3,8 @@

@attribute [Authorize]
@using PlaylistShared.Shared.DTO
-@using PlaylistShared.Shared.Playlist
+@using PlaylistShared.Shared.SharedPlaylist
+@using PlaylistShared.Shared.Yandex
@inject HttpClient Http
@inject ISnackbar Snackbar
@inject NavigationManager Navigation
@@ -70,11 +71,11 @@
 </MudContainer>

@code {
-    private List<YandexPlaylistInfo> _playlists;
+    private List<YandexPlaylistShare> _playlists;
    private bool _loading = true;
    private bool _showOnlyShared = false;

-    private List<YandexPlaylistInfo> FilteredPlaylists => _showOnlyShared ? _playlists?.Where(p => p.IsShared).ToList() : _playlists;
+    private List<YandexPlaylistShare> FilteredPlaylists => _showOnlyShared ? _playlists?.Where(p => p.IsShared).ToList() : _playlists;

    protected override async Task OnInitializedAsync()
    {
@@ -86,7 +87,7 @@
        _loading = true;
        try
        {
-            var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexPlaylistInfo>>>("/api/playlists");
+            var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexPlaylistShare>>>("/api/playlists");
            if (response?.Success == true)
                _playlists = response.Data;
            else
@@ -103,7 +104,7 @@
        }
    }

-    private async Task SharePlaylist(YandexPlaylistInfo playlist)
+    private async Task SharePlaylist(YandexPlaylistShare playlist)
    {
        var request = new SharePlaylistRequest { Kind = playlist.Kind, OwnerUid = playlist.OwnerUid };
        var response = await Http.PostAsJsonAsync("/api/playlists/share", request);
@@ -118,7 +119,7 @@
        }
    }
    
-    private void GoToShared(YandexPlaylistInfo playlist)
+    private void GoToShared(YandexPlaylistShare playlist)
    {
        if (!string.IsNullOrEmpty(playlist.ShareToken))
            Navigation.NavigateTo($"/shared/{playlist.ShareToken}");
--- a/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
+++ b/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
@@ -7,6 +7,7 @@
@using PlaylistShared.Shared.Enums
@using PlaylistShared.Pwa.Services
@using PlaylistShared.Shared.SharedPlaylist
+@using PlaylistShared.Shared.Yandex
@inject HttpClient Http
@inject ISnackbar Snackbar
@inject NavigationManager Navigation