Merge branch 'album-art-detail' into dev

DeepDrftPublic.Client/Pages/TrackDetail.razor

@@ -64,9 +64,17 @@ else if (ViewModel.Track is not null)
         </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>
+            @if (!string.IsNullOrEmpty(track.ImagePath))
+            {
+                <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
+                          Style="@($"background-image: url('api/image/{Uri.EscapeDataString(track.ImagePath)}');")" />
+            }
+            else
+            {
+                <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)

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -317,6 +317,14 @@ h2, h3, h4, h5, h6,
     font-size: 72px;
 }
 
+/* Album art fills the square frame; background-size:cover handles any aspect ratio. */
+.deepdrft-track-detail-cover-art {
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 .deepdrft-track-detail-masthead {
     display: flex;
     flex-direction: column;