daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Player Client and Visual Enhancements

Browse Source 
- 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)
This commit is contained in:
daniel-c-harvey
2025-09-12 20:37:17 -04:00
parent 73d4b0a9c5
commit 9ac2c9182a
31 changed files with 763 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Controls/AudioPlayerBar.razor
-87
View File
@@ -1,87 +0,0 @@
@if (_isMinimized)
{
<div class="deepdrft-minimized-player-dock">
<MudIconButton Icon="@GetPlayIcon()"
Color="Color.Primary"
Size="Size.Large"
Class="deepdrft-minimized-player-button"
OnClick="@ToggleMinimized" />
</div>
}
else
{
@* Full-width outer container *@
<div class="deepdrft-player-outer-container">
<MudContainer MaxWidth="MaxWidth.Large" Class="deepdrft-player-inner-container">
<div class="deepdrft-audio-player-bar">
<div class="deepdrft-audio-player-content">
@* Controls section *@
<div class="deepdrft-audio-controls-section">
<div class="deepdrft-audio-buttons-row">
<MudIconButton Icon="@GetPlayIcon()"
Color="Color.Primary"
Size="Size.Large"
OnClick="@TogglePlayPause"
Disabled="!IsLoaded"/>
@if (IsLoaded)
{
<MudIconButton Icon="@Icons.Material.Filled.Stop"
Color="Color.Primary"
OnClick="@Stop"/>
}
</div>
<div class="deepdrft-audio-info-row">
<MudText Typo="Typo.body2" Class="font-monospace deepdrft-audio-time">
@FormatTime(CurrentTime) / @(Duration.HasValue ? FormatTime(Duration.Value) : "--:--")
</MudText>
@if (!IsLoaded)
{
<MudProgressCircular Color="Color.Tertiary" Value="@LoadProgress" Size="Size.Small"/>
}
</div>
</div>
@* Seek slider *@
<MudSlider T="double"
Min="0"
Max="@(Duration ?? 0D)"
Step="0.1"
Value="@CurrentTime"
ValueChanged="@OnSeek"
Disabled="!IsLoaded"
Class="deepdrft-audio-seek-slider"/>
@* Volume section *@
<div class="deepdrft-audio-volume-section">
<MudIcon Icon="@GetVolumeIcon()" Class="deepdrft-audio-volume-icon"/>
<MudSlider T="double"
Min="0"
Max="1"
Step="0.01"
Value="@Volume"
ValueChanged="@OnVolumeChange"
Class="deepdrft-audio-volume-slider"/>
</div>
<div class="deepdrft-audio-minimize-section">
<MudIconButton Icon="@Icons.Material.Filled.Minimize"
Color="Color.Secondary"
Size="Size.Small"
OnClick="@ToggleMinimized"/>
</div>
</div>
@if (!string.IsNullOrEmpty(ErrorMessage))
{
<MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError" Class="ma-2">
@ErrorMessage
</MudAlert>
}
</div>
</MudContainer>
</div>
@* Spacer div to maintain layout spacing *@
<div class="deepdrft-player-spacer"></div>
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
+114
View File
@@ -0,0 +1,114 @@
@if (_isMinimized)
{
<div class="deepdrft-minimized-player-dock">
<MudIconButton Icon="@GetPlayIcon()"
Color="Color.Primary"
Size="Size.Large"
Class="deepdrft-minimized-player-button"
OnClick="@ToggleMinimized" />
</div>
}
else
{
@* Full-width outer container *@
<div class="deepdrft-player-outer-container">
<MudContainer MaxWidth="MaxWidth.Large" Class="deepdrft-player-inner-container">
<div class="deepdrft-audio-player-bar">
@* Full Screen *@
<div class="d-none d-md-block deepdrft-audio-player-content">
<div class="deepdrft-audio-controls-section">
<div class="deepdrft-audio-buttons-row">
<PlayerControls IsPlaying="IsPlaying"
IsLoaded="IsLoaded"
TogglePlayPause="@TogglePlayPause"
Stop="@Stop"/>
@if (!IsLoaded)
{
<MudProgressCircular Color="Color.Tertiary"
Max="1D"
Value="@LoadProgress"
Indeterminate="@(LoadProgress == 0)"/>
}
</div>
<TimestampLabel CurrentTime="CurrentTime"
Duration="Duration"/>
</div>
@* Seek slider *@
<MudSlider T="double"
Min="0"
Max="@(Duration ?? 0D)"
Step="0.1"
Value="@CurrentTime"
ValueChanged="@OnSeek"
Disabled="!IsLoaded"
Class="deepdrft-audio-seek-slider"/>
<div class="deepdrft-audio-volume-section">
<VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
</div>
</div>
@* Mobile *@
<div class="d-md-none deepdrft-audio-player-content">
<div class="deepdrft-audio-controls-section">
<div class="deepdrft-audio-buttons-row">
<PlayerControls IsPlaying="IsPlaying"
IsLoaded="IsLoaded"
TogglePlayPause="@TogglePlayPause"
Stop="@Stop"/>
<VolumeControls Volume="@Volume"
VolumeChanged="@OnVolumeChange"/>
@if (!IsLoaded)
{
<MudProgressCircular Color="Color.Tertiary"
Max="1D"
Value="@LoadProgress"
Indeterminate="@(LoadProgress == 0)"/>
}
</div>
<TimestampLabel CurrentTime="CurrentTime"
Duration="Duration"/>
</div>
@* Seek slider *@
<MudSlider T="double"
Min="0"
Max="@(Duration ?? 0D)"
Step="0.1"
Value="@CurrentTime"
ValueChanged="@OnSeek"
Disabled="!IsLoaded"
Class="deepdrft-audio-seek-slider"/>
</div>
<div class="deepdrft-audio-minimize-section">
<MudIconButton Icon="@Icons.Material.Filled.Minimize"
Color="Color.Secondary"
Size="Size.Small"
OnClick="@ToggleMinimized"/>
<MudIconButton Icon="@Icons.Material.Filled.Close"
Color="Color.Secondary"
Size="Size.Small"
OnClick="@Close"/>
</div>
</div>
@if (!string.IsNullOrEmpty(ErrorMessage))
{
<MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError" Class="ma-2">
@ErrorMessage
</MudAlert>
}
</MudContainer>
</div>
@* Spacer div to maintain layout spacing *@
<div class="deepdrft-player-spacer"></div>
}
DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs → DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs
+27 -15
View File
@@ -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;
}
}
DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css → DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+13 -11
View File
@@ -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 {
DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor
+103
View File
@@ -0,0 +1,103 @@
@if (_isMinimized)
{
<div class="minimized-dock d-flex align-center justify-center"
@onclick="@ToggleMinimized">
<MudIconButton Icon="@GetPlayIcon()"
Color="Color.Primary"
Size="Size.Large"
Class="minimized-button"
OnClick="@ToggleMinimized"/>
</div>
}
else
{
<div class="player-outer-container d-flex flex-column">
<MudContainer MaxWidth="MaxWidth.Large" Class="player-inner-container">
<div class="player-backdrop pa-3">
@* Desktop Layout *@
<div class="d-none d-md-flex align-center gap-3">
<div class="controls-left d-flex flex-column align-center gap-2">
<div class="d-flex align-center gap-1">
<PlayerControls IsPlaying="IsPlaying"
IsLoaded="IsLoaded"
TogglePlayPause="@TogglePlayPause"
Stop="@Stop"/>
</div>
<TimestampLabel CurrentTime="CurrentTime" Duration="Duration"/>
</div>
<div class="seekbar-flex mx-3">
<MudSlider T="double"
Min="0"
Max="@(Duration ?? 0D)"
Step="0.1"
Value="@CurrentTime"
ValueChanged="@OnSeek"
Disabled="!IsLoaded"/>
</div>
<div class="volume-right">
<VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
</div>
</div>
@* Mobile Layout *@
<div class="d-md-none">
<div class="d-flex align-center justify-space-between mb-3">
<div class="d-flex align-center gap-2">
<PlayerControls IsPlaying="IsPlaying"
IsLoaded="IsLoaded"
TogglePlayPause="@TogglePlayPause"
Stop="@Stop"/>
@if (IsLoading)
{
<MudProgressCircular Color="Color.Tertiary"
Size="Size.Small"
Max="1D"
Value="@LoadProgress"
Indeterminate="@(LoadProgress == 0)"/>
}
</div>
<TimestampLabel CurrentTime="CurrentTime" Duration="Duration"/>
<VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
</div>
<MudSlider T="double"
Min="0"
Max="@(Duration ?? 0D)"
Step="0.1"
Value="@CurrentTime"
ValueChanged="@OnSeek"
Disabled="!IsLoaded"/>
</div>
@* Control Buttons - positioned absolutely like original *@
<div class="player-controls d-flex align-center justify-center gap-1">
<MudIconButton Icon="@Icons.Material.Filled.Minimize"
Color="Color.Secondary"
Size="Size.Small"
OnClick="@ToggleMinimized"/>
<MudIconButton Icon="@Icons.Material.Filled.Close"
Color="Color.Secondary"
Size="Size.Small"
OnClick="@Close"/>
</div>
</div>
</MudContainer>
@if (!string.IsNullOrEmpty(ErrorMessage))
{
<MudAlert Severity="Severity.Error"
ShowCloseIcon="true"
CloseIconClicked="ClearError"
Class="ma-2">
@ErrorMessage
</MudAlert>
}
</div>
@* Spacer to prevent content overlap *@
<div class="player-spacer"></div>
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.cs
+93
View File
@@ -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;
}
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar2.razor.css
+131
View File
@@ -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;
}
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor
+12
View File
@@ -0,0 +1,12 @@
<div class="player-buttons">
<MudIconButton Icon="@GetPlayIcon()"
Color="Color.Primary"
Size="Size.Large"
OnClick="@TogglePlayPause"
Disabled="!IsLoaded"/>
<MudIconButton Icon="@Icons.Material.Filled.Stop"
Color="Color.Primary"
Size="Size.Large"
OnClick="@Stop"
Disabled="!IsLoaded"/>
</div>
DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs
+16
View File
@@ -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;
}
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/PlayerControls.razor.css
+8
View File
@@ -0,0 +1,8 @@
/* PlayerControls Component Styles */
/* Button spacing and alignment */
.player-buttons {
display: flex;
align-items: center;
gap: 0.5rem;
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor
+5
View File
@@ -0,0 +1,5 @@
<div class="timestamp-display">
<MudText Typo="Typo.body2" Class="time-text">
@FormatTime(CurrentTime) / @(Duration.HasValue ? FormatTime(Duration.Value) : "--:--")
</MudText>
</div>
DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.cs
+14
View File
@@ -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");
}
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/TimestampLabel.razor.css
+12
View File
@@ -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;
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor
+10
View File
@@ -0,0 +1,10 @@
<div class="volume-controls">
<MudIcon Icon="@GetVolumeIcon()" Class="volume-icon"/>
<MudSlider T="double"
Min="0"
Max="1"
Step="0.01"
Value="@Volume"
ValueChanged="@VolumeChanged"
Class="volume-slider"/>
</div>
DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.cs
+16
View File
@@ -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<double> 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;
}
}
DeepDrftWeb.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
+19
View File
@@ -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;
}
DeepDrftWeb.Client/Layout/MainLayout.razor
+2 -5
View File
@@ -1,4 +1,5 @@
@using DeepDrftWeb.Client.Controls
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
@inherits LayoutComponentBase
<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
@@ -7,8 +8,6 @@
<MudSnackbarProvider />
<MudLayout>
<AudioPlayerService>
@* <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" /> *@
@* <MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" /> *@
<MudAppBar Elevation="_themeManager.AppBarElevation">
<MudAvatar Class="mr-2">
<MudImage Src="img/deepdrft-logo.jpg"></MudImage>
@@ -16,13 +15,12 @@
<NavMenu />
<MudSpacer/>
<MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
@* <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/> *@
</MudAppBar>
<MudMainContent Class="pt-16 deepdrft-layout-with-overlay-player">
<MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
@Body
</MudContainer>
<AudioPlayerBar />
<AudioPlayerBar2 />
</MudMainContent>
</AudioPlayerService>
</MudLayout>
@@ -37,7 +35,6 @@
@code {
private bool _drawerOpen = true;
private bool _isDarkMode = true;
// private MudTheme? _theme = null;
protected override void OnInitialized()
{
DeepDrftWeb.Client/Pages/TracksView.razor
+10 -11
View File
@@ -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"/>
<div class="interactivity-test mt-4">
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="TestInteractivity">
Test Interactivity (@_clickCount)
</MudButton>
<MudText Typo="Typo.body2" Class="mt-2">
Lifecycle Status: @_lifecycleStatus
</MudText>
</div>
</div>
}
else
{
<div class="tracks-content">
<MudSkeleton Height="95%" Class="pa-2 ma-6"/>
<MudGrid Spacing="3">
@foreach (var i in Enumerable.Range(0, 12))
{
<MudItem xs="12" sm="6" md="4" lg="3" xl="3">
<div class="deepdrft-track-gallery-item-center">
<MudSkeleton Width="240px" Height="240px" SkeletonType="SkeletonType.Rectangle"/>
</div>
</MudItem>
}
</MudGrid>
</div>
<div class="tracks-footer">
<MudSkeleton Height="60px" Width="240px" Class="justify-center"/>
DeepDrftWeb.Client/Pages/TracksView.razor.cs
+1 -1
View File
@@ -53,7 +53,7 @@ public partial class TracksView : ComponentBase
if (track is null)
{
await PlayerService.Stop();
await PlayerService.Unload();
}
else
{
DeepDrftWeb.Client/Services/AudioInteropService.cs
+5
View File
@@ -56,6 +56,11 @@ public class AudioInteropService : IAsyncDisposable
return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.stop", playerId);
}
public async Task<AudioOperationResult> UnloadAsync(string playerId)
{
return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.unload", playerId);
}
public async Task<AudioOperationResult> SeekAsync(string playerId, double position)
{
return await InvokeJsAsync<AudioOperationResult>("DeepDrftAudio.seek", playerId, position);
DeepDrftWeb.Client/Services/AudioPlaybackEngine.cs
+68 -7
View File
@@ -7,6 +7,7 @@ namespace DeepDrftWeb.Client.Services;
public class AudioPlaybackEngine : IAsyncDisposable
{
public event Events.EventAsync<double>? OnProgressChanged;
public event Events.EventAsync<double>? 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;
DeepDrftWeb.Client/Services/IPlayerService.cs
+4
View File
@@ -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);
DeepDrftWeb.Client/Services/PlayerService.cs
+19 -1
View File
@@ -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();
DeepDrftWeb.Services/Data/DeepDrftContextFactory.cs
+15
View File
@@ -0,0 +1,15 @@
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Design;
namespace DeepDrftWeb.Services.Data;
public class DeepDrftContextFactory : IDesignTimeDbContextFactory<DeepDrftContext>
{
public DeepDrftContext CreateDbContext(string[] args)
{
var optionsBuilder = new DbContextOptionsBuilder<DeepDrftContext>();
optionsBuilder.UseSqlite("Data Source=../Database/deepdrft.db");
return new DeepDrftContext(optionsBuilder.Options);
}
}
DeepDrftWeb.Services/DeepDrftWeb.Services.csproj
+4
View File
@@ -9,6 +9,10 @@
<ItemGroup>
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.8" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.8" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.8">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
</ItemGroup>
<ItemGroup>
DeepDrftWeb/DeepDrftWeb.csproj
+4 -2
View File
@@ -33,13 +33,15 @@
<Folder Include="wwwroot\js\" />
</ItemGroup>
<!-- Prevent TypeScript compilation issues during publish -->
<!-- TypeScript configuration following Microsoft recommendations -->
<PropertyGroup>
<TypeScriptCompileOnSaveEnabled>false</TypeScriptCompileOnSaveEnabled>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<TypeScriptESModuleInterop>true</TypeScriptESModuleInterop>
<TypeScriptAllowSyntheticDefaultImports>true</TypeScriptAllowSyntheticDefaultImports>
</PropertyGroup>
<!-- Only copy tsconfig.json to root output, not nested publish folders -->
<!-- Prevent tsconfig.json from being copied to output directories -->
<ItemGroup>
<None Update="tsconfig.json">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
DeepDrftWeb/Interop/webaudio.ts
+21 -27
View File
@@ -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) {
DeepDrftWeb/tsconfig.json
+9 -5
View File
@@ -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/**/*"
]
}
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+1
View File
@@ -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);
dch5-publish-cli.sh
+2 -2
View File
@@ -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"
dch5-publish-deploy.sh
+5 -5
View File
@@ -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