Front End Track Gallery Controls

- Theming adjustments (still needs a lot of work)
2025-09-04 14:18:35 -04:00
parent 5050074f4f
commit 27522c1e1c
11 changed files with 224 additions and 77 deletions
@@ -0,0 +1,83 @@
+<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
+         Elevation="4">
+    
+    @if (!string.IsNullOrEmpty(Track?.ImagePath))
+    {
+        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
+                    background-image: url('@Track.ImagePath'); 
+                    background-size: cover; 
+                    background-position: center;
+                    filter: brightness(0.7);">
+        </div>
+    }
+    else
+    {
+        <MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+                  Class="mud-theme-secondary"
+                  Elevation="0">
+        </MudPaper>
+    }
+    
+    <MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
+        
+        <div>
+            <MudText Typo="Typo.h6" 
+                     Color="Color.Surface"
+                     Style="margin-bottom: 4px;"
+                     Class="text-truncate">
+                @Track?.TrackName
+            </MudText>
+            
+            <MudText Typo="Typo.subtitle1" 
+                     Color="Color.Surface"
+                     Style="margin-bottom: 8px;"
+                     Class="text-truncate">
+                @Track?.Artist
+            </MudText>
+        </div>
+        
+        <div Style="margin: 8px 0;">
+            @if (!string.IsNullOrEmpty(Track?.Album))
+            {
+                <MudText Typo="Typo.caption" 
+                         Color="Color.Surface"
+                         Class="text-truncate">
+                    @Track.Album
+                </MudText>
+            }
+            
+            @if (!string.IsNullOrEmpty(Track?.Genre))
+            {
+                <MudChip T="string" 
+                         Size="Size.Small" 
+                         Variant="Variant.Filled" 
+                         Color="Color.Primary"
+                         Style="opacity: 0.9; margin-top: 4px;">
+                    @Track.Genre
+                </MudChip>
+            }
+        </div>
+        
+        <div Style="display: flex; justify-content: space-between; align-items: center;">
+            @if (Track?.ReleaseDate.HasValue == true)
+            {
+                <MudText Typo="Typo.caption" 
+                         Color="Color.Surface">
+                    @Track.ReleaseDate.Value.Year
+                </MudText>
+            }
+            else
+            {
+                <div></div>
+            }
+            
+            <MudFab Color="Color.Primary" 
+                    Size="Size.Medium"
+                    StartIcon="@Icons.Material.Filled.PlayArrow"
+                    OnClick="@HandlePlayClick"
+                    Elevation="4" />
+        </div>
+        
+    </MudCardContent>
+    
+</MudCard>
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Components;
+using DeepDrftModels.Entities;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class TrackPlayer : ComponentBase
+{
+    [Parameter] public TrackEntity? Track { get; set; }
+
+    private void HandlePlayClick()
+    {
+        // TODO: Implement play functionality with injected service
+    }
+}
@@ -0,0 +1,12 @@
+<MudContainer MaxWidth="MaxWidth.False" Style="padding: 16px;">
+    <MudGrid Spacing="3" Justify="Justify.Center">
+        @foreach (var track in Tracks)
+        {
+            <MudItem xs="12" sm="6" md="4" lg="2" xl="2">
+                <div Style="display: flex; justify-content: center;">
+                    <TrackPlayer Track="@track" />
+                </div>
+            </MudItem>
+        }
+    </MudGrid>
+</MudContainer>
@@ -0,0 +1,9 @@
+using Microsoft.AspNetCore.Components;
+using DeepDrftModels.Entities;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class TracksGallery : ComponentBase
+{
+    [Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = Enumerable.Empty<TrackEntity>();
+}