Front End

- MudBlazor Theme Manager tryout
 - Navigation bar rework
 - Icons and styles rework
 - Track Gallery & Card layout redesign for SPA
 - Track Player bottom bar

DeepDrftWeb.Client/Controls/AppNavLink.razor

@@ -0,0 +1,12 @@
+<MudStack Row AlignItems="AlignItems.Center" Spacing="3" Class="mx-3">
+    @if (Icon != null)
+    {
+        <MudIcon Icon="@Icon" />
+    }
+    <NavLink href="@Href" Match="@(Match ?? NavLinkMatch.Prefix)">
+        @if (ChildContent != null)
+        {
+            @ChildContent
+        }
+    </NavLink>
+</MudStack>

DeepDrftWeb.Client/Controls/AppNavLink.razor.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class AppNavLink : ComponentBase
+{
+    [Parameter] public required string Href { get; set; }
+    [Parameter] public NavLinkMatch? Match { get; set; }
+    [Parameter] public string? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}

DeepDrftWeb.Client/Controls/AppNavLink.razor.css

@@ -0,0 +1 @@
+

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor

@@ -0,0 +1,51 @@
+<MudContainer>
+    <MudPaper Class="bottom-bar" Square="true">
+        <MudStack Row AlignItems="AlignItems.Center" Spacing="4" Class="px-4 py-2">
+            <MudStack Class="pb-2">
+                <MudStack Row AlignItems="AlignItems.Center">
+                    <MudIconButton Icon="@GetPlayIcon()"
+                                   Color="Color.Primary"
+                                   Size="Size.Large"
+                                   OnClick="@TogglePlayPause"
+                                   Disabled="!IsLoaded"/>
+                    @if (IsLoaded)
+                    {
+                        <MudIconButton Icon="Icons.Material.Filled.Stop"
+                                       Color="Color.Secondary"
+                                       OnClick="@Stop"
+                                       Disabled="!IsLoaded"/>    
+                    }
+                </MudStack>
+                <MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
+                    @FormatTime(CurrentTime) / @FormatTime(Duration)
+                </MudText>
+            </MudStack>
+
+            <MudSlider T="double"
+                       Min="0"
+                       Max="@Duration"
+                       Step="0.1"
+                       Value="@CurrentTime"
+                       ValueChanged="OnSeek"
+                       Disabled="!IsLoaded"
+                       Style="flex: 1; margin-right: 8px;"/>
+
+            <div style="display: flex; align-items: center; width: 140px;">
+                <MudIcon Icon="@GetVolumeIcon()" Style="margin-right: 4px;"/>
+                <MudSlider T="double"
+                           Min="0"
+                           Max="1"
+                           Step="0.01"
+                           Value="@Volume"
+                           ValueChanged="OnVolumeChange"
+                           Style="flex: 1;"/>
+            </div>
+        </MudStack>
+        @if (!string.IsNullOrEmpty(ErrorMessage))
+        {
+            <MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError">
+                @ErrorMessage
+            </MudAlert>
+        }
+    </MudPaper>
+</MudContainer>

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs

