daniel-c-harvey
119 lines
5.5 KiB
Plaintext
119 lines
5.5 KiB
Plaintext
@page "/archive"
|
|
@using DeepDrftModels.Enums
|
|
|
|
<PageTitle>DeepDrft Archive</PageTitle>
|
|
|
|
<div>
|
|
<MudContainer MaxWidth="MaxWidth.Large" Class="archive-view-container">
|
|
@* Search + filter affordances are interactive-only: the debounce timer and chip selection
|
|
need WASM. During prerender/non-interactive they are hidden, matching TracksView's gate.
|
|
The release grid still prerenders so the archive is meaningful before hydration. *@
|
|
@if (RendererInfo.IsInteractive)
|
|
{
|
|
<div class="archive-controls-row">
|
|
<div class="archive-controls-search">
|
|
<MudTextField T="string"
|
|
Value="@SearchText"
|
|
ValueChanged="@OnSearchInput"
|
|
Immediate="true"
|
|
DebounceInterval="400"
|
|
Placeholder="Search releases or artists"
|
|
Adornment="Adornment.Start"
|
|
AdornmentIcon="@Icons.Material.Filled.Search"
|
|
Variant="Variant.Outlined"
|
|
Margin="Margin.Dense"
|
|
Clearable="true"
|
|
Class="archive-search-field"/>
|
|
</div>
|
|
|
|
<div class="archive-controls-medium">
|
|
<MudToggleGroup T="ReleaseMedium?"
|
|
Value="@_selectedMedium"
|
|
ValueChanged="@OnMediumSelected"
|
|
SelectionMode="SelectionMode.SingleSelection"
|
|
Color="Color.Primary"
|
|
Size="Size.Small"
|
|
Class="archive-medium-toggle">
|
|
<MudToggleItem T="ReleaseMedium?" Value="@(null)">All</MudToggleItem>
|
|
@foreach (var medium in _media)
|
|
{
|
|
<MudToggleItem T="ReleaseMedium?" Value="@medium">@MediumLabel(medium)</MudToggleItem>
|
|
}
|
|
</MudToggleGroup>
|
|
</div>
|
|
|
|
@if (_genres.Count > 0)
|
|
{
|
|
<div class="archive-controls-genre">
|
|
<MudChipSet T="string"
|
|
SelectedValue="@_selectedGenre"
|
|
SelectedValueChanged="@OnGenreSelected"
|
|
SelectionMode="SelectionMode.ToggleSelection"
|
|
Class="archive-genre-chips">
|
|
@foreach (var genre in _genres)
|
|
{
|
|
<MudChip T="string" Value="@genre.Genre">@genre.Genre</MudChip>
|
|
}
|
|
</MudChipSet>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@if (_loading)
|
|
{
|
|
<MudGrid Spacing="6" Justify="Justify.Center">
|
|
@foreach (var _ in Enumerable.Range(0, 8))
|
|
{
|
|
<MudItem xs="12" sm="6" md="4" lg="3" xl="3">
|
|
<div class="archive-card-center">
|
|
<MudSkeleton Width="200px" Height="200px" SkeletonType="SkeletonType.Rectangle"/>
|
|
</div>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
}
|
|
else if (_releases.Count == 0)
|
|
{
|
|
<div class="archive-empty">
|
|
<MudText Typo="Typo.h6">No releases found</MudText>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<MudGrid Spacing="6" Justify="Justify.Center">
|
|
@foreach (var release in _releases)
|
|
{
|
|
<MudItem xs="12" sm="6" md="4" lg="3" xl="3">
|
|
<div class="archive-card-center">
|
|
<a href="@ReleaseRoutes.DetailHref(release)" class="archive-card-link">
|
|
<div class="archive-release-card">
|
|
@if (!string.IsNullOrEmpty(release.ImagePath))
|
|
{
|
|
<div class="archive-release-cover"
|
|
style="background-image: url('api/image/@Uri.EscapeDataString(release.ImagePath)');">
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="archive-release-cover archive-release-cover--fallback"></div>
|
|
}
|
|
|
|
<div class="archive-release-body">
|
|
<MudText Typo="Typo.subtitle1" Class="archive-release-title text-truncate">
|
|
@release.Title
|
|
</MudText>
|
|
<MudText Typo="Typo.caption" Class="archive-release-artist text-truncate">
|
|
@release.Artist
|
|
</MudText>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
}
|
|
</MudContainer>
|
|
</div>
|