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"/>
-    <MudIconButton Icon="@Icons.Material.Filled.Stop"
+    @if (!Fixed)
-                   Color="Color.Primary"
+    {
-                   Size="Size.Large"
+        <MudIconButton Icon="@Icons.Material.Filled.Stop"
-                   OnClick="@Stop"
+                       Color="Color.Primary"
-                   Disabled="!IsLoaded"/>
+                       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">
-            <MudText Typo="Typo.subtitle2" Class="track-meta-title text-truncate">
+            <a href="@($"/track/{Track.EntryKey}")" style="text-decoration: none;">
-                @Track.TrackName
+                <MudText Typo="Typo.subtitle2" Class="track-meta-title text-truncate">
-            </MudText>
+                    @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,23 +50,27 @@ else if (ViewModel.Track is not null)
             ← All tracks
         </MudLink>
 
+        <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>
+            </div>
+            
+            <div>
+                <MudIconButton Icon="@(isThisTrackPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
+                               Color="Color.Tertiary"
+                               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>
-
+        
-        <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)
         {
@@ -83,12 +87,14 @@ else if (ViewModel.Track is not null)
 
                 @if (track.Genre is not null)
                 {
-                    <MudChip T="string"
+                    <div>
-                             Variant="Variant.Outlined"
+                        <MudChip T="string"
-                             Color="Color.Tertiary"
+                                 Variant="Variant.Outlined"
-                             Class="deepdrft-genre-chip">
+                                 Color="Color.Tertiary"
-                        @track.Genre
+                                 Class="deepdrft-genre-chip">
-                    </MudChip>
+                            @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;
+    flex-direction: row;
-    gap: 1rem;
+    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;
+    }
+}