daniel-c-harvey
92 lines
4.0 KiB
Plaintext
92 lines
4.0 KiB
Plaintext
@page "/tracks"
|
|
@using DeepDrftPublic.Client.Controls
|
|
|
|
<PageTitle>DeepDrft Track Gallery</PageTitle>
|
|
|
|
<div>
|
|
<div class="tracks-view-container">
|
|
@* Search + filter affordances are interactive-only: the debounce timer and pill clear
|
|
need WASM. During prerender/non-interactive they are hidden, matching the view-mode
|
|
toggle's interactivity gate. *@
|
|
@if (RendererInfo.IsInteractive)
|
|
{
|
|
<div class="tracks-search-row">
|
|
<MudTextField T="string"
|
|
Value="@ViewModel.SearchText"
|
|
ValueChanged="@OnSearchInput"
|
|
Immediate="true"
|
|
DebounceInterval="400"
|
|
Placeholder="Search tracks, artists, albums"
|
|
Adornment="Adornment.Start"
|
|
AdornmentIcon="@Icons.Material.Filled.Search"
|
|
Variant="Variant.Outlined"
|
|
Margin="Margin.Dense"
|
|
Clearable="true"
|
|
Class="tracks-search-field"/>
|
|
</div>
|
|
|
|
@if (ViewModel.FilterAlbum is not null || ViewModel.FilterGenre is not null)
|
|
{
|
|
<div class="tracks-filter-pills">
|
|
<MudChip T="string"
|
|
Color="Color.Tertiary"
|
|
Variant="Variant.Filled"
|
|
OnClose="@(_ => ClearFilter())">
|
|
@(ViewModel.FilterAlbum is not null
|
|
? $"Album: {ViewModel.FilterAlbum}"
|
|
: $"Genre: {ViewModel.FilterGenre}")
|
|
</MudChip>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
@if (ViewModel.Page != null)
|
|
{
|
|
<div class="tracks-view-header">
|
|
<MudToggleGroup T="GalleryViewMode" @bind-Value="_viewMode" Disabled="@(!RendererInfo.IsInteractive)" Class="tracks-view-toggle">
|
|
<MudToggleItem Value="GalleryViewMode.Grid">
|
|
<MudIcon Icon="@Icons.Material.Filled.ViewModule"/>
|
|
</MudToggleItem>
|
|
<MudToggleItem Value="GalleryViewMode.List">
|
|
<MudIcon Icon="@Icons.Material.Filled.ViewList"/>
|
|
</MudToggleItem>
|
|
</MudToggleGroup>
|
|
</div>
|
|
<div class="tracks-content">
|
|
<TracksGallery Tracks="@ViewModel.Page.Items"
|
|
ViewMode="@_viewMode"
|
|
ActiveTrack="@PlayerService.CurrentTrack"
|
|
IsPlaying="@PlayerService.IsPlaying"
|
|
IsPaused="@PlayerService.IsPaused"
|
|
OnPlay="@PlayTrack"
|
|
OnPause="@PauseTrack"/>
|
|
</div>
|
|
<div class="tracks-footer py-4">
|
|
<MudPagination Count="@ViewModel.Page.TotalPages"
|
|
Selected="@ViewModel.Page.Page"
|
|
SelectedChanged="@SetPage"
|
|
Disabled="@(!RendererInfo.IsInteractive)"
|
|
BoundaryCount="2"
|
|
MiddleCount="3"/>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="tracks-content">
|
|
<MudGrid Spacing="3">
|
|
@foreach (var i in Enumerable.Range(0, 12))
|
|
{
|
|
<MudItem xs="12" sm="6" md="4" lg="3" xl="3">
|
|
<div class="deepdrft-track-gallery-item-center">
|
|
<MudSkeleton Width="240px" Height="240px" SkeletonType="SkeletonType.Rectangle"/>
|
|
</div>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</div>
|
|
<div class="tracks-footer">
|
|
<MudSkeleton Height="60px" Width="240px" Class="justify-center"/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div> |