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-21 19:57:24 +03:00
parent f9bbd895c4
commit 1c32b2e997
3 changed files with 142 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
PlaylistShared.Pwa/Components/Common/TrackItemSkeleton.razor Normal file
View File

@@ -0,0 +1,23 @@
@using PlaylistShared.Pwa.Components.Common
<MudStack Class="py-2 px-0" Row AlignItems="AlignItems.Center">
<!-- Обложка-скелет -->
<MudItem>
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="40px" Height="40px" />
</MudItem>
<!-- Информация о треке (две строки текста) -->
<MudItem>
<MudStack Spacing="0">
<MudSkeleton SkeletonType="SkeletonType.Text" Width="180px" Class="my-0" />
<MudSkeleton SkeletonType="SkeletonType.Text" Width="120px" Class="my-0" />
</MudStack>
</MudItem>
<MudSpacer />
<!-- Длительность-скелет -->
<MudItem>
<MudSkeleton SkeletonType="SkeletonType.Text" Width="30px" />
</MudItem>
</MudStack>

16
PlaylistShared.Pwa/Components/SharedPlaylist/Cards/CardSkeleton.razor Normal file
View File

@@ -0,0 +1,16 @@
@using PlaylistShared.Pwa.Components.Common
<MudItem Class="d-flex flex-column align-center pa-2">
<!-- Аватар-скелет -->
<MudAvatar Size="MudBlazor.Size.Large">
<MudSkeleton SkeletonType="SkeletonType.Circle" Width="@Size.ToString()" Height="@Size.ToString()" />
</MudAvatar>
<!-- Текст-скелет -->
<MudSkeleton SkeletonType="SkeletonType.Text" Width="50px" Class="mt-2" />
<MudSkeleton SkeletonType="SkeletonType.Text" Width="30px" Class="ma-0" />
</MudItem>
@code {
[Parameter] public int Size { get; set; } = 50;
}

177
PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
View File

@@ -16,68 +16,57 @@
@inject IDialogService DialogService
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
@if (_loading)
{
<MudProgressCircular Indeterminate />
}
else if (_playlist == null)
{
<MudAlert Severity="Severity.Error">Плейлист не найден или у вас нет доступа</MudAlert>
}
else
{
@* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
<MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
@* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
<MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
<MudItem xs="12" md="6" Style="height: 100%;">
@PlaylistCardContent
</MudItem>
@if (_canAdd)
{
<MudItem xs="12" md="6" Style="height: 100%;">
@PlaylistCardContent
@AddTrackCardContent
</MudItem>
}
</MudGrid>
</MudHidden>
@if (_canAdd)
{
<MudItem xs="12" md="6" Style="height: 100%;">
@AddTrackCardContent
</MudItem>
}
</MudGrid>
</MudHidden>
@* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
<div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
@* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
<div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
@* Область контента: оба компонента здесь всегда *@
<div class="flex-grow-1 relative pa-0" style="min-height: 0;">
<div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
<div class="flex-grow-1 overflow-auto pb-1">
@PlaylistCardContent
</div>
</div>
<div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
<div class="flex-grow-1 overflow-auto pb-1">
@AddTrackCardContent
</div>
@* Область контента: оба компонента здесь всегда *@
<div class="flex-grow-1 relative pa-0" style="min-height: 0;">
<div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
<div class="flex-grow-1 overflow-auto pb-1">
@PlaylistCardContent
</div>
</div>
@* Кастомная панель навигации внизу *@
@if (_canAdd)
{
<MudPaper Elevation="0" Class="py-1">
<MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
<MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
OnClick="() => _activeMobileTab = 0" />
<MudIconButton Icon="@Icons.Material.Filled.AddCircle"
Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
OnClick="() => _activeMobileTab = 1" />
</MudNavMenu>
</MudPaper>
}
<div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
<div class="flex-grow-1 overflow-auto pb-1">
@AddTrackCardContent
</div>
</div>
</div>
</MudHidden>
}
@* Кастомная панель навигации внизу *@
@if (_canAdd)
{
<MudPaper Elevation="0" Class="py-1">
<MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
<MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
OnClick="() => _activeMobileTab = 0" />
<MudIconButton Icon="@Icons.Material.Filled.AddCircle"
Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
OnClick="() => _activeMobileTab = 1" />
</MudNavMenu>
</MudPaper>
}
</div>
</MudHidden>
</MudContainer>
<style>
@@ -100,14 +89,21 @@
@code {
/// <summary>Токен расшаренного плейлиста</summary>
[Parameter] public string Token { get; set; }
[Parameter] public required string Token { get; set; }
private RenderFragment PlaylistCardContent => __builder =>
{
<MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
<MudCardHeader>
<CardHeaderContent>
<PlaylistHeader Playlist="@_playlist" />
@if(_loading)
{
<MudSkeleton Width="200px" Height="32px" SkeletonType="SkeletonType.Text" />
}
else
{
<PlaylistHeader Playlist="@_playlist" />
}
</CardHeaderContent>
<CardHeaderActions>
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" />
@@ -115,23 +111,35 @@
</MudCardHeader>
<MudCardContent Class="flex-grow-1 overflow-auto flex-column">
<MudTable Items="@_tracks"
Hover
Elevation="0"
Breakpoint="Breakpoint.None"
Style="min-height: 0;">
<RowTemplate>
<MudTd Class="py-1 px-0" Style="width: 100%;">
<TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
</MudTd>
@if (_canRemove)
{
<MudTd Class="py-1 px-0">
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => OnRemoveTrack(context)" />
@if (_loading || _tracksLoading)
{
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
}
else
{
<MudTable Items="@_tracks"
Hover
Elevation="0"
Breakpoint="Breakpoint.None"
Style="min-height: 0;">
<RowTemplate>
<MudTd Class="py-1 px-0" Style="width: 100%;">
<TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
</MudTd>
}
</RowTemplate>
</MudTable>
@if (_canRemove)
{
<MudTd Class="py-1 px-0">
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => OnRemoveTrack(context)" />
</MudTd>
}
</RowTemplate>
</MudTable>
}
</MudCardContent>
</MudCard>
};
@@ -168,7 +176,28 @@
<MudCardContent Class="flex-grow-1 overflow-auto flex-column">
@if (_isSearching)
{
<MudProgressCircular Indeterminate Class="mx-auto my-8" />
@if (_searchType != TrackSearchType.Track || _searchType == TrackSearchType.All)
{
<MudSkeleton SkeletonType="SkeletonType.Text" Width="170px" Height="45px" Class="mt-4 mb-2 ml-2" />
<MudStack Row>
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</MudStack>
}
@if (_searchType == TrackSearchType.All || _searchType == TrackSearchType.Track)
{
<MudSkeleton SkeletonType="SkeletonType.Text" Width="170px" Height="45px" Class="mt-4 mb-2 ml-2" />
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
<TrackItemSkeleton />
}
}
else if (_searchResult != null)
{
@@ -278,7 +307,7 @@
/// <summary>Состояние: Происходит загрузка плейлиста.</summary>
private bool _loading = true;
/// <summary>Состояние: Происходит загрузка треков плейлиста.</summary>
private bool _tracksLoading;
private bool _tracksLoading = true;
/********************************
* Вкладка добавления треков