Merge branch 'track-detail-page' into dev

2026-06-06 17:30:10 -04:00
parent 6b18d7cc1e 93d9b47a67
commit b1d58c1327
6 changed files with 373 additions and 11 deletions
@@ -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>
+}
@@ -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;
+        }
+    }
+}