Merge branch 'track-detail-page' into dev

DeepDrftPublic.Client/Pages/TrackDetail.razor

@@ -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">
+            &larr; 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>
+}

DeepDrftPublic.Client/Pages/TrackDetail.razor.cs

@@ -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;
+        }
+    }
+}

DeepDrftPublic.Client/Startup.cs

@@ -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)

DeepDrftPublic.Client/ViewModels/TrackDetailViewModel.cs

@@ -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;
+        }
+    }
+}

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -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;
+}
+

DeepDrftShared.Client/Components/TrackCard.razor

@@ -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">
+        @if (hasLink)
-            <MudText Typo="Typo.subtitle1"
+        {
-                     Class="deepdrft-track-title text-truncate mb-1">
+            <a href="@trackHref" class="deepdrft-track-card-link">
-                @TrackModel?.TrackName
+                <div class="deepdrft-track-info-top">
-            </MudText>
+                    <MudText Typo="Typo.subtitle1"
+                             Class="deepdrft-track-title text-truncate mb-1">
+                        @TrackModel?.TrackName
+                    </MudText>
 
-            <MudText Typo="Typo.caption"
+                    <MudText Typo="Typo.caption"
-                     Class="deepdrft-track-artist text-truncate mb-2">
+                             Class="deepdrft-track-artist text-truncate mb-2">
-                @TrackModel?.Artist
+                        @TrackModel?.Artist
-            </MudText>
+                    </MudText>
-        </div>
+                </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))