@@ -0,0 +1,257 @@
+using Microsoft.AspNetCore.Components;
+using DeepDrftWeb.Client.Services;
+using MudBlazor;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
+{
+    [Parameter] public string? AudioUrl { get; set; }
+    [Parameter] public bool ShowLoadProgress { get; set; } = true;
+    [Parameter] public EventCallback<double> OnProgressChanged { get; set; }
+    [Parameter] public EventCallback OnPlaybackEnded { get; set; }
+
+    [Inject] public required AudioInteropService AudioInterop { get; set; }
+    
+    private string PlayerId = Guid.NewGuid().ToString();
+    private bool IsLoaded = false;
+    private bool IsPlaying = false;
+    private bool IsPaused = false;
+    private double CurrentTime = 0;
+    private double Duration = 0;
+    private double Volume = 0.8;
+    private double LoadProgress = 0;
+    private string? ErrorMessage;
+    private Timer? progressTimer;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var result = await AudioInterop.CreatePlayerAsync(PlayerId);
+        if (!result.Success)
+        {
+            ErrorMessage = $"Failed to initialize audio player: {result.Error}";
+            return;
+        }
+
+        await AudioInterop.SetOnProgressCallbackAsync(PlayerId, OnProgress);
+        await AudioInterop.SetOnEndCallbackAsync(PlayerId, OnPlaybackEnd);
+        await AudioInterop.SetOnLoadProgressCallbackAsync(PlayerId, OnLoadProgress);
+        
+        await AudioInterop.SetVolumeAsync(PlayerId, Volume);
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (IsLoaded) return;
+
+        try
+        {
+            AudioLoadResult? loadResult = null;
+
+            if (!string.IsNullOrEmpty(AudioUrl))
+            {
+                loadResult = await AudioInterop.LoadAudioFromUrlAsync(PlayerId, AudioUrl);
+            }
+
+            if (loadResult?.Success == true)
+            {
+                IsLoaded = true;
+                Duration = loadResult.Duration;
+                LoadProgress = loadResult.LoadProgress;
+                ErrorMessage = null;
+                StateHasChanged();
+            }
+            else
+            {
+                ErrorMessage = $"Failed to load audio: {loadResult?.Error ?? "No audio source provided"}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error loading audio: {ex.Message}";
+        }
+    }
+
+    private async Task TogglePlayPause()
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            AudioOperationResult result;
+
+            if (IsPlaying)
+            {
+                result = await AudioInterop.PauseAsync(PlayerId);
+                if (result.Success)
+                {
+                    IsPlaying = false;
+                    IsPaused = true;
+                }
+            }
+            else
+            {
+                result = await AudioInterop.PlayAsync(PlayerId);
+                if (result.Success)
+                {
+                    IsPlaying = true;
+                    IsPaused = false;
+                }
+            }
+
+            if (!result.Success)
+            {
+                ErrorMessage = $"Playback error: {result.Error}";
+            }
+            else
+            {
+                ErrorMessage = null;
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error controlling playback: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task Stop()
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            var result = await AudioInterop.StopAsync(PlayerId);
+            if (result.Success)
+            {
+                IsPlaying = false;
+                IsPaused = false;
+                CurrentTime = 0;
+                ErrorMessage = null;
+            }
+            else
+            {
+                ErrorMessage = $"Stop error: {result.Error}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error stopping playback: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task OnSeek(double position)
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            var result = await AudioInterop.SeekAsync(PlayerId, position);
+            if (result.Success)
+            {
+                CurrentTime = position;
+                ErrorMessage = null;
+            }
+            else
+            {
+                ErrorMessage = $"Seek error: {result.Error}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error seeking: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task OnVolumeChange(double volume)
+    {
+        Volume = volume;
+
+        if (IsLoaded)
+        {
+            try
+            {
+                var result = await AudioInterop.SetVolumeAsync(PlayerId, volume);
+                if (!result.Success)
+                {
+                    ErrorMessage = $"Volume error: {result.Error}";
+                    StateHasChanged();
+                }
+            }
+            catch (Exception ex)
+            {
+                ErrorMessage = $"Error setting volume: {ex.Message}";
+                StateHasChanged();
+            }
+        }
+    }
+
+    private async Task OnProgress(double currentTime)
+    {
+        CurrentTime = currentTime;
+        if (OnProgressChanged.HasDelegate)
+        {
+            await OnProgressChanged.InvokeAsync(currentTime);
+        }
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnPlaybackEnd()
+    {
+        IsPlaying = false;
+        IsPaused = false;
+        CurrentTime = 0;
+        
+        if (OnPlaybackEnded.HasDelegate)
+        {
+            await OnPlaybackEnded.InvokeAsync();
+        }
+        
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnLoadProgress(double progress)
+    {
+        LoadProgress = progress;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private string GetPlayIcon()
+    {
+        return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow;
+    }
+
+    private string GetVolumeIcon()
+    {
+        if (Volume == 0) return Icons.Material.Filled.VolumeOff;
+        if (Volume < 0.5) return Icons.Material.Filled.VolumeDown;
+        return Icons.Material.Filled.VolumeUp;
+    }
+
+    private static string FormatTime(double seconds)
+    {
+        var timeSpan = TimeSpan.FromSeconds(seconds);
+        return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
+    }
+
+    private void ClearError()
+    {
+        ErrorMessage = null;
+        StateHasChanged();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        progressTimer?.Dispose();
+        
+        if (IsLoaded)
+        {
+            await AudioInterop.DisposePlayerAsync(PlayerId);
+        }
+    }
+}

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css

@@ -0,0 +1,10 @@
+.bottom-bar {
+    justify-self: center; 
+    max-width: 1800px; 
+    position: fixed;
+    bottom: 0;
+    left: var(--mud-drawer-width-left);
+    right: 0;
+    margin: 0 1.5rem 1.5rem 1.5rem;
+    z-index: 1000;
+}

DeepDrftWeb.Client/Controls/TrackCard.razor

@@ -1,10 +1,10 @@
 <MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
          Elevation="4">
     
-    @if (!string.IsNullOrEmpty(Track?.ImagePath))
+    @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
         <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
-                    background-image: url('@Track.ImagePath'); 
+                    background-image: url('@TrackModel.ImagePath'); 
                     background-size: cover; 
                     background-position: center;
                     filter: brightness(0.7);">
@@ -25,45 +25,45 @@
                      Color="Color.Surface"
                      Style="margin-bottom: 4px;"
                      Class="text-truncate">
-                @Track?.TrackName
+                @TrackModel?.TrackName
             </MudText>
             
             <MudText Typo="Typo.subtitle1" 
                      Color="Color.Surface"
                      Style="margin-bottom: 8px;"
                      Class="text-truncate">
-                @Track?.Artist
+                @TrackModel?.Artist
             </MudText>
         </div>
         
         <div Style="margin: 8px 0;">
-            @if (!string.IsNullOrEmpty(Track?.Album))
+            @if (!string.IsNullOrEmpty(TrackModel?.Album))
             {
                 <MudText Typo="Typo.caption" 
                          Color="Color.Surface"
                          Class="text-truncate">
-                    @Track.Album
+                    @TrackModel.Album
                 </MudText>
             }
             
-            @if (!string.IsNullOrEmpty(Track?.Genre))
+            @if (!string.IsNullOrEmpty(TrackModel?.Genre))
             {
                 <MudChip T="string" 
                          Size="Size.Small" 
                          Variant="Variant.Filled" 
                          Color="Color.Primary"
                          Style="opacity: 0.9; margin-top: 4px;">
-                    @Track.Genre
+                    @TrackModel.Genre
                 </MudChip>
             }
         </div>
         
         <div Style="display: flex; justify-content: space-between; align-items: center;">
-            @if (Track?.ReleaseDate.HasValue == true)
+            @if (TrackModel?.ReleaseDate.HasValue == true)
             {
                 <MudText Typo="Typo.caption" 
                          Color="Color.Surface">
-                    @Track.ReleaseDate.Value.Year
+                    @TrackModel.ReleaseDate.Value.Year
                 </MudText>
             }
             else
@@ -73,9 +73,8 @@
             
             <MudFab Color="Color.Primary" 
                     Size="Size.Medium"
-                    StartIcon="@_playPauseIcon"
-                    OnClick="@HandlePlayClick"/>
-            <audio class="d-none" src="@_audioStream" autoplay></audio>
+                    StartIcon="@PlayPauseIcon"
+                    OnClick="@PlayClick"/>
         </div>
         
     </MudCardContent>

DeepDrftWeb.Client/Controls/TrackCard.razor.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
+using MudBlazor;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class TrackCard : ComponentBase
+{
+    [Parameter] public required TrackEntity TrackModel { get; set; }
+    [Parameter] public EventCallback<TrackEntity> OnPlay { get; set; }
+    
+    private bool _isPlaying = false;
+    private string PlayPauseIcon => _isPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
+
+    private async Task PlayClick()
+    {
+        if (!_isPlaying)
+        {
+            _isPlaying = true;
+            await OnPlay.InvokeAsync();
+        }
+    }
+}

DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs

@@ -1,29 +0,0 @@
-using Microsoft.AspNetCore.Components;
-using DeepDrftModels.Entities;
-using DeepDrftWeb.Client.Clients;
-using MudBlazor;
-
-namespace DeepDrftWeb.Client.Controls;
-
-public partial class TrackPlayer : ComponentBase
-{
-    [Parameter] public required TrackEntity Track { get; set; }
-    [Inject] public required TrackMediaClient Client { get; set; }
-    
-    private Stream? _audioStream = null;
-    private bool _isPlaying = false;
-    private string _playPauseIcon => _isPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow;
-    private async Task HandlePlayClick()
-    {
-        if (_audioStream == null)
-        {
-            _audioStream = await Client.GetTrackMedia(Track.EntryKey);
-            PlayAudio();
-        }
-    }
-
-    private void PlayAudio()
-    {
-        throw new NotImplementedException();
-    }
-}

DeepDrftWeb.Client/Controls/TracksGallery.razor

@@ -1,10 +1,10 @@
-<MudContainer MaxWidth="MaxWidth.False" Style="padding: 16px;">
+<MudContainer MaxWidth="MaxWidth.False" Class="tracks-gallery-container">
     <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" />
+                    <TrackCard TrackModel="@track" OnPlay="@HandlePlayClick"/>
                 </div>
             </MudItem>
         }

DeepDrftWeb.Client/Controls/TracksGallery.razor.cs

@@ -1,9 +1,28 @@
 using Microsoft.AspNetCore.Components;
 using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
 
 namespace DeepDrftWeb.Client.Controls;
 
 public partial class TracksGallery : ComponentBase
 {
+    private Stream? _audioStream = null;
     [Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = Enumerable.Empty<TrackEntity>();
+    
+    [Inject] public required TrackMediaClient Client { get; set; }
+    
+    private async Task HandlePlayClick(TrackEntity track)
+    {
+        if (_audioStream == null)
+        {
+            _audioStream = await Client.GetTrackMedia(track.EntryKey);
+            PlayAudio();
+        }
+    }
+
+    private void PlayAudio()
+    {
+        throw new NotImplementedException();
+    }
+    
 }

DeepDrftWeb.Client/Controls/TracksGallery.razor.css

@@ -0,0 +1,5 @@
+.tracks-gallery-container {
+    padding: 16px;
+    height: 100%;
+    box-sizing: border-box;
+}