feature: AudioPlayer Enhancements

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor

@@ -21,6 +21,7 @@ else
                                          LoadProgress="LoadProgress"
                                          DisplayTime="DisplayTime"
                                          Duration="Duration"
+                                         Fixed="Fixed"
                                          TogglePlayPause="@TogglePlayPause"
                                          Stop="@Stop"
                                          Class="transport-zone"/>

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -95,7 +95,7 @@
         grid-template-columns: auto minmax(360px, 1fr) auto;
         grid-template-areas:
             "transport waveform volume"
-            "transport meta     volume";
+            "transport meta     .";
     }
 }
 

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor

@@ -6,9 +6,12 @@
                    Color="Color.Primary"
                    Disabled="!CanPlay"
                    OnToggle="@TogglePlayPause"/>
+    @if (!Fixed)
+    {
         <MudIconButton Icon="@Icons.Material.Filled.Stop"
                        Color="Color.Primary"
                        Size="Size.Large"
                        OnClick="@Stop"
                        Disabled="!IsLoaded"/>
+    }
 </MudStack>

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
 
 namespace DeepDrftPublic.Client.Controls.AudioPlayerBar;
 
@@ -12,6 +12,8 @@ public partial class PlayerControls : ComponentBase
     /// gated on <see cref="IsLoaded"/>.
     /// </summary>
     [Parameter] public bool CanPlay { get; set; }
+
+    [Parameter] public bool Fixed { get; set; } = false;
     [Parameter] public required EventCallback TogglePlayPause { get; set; }
     [Parameter] public required EventCallback Stop { get; set; }
 }

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor

@@ -4,6 +4,7 @@
     <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
         <PlayerControls IsLoaded="IsLoaded"
                         CanPlay="CanPlay"
+                        Fixed="Fixed"
                         TogglePlayPause="TogglePlayPause"
                         Stop="Stop"/>
         @if (IsLoading && !IsStreaming)

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs

@@ -11,6 +11,7 @@ public partial class PlayerTransportZone : ComponentBase
     [Parameter] public double LoadProgress { get; set; }
     [Parameter] public double DisplayTime { get; set; }
     [Parameter] public double? Duration { get; set; }
+    [Parameter] public bool Fixed { get; set; } = false;
     [Parameter] public EventCallback TogglePlayPause { get; set; }
     [Parameter] public EventCallback Stop { get; set; }
     [Parameter] public string? Class { get; set; }

DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor

@@ -1,12 +1,16 @@
 @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
 
+
+
 @if (Track is not null)
 {
     <div class="track-meta-row">
         <div class="track-meta-identity">
+            <a href="@($"/track/{Track.EntryKey}")" style="text-decoration: none;">
                 <MudText Typo="Typo.subtitle2" Class="track-meta-title text-truncate">
                     @Track.TrackName
                 </MudText>
+            </a>
             <MudText Typo="Typo.subtitle2" Class="track-meta-sep"> - </MudText>
             <MudText Typo="Typo.caption" Class="track-meta-artist text-truncate">
                 @Track.Artist

DeepDrftPublic.Client/Pages/TrackDetail.razor

@@ -50,12 +50,7 @@ else if (ViewModel.Track is not null)
             ← 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>
-
+        <MudStack Row AlignItems="AlignItems.Start" Justify="Justify.SpaceBetween" Style="margin: 2rem 0 1.5rem;">
             <div class="deepdrft-track-detail-masthead">
                 <MudText Typo="Typo.h3">@track.TrackName</MudText>
                 <MudText Typo="Typo.h6" Color="Color.Primary">@track.Artist</MudText>
@@ -67,6 +62,15 @@ else if (ViewModel.Track is not null)
                                Size="Size.Large"
                                OnClick="PlayTrack" />
             </div>
+        </MudStack>
+
+        <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>
+        
+        
 
         @if (hasMeta)
         {
@@ -83,12 +87,14 @@ else if (ViewModel.Track is not null)
 
                 @if (track.Genre is not null)
                 {
+                    <div>
                         <MudChip T="string"
                                  Variant="Variant.Outlined"
                                  Color="Color.Tertiary"
                                  Class="deepdrft-genre-chip">
                             @track.Genre
                         </MudChip>
+                    </div>
                 }
 
                 @if (track.ReleaseDate is not null)

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -298,7 +298,7 @@ h2, h3, h4, h5, h6,
 .deepdrft-track-detail-cover {
     aspect-ratio: 1 / 1;
     max-width: 360px;
-    margin: 0 auto;
+    margin: 0 auto 2rem;
     overflow: hidden;
     box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
 }
@@ -321,13 +321,14 @@ h2, h3, h4, h5, h6,
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    margin: 2rem 0 1.5rem;
 }
 
 .deepdrft-track-detail-meta {
     display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 2rem;
     margin-top: 1.5rem;
 }
 
@@ -347,3 +348,8 @@ h2, h3, h4, h5, h6,
     color: inherit;
 }
 
+@media (max-width: 419.98px) {
+    .deepdrft-track-detail-meta {
+        flex-direction: column;
+    }
+}