Merge branch 'stream-now-button' into dev
This commit is contained in:
daniel-c-harvey
@@ -5,7 +5,7 @@
|
||||
We craft immersive electronic soundscapes — live; built from synthesizers, drum machines, and raw intention.
|
||||
</p>
|
||||
<div class="hero-actions @AnimClass">
|
||||
<a class="btn-primary" href="/tracks">Start Streaming</a>
|
||||
<StreamNowButton ButtonClass="btn-primary" ButtonLabel="Start Streaming" />
|
||||
<a class="btn-ghost" href="/tracks">Browse Tracks</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -75,51 +75,9 @@
|
||||
animation-delay: 0.54s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--deepdrft-white);
|
||||
background: var(--deepdrft-navy);
|
||||
border: none;
|
||||
padding: 1rem 2.2rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.25s, transform 0.2s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--deepdrft-green);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--deepdrft-navy);
|
||||
background: transparent;
|
||||
border: 1px solid var(--deepdrft-border);
|
||||
padding: 1rem 2.2rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.25s, color 0.25s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-ghost:hover { border-color: var(--deepdrft-navy); }
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-ghost {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
@using DeepDrftPublic.Client.Services
|
||||
|
||||
<button type="button"
|
||||
class="@ButtonClass"
|
||||
disabled="@(_streamLoading || !RendererInfo.IsInteractive)"
|
||||
aria-busy="@_streamLoading.ToString().ToLowerInvariant()"
|
||||
@onclick="StreamNow">
|
||||
@if (_findingTrack)
|
||||
{
|
||||
<span>@LoadingLabel</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>@ButtonLabel</span>
|
||||
}
|
||||
</button>
|
||||
@if (_streamMessage is not null)
|
||||
{
|
||||
<p class="stream-now-message" role="status">@_streamMessage</p>
|
||||
}
|
||||
|
||||
@implements IDisposable
|
||||
|
||||
@code {
|
||||
[Parameter, EditorRequired] public required string ButtonClass { get; set; }
|
||||
[Parameter, EditorRequired] public required string ButtonLabel { get; set; }
|
||||
[Parameter] public string LoadingLabel { get; set; } = "Finding a track…";
|
||||
[Parameter] public EventCallback OnStreamStarted { get; set; }
|
||||
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
|
||||
[Inject] public required ITrackDataService TrackData { get; set; }
|
||||
|
||||
private bool _streamLoading;
|
||||
private bool _findingTrack;
|
||||
private string? _streamMessage;
|
||||
private CancellationTokenSource? _messageCts;
|
||||
|
||||
private const string EmptyLibraryMessage = "No tracks yet — check back soon.";
|
||||
private const string FetchFailedMessage = "Couldn't reach the library — try again.";
|
||||
|
||||
private async Task StreamNow()
|
||||
{
|
||||
// Re-entrancy guard: the button is disabled while loading, but guard in code too so a
|
||||
// double-dispatch can never start two concurrent streams.
|
||||
if (_streamLoading) return;
|
||||
|
||||
_streamLoading = true;
|
||||
_findingTrack = true;
|
||||
_streamMessage = null;
|
||||
|
||||
// Warm the AudioContext FIRST, inside the gesture's call stack and before the network
|
||||
// await below. Safari only lets a suspended AudioContext resume while the originating
|
||||
// user gesture is still active; awaiting GetRandomTrack() first would consume the gesture
|
||||
// and leave playback silently refused. PlayerService is null only outside the
|
||||
// AudioPlayerProvider cascade (it should always be present in the public layout).
|
||||
var warmTask = PlayerService?.WarmAudioContext() ?? Task.CompletedTask;
|
||||
|
||||
try
|
||||
{
|
||||
await warmTask;
|
||||
var result = await TrackData.GetRandomTrack();
|
||||
|
||||
if (!result.Success)
|
||||
{
|
||||
ShowTransientMessage(FetchFailedMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.Value is not { } track)
|
||||
{
|
||||
ShowTransientMessage(EmptyLibraryMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
await OnStreamStarted.InvokeAsync();
|
||||
|
||||
// Track is found — flip only the label flag so the button reverts to
|
||||
// its resting label before the stream begins, while _streamLoading stays true
|
||||
// to keep the button disabled and the re-entrancy guard intact.
|
||||
_findingTrack = false;
|
||||
StateHasChanged();
|
||||
|
||||
if (PlayerService is not null)
|
||||
await PlayerService.SelectTrackStreaming(track);
|
||||
}
|
||||
catch (Exception)
|
||||
{
|
||||
ShowTransientMessage(FetchFailedMessage);
|
||||
}
|
||||
finally
|
||||
{
|
||||
_streamLoading = false;
|
||||
_findingTrack = false;
|
||||
}
|
||||
}
|
||||
|
||||
private void ShowTransientMessage(string message)
|
||||
{
|
||||
_streamMessage = message;
|
||||
|
||||
// Cancel any in-flight clear timer so the newest message gets its full display window.
|
||||
_messageCts?.Cancel();
|
||||
_messageCts?.Dispose();
|
||||
_messageCts = new CancellationTokenSource();
|
||||
var token = _messageCts.Token;
|
||||
|
||||
_ = ClearMessageAfterDelayAsync(token);
|
||||
}
|
||||
|
||||
private async Task ClearMessageAfterDelayAsync(CancellationToken token)
|
||||
{
|
||||
try
|
||||
{
|
||||
await Task.Delay(TimeSpan.FromSeconds(4), token);
|
||||
}
|
||||
catch (TaskCanceledException)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
_streamMessage = null;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_messageCts?.Cancel();
|
||||
_messageCts?.Dispose();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.stream-now-message {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--deepdrft-muted);
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@using DeepDrftPublic.Client.Common
|
||||
@using DeepDrftPublic.Client.Controls
|
||||
@using DeepDrftPublic.Client.Services
|
||||
|
||||
@* Desktop Menu *@
|
||||
@@ -16,20 +17,7 @@
|
||||
</ul>
|
||||
|
||||
<div class="dd-nav-actions">
|
||||
<button type="button"
|
||||
class="dd-nav-cta"
|
||||
disabled="@(_streamLoading || !RendererInfo.IsInteractive)"
|
||||
aria-busy="@_streamLoading.ToString().ToLowerInvariant()"
|
||||
@onclick="StreamNow">
|
||||
@if (_findingTrack)
|
||||
{
|
||||
<span>Finding a track…</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>Stream Now ▶</span>
|
||||
}
|
||||
</button>
|
||||
<StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now ▶" />
|
||||
@* <button type="button" *@
|
||||
@* class="dd-nav-toggle" *@
|
||||
@* aria-label="Toggle dark mode" *@
|
||||
@@ -38,11 +26,6 @@
|
||||
@* @((MarkupString)DarkLightModeIconSvg) *@
|
||||
@* </button> *@
|
||||
</div>
|
||||
|
||||
@if (_streamMessage is not null)
|
||||
{
|
||||
<p class="dd-nav-stream-message" role="status">@_streamMessage</p>
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -78,147 +61,23 @@
|
||||
</li>
|
||||
}
|
||||
<li>
|
||||
<button type="button"
|
||||
class="dd-nav-cta"
|
||||
disabled="@(_streamLoading || !RendererInfo.IsInteractive)"
|
||||
aria-busy="@_streamLoading.ToString().ToLowerInvariant()"
|
||||
@onclick="StreamNowMobile">
|
||||
@if (_findingTrack)
|
||||
{
|
||||
<span>Finding a track…</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>Stream Now ▶</span>
|
||||
}
|
||||
</button>
|
||||
<StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now ▶" OnStreamStarted="CloseMobileMenu" />
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
|
||||
@if (_streamMessage is not null)
|
||||
{
|
||||
<p class="dd-nav-stream-message" role="status">@_streamMessage</p>
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@implements IDisposable
|
||||
|
||||
@code {
|
||||
[Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }
|
||||
[Inject] public required ITrackDataService TrackData { get; set; }
|
||||
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
|
||||
|
||||
// Elevation is vestigial under the frosted-glass design but kept on the parameter
|
||||
// surface so MainLayout's <DeepDrftMenu Elevation="..."> call site stays intact.
|
||||
[Parameter] public int Elevation { get; set; }
|
||||
[Parameter] public required bool IsDarkMode { get; set; }
|
||||
[Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
|
||||
|
||||
|
||||
private bool _mobileMenuOpen;
|
||||
private bool _streamLoading;
|
||||
private bool _findingTrack;
|
||||
private string? _streamMessage;
|
||||
private CancellationTokenSource? _messageCts;
|
||||
|
||||
private const string EmptyLibraryMessage = "No tracks yet — check back soon.";
|
||||
private const string FetchFailedMessage = "Couldn't reach the library — try again.";
|
||||
|
||||
private Task StreamNow() => StreamNowCore(closeMobileMenu: false);
|
||||
|
||||
private Task StreamNowMobile() => StreamNowCore(closeMobileMenu: true);
|
||||
|
||||
private async Task StreamNowCore(bool closeMobileMenu)
|
||||
{
|
||||
// Re-entrancy guard: the button is disabled while loading, but guard in code too so a
|
||||
// double-dispatch can never start two concurrent streams.
|
||||
if (_streamLoading) return;
|
||||
|
||||
_streamLoading = true;
|
||||
_findingTrack = true;
|
||||
_streamMessage = null;
|
||||
|
||||
// Warm the AudioContext FIRST, inside the gesture's call stack and before the network
|
||||
// await below. Safari only lets a suspended AudioContext resume while the originating
|
||||
// user gesture is still active; awaiting GetRandomTrack() first would consume the gesture
|
||||
// and leave playback silently refused. PlayerService is null only outside the
|
||||
// AudioPlayerProvider cascade (it should always be present in the public layout).
|
||||
var warmTask = PlayerService?.WarmAudioContext() ?? Task.CompletedTask;
|
||||
|
||||
try
|
||||
{
|
||||
await warmTask;
|
||||
var result = await TrackData.GetRandomTrack();
|
||||
|
||||
if (!result.Success)
|
||||
{
|
||||
ShowTransientMessage(FetchFailedMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.Value is not { } track)
|
||||
{
|
||||
ShowTransientMessage(EmptyLibraryMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (closeMobileMenu)
|
||||
_mobileMenuOpen = false;
|
||||
|
||||
// Track is found — flip only the label flag so the button reverts to
|
||||
// "Stream Now ▶" before the stream begins, while _streamLoading stays true
|
||||
// to keep the button disabled and the re-entrancy guard intact.
|
||||
_findingTrack = false;
|
||||
StateHasChanged();
|
||||
|
||||
if (PlayerService is not null)
|
||||
await PlayerService.SelectTrackStreaming(track);
|
||||
}
|
||||
catch (Exception)
|
||||
{
|
||||
ShowTransientMessage(FetchFailedMessage);
|
||||
}
|
||||
finally
|
||||
{
|
||||
_streamLoading = false;
|
||||
_findingTrack = false;
|
||||
}
|
||||
}
|
||||
|
||||
private void ShowTransientMessage(string message)
|
||||
{
|
||||
_streamMessage = message;
|
||||
|
||||
// Cancel any in-flight clear timer so the newest message gets its full display window.
|
||||
_messageCts?.Cancel();
|
||||
_messageCts?.Dispose();
|
||||
_messageCts = new CancellationTokenSource();
|
||||
var token = _messageCts.Token;
|
||||
|
||||
_ = ClearMessageAfterDelayAsync(token);
|
||||
}
|
||||
|
||||
private async Task ClearMessageAfterDelayAsync(CancellationToken token)
|
||||
{
|
||||
try
|
||||
{
|
||||
await Task.Delay(TimeSpan.FromSeconds(4), token);
|
||||
}
|
||||
catch (TaskCanceledException)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
_streamMessage = null;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_messageCts?.Cancel();
|
||||
_messageCts?.Dispose();
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
}
|
||||
|
||||
/* Stream Now CTA — square pill, navy on warm white */
|
||||
.dd-nav-cta {
|
||||
::deep .dd-nav-cta {
|
||||
display: inline-block;
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.68rem;
|
||||
@@ -106,18 +106,18 @@
|
||||
transition: background 0.25s ease;
|
||||
}
|
||||
|
||||
.dd-nav-cta:hover,
|
||||
.dd-nav-cta:focus-visible {
|
||||
::deep .dd-nav-cta:hover,
|
||||
::deep .dd-nav-cta:focus-visible {
|
||||
background: var(--deepdrft-green);
|
||||
}
|
||||
|
||||
.dd-nav-dark .dd-nav-cta {
|
||||
.dd-nav-dark ::deep .dd-nav-cta {
|
||||
color: var(--deepdrft-white);
|
||||
background: var(--deepdrft-primary);
|
||||
}
|
||||
|
||||
.dd-nav-dark .dd-nav-cta:hover,
|
||||
.dd-nav-dark .dd-nav-cta:focus-visible {
|
||||
.dd-nav-dark ::deep .dd-nav-cta:hover,
|
||||
.dd-nav-dark ::deep .dd-nav-cta:focus-visible {
|
||||
background: var(--deepdrft-senary);
|
||||
}
|
||||
|
||||
@@ -207,7 +207,7 @@
|
||||
padding: 0.6rem 0;
|
||||
}
|
||||
|
||||
.dd-nav-links-mobile .dd-nav-cta {
|
||||
.dd-nav-links-mobile ::deep .dd-nav-cta {
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -378,3 +378,51 @@ h2, h3, h4, h5, h6,
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
BUTTON UTILITIES (btn-primary, btn-ghost)
|
||||
============================================================================= */
|
||||
|
||||
.btn-primary {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--deepdrft-white);
|
||||
background: var(--deepdrft-navy);
|
||||
border: none;
|
||||
padding: 1rem 2.2rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.25s, transform 0.2s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--deepdrft-green);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
font-family: var(--deepdrft-font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--deepdrft-navy);
|
||||
background: transparent;
|
||||
border: 1px solid var(--deepdrft-border);
|
||||
padding: 1rem 2.2rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.25s, color 0.25s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-ghost:hover { border-color: var(--deepdrft-navy); }
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.btn-primary,
|
||||
.btn-ghost {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user