Изменено отображение треков
This commit is contained in:
FrigaT
@@ -1,113 +0,0 @@
|
||||
@using PlaylistShared.Pwa.Components.Common
|
||||
@using PlaylistShared.Shared.DTO
|
||||
@inject HttpClient Http
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<MudStack AlignItems="AlignItems.Center">
|
||||
<MudTextField @bind-Value="_searchQuery"
|
||||
Label="Название трека или исполнитель"
|
||||
Variant="Variant.Outlined"
|
||||
Disabled="@_isSearching"
|
||||
FullWidth="true"
|
||||
OnKeyUp="@(async (e) => { if (e.Key == "Enter") await SearchTracks(); })"
|
||||
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary"
|
||||
/>
|
||||
|
||||
@if (_isSearching)
|
||||
{
|
||||
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
|
||||
}
|
||||
else if (_searchResults.Any())
|
||||
{
|
||||
<div style="max-height: 400px; overflow-y: auto;">
|
||||
@foreach (var track in _searchResults)
|
||||
{
|
||||
<div style="display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.1);">
|
||||
<div style="width: 40px; height: 40px; flex-shrink: 0;">
|
||||
<TrackCoverWithPlay CoverUrl="@track.CoverUri"
|
||||
TrackId="@track.TrackId"
|
||||
TrackTitle="@track.Title"
|
||||
PlaylistShareToken="@ShareToken"
|
||||
Width="40" Height="40"/>
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<MudText Typo="Typo.body1" Style="font-weight: 500;">@track.Title</MudText>
|
||||
<MudText Typo="Typo.body2" Color="Color.Secondary">@string.Join(", ", track.Artists)</MudText>
|
||||
</div>
|
||||
<div style="flex-shrink: 0;">
|
||||
<MudText Typo="Typo.body2">@track.DurationMs.FormatDuration()</MudText>
|
||||
</div>
|
||||
<div style="flex-shrink: 0;">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.AddCircle"
|
||||
Color="Color.Primary"
|
||||
OnClick="() => AddTrack(track)"
|
||||
Disabled="_addingTrackIds.Contains(track.TrackId)"
|
||||
Title="Добавить в плейлист" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else if (!_isFirstSearch)
|
||||
{
|
||||
<MudAlert Severity="Severity.Info">Ничего не найдено. Попробуйте изменить запрос.</MudAlert>
|
||||
}
|
||||
</MudStack>
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback<string> OnAddTrack { get; set; }
|
||||
[Parameter] public string ShareToken { get; set; } = string.Empty;
|
||||
|
||||
private List<YandexTrack> _searchResults = new();
|
||||
private bool _isSearching;
|
||||
private bool _isFirstSearch = true;
|
||||
private HashSet<string> _addingTrackIds = new();
|
||||
private string _searchQuery = string.Empty;
|
||||
|
||||
private async Task SearchTracks()
|
||||
{
|
||||
_isFirstSearch = false;
|
||||
_isSearching = true;
|
||||
try
|
||||
{
|
||||
var url = $"/api/yandexsearch/query?query={Uri.EscapeDataString(_searchQuery)}&limit=20";
|
||||
if (!string.IsNullOrEmpty(ShareToken))
|
||||
url += $"&shared_id={Uri.EscapeDataString(ShareToken)}";
|
||||
|
||||
var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexTrack>>>(url);
|
||||
if (response?.Success == true)
|
||||
_searchResults = response.Data ?? new();
|
||||
else
|
||||
Snackbar.Add(response?.Error?.Message ?? "Ошибка поиска", Severity.Error);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isSearching = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AddTrack(YandexTrack track)
|
||||
{
|
||||
if (_addingTrackIds.Contains(track.TrackId)) return;
|
||||
_addingTrackIds.Add(track.TrackId);
|
||||
try
|
||||
{
|
||||
await OnAddTrack.InvokeAsync(track.TrackId);
|
||||
Snackbar.Add($"Трек \"{track.Title}\" добавлен", Severity.Success);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Snackbar.Add($"Ошибка добавления: {ex.Message}", Severity.Error);
|
||||
}
|
||||
finally
|
||||
{
|
||||
_addingTrackIds.Remove(track.TrackId);
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,72 +5,50 @@
|
||||
@inject HttpClient Http
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<MudPaper Class="mb-4" Elevation="0" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
|
||||
<MudStack AlignItems="AlignItems.Start">
|
||||
<MudTextField @bind-Value="_searchQuery"
|
||||
@bind-Value:after="SearchTracks"
|
||||
Variant="Variant.Outlined"
|
||||
FullWidth
|
||||
Label="Название или ссылка на трек Яндекс.Музыки"
|
||||
Disabled="@_isSearching"
|
||||
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary"
|
||||
/>
|
||||
<MudStack AlignItems="AlignItems.Stretch">
|
||||
<MudTextField @bind-Value="_searchQuery"
|
||||
@bind-Value:after="SearchTracks"
|
||||
Variant="Variant.Outlined"
|
||||
FullWidth
|
||||
Label="Название или ссылка на трек Яндекс.Музыки"
|
||||
Disabled="@_isSearching"
|
||||
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary"
|
||||
/>
|
||||
|
||||
<MudToggleGroup T="TrackSearchType"
|
||||
@bind-Value="_searchType"
|
||||
@bind-Value:after="SearchTracks"
|
||||
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="Исполнитель" />
|
||||
</MudToggleGroup>
|
||||
<MudToggleGroup T="TrackSearchType"
|
||||
@bind-Value="_searchType"
|
||||
@bind-Value:after="SearchTracks"
|
||||
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="Исполнитель" />
|
||||
</MudToggleGroup>
|
||||
|
||||
@if (_isSearching)
|
||||
{
|
||||
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
|
||||
}
|
||||
else if (_searchResults.Any())
|
||||
{
|
||||
<div style="max-height: 400px; overflow-y: auto;">
|
||||
@foreach (var track in _searchResults)
|
||||
{
|
||||
<div style="display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.1);">
|
||||
<div style="width: 40px; height: 40px; flex-shrink: 0;">
|
||||
<TrackCoverWithPlay CoverUrl="@track.CoverUri"
|
||||
TrackId="@track.TrackId"
|
||||
TrackTitle="@track.Title"
|
||||
PlaylistShareToken="@ShareToken"
|
||||
Width="40" Height="40" />
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<MudText Typo="Typo.body1" Style="font-weight: 500;">@track.Title</MudText>
|
||||
<MudText Typo="Typo.body2" Color="Color.Secondary">@string.Join(", ", track.Artists)</MudText>
|
||||
</div>
|
||||
<div style="flex-shrink: 0;">
|
||||
<MudText Typo="Typo.body2">@track.DurationMs.FormatDuration()</MudText>
|
||||
</div>
|
||||
<div style="flex-shrink: 0;">
|
||||
<MudToggleIconButton Toggled="_addingTrackIds.Contains(track.TrackId)"
|
||||
Icon="@Icons.Material.Filled.AddCircle"
|
||||
Color="@Color.Primary"
|
||||
ToggledIcon="@Icons.Material.Filled.RemoveCircle"
|
||||
ToggledColor="@Color.Error"
|
||||
ToggledChanged="() => ToggleTrack(track)" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else if (!_isFirstSearch)
|
||||
{
|
||||
<MudAlert Severity="Severity.Info">Ничего не найдено. Попробуйте изменить запрос.</MudAlert>
|
||||
}
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
<MudTable Items="@_searchResults"
|
||||
Virtualize="@true"
|
||||
Height="400px"
|
||||
Hover="true"
|
||||
Breakpoint="Breakpoint.Sm"
|
||||
Loading="@_isSearching">
|
||||
<RowTemplate>
|
||||
<MudTd Style="width: 100%;">
|
||||
<TrackItem Track="@context" PlaylistShareToken="@ShareToken" />
|
||||
</MudTd>
|
||||
<MudTd>
|
||||
<MudToggleIconButton Toggled="_addingTrackIds.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>
|
||||
</MudStack>
|
||||
|
||||
@code {
|
||||
[Parameter] public string ShareToken { get; set; } = string.Empty;
|
||||
@@ -165,7 +143,7 @@
|
||||
{
|
||||
await RemoveTrackById(track.TrackId);
|
||||
await OnTrackRemoved.InvokeAsync();
|
||||
Snackbar.Add($"Трек \"{track.Title}\" добавлен", Severity.Success);
|
||||
Snackbar.Add($"Трек \"{track.Title}\" удален", Severity.Success);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
@@ -208,7 +186,6 @@
|
||||
var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/add-tracks", request);
|
||||
if (response.IsSuccessStatusCode)
|
||||
{
|
||||
Snackbar.Add("Трек успешно добавлен", Severity.Success);
|
||||
await OnTrackAdded.InvokeAsync(); // уведомляем родителя, что список треков изменился
|
||||
}
|
||||
else
|
||||
@@ -235,7 +212,6 @@
|
||||
var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/remove-tracks", request);
|
||||
if (response.IsSuccessStatusCode)
|
||||
{
|
||||
Snackbar.Add("Трек успешно удален", Severity.Success);
|
||||
await OnTrackAdded.InvokeAsync(); // уведомляем родителя, что список треков изменился
|
||||
}
|
||||
else
|
||||
|
||||
@@ -5,48 +5,14 @@
|
||||
@inject ISnackbar Snackbar
|
||||
@inject IDialogService DialogService
|
||||
|
||||
<MudTable Items="@_tracks" Hover="true" Breakpoint="Breakpoint.Sm" Loading="_loading">
|
||||
<HeaderContent>
|
||||
<MudTh>#</MudTh>
|
||||
<MudTh>Обложка</MudTh>
|
||||
<MudTh>Название</MudTh>
|
||||
<MudTh>Исполнитель</MudTh>
|
||||
<MudTh>Длительность</MudTh>
|
||||
@if (CanRemove)
|
||||
{
|
||||
<MudTh></MudTh>
|
||||
}
|
||||
</HeaderContent>
|
||||
<MudTable Items="@_tracks" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading">
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="#" Style="font-weight: normal;">@context.Index</MudTd>
|
||||
<MudTd DataLabel="Обложка">
|
||||
@if (!string.IsNullOrEmpty(context.CoverUri))
|
||||
{
|
||||
@if (CanPlay)
|
||||
{
|
||||
<TrackCoverWithPlay CoverUrl="@context.CoverUri"
|
||||
TrackId="@context.TrackId"
|
||||
TrackTitle="@context.Title"
|
||||
PlaylistShareToken="@ShareToken"
|
||||
Width="50" Height="50"/>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudImage Src="@context.CoverUri.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded" />
|
||||
}
|
||||
}
|
||||
<MudTd Style="width: 100%;">
|
||||
<TrackItem Track="@context" PlaylistShareToken="@ShareToken" />
|
||||
</MudTd>
|
||||
<MudTd DataLabel="Название">
|
||||
<MudLink Href="@($"https://music.yandex.ru/track/{context.TrackId}")" Target="_blank" Underline="Underline.Hover">
|
||||
@context.Title
|
||||
<MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
|
||||
</MudLink>
|
||||
</MudTd>
|
||||
<MudTd DataLabel="Исполнитель">@string.Join(", ", context.Artists)</MudTd>
|
||||
<MudTd DataLabel="Длительность">@context.DurationMs.FormatDuration()</MudTd>
|
||||
@if (CanRemove)
|
||||
{
|
||||
<MudTd DataLabel="">
|
||||
<MudTd>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => RemoveTrack(context)" />
|
||||
</MudTd>
|
||||
}
|
||||
@@ -57,7 +23,6 @@
|
||||
[Parameter] public string ShareToken { get; set; } = string.Empty;
|
||||
[Parameter] public bool CanPlay { get; set; }
|
||||
[Parameter] public bool CanRemove { get; set; }
|
||||
[Parameter] public string? CurrentPlayingTrackId { get; set; }
|
||||
[Parameter] public bool IsPlaying { get; set; }
|
||||
[Parameter] public EventCallback<string> OnPlayTrack { get; set; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user