Front End Work
- Redesign component wiring for audio playback - Removed playback logic from the player control and moved it to injectable audio player engine service - Chunked/buffered stream loading from Content API passed to Web Audio API playback in 8K blocks
This commit is contained in:
daniel-c-harvey
@@ -1,312 +0,0 @@
|
||||
@using DeepDrftWeb.Client.Services
|
||||
|
||||
@implements IAsyncDisposable
|
||||
|
||||
@inject AudioInteropService AudioInterop
|
||||
|
||||
<MudPaper Elevation="2" Class="pa-4">
|
||||
<MudStack Spacing="4">
|
||||
<MudStack Row Spacing="3" AlignItems="AlignItems.Center">
|
||||
<MudIconButton Icon="@GetPlayIcon()"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
OnClick="@TogglePlayPause"
|
||||
Disabled="!IsLoaded" />
|
||||
|
||||
<MudIconButton Icon="Icons.Material.Filled.Stop"
|
||||
Color="Color.Secondary"
|
||||
OnClick="Stop"
|
||||
Disabled="!IsLoaded" />
|
||||
|
||||
<MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
|
||||
@FormatTime(CurrentTime) / @FormatTime(Duration)
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Spacing="2">
|
||||
<MudSlider T="double"
|
||||
Min="0"
|
||||
Max="@Duration"
|
||||
Step="0.1"
|
||||
Value="@CurrentTime"
|
||||
ValueChanged="OnSeek"
|
||||
Disabled="!IsLoaded" />
|
||||
|
||||
@if (ShowLoadProgress && LoadProgress < 100)
|
||||
{
|
||||
<MudStack Row Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudProgressLinear Value="@LoadProgress" Size="Size.Small" Color="Color.Info" Class="flex-grow-1" />
|
||||
<MudText Typo="Typo.caption">Loading: @LoadProgress.ToString("F1")%</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row Spacing="2" AlignItems="AlignItems.Center" Style="max-width: 200px">
|
||||
<MudIcon Icon="@GetVolumeIcon()" />
|
||||
<MudSlider T="double"
|
||||
Min="0"
|
||||
Max="1"
|
||||
Step="0.01"
|
||||
Value="@Volume"
|
||||
ValueChanged="OnVolumeChange"
|
||||
Class="flex-grow-1" />
|
||||
</MudStack>
|
||||
|
||||
@if (!string.IsNullOrEmpty(ErrorMessage))
|
||||
{
|
||||
<MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError">
|
||||
@ErrorMessage
|
||||
</MudAlert>
|
||||
}
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
|
||||
|
||||
@code {
|
||||
[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; }
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,49 @@
|
||||
<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>
|
||||
<MudPaper MaxWidth="1600px" 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="@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>
|
||||
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>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using DeepDrftModels.Entities;
|
||||
using DeepDrftWeb.Client.Clients;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using DeepDrftWeb.Client.Services;
|
||||
using MudBlazor;
|
||||
|
||||
@@ -6,219 +8,25 @@ 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;
|
||||
[Parameter] public required AudioPlaybackEngine AudioPlaybackEngine { get; set; }
|
||||
|
||||
private bool IsLoaded => AudioPlaybackEngine.IsLoaded;
|
||||
private bool IsPlaying => AudioPlaybackEngine.IsPlaying;
|
||||
private bool IsPaused => AudioPlaybackEngine.IsPaused;
|
||||
private double CurrentTime => AudioPlaybackEngine.CurrentTime;
|
||||
private double Duration => AudioPlaybackEngine.Duration;
|
||||
private double Volume => AudioPlaybackEngine.Volume;
|
||||
private double LoadProgress => AudioPlaybackEngine.LoadProgress;
|
||||
private string? ErrorMessage => AudioPlaybackEngine.ErrorMessage;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var result = await AudioInterop.CreatePlayerAsync(PlayerId);
|
||||
if (!result.Success)
|
||||
{
|
||||
ErrorMessage = $"Failed to initialize audio player: {result.Error}";
|
||||
return;
|
||||
}
|
||||
await base.OnInitializedAsync();
|
||||
|
||||
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);
|
||||
AudioPlaybackEngine.OnProgressChanged += async _ => StateHasChanged();
|
||||
AudioPlaybackEngine.OnPlaybackEnded += async () => await Stop(); // TODO unload the engine track instead of stopping
|
||||
}
|
||||
|
||||
private string GetPlayIcon()
|
||||
@@ -239,19 +47,38 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
|
||||
return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
|
||||
}
|
||||
|
||||
private void ClearError()
|
||||
private async Task TogglePlayPause()
|
||||
{
|
||||
ErrorMessage = null;
|
||||
await AudioPlaybackEngine.TogglePlayPause();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task Stop()
|
||||
{
|
||||
await AudioPlaybackEngine.Stop();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task OnSeek(double position)
|
||||
{
|
||||
await AudioPlaybackEngine.OnSeek(position);
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task OnVolumeChange(double volume)
|
||||
{
|
||||
await AudioPlaybackEngine.OnVolumeChange(volume);
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void ClearError()
|
||||
{
|
||||
AudioPlaybackEngine.ClearError();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
progressTimer?.Dispose();
|
||||
|
||||
if (IsLoaded)
|
||||
{
|
||||
await AudioInterop.DisposePlayerAsync(PlayerId);
|
||||
}
|
||||
await AudioPlaybackEngine.DisposeAsync();
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
@page "/audio-example"
|
||||
|
||||
<PageTitle>Audio Player Example</PageTitle>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h3" GutterBottom="true">Audio Player Example</MudText>
|
||||
|
||||
<div style="padding: 24px;">
|
||||
<MudText Typo="Typo.h5" GutterBottom="true">Load Audio from URL</MudText>
|
||||
|
||||
<MudTextField @bind-Value="audioUrl"
|
||||
Label="Audio URL"
|
||||
Placeholder="https://example.com/audio.mp3"
|
||||
FullWidth="true"
|
||||
Margin="Margin.Normal" />
|
||||
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="@LoadFromUrl"
|
||||
StartIcon="Icons.Material.Filled.CloudDownload">
|
||||
Load Audio
|
||||
</MudButton>
|
||||
|
||||
@if (showUrlPlayer)
|
||||
{
|
||||
<div style="margin-top: 24px;">
|
||||
<AudioPlayer AudioUrl="@audioUrl"
|
||||
OnProgressChanged="OnProgressChanged"
|
||||
OnPlaybackEnded="OnPlaybackEnded" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(statusMessage))
|
||||
{
|
||||
<MudAlert Severity="Severity.Info" Style="margin-top: 24px;">
|
||||
@statusMessage
|
||||
</MudAlert>
|
||||
}
|
||||
|
||||
<div style="margin-top: 32px;">
|
||||
<MudText Typo="Typo.h6" GutterBottom="true">Usage Instructions</MudText>
|
||||
<MudList T="string">
|
||||
<MudListItem T="string"
|
||||
Icon="Icons.Material.Filled.Audiotrack"
|
||||
Text="Load audio directly from a web URL" />
|
||||
<MudListItem T="string"
|
||||
Icon="Icons.Material.Filled.PlayArrow"
|
||||
Text="Use play/pause controls to control playback" />
|
||||
<MudListItem T="string"
|
||||
Icon="Icons.Material.Filled.VolumeUp"
|
||||
Text="Adjust volume with the volume slider" />
|
||||
<MudListItem T="string"
|
||||
Icon="Icons.Material.Filled.Timeline"
|
||||
Text="Seek through the audio using the progress slider" />
|
||||
</MudList>
|
||||
</div>
|
||||
</MudContainer>
|
||||
|
||||
@code {
|
||||
private string audioUrl = "";
|
||||
private bool showUrlPlayer = false;
|
||||
private string statusMessage = "";
|
||||
|
||||
private void LoadFromUrl()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(audioUrl))
|
||||
{
|
||||
statusMessage = "Please enter a valid audio URL";
|
||||
return;
|
||||
}
|
||||
|
||||
showUrlPlayer = true;
|
||||
statusMessage = $"Loading audio from: {audioUrl}";
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private Task OnProgressChanged(double currentTime)
|
||||
{
|
||||
// Update status with current playback time
|
||||
statusMessage = $"Playing: {FormatTime(currentTime)}";
|
||||
StateHasChanged();
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private Task OnPlaybackEnded()
|
||||
{
|
||||
statusMessage = "Playback completed";
|
||||
StateHasChanged();
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private static string FormatTime(double seconds)
|
||||
{
|
||||
var timeSpan = TimeSpan.FromSeconds(seconds);
|
||||
return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
|
||||
}
|
||||
}
|
||||
@@ -9,16 +9,15 @@ public partial class TrackCard : ComponentBase
|
||||
{
|
||||
[Parameter] public required TrackEntity TrackModel { get; set; }
|
||||
[Parameter] public EventCallback<TrackEntity> OnPlay { get; set; }
|
||||
[Parameter] public bool IsPlaying { get; set; } = false;
|
||||
|
||||
private bool _isPlaying = false;
|
||||
private string PlayPauseIcon => _isPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
|
||||
private string PlayPauseIcon => IsPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
|
||||
|
||||
private async Task PlayClick()
|
||||
{
|
||||
if (!_isPlaying)
|
||||
if (!IsPlaying && OnPlay.HasDelegate)
|
||||
{
|
||||
_isPlaying = true;
|
||||
await OnPlay.InvokeAsync();
|
||||
await OnPlay.InvokeAsync(TrackModel);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="4" lg="2" xl="2">
|
||||
<div Style="display: flex; justify-content: center;">
|
||||
<TrackCard TrackModel="@track" OnPlay="@HandlePlayClick"/>
|
||||
<TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
|
||||
</div>
|
||||
</MudItem>
|
||||
}
|
||||
|
||||
@@ -6,23 +6,19 @@ 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; }
|
||||
[Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = [];
|
||||
[Parameter] public TrackEntity? SelectedTrack { get; set; }
|
||||
[Parameter] public EventCallback<TrackEntity?> SelectedTrackChanged { get; set; }
|
||||
|
||||
private async Task HandlePlayClick(TrackEntity track)
|
||||
{
|
||||
if (_audioStream == null)
|
||||
if (SelectedTrack == track) return;
|
||||
SelectedTrack = track;
|
||||
StateHasChanged();
|
||||
|
||||
if (SelectedTrackChanged.HasDelegate)
|
||||
{
|
||||
_audioStream = await Client.GetTrackMedia(track.EntryKey);
|
||||
PlayAudio();
|
||||
await SelectedTrackChanged.InvokeAsync(track);
|
||||
}
|
||||
}
|
||||
|
||||
private void PlayAudio()
|
||||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user