Merge branch 'track-detail-page' into dev
This commit is contained in:
daniel-c-harvey
@@ -0,0 +1,105 @@
|
||||
@page "/track/{EntryKey}"
|
||||
|
||||
<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 isThisTrackPlaying = PlayerService.CurrentTrack?.Id == track.Id
|
||||
&& PlayerService.IsPlaying
|
||||
&& !PlayerService.IsPaused;
|
||||
var hasMeta = track.Album is not null || track.Genre is not null || track.ReleaseDate is not null;
|
||||
|
||||
<div class="deepdrft-track-detail-container">
|
||||
|
||||
<MudLink Href="/tracks" Typo="Typo.body2" Class="deepdrft-track-detail-back">
|
||||
← All tracks
|
||||
</MudLink>
|
||||
|
||||
<div class="deepdrft-track-detail-cover">
|
||||
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
||||
</MudPaper>
|
||||
</div>
|
||||
|
||||
<div class="deepdrft-track-detail-masthead">
|
||||
<MudText Typo="Typo.h3">@track.TrackName</MudText>
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary">@track.Artist</MudText>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<MudIconButton Icon="@(isThisTrackPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
|
||||
Color="Color.Tertiary"
|
||||
Size="Size.Large"
|
||||
OnClick="PlayTrack" />
|
||||
</div>
|
||||
|
||||
@if (hasMeta)
|
||||
{
|
||||
<MudDivider />
|
||||
|
||||
<div class="deepdrft-track-detail-meta">
|
||||
@if (track.Album is not null)
|
||||
{
|
||||
<div>
|
||||
<MudText Typo="Typo.overline">Album</MudText>
|
||||
<MudText Typo="Typo.body1">@track.Album</MudText>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (track.Genre is not null)
|
||||
{
|
||||
<MudChip T="string"
|
||||
Variant="Variant.Outlined"
|
||||
Color="Color.Tertiary"
|
||||
Class="deepdrft-genre-chip">
|
||||
@track.Genre
|
||||
</MudChip>
|
||||
}
|
||||
|
||||
@if (track.ReleaseDate is not null)
|
||||
{
|
||||
<div>
|
||||
<MudText Typo="Typo.overline">Released</MudText>
|
||||
<MudText Typo="Typo.body1">@track.ReleaseDate.Value.ToString("MMMM yyyy")</MudText>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
using DeepDrftModels.DTOs;
|
||||
using DeepDrftPublic.Client.Services;
|
||||
using DeepDrftPublic.Client.ViewModels;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace DeepDrftPublic.Client.Pages;
|
||||
|
||||
public partial class TrackDetail : ComponentBase, IDisposable
|
||||
{
|
||||
private const string PersistKey = "track-detail";
|
||||
|
||||
[Parameter] public required string EntryKey { get; set; }
|
||||
[Inject] public required TrackDetailViewModel ViewModel { get; set; }
|
||||
[Inject] public required PersistentComponentState PersistentState { get; set; }
|
||||
[CascadingParameter] public required IStreamingPlayerService PlayerService { get; set; }
|
||||
|
||||
private IStreamingPlayerService? _subscribedService;
|
||||
private PersistingComponentStateSubscription _persistingSubscription;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Carry the prerendered track across the prerender -> interactive (WASM) seam.
|
||||
// Without this, the WASM pass gets a fresh scoped ViewModel, re-renders the
|
||||
// skeleton, and re-fetches. Mirror the TracksView bridge: persist on the way
|
||||
// out of prerender, restore on the interactive pass, and only fetch on a miss.
|
||||
_persistingSubscription = PersistentState.RegisterOnPersisting(PersistTrack);
|
||||
|
||||
if (PersistentState.TryTakeFromJson<TrackDto>(PersistKey, out var restored) && restored is not null)
|
||||
{
|
||||
ViewModel.Track = restored;
|
||||
ViewModel.IsLoading = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
await ViewModel.Load(EntryKey);
|
||||
}
|
||||
}
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
// The play button's icon reads off the player's live state (CurrentTrack /
|
||||
// IsPlaying / IsPaused), which mutates outside this component's render path.
|
||||
// The cascade is IsFixed, so the provider's re-render never reaches us —
|
||||
// subscribe to the multicast side-channel and re-render on every state change.
|
||||
if (PlayerService != null && !ReferenceEquals(PlayerService, _subscribedService))
|
||||
{
|
||||
if (_subscribedService != null)
|
||||
_subscribedService.StateChanged -= OnPlayerStateChanged;
|
||||
|
||||
PlayerService.StateChanged += OnPlayerStateChanged;
|
||||
_subscribedService = PlayerService;
|
||||
}
|
||||
}
|
||||
|
||||
private void OnPlayerStateChanged() => InvokeAsync(StateHasChanged);
|
||||
|
||||
private Task PersistTrack()
|
||||
{
|
||||
if (ViewModel.Track is not null)
|
||||
{
|
||||
PersistentState.PersistAsJson(PersistKey, ViewModel.Track);
|
||||
}
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private async Task PlayTrack()
|
||||
{
|
||||
if (ViewModel.Track is null) return;
|
||||
|
||||
var isThisTrack = PlayerService.CurrentTrack?.Id == ViewModel.Track.Id;
|
||||
|
||||
// Toggle play/pause if this track is already the active one (playing or paused);
|
||||
// otherwise start a fresh stream. SelectTrackStreaming is the live entry point —
|
||||
// the buffered SelectTrack path is dead.
|
||||
if (isThisTrack && (PlayerService.IsPlaying || PlayerService.IsPaused))
|
||||
{
|
||||
await PlayerService.TogglePlayPause();
|
||||
}
|
||||
else
|
||||
{
|
||||
await PlayerService.SelectTrackStreaming(ViewModel.Track);
|
||||
}
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_persistingSubscription.Dispose();
|
||||
|
||||
if (_subscribedService != null)
|
||||
{
|
||||
_subscribedService.StateChanged -= OnPlayerStateChanged;
|
||||
_subscribedService = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,7 @@ public static class Startup
|
||||
services.AddScoped<TrackClient>();
|
||||
services.AddScoped<ITrackDataService, TrackClientDataService>();
|
||||
services.AddScoped<TracksViewModel>();
|
||||
services.AddScoped<TrackDetailViewModel>();
|
||||
}
|
||||
|
||||
public static void ConfigureApiHttpClient(IServiceCollection services, string baseAddress)
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
using DeepDrftModels.DTOs;
|
||||
using DeepDrftPublic.Client.Services;
|
||||
|
||||
namespace DeepDrftPublic.Client.ViewModels;
|
||||
|
||||
public class TrackDetailViewModel
|
||||
{
|
||||
public ITrackDataService TrackData { get; }
|
||||
|
||||
public TrackDto? Track { get; set; }
|
||||
public bool IsLoading { get; set; } = true;
|
||||
public bool NotFound { get; set; }
|
||||
|
||||
public TrackDetailViewModel(ITrackDataService trackData)
|
||||
{
|
||||
TrackData = trackData;
|
||||
}
|
||||
|
||||
public async Task Load(string entryKey)
|
||||
{
|
||||
// Idempotent across navigations: the scoped instance may be reused, so reset
|
||||
// every flag before the fetch rather than relying on construction defaults.
|
||||
IsLoading = true;
|
||||
NotFound = false;
|
||||
Track = null;
|
||||
|
||||
try
|
||||
{
|
||||
var result = await TrackData.GetTrack(entryKey);
|
||||
|
||||
if (result.Success && result.Value is not null)
|
||||
{
|
||||
Track = result.Value;
|
||||
}
|
||||
else
|
||||
{
|
||||
NotFound = true;
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
IsLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -271,3 +271,79 @@ h2, h3, h4, h5, h6,
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
14. TRACK DETAIL PAGE
|
||||
============================================================================= */
|
||||
|
||||
.deepdrft-track-detail-container {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 1.5rem 4rem;
|
||||
}
|
||||
|
||||
.deepdrft-track-detail-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.65;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.deepdrft-track-detail-back:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Square cover frame — the placeholder MudPaper fills it. */
|
||||
.deepdrft-track-detail-cover {
|
||||
aspect-ratio: 1 / 1;
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
|
||||
}
|
||||
|
||||
/* Stat-card parallel: elevated surface with a soft secondary wash, album icon centered. */
|
||||
.deepdrft-track-detail-cover-placeholder {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--mud-palette-surface);
|
||||
}
|
||||
|
||||
.deepdrft-track-detail-cover-placeholder .mud-icon-root {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.deepdrft-track-detail-masthead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: 2rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.deepdrft-track-detail-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Small-caps mono labels match the caption/overline typography override. */
|
||||
.deepdrft-track-detail-meta .mud-typography-overline {
|
||||
font-variant: small-caps;
|
||||
opacity: 0.6;
|
||||
font-family: var(--deepdrft-font-mono) !important;
|
||||
}
|
||||
|
||||
/* display:contents so the anchor wraps the card's cover and title without
|
||||
introducing its own box — the container's positioning context and the
|
||||
content column's flex layout are both preserved. */
|
||||
.deepdrft-track-card-link {
|
||||
display: contents;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,27 @@
|
||||
@{
|
||||
var hasLink = !string.IsNullOrEmpty(TrackModel?.EntryKey);
|
||||
var trackHref = hasLink ? $"/track/{TrackModel!.EntryKey}" : null;
|
||||
}
|
||||
|
||||
<div class="deepdrft-track-card-container">
|
||||
|
||||
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
||||
@* Cover and title/artist link to the detail page; the play button (below, outside any
|
||||
anchor) stays the sole playback entry point. display:contents keeps the grid intact. *@
|
||||
@if (hasLink)
|
||||
{
|
||||
<a href="@trackHref" class="deepdrft-track-card-link">
|
||||
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
||||
{
|
||||
<div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="deepdrft-track-card-fallback"></div>
|
||||
}
|
||||
</a>
|
||||
}
|
||||
else if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
||||
{
|
||||
<div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
|
||||
</div>
|
||||
@@ -12,17 +33,36 @@
|
||||
|
||||
<div class="deepdrft-track-card-content">
|
||||
|
||||
<div class="deepdrft-track-info-top">
|
||||
<MudText Typo="Typo.subtitle1"
|
||||
Class="deepdrft-track-title text-truncate mb-1">
|
||||
@TrackModel?.TrackName
|
||||
</MudText>
|
||||
@if (hasLink)
|
||||
{
|
||||
<a href="@trackHref" class="deepdrft-track-card-link">
|
||||
<div class="deepdrft-track-info-top">
|
||||
<MudText Typo="Typo.subtitle1"
|
||||
Class="deepdrft-track-title text-truncate mb-1">
|
||||
@TrackModel?.TrackName
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.caption"
|
||||
Class="deepdrft-track-artist text-truncate mb-2">
|
||||
@TrackModel?.Artist
|
||||
</MudText>
|
||||
</div>
|
||||
<MudText Typo="Typo.caption"
|
||||
Class="deepdrft-track-artist text-truncate mb-2">
|
||||
@TrackModel?.Artist
|
||||
</MudText>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="deepdrft-track-info-top">
|
||||
<MudText Typo="Typo.subtitle1"
|
||||
Class="deepdrft-track-title text-truncate mb-1">
|
||||
@TrackModel?.TrackName
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.caption"
|
||||
Class="deepdrft-track-artist text-truncate mb-2">
|
||||
@TrackModel?.Artist
|
||||
</MudText>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="deepdrft-track-info-middle">
|
||||
@if (!string.IsNullOrEmpty(TrackModel?.Album))
|
||||
|
||||
Reference in New Issue
Block a user