FrigaT/PlaylistShared
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Переработана страница поиска и добавления треков в плейлист

Browse Source
This commit is contained in:
FrigaT
2026-04-15 14:07:33 +03:00
parent c7bd97462a
commit e00b7a735c
26 changed files with 497 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackBySearch.razor
View File

@@ -3,65 +3,56 @@
@inject HttpClient Http
@inject ISnackbar Snackbar
<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<MudTextField @bind-Value="_searchQuery"
Label="Название трека или исполнитель"
Variant="Variant.Outlined"
FullWidth="true"
OnKeyUp="@(async (e) => { if (e.Key == "Enter") await SearchTracks(); })"
Placeholder="Например: Bohemian Rhapsody" />
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
OnClick="SearchTracks"
Disabled="_isSearching"
StartIcon="@Icons.Material.Filled.Search">
Искать
</MudButton>
</div>
<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)
{
<div style="text-align: center; padding: 20px;">
<MudProgressCircular Indeterminate />
</div>
<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 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>
<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>
<MudAlert Severity="Severity.Info">Ничего не найдено. Попробуйте изменить запрос.</MudAlert>
}
</MudPaper>
</MudStack>
@code {
[Parameter] public EventCallback<string> OnAddTrack { get; set; }
@@ -75,15 +66,11 @@
private async Task SearchTracks()
{
if (string.IsNullOrWhiteSpace(_searchQuery))
return;
_isFirstSearch = false;
_isSearching = true;
try
{
var url = $"/api/yandexsearch/tracks?query={Uri.EscapeDataString(_searchQuery)}&limit=20";
var url = $"/api/yandexsearch/query?query={Uri.EscapeDataString(_searchQuery)}&limit=20";
if (!string.IsNullOrEmpty(ShareToken))
url += $"&shared_id={Uri.EscapeDataString(ShareToken)}";