From 9ac2c9182a19caf0c581c89fde4ea6c727ccf931 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Fri, 12 Sep 2025 20:37:17 -0400 Subject: [PATCH] Player Client and Visual Enhancements - Redesigned audio player bar to be mobile-friendly - Added unloading for track switching (needs to be fixed) - Added IsLoading status so loading spinner isn't hanging around when it shouldn't be - Normalized styles with scoped files (will further reduce) - Layout Cleanup - EF fixes (migrations now function for deployment) - deploy script updates (new dedicated host) --- .../Controls/AudioPlayerBar.razor | 87 ------------ .../AudioPlayerBar/AudioPlayerBar.razor | 114 +++++++++++++++ .../AudioPlayerBar.razor.cs | 42 ++++-- .../AudioPlayerBar.razor.css | 24 ++-- .../AudioPlayerBar/AudioPlayerBar2.razor | 103 ++++++++++++++ .../AudioPlayerBar/AudioPlayerBar2.razor.cs | 93 +++++++++++++ .../AudioPlayerBar/AudioPlayerBar2.razor.css | 131 ++++++++++++++++++ .../AudioPlayerBar/PlayerControls.razor | 12 ++ .../AudioPlayerBar/PlayerControls.razor.cs | 16 +++ .../AudioPlayerBar/PlayerControls.razor.css | 8 ++ .../AudioPlayerBar/TimestampLabel.razor | 5 + .../AudioPlayerBar/TimestampLabel.razor.cs | 14 ++ .../AudioPlayerBar/TimestampLabel.razor.css | 12 ++ .../AudioPlayerBar/VolumeControls.razor | 10 ++ .../AudioPlayerBar/VolumeControls.razor.cs | 16 +++ .../AudioPlayerBar/VolumeControls.razor.css | 19 +++ DeepDrftWeb.Client/Layout/MainLayout.razor | 7 +- DeepDrftWeb.Client/Pages/TracksView.razor | 21 ++- DeepDrftWeb.Client/Pages/TracksView.razor.cs | 2 +- .../Services/AudioInteropService.cs | 5 + .../Services/AudioPlaybackEngine.cs | 75 +++++++++- DeepDrftWeb.Client/Services/IPlayerService.cs | 4 + DeepDrftWeb.Client/Services/PlayerService.cs | 20 ++- .../Data/DeepDrftContextFactory.cs | 15 ++ .../DeepDrftWeb.Services.csproj | 4 + DeepDrftWeb/DeepDrftWeb.csproj | 6 +- DeepDrftWeb/Interop/webaudio.ts | 48 +++---- DeepDrftWeb/tsconfig.json | 14 +- .../wwwroot/styles/deepdrft-styles.css | 1 + dch5-publish-cli.sh | 4 +- dch5-publish-deploy.sh | 10 +- 31 files changed, 763 insertions(+), 179 deletions(-) delete mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar.razor create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor rename DeepDrftWeb.Client/Controls/{ => AudioPlayerBar}/AudioPlayerBar.razor.cs (77%) rename DeepDrftWeb.Client/Controls/{ => AudioPlayerBar}/AudioPlayerBar.razor.css (86%) create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.cs create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.css create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.css create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.cs create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.css create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs create mode 100644 DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.css create mode 100644 DeepDrftWeb.Services/Data/DeepDrftContextFactory.cs diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor deleted file mode 100644 index a746318..0000000 --- a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor +++ /dev/null @@ -1,87 +0,0 @@ -@if (_isMinimized) -{ -
- -
-} -else -{ - @* Full-width outer container *@ -
- -
-
- - @* Controls section *@ -
-
- - @if (IsLoaded) - { - - } -
- -
- - @FormatTime(CurrentTime) / @(Duration.HasValue ? FormatTime(Duration.Value) : "--:--") - - @if (!IsLoaded) - { - - } -
-
- - @* Seek slider *@ - - - @* Volume section *@ -
- - -
-
- -
-
- - @if (!string.IsNullOrEmpty(ErrorMessage)) - { - - @ErrorMessage - - } -
- -
- - @* Spacer div to maintain layout spacing *@ -
-} diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor new file mode 100644 index 0000000..9c0dafd --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor @@ -0,0 +1,114 @@ +@if (_isMinimized) +{ +
+ +
+} +else +{ + @* Full-width outer container *@ +
+ +
+ @* Full Screen *@ +
+
+
+ + + @if (!IsLoaded) + { + + } +
+ +
+ + @* Seek slider *@ + + +
+ +
+
+ + @* Mobile *@ +
+
+
+ + + + + @if (!IsLoaded) + { + + } +
+ +
+ + @* Seek slider *@ + +
+ +
+ + +
+
+ + + + @if (!string.IsNullOrEmpty(ErrorMessage)) + { + + @ErrorMessage + + } + + +
+ + @* Spacer div to maintain layout spacing *@ +
+} diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs similarity index 77% rename from DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs rename to DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs index ff1688c..9877e40 100644 --- a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs @@ -1,10 +1,8 @@ -using DeepDrftModels.Entities; -using DeepDrftWeb.Client.Clients; +using DeepDrftWeb.Client.Services; using Microsoft.AspNetCore.Components; -using DeepDrftWeb.Client.Services; using MudBlazor; -namespace DeepDrftWeb.Client.Controls; +namespace DeepDrftWeb.Client.Controls.AudioPlayerBar; public partial class AudioPlayerBar : ComponentBase { @@ -24,22 +22,18 @@ public partial class AudioPlayerBar : ComponentBase protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); - PlayerService.OnStateChanged += StateHasChanged; + PlayerService.OnTrackSelected += Expand; } - private string GetPlayIcon() + private async Task Expand() { - return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow; + if (_isMinimized) + { + _isMinimized = false; + StateHasChanged(); + } } - - 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); @@ -76,5 +70,23 @@ public partial class AudioPlayerBar : ComponentBase _isMinimized = !_isMinimized; StateHasChanged(); } + + private async Task Close() + { + if (PlayerService.IsLoaded) + { + await PlayerService.Unload(); + } + + if (!_isMinimized) + { + _isMinimized = true; + StateHasChanged(); + } + } + private string GetPlayIcon() + { + return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow; + } } \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css similarity index 86% rename from DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css rename to DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css index 36bf92e..a6737bf 100644 --- a/DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css @@ -22,14 +22,15 @@ /* Player bar with rounded corners and semi-opaque background */ .deepdrft-audio-player-bar { position: relative; - background: rgba(var(--mud-palette-surface-rgb), 0.75); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + background: var(--deepdrft-theme-background-gray); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); border-radius: 1rem; - border: 1px solid rgba(var(--mud-palette-divider-rgb), 0.9); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + border: 1px solid var(--deepdrft-theme-primary); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), + 0 2px 10px var(--deepdrft-theme-secondary); transition: all 0.3s ease; - color: var(--mud-palette-text-primary); + color: #ffffff; overflow: hidden; margin-bottom: 1rem; } @@ -54,13 +55,13 @@ justify-content: center; align-items: center; background: linear-gradient(135deg, - rgba(var(--mud-palette-primary-rgb), 0.95) 0%, - rgba(var(--mud-palette-secondary-rgb), 0.9) 50%, - rgba(var(--mud-palette-tertiary-rgb), 0.95) 100% + var(--deepdrft-theme-primary) 0%, + var(--deepdrft-theme-secondary) 50%, + var(--deepdrft-theme-tertiary) 100% ); backdrop-filter: blur(15px); - border: 2px solid rgba(var(--mud-palette-secondary-rgb), 0.7); - box-shadow: 0 4px 20px rgba(var(--mud-palette-primary-rgb), 0.6), + border: 2px solid var(--deepdrft-theme-secondary); + box-shadow: 0 4px 20px var(--deepdrft-theme-primary), 0 2px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; cursor: pointer; @@ -109,6 +110,7 @@ align-items: center; gap: 0.75rem; margin-top: 0.25rem; + justify-items: center; } .deepdrft-audio-volume-section { diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor new file mode 100644 index 0000000..e52e1f3 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor @@ -0,0 +1,103 @@ +@if (_isMinimized) +{ +
+ +
+} +else +{ +
+ +
+ + @* Desktop Layout *@ +
+
+
+ + +
+ +
+ +
+ +
+ +
+ +
+
+ + @* Mobile Layout *@ +
+
+
+ + @if (IsLoading) + { + + } +
+ + +
+ + +
+ + @* Control Buttons - positioned absolutely like original *@ +
+ + +
+
+ + + @if (!string.IsNullOrEmpty(ErrorMessage)) + { + + @ErrorMessage + + } +
+ + @* Spacer to prevent content overlap *@ +
+} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.cs b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.cs new file mode 100644 index 0000000..02cdd55 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.cs @@ -0,0 +1,93 @@ +using DeepDrftWeb.Client.Services; +using Microsoft.AspNetCore.Components; +using MudBlazor; + +namespace DeepDrftWeb.Client.Controls.AudioPlayerBar; + +public partial class AudioPlayerBar2 : ComponentBase +{ + [CascadingParameter] public required IPlayerService PlayerService { get; set; } + [Parameter] public bool ShowLoadProgress { get; set; } = true; + private bool _isMinimized = true; + + private bool IsLoaded => PlayerService.IsLoaded; + private bool IsLoading => PlayerService.IsLoading; + private bool IsPlaying => PlayerService.IsPlaying; + private bool IsPaused => PlayerService.IsPaused; + private double CurrentTime => PlayerService.CurrentTime; + private double? Duration => PlayerService.Duration; + private double Volume => PlayerService.Volume; + private double LoadProgress => PlayerService.LoadProgress; + private string? ErrorMessage => PlayerService.ErrorMessage; + + protected override async Task OnInitializedAsync() + { + await base.OnInitializedAsync(); + PlayerService.OnStateChanged += StateHasChanged; + PlayerService.OnTrackSelected += Expand; + } + + private async Task Expand() + { + if (_isMinimized) + { + _isMinimized = false; + StateHasChanged(); + } + } + private static string FormatTime(double seconds) + { + var timeSpan = TimeSpan.FromSeconds(seconds); + return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss"); + } + + private async Task TogglePlayPause() + { + await PlayerService.TogglePlayPause(); + } + + private async Task Stop() + { + await PlayerService.Stop(); + } + + private async Task OnSeek(double position) + { + await PlayerService.Seek(position); + } + + private async Task OnVolumeChange(double volume) + { + await PlayerService.SetVolume(volume); + } + + private void ClearError() + { + PlayerService.ClearError(); + } + + private void ToggleMinimized() + { + _isMinimized = !_isMinimized; + StateHasChanged(); + } + + private async Task Close() + { + if (PlayerService.IsLoaded) + { + await PlayerService.Unload(); + } + + if (!_isMinimized) + { + _isMinimized = true; + StateHasChanged(); + } + } + + private string GetPlayIcon() + { + return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow; + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.css new file mode 100644 index 0000000..c7da143 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.css @@ -0,0 +1,131 @@ +/* Preserve key visual styles while simplifying layout */ + +/* Player outer container - fixed positioning */ +.player-outer-container { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 1200; + padding: 0; + margin: 0; +} + +/* Player inner container */ +.player-inner-container { + padding: 1rem; + padding-bottom: 1.5rem; +} + +/* Custom backdrop blur container */ +.player-backdrop { + position: relative; + background: var(--deepdrft-theme-background-gray); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: 1rem; + border: 1px solid var(--deepdrft-theme-primary); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), + 0 2px 10px var(--deepdrft-theme-secondary); + color: #ffffff; + transition: all 0.3s ease; + overflow: hidden; + margin-bottom: 1rem; +} + +/* Control buttons positioning */ +.player-controls { + position: absolute; + top: 0.5rem; + right: 0.5rem; +} + +/* Minimized floating dock with gradient */ +.minimized-dock { + position: fixed; + bottom: 60px; + right: 60px; + z-index: 1300; + width: 60px; + height: 60px; + border-radius: 50%; + cursor: pointer; + background: linear-gradient(135deg, + var(--deepdrft-theme-primary) 0%, + var(--deepdrft-theme-secondary) 50%, + var(--deepdrft-theme-tertiary) 100% + ); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border: 2px solid var(--deepdrft-theme-secondary); + box-shadow: 0 4px 20px var(--deepdrft-theme-primary), + 0 2px 10px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; +} + +.minimized-dock:hover { + transform: scale(1.1); + box-shadow: 0 6px 25px rgba(var(--deepdrft-theme-primary), 0.8), + 0 3px 15px rgba(0, 0, 0, 0.4); +} + +/* Minimized button styles */ +.minimized-button { + border-radius: 50% !important; + background: transparent !important; + color: white !important; + transition: all 0.3s ease !important; + box-shadow: none !important; + border: none !important; + width: 48px !important; + height: 48px !important; +} + +/* Spacer to prevent content overlap */ +.player-spacer { + height: 140px; + width: 100%; + flex-shrink: 0; +} + +/* Essential layout adjustments only */ +.controls-left { + min-width: 200px; +} + +.seekbar-flex { + flex: 1; +} + +.volume-right { + /*min-width: 140px;*/ +} + +/* Mobile responsive adjustments */ +@media (max-width: 768px) { + .minimized-dock { + bottom: 15px; + right: 15px; + width: 56px; + height: 56px; + } + + .minimized-button { + width: 44px !important; + height: 44px !important; + } + + .player-inner-container { + padding: 0.75rem; + padding-bottom: 1.25rem; + } + + .player-backdrop { + border-radius: 1rem; + margin-bottom: 1.25rem; + } + + .player-spacer { + height: 160px; + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor new file mode 100644 index 0000000..8c841ce --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor @@ -0,0 +1,12 @@ +
+ + +
\ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs b/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs new file mode 100644 index 0000000..400d93b --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs @@ -0,0 +1,16 @@ +using Microsoft.AspNetCore.Components; +using MudBlazor; + +namespace DeepDrftWeb.Client.Controls.AudioPlayerBar; + +public partial class PlayerControls : ComponentBase +{ + [Parameter] public required bool IsPlaying { get; set; } + [Parameter] public required bool IsLoaded { get; set; } + [Parameter] public required EventCallback TogglePlayPause { get; set; } + [Parameter] public required EventCallback Stop { get; set; } + private string GetPlayIcon() + { + return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow; + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.css new file mode 100644 index 0000000..70a2300 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.css @@ -0,0 +1,8 @@ +/* PlayerControls Component Styles */ + +/* Button spacing and alignment */ +.player-buttons { + display: flex; + align-items: center; + gap: 0.5rem; +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor new file mode 100644 index 0000000..23e4fe8 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor @@ -0,0 +1,5 @@ +
+ + @FormatTime(CurrentTime) / @(Duration.HasValue ? FormatTime(Duration.Value) : "--:--") + +
\ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.cs b/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.cs new file mode 100644 index 0000000..33beb10 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.cs @@ -0,0 +1,14 @@ +using Microsoft.AspNetCore.Components; + +namespace DeepDrftWeb.Client.Controls.AudioPlayerBar; + +public partial class TimestampLabel : ComponentBase +{ + [Parameter] public required double CurrentTime { get; set; } + [Parameter] public required double? Duration { get; set; } + private static string FormatTime(double seconds) + { + var timeSpan = TimeSpan.FromSeconds(seconds); + return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss"); + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.css new file mode 100644 index 0000000..5c39ee9 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.css @@ -0,0 +1,12 @@ +/* TimestampLabel Component Styles */ + +/* Timestamp display */ +.timestamp-display { + min-width: 120px; + text-align: center; +} + +/* Time text styling */ +.time-text { + font-family: monospace; +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor b/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor new file mode 100644 index 0000000..c2066d6 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor @@ -0,0 +1,10 @@ +
+ + +
\ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs b/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs new file mode 100644 index 0000000..2d8a588 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs @@ -0,0 +1,16 @@ +using Microsoft.AspNetCore.Components; +using MudBlazor; + +namespace DeepDrftWeb.Client.Controls.AudioPlayerBar; + +public partial class VolumeControls : ComponentBase +{ + [Parameter] public required double Volume { get; set; } + [Parameter] public required EventCallback VolumeChanged { get; set; } + 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; + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.css new file mode 100644 index 0000000..7c41b24 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.css @@ -0,0 +1,19 @@ +/* VolumeControls Component Styles */ + +/* Volume control container */ +.volume-controls { + display: flex; + align-items: center; + gap: 0.25rem; + width: 140px; +} + +/* Volume icon styling */ +.volume-icon { + margin-right: 4px; +} + +/* Volume slider styling */ +.volume-slider { + width: 100px; +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index ea6638e..1df49e9 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -1,4 +1,5 @@ @using DeepDrftWeb.Client.Controls +@using DeepDrftWeb.Client.Controls.AudioPlayerBar @inherits LayoutComponentBase @@ -7,8 +8,6 @@ - @* *@ - @* *@ @@ -16,13 +15,12 @@ - @* *@ @Body - + @@ -37,7 +35,6 @@ @code { private bool _drawerOpen = true; private bool _isDarkMode = true; - // private MudTheme? _theme = null; protected override void OnInitialized() { diff --git a/DeepDrftWeb.Client/Pages/TracksView.razor b/DeepDrftWeb.Client/Pages/TracksView.razor index 57278e1..5918767 100644 --- a/DeepDrftWeb.Client/Pages/TracksView.razor +++ b/DeepDrftWeb.Client/Pages/TracksView.razor @@ -1,5 +1,4 @@ @page "/tracks" -@rendermode @(new InteractiveAutoRenderMode(prerender: false)) @using DeepDrftWeb.Client.Controls @@ -20,21 +19,21 @@ SelectedChanged="@SetPage" BoundaryCount="2" MiddleCount="3"/> - -
- - Test Interactivity (@_clickCount) - - - Lifecycle Status: @_lifecycleStatus - -
} else {
- + + @foreach (var i in Enumerable.Range(0, 12)) + { + +
+ +
+ + } +
diff --git a/DeepDrftWeb.Client/Pages/TracksView.razor.cs b/DeepDrftWeb.Client/Pages/TracksView.razor.cs index 72621b4..e0efc9f 100644 --- a/DeepDrftWeb.Client/Pages/TracksView.razor.cs +++ b/DeepDrftWeb.Client/Pages/TracksView.razor.cs @@ -53,7 +53,7 @@ public partial class TracksView : ComponentBase if (track is null) { - await PlayerService.Stop(); + await PlayerService.Unload(); } else { diff --git a/DeepDrftWeb.Client/Services/AudioInteropService.cs b/DeepDrftWeb.Client/Services/AudioInteropService.cs index 085cb9a..791d200 100644 --- a/DeepDrftWeb.Client/Services/AudioInteropService.cs +++ b/DeepDrftWeb.Client/Services/AudioInteropService.cs @@ -56,6 +56,11 @@ public class AudioInteropService : IAsyncDisposable return await InvokeJsAsync("DeepDrftAudio.stop", playerId); } + public async Task UnloadAsync(string playerId) + { + return await InvokeJsAsync("DeepDrftAudio.unload", playerId); + } + public async Task SeekAsync(string playerId, double position) { return await InvokeJsAsync("DeepDrftAudio.seek", playerId, position); diff --git a/DeepDrftWeb.Client/Services/AudioPlaybackEngine.cs b/DeepDrftWeb.Client/Services/AudioPlaybackEngine.cs index 348f94c..3469a38 100644 --- a/DeepDrftWeb.Client/Services/AudioPlaybackEngine.cs +++ b/DeepDrftWeb.Client/Services/AudioPlaybackEngine.cs @@ -7,6 +7,7 @@ namespace DeepDrftWeb.Client.Services; public class AudioPlaybackEngine : IAsyncDisposable { public event Events.EventAsync? OnProgressChanged; + public event Events.EventAsync? OnLoadChanged; public event Events.EventAsync? OnPlaybackEnded; public required TrackMediaClient Client { get; set; } @@ -15,6 +16,7 @@ public class AudioPlaybackEngine : IAsyncDisposable public string PlayerId { get; private set; } = Guid.NewGuid().ToString(); public bool IsInitialized { get; private set; } = false; public bool IsLoaded { get; private set; } = false; + public bool IsLoading { get; private set; } = false; public bool IsPlaying { get; private set; } = false; public bool IsPaused { get; private set; } = false; public double CurrentTime { get; private set; } = 0; @@ -51,13 +53,26 @@ public class AudioPlaybackEngine : IAsyncDisposable public async Task LoadTrack(TrackEntity track) { - if (IsLoaded) return; - + TrackMediaResponse? audio = null; try { + // Immediately reset state to indicate loading has started ErrorMessage = null; LoadProgress = 0; - + IsLoaded = false; + IsLoading = true; + Duration = null; + CurrentTime = 0; + + // Trigger load event immediately to show loading state in UI + if (OnLoadChanged != null) await OnLoadChanged.Invoke(0); + + if (IsPlaying || IsPaused) + { + // If we were playing/paused, unload the current track + await Unload(); + } + AudioOperationResult? loadResult = await AudioInterop.InitializeBufferedPlayerAsync(PlayerId); if (loadResult?.Success != true) { @@ -65,7 +80,7 @@ public class AudioPlaybackEngine : IAsyncDisposable return; } - var mediaResult = await Client.GetTrackMedia(track.EntryKey); + var mediaResult = await Client.GetTrackMedia(track.EntryKey); if (!mediaResult.Success) { ErrorMessage = mediaResult.GetMessage(); @@ -77,9 +92,7 @@ public class AudioPlaybackEngine : IAsyncDisposable ErrorMessage = "No audio returned from server"; return; } - - TrackMediaResponse audio = mediaResult.Value; - await StreamAndPlay(audio); + audio = mediaResult.Value; } catch (Exception ex) { @@ -87,6 +100,21 @@ public class AudioPlaybackEngine : IAsyncDisposable LoadProgress = 0; IsLoaded = false; } + finally + { + IsLoading = false; + } + + try + { + if (audio == null) return; + + await StreamAndPlay(audio); + } + catch (Exception ex) + { + ErrorMessage = $"Error streaming audio: {ex.Message}"; + } } private async Task StreamAndPlay(TrackMediaResponse audio) @@ -124,6 +152,7 @@ public class AudioPlaybackEngine : IAsyncDisposable if (audio.ContentLength > 0) { LoadProgress = Math.Min(1.0, (double)totalBytesRead / audio.ContentLength); + if (OnLoadChanged != null) await OnLoadChanged.Invoke(LoadProgress); } } } while (currentBytes > 0); @@ -140,6 +169,9 @@ public class AudioPlaybackEngine : IAsyncDisposable LoadProgress = 1.0; IsLoaded = true; ErrorMessage = null; + + // Trigger final load completion event + if (OnLoadChanged != null) await OnLoadChanged.Invoke(1.0); } catch (Exception ex) { @@ -217,6 +249,35 @@ public class AudioPlaybackEngine : IAsyncDisposable } } + public async Task Unload() + { + if (!IsLoaded) return; + + try + { + await Stop(); + var result = await AudioInterop.UnloadAsync(PlayerId); + if (result.Success) + { + IsPlaying = false; + IsPaused = false; + CurrentTime = 0; + Duration = null; + LoadProgress = 0; + IsLoaded = false; + ErrorMessage = null; + } + else + { + ErrorMessage = $"Unload error: {result.Error}"; + } + } + catch (Exception ex) + { + ErrorMessage = $"Error unloading track: {ex.Message}"; + } + } + public async Task OnSeek(double position) { if (!IsLoaded) return; diff --git a/DeepDrftWeb.Client/Services/IPlayerService.cs b/DeepDrftWeb.Client/Services/IPlayerService.cs index db59f58..651827e 100644 --- a/DeepDrftWeb.Client/Services/IPlayerService.cs +++ b/DeepDrftWeb.Client/Services/IPlayerService.cs @@ -1,4 +1,5 @@ using DeepDrftModels.Entities; +using NetBlocks.Models; namespace DeepDrftWeb.Client.Services; @@ -7,6 +8,7 @@ public interface IPlayerService // State properties bool IsInitialized { get; } bool IsLoaded { get; } + bool IsLoading { get; } bool IsPlaying { get; } bool IsPaused { get; } double CurrentTime { get; } @@ -17,10 +19,12 @@ public interface IPlayerService // Events for UI updates event Action? OnStateChanged; + event Events.EventAsync OnTrackSelected; // Control methods Task SelectTrack(TrackEntity track); Task Stop(); + Task Unload(); Task TogglePlayPause(); Task Seek(double position); Task SetVolume(double volume); diff --git a/DeepDrftWeb.Client/Services/PlayerService.cs b/DeepDrftWeb.Client/Services/PlayerService.cs index 2630916..2cec8e8 100644 --- a/DeepDrftWeb.Client/Services/PlayerService.cs +++ b/DeepDrftWeb.Client/Services/PlayerService.cs @@ -1,4 +1,5 @@ using DeepDrftModels.Entities; +using NetBlocks.Models; namespace DeepDrftWeb.Client.Services; @@ -15,6 +16,7 @@ public class PlayerService : IPlayerService // IPlayerService state properties with defensive checks public bool IsInitialized => _isInitialized; public bool IsLoaded => _isInitialized && _audioEngine?.IsLoaded == true; + public bool IsLoading => _isInitialized && _audioEngine?.IsLoading == true; public bool IsPlaying => _isInitialized && _audioEngine?.IsPlaying == true; public bool IsPaused => _isInitialized && _audioEngine?.IsPaused == true; public double CurrentTime => _isInitialized ? _audioEngine?.CurrentTime ?? 0.0 : 0.0; @@ -24,7 +26,8 @@ public class PlayerService : IPlayerService public string? ErrorMessage => _isInitialized ? _audioEngine?.ErrorMessage : null; public event Action? OnStateChanged; - + public event Events.EventAsync? OnTrackSelected; + public async Task SelectTrack(TrackEntity track) { if (!_isInitialized) @@ -32,9 +35,15 @@ public class PlayerService : IPlayerService await EnsureInitializedAsync(); } + // Immediately notify UI that track selection is happening + OnStateChanged?.Invoke(); + + if (OnTrackSelected != null) await OnTrackSelected.Invoke(); + if (_isInitialized && _audioEngine != null) { await _audioEngine.LoadTrack(track); + // Force a state change to ensure UI reflects final loaded state OnStateChanged?.Invoke(); } } @@ -46,6 +55,14 @@ public class PlayerService : IPlayerService await _audioEngine.Stop(); OnStateChanged?.Invoke(); } + + public async Task Unload() + { + if (!_isInitialized || _audioEngine == null) return; + + await _audioEngine.Unload(); + OnStateChanged?.Invoke(); + } public async Task TogglePlayPause() { @@ -92,6 +109,7 @@ public class PlayerService : IPlayerService // Wire up engine events to trigger state change notifications _audioEngine.OnProgressChanged += async _ => OnStateChanged?.Invoke(); _audioEngine.OnPlaybackEnded += async () => OnStateChanged?.Invoke(); + _audioEngine.OnLoadChanged += async _ => OnStateChanged?.Invoke(); _isInitialized = true; OnStateChanged?.Invoke(); diff --git a/DeepDrftWeb.Services/Data/DeepDrftContextFactory.cs b/DeepDrftWeb.Services/Data/DeepDrftContextFactory.cs new file mode 100644 index 0000000..f2f8bfd --- /dev/null +++ b/DeepDrftWeb.Services/Data/DeepDrftContextFactory.cs @@ -0,0 +1,15 @@ +using Microsoft.EntityFrameworkCore; +using Microsoft.EntityFrameworkCore.Design; + +namespace DeepDrftWeb.Services.Data; + +public class DeepDrftContextFactory : IDesignTimeDbContextFactory +{ + public DeepDrftContext CreateDbContext(string[] args) + { + var optionsBuilder = new DbContextOptionsBuilder(); + optionsBuilder.UseSqlite("Data Source=../Database/deepdrft.db"); + + return new DeepDrftContext(optionsBuilder.Options); + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Services/DeepDrftWeb.Services.csproj b/DeepDrftWeb.Services/DeepDrftWeb.Services.csproj index 2fb360e..e42b03c 100644 --- a/DeepDrftWeb.Services/DeepDrftWeb.Services.csproj +++ b/DeepDrftWeb.Services/DeepDrftWeb.Services.csproj @@ -9,6 +9,10 @@ + + all + runtime; build; native; contentfiles; analyzers; buildtransitive + diff --git a/DeepDrftWeb/DeepDrftWeb.csproj b/DeepDrftWeb/DeepDrftWeb.csproj index 26dd075..5db3bc0 100644 --- a/DeepDrftWeb/DeepDrftWeb.csproj +++ b/DeepDrftWeb/DeepDrftWeb.csproj @@ -33,13 +33,15 @@ - + false Latest + true + true - + Never diff --git a/DeepDrftWeb/Interop/webaudio.ts b/DeepDrftWeb/Interop/webaudio.ts index dd7446b..ea46266 100644 --- a/DeepDrftWeb/Interop/webaudio.ts +++ b/DeepDrftWeb/Interop/webaudio.ts @@ -21,7 +21,6 @@ interface AudioState { type ProgressCallback = (currentTime: number) => void; type EndCallback = () => void; -type LoadProgressCallback = (progress: number) => void; interface Window { webkitAudioContext?: typeof AudioContext; @@ -40,7 +39,6 @@ class AudioPlayer { private duration: number = 0; private onProgressCallback: ProgressCallback | null = null; private onEndCallback: EndCallback | null = null; - private onLoadProgressCallback: LoadProgressCallback | null = null; private progressInterval: number | null = null; private bufferChunks: Uint8Array[] = []; private expectedSize: number = 0; @@ -72,12 +70,6 @@ class AudioPlayer { try { this.bufferChunks.push(audioBlock); this.currentSize += audioBlock.length; - - if (this.expectedSize > 0 && this.onLoadProgressCallback) { - const progress = (this.currentSize / this.expectedSize) * 100; - this.onLoadProgressCallback(Math.min(progress, 100)); - } - return { success: true }; } catch (error) { return { success: false, error: (error as Error).message }; @@ -101,10 +93,6 @@ class AudioPlayer { this.bufferChunks = []; this.currentSize = 0; - if (this.onLoadProgressCallback) { - this.onLoadProgressCallback(100); - } - return { success: true, duration: this.duration, @@ -297,8 +285,19 @@ class AudioPlayer { this.onEndCallback = callback; } - setOnLoadProgressCallback(callback: LoadProgressCallback): void { - this.onLoadProgressCallback = callback; + unload(): AudioResult { + try { + this.stop(); + this.audioBuffer = null; + this.duration = 0; + this.bufferChunks = []; + this.currentSize = 0; + this.expectedSize = 0; + + return { success: true }; + } catch (error) { + return { success: false, error: (error as Error).message }; + } } dispose(): void { @@ -387,6 +386,14 @@ const DeepDrftAudio = { return player.stop(); }, + unload: (playerId: string): AudioResult => { + const player = audioPlayers.get(playerId); + if (!player) { + return { success: false, error: "Player not found" }; + } + return player.unload(); + }, + seek: (playerId: string, position: number): AudioResult => { const player = audioPlayers.get(playerId); if (!player) { @@ -445,19 +452,6 @@ const DeepDrftAudio = { return { success: true }; }, - setOnLoadProgressCallback: (playerId: string, dotNetObjectReference: DotNetObjectReference, methodName: string): AudioResult => { - const player = audioPlayers.get(playerId); - if (!player) { - return { success: false, error: "Player not found" }; - } - - player.setOnLoadProgressCallback((progress: number) => { - dotNetObjectReference.invokeMethodAsync(methodName, progress); - }); - - return { success: true }; - }, - disposePlayer: (playerId: string): AudioResult => { const player = audioPlayers.get(playerId); if (player) { diff --git a/DeepDrftWeb/tsconfig.json b/DeepDrftWeb/tsconfig.json index 48c4a3f..bed2f8c 100644 --- a/DeepDrftWeb/tsconfig.json +++ b/DeepDrftWeb/tsconfig.json @@ -1,20 +1,24 @@ -{ +{ "compilerOptions": { - "target": "es2016", - "module": "ES6", // or "ESNext" + "target": "ESNext", + "module": "ESNext", "esModuleInterop": true, + "allowSyntheticDefaultImports": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true, + "noEmitOnError": true, + "removeComments": false, "sourceMap": true, "outDir": "wwwroot/js" }, "include": [ - "**/*.ts" + "Interop/**/*.ts" ], "exclude": [ "node_modules", "bin/**/*", - "obj/**/*" + "obj/**/*", + "publish/**/*" ] } \ No newline at end of file diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css index 7faea0a..685156e 100644 --- a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css @@ -13,6 +13,7 @@ /* Surface Colors */ --deepdrft-surface: rgba(255, 255, 255, 1); --deepdrft-surface-alpha: rgba(255, 255, 255, 0.9); + --deepdrft-theme-background-gray: rgba(26, 26, 26, 0.5); /* Theme-aware Variables (Light Mode Default) */ --deepdrft-theme-primary: var(--deepdrft-primary); diff --git a/dch5-publish-cli.sh b/dch5-publish-cli.sh index 066d818..ba6c9f9 100644 --- a/dch5-publish-cli.sh +++ b/dch5-publish-cli.sh @@ -5,7 +5,7 @@ echo "🚀 Starting CLI deployment process..." # start SSH agent and add key echo "🔑 Starting SSH agent and adding deployment key..." eval $(ssh-agent -s) -ssh-add /c/.ssh/deepdrft_ed25519 +ssh-add /c/.ssh/deepdrft_dch6_ed25519 echo "✅ SSH agent configured" CLI_PROJ="DeepDrftCli" @@ -37,7 +37,7 @@ tar -czf $CLI_APP -C $CLI_PROJ/publish . echo "✅ Package created: $CLI_APP" # Deploy -REMOTE="deepdrft@dch5.snailbird.net" +REMOTE="deepdrft@dch6.snailbird.net" CLI_APPROOT="/deepdrft/cli" echo "🌐 Deploying to remote server: $REMOTE" diff --git a/dch5-publish-deploy.sh b/dch5-publish-deploy.sh index aaa969c..77c1c93 100644 --- a/dch5-publish-deploy.sh +++ b/dch5-publish-deploy.sh @@ -1,6 +1,6 @@ # start SSH agent and add key eval $(ssh-agent -s) -ssh-add /c/.ssh/deepdrft_ed25519 +ssh-add /c/.ssh/deepdrft_dch6_ed25519 CONTENT_PROJ="DeepDrftContent" WEB_PROJ="DeepDrftWeb" @@ -14,18 +14,18 @@ dotnet publish $WEB_PROJ -c Release -f net9.0 -o $WEB_PROJ/publish -r linux-x64 # Check if migrations are needed WEB_MIG="deepdrft-migrations.sql" -REMOTE="deepdrft@dch5.snailbird.net" +REMOTE="deepdrft@dch6.snailbird.net" WEB_APPROOT="/deepdrft/web" -LATEST_MIGRATION=$(dotnet ef migrations list --project $WEB_SERVICES_PROJ --context DeepDrftContext --no-build | tail -1) +LATEST_MIGRATION=$(dotnet ef migrations list --project $WEB_SERVICES_PROJ --context DeepDrftContext | tail -1) REMOTE_MIGRATION=$(ssh $REMOTE "sqlite3 $WEB_APPROOT/Database/deepdrft.db 'SELECT MigrationId FROM __EFMigrationsHistory ORDER BY MigrationId DESC LIMIT 1;'" 2>/dev/null || echo "") if [ "$LATEST_MIGRATION" != "$REMOTE_MIGRATION" ]; then echo "Generating migration script from $REMOTE_MIGRATION to $LATEST_MIGRATION..." if [ -z "$REMOTE_MIGRATION" ]; then - dotnet ef migrations script --project $WEB_SERVICES_PROJ --context DeepDrftContext --output $WEB_MIG --verbose --no-build + dotnet ef migrations script --project $WEB_SERVICES_PROJ --context DeepDrftContext --output $WEB_MIG --verbose else - dotnet ef migrations script $REMOTE_MIGRATION --project $WEB_SERVICES_PROJ --context DeepDrftContext --output $WEB_MIG --verbose --no-build + dotnet ef migrations script $REMOTE_MIGRATION --project $WEB_SERVICES_PROJ --context DeepDrftContext --output $WEB_MIG --verbose fi APPLY_MIGRATIONS=true else