Files
deepdrft/DeepDrftPublic.Client/Pages/TrackDetail.razor
T
daniel-c-harvey af724ce570 Phase 9 Wave 4: ARCHIVE nav + Cuts/Sessions/Mixes pages + MixWaveformVisualizer
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).
2026-06-12 23:05:25 -04:00

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>
}