af724ce570
Replaces flat RELEASES/SESSIONS/MIXES nav with ARCHIVE dropdown (PageRoute.Children,
one-level cap, dual-role node). Adds /archive overview, /cuts (AlbumsView + medium
filter; /albums redirects), /sessions + /sessions/{id} (hero-dominant), /mixes +
/mixes/{id} (MixWaveformVisualizer full-page background). Extracts ReleaseDetailScaffold
from TrackDetail (invariant trio). PersistentComponentState bridge on all new pages.
Click-to-seek seam designed on MixWaveformVisualizer (inert until wired).
102 lines
3.9 KiB
Plaintext
102 lines
3.9 KiB
Plaintext
@page "/track/{EntryKey}"
|
|
@using DeepDrftPublic.Client.Controls
|
|
|
|
<PageTitle>@(ViewModel.Track?.TrackName ?? "Track") - DeepDrft</PageTitle>
|
|
|
|
@if (ViewModel.IsLoading)
|
|
{
|
|
<div class="deepdrft-track-detail-container">
|
|
<div class="deepdrft-track-detail-cover">
|
|
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="320px" />
|
|
</div>
|
|
<div class="deepdrft-track-detail-masthead">
|
|
<MudSkeleton SkeletonType="SkeletonType.Text" Width="70%" Height="56px" />
|
|
<MudSkeleton SkeletonType="SkeletonType.Text" Width="40%" Height="32px" />
|
|
</div>
|
|
<div class="deepdrft-track-detail-meta">
|
|
<MudSkeleton SkeletonType="SkeletonType.Text" Width="30%" Height="24px" />
|
|
<MudSkeleton SkeletonType="SkeletonType.Text" Width="25%" Height="24px" />
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (ViewModel.NotFound)
|
|
{
|
|
<div class="deepdrft-track-detail-container">
|
|
<div class="deepdrft-track-detail-masthead">
|
|
<MudText Typo="Typo.h4" Align="Align.Center">Track not found.</MudText>
|
|
<MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">
|
|
This track may have been moved or removed.
|
|
</MudText>
|
|
<div class="d-flex justify-center mt-4">
|
|
<MudButton Href="/tracks"
|
|
Variant="Variant.Text"
|
|
StartIcon="@Icons.Material.Filled.ArrowBack">
|
|
All tracks
|
|
</MudButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (ViewModel.Track is not null)
|
|
{
|
|
var track = ViewModel.Track;
|
|
var release = track.Release;
|
|
var hasMeta = release is not null
|
|
&& (release.Title is not null || release.Genre is not null || release.ReleaseDate is not null);
|
|
|
|
<ReleaseDetailScaffold Title="@track.TrackName"
|
|
Artist="@release?.Artist"
|
|
Track="@track"
|
|
BackHref="/tracks"
|
|
BackLabel="All tracks"
|
|
ShowMeta="@hasMeta">
|
|
<Hero>
|
|
<div class="deepdrft-track-detail-cover">
|
|
@if (!string.IsNullOrEmpty(release?.ImagePath))
|
|
{
|
|
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
|
|
Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath)}');")" />
|
|
}
|
|
else
|
|
{
|
|
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
|
|
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
|
</MudPaper>
|
|
}
|
|
</div>
|
|
</Hero>
|
|
<MetaContent>
|
|
@if (hasMeta)
|
|
{
|
|
@if (release?.Title is not null)
|
|
{
|
|
<div>
|
|
<MudText Typo="Typo.overline">Album</MudText>
|
|
<MudText Typo="Typo.body1">@release.Title</MudText>
|
|
</div>
|
|
}
|
|
|
|
@if (release?.Genre is not null)
|
|
{
|
|
<div>
|
|
<MudChip T="string"
|
|
Variant="Variant.Outlined"
|
|
Color="Color.Tertiary"
|
|
Class="deepdrft-genre-chip">
|
|
@release.Genre
|
|
</MudChip>
|
|
</div>
|
|
}
|
|
|
|
@if (release?.ReleaseDate is not null)
|
|
{
|
|
<div>
|
|
<MudText Typo="Typo.overline">Released</MudText>
|
|
<MudText Typo="Typo.body1">@release.ReleaseDate.Value.ToString("MMMM yyyy")</MudText>
|
|
</div>
|
|
}
|
|
}
|
|
</MetaContent>
|
|
</ReleaseDetailScaffold>
|
|
}
|