Add track detail page with clickable cards

2026-06-06 16:33:57 -04:00
parent 1bb6e29e47
commit 0dd33a5dfc
6 changed files with 371 additions and 11 deletions
@@ -0,0 +1,106 @@
+@page "/track/{EntryKey}"
+@rendermode InteractiveWebAssembly
+
+<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" Class="mud-text-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>
+}