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

feat(theater): full-screen detail body, eased content collapse, playing-release scoping

Browse Source 
Detail bodies fill 100vh below the nav so the visualizer reads full-screen; Theater toggle eases page content and the player-bar now-showing panel in/out instead of popping (reduced-motion honored); Theater only applies to the currently-playing release.
This commit is contained in:
daniel-c-harvey
2026-06-21 08:59:09 -04:00
parent a577df88dd
commit 9716092805
8 changed files with 202 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
+11 -6
View File
@@ -10,13 +10,18 @@ else
<MudContainer MaxWidth="MaxWidth.Large" Class="player-inner-container">
<MudPaper Elevation="8" Class="player-surface pa-3">
@* Theater Mode "now showing" band (Phase 20 §5/§7). Shown only when Theater is ON and a
release is playing — keyed off the playing track's Release, not off any detail page
(the bar reaches into no page; §6). The release page is hidden in Theater Mode, so the
bar carries its identity: cover, linked title, release share. *@
@if (VisualizerControlState.TheaterMode && CurrentTrack?.Release is not null)
@* Theater Mode "now showing" band (Phase 20 §5/§7, Wave 2 §2). Keyed off the playing
track's Release, not off any detail page (the bar reaches into no page; §6). The release
page is hidden in Theater Mode, so the bar carries its identity: cover, linked title,
release share. The band stays mounted whenever a release is playing and eases in/out via
the shared .dd-theater-collapsible wrapper — collapsed (zero height, faded) unless
Theater is ON — so the bar grows/shrinks smoothly instead of popping. *@
@if (CurrentTrack?.Release is not null)
{
<NowShowingPanel Release="CurrentTrack.Release" />
var nowShowing = VisualizerControlState.TheaterMode;
<div class="dd-theater-collapsible @(nowShowing ? null : "dd-theater-collapsed")">
<NowShowingPanel Release="CurrentTrack.Release" />
</div>
}
<div class="player-layout">
DeepDrftPublic.Client/Controls/TheaterModeToggle.razor
+14 -4
View File
@@ -10,11 +10,13 @@
reaches into no page and no bar — single source, multiple observers (§6).
Visible only when the lava OR waveform subsystem is on — there is nothing to go to theater FOR if both
are off (§3.2). Disabled until interactive (§3.4), the same prerender guard the lava/Play buttons use.
Active visual state when Theater is ON. .dd-accent-icon gives the green-accent glyph in both themes
with zero new CSS (§8) — same treatment as the lava-lamp trigger it sits beside. *@
are off (§3.2) — AND when <see cref="Available"/> is true. The page supplies Available so the toggle
only appears when this page's release is the one playing (Phase 20 Wave 2 §3): the toggle owns the
subsystem gate; the page owns the release-playing predicate. Disabled until interactive (§3.4), the
same prerender guard the lava/Play buttons use. Active visual state when Theater is ON. .dd-accent-icon
gives the green-accent glyph in both themes with zero new CSS (§8) — same as the lava-lamp trigger. *@
@if (State.LavaEnabled || State.WaveformEnabled)
@if (Available && (State.LavaEnabled || State.WaveformEnabled))
{
<div class="dd-accent-icon">
<MudTooltip Text="@(State.TheaterMode ? "Exit theater mode" : "Theater mode")">
@@ -33,6 +35,14 @@
/// <summary>Trigger-icon size. Defaults Large to match the lava-lamp popover trigger it sits beside.</summary>
[Parameter] public Size IconSize { get; set; } = Size.Large;
/// <summary>
/// Whether the toggle is available on this surface (Phase 20 Wave 2 §3). The page passes the
/// "this release is the one playing" predicate here; Theater Mode only applies to the playing
/// release, so a detail page whose release is not playing passes <c>false</c> and shows no toggle.
/// Defaults <c>true</c> so surfaces with no release-scoping (none today) keep the subsystem-only gate.
/// </summary>
[Parameter] public bool Available { get; set; } = true;
protected override void OnInitialized() => State.Changed += OnStateChanged;
// The toggle's own visibility and active state both key off State, which another observer (or this
DeepDrftPublic.Client/Pages/CutDetail.razor
+17 -10
View File
@@ -37,6 +37,10 @@ else
var hasYear = release.ReleaseDate is not null;
var firstTrack = ViewModel.Tracks.Count > 0 ? ViewModel.Tracks[0] : null;
@* Full-screen content body (Phase 20 Wave 2 §1): the scaffold has no Class param, so a thin wrapper
carries the min-height. dd-detail-fill keeps the body >= viewport height (below the nav) so the
ambient visualizer reads full-screen and the site footer is pushed below the fold. *@
<div class="dd-detail-fill">
<ReleaseDetailScaffold Title="@release.Title"
Artist="@release.Artist"
Track="@firstTrack"
@@ -58,17 +62,19 @@ else
controls over the experience, not release content, so both stay in Theater Mode (§4/OQ4).
Wrapped so they cluster on the right rather than spreading across the SpaceBetween row. *@
<div class="dd-detail-top-actions">
<TheaterModeToggle />
@* Theater toggle only appears when this Cut is the currently-playing release (Phase 20
Wave 2 §3). ShowTheaterToggle folds in the subsystem gate + the release-playing check. *@
<TheaterModeToggle Available="ShowTheaterToggle" />
@* Lava-lamp icon → popover panel (full parity, §3d-revised). Sits top-right across from the
back link, clear of the header's own Play/Share affordances below. *@
<WaveformVisualizerControlPopover />
</div>
</TopRightAction>
<Header>
@* Theater Mode (Phase 20 §4): the release content is removed from the render — not
CSS-hidden — so the visualizer fills the surface. OFF restores it byte-for-byte. *@
@if (!VisualizerControlState.TheaterMode)
{
@* Theater Mode (Phase 20 §4, Wave 2 §2): the release content stays mounted and eases out via
a collapsing wrapper so it does not pop — IsContentHidden collapses it to zero height when
Theater is on AND this Cut is the playing release. OFF eases it back to its normal layout. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
@* Header split: meta + Play/Share on the LEFT, bordered cover on the RIGHT (spec §3.1). *@
<div class="cut-detail-header">
<div class="cut-detail-meta">
@@ -127,11 +133,11 @@ else
}
</div>
</div>
}
</div>
</Header>
<BodyContent>
@if (!VisualizerControlState.TheaterMode)
{
@* Theater Mode (Wave 2 §2): eased collapse, mirroring the Header region. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
@* Blurb sits between the header and the track-list divider. *@
<ReleaseDescription Description="@release.Description" />
<MudDivider Class="cut-detail-divider" />
@@ -162,13 +168,14 @@ else
}
</div>
}
}
</div>
</BodyContent>
</ReleaseDetailScaffold>
</div>
}
@code {
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
// PlayerService is cascaded by CutDetailBase (used there for the Theater release-playing predicate).
[CascadingParameter] public IQueueService? Queue { get; set; }
// Header Play: load the full album into the queue starting at track 0.
DeepDrftPublic.Client/Pages/CutDetailBase.cs
+51 -2
View File
@@ -20,11 +20,41 @@ public abstract class CutDetailBase : ComponentBase, IDisposable
[Inject] public required CutDetailViewModel ViewModel { get; set; }
[Inject] public required PersistentComponentState PersistentState { get; set; }
// Theater Mode (Phase 20). The page owns the @if (!VisualizerControlState.TheaterMode) content gate,
// so it must re-render when the flag flips on the toggle. Property-injected; no constructor growth.
// Theater Mode (Phase 20). The page owns the content gate, so it must re-render when the flag flips
// on the toggle. Property-injected; no constructor growth.
[Inject] public required WaveformVisualizerControlState VisualizerControlState { get; set; }
// Theater Mode is scoped to the currently-playing release (Phase 20 Wave 2 §3). The page observes
// player state so the toggle availability and content gate re-evaluate live when playback starts,
// stops, or moves to a different release. Cascaded by AudioPlayerProvider; no constructor growth.
// The cascade is IsFixed, so the provider's own re-render does not reach this page — the page must
// subscribe to StateChanged to re-render itself (same posture as AudioPlayerBar).
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
private PersistingComponentStateSubscription _persistingSubscription;
private IStreamingPlayerService? _subscribedPlayer;
/// <summary>
/// True when the currently-playing track belongs to this page's release. Theater Mode only applies
/// to the playing release: a detail page whose release is not playing ignores the global flag and
/// shows no toggle. Identity is the release <c>EntryKey</c> — the canonical public key the routes
/// and <see cref="DeepDrftPublic.Client.Common.ReleaseRoutes"/> use.
/// </summary>
protected bool IsThisReleasePlaying =>
PlayerService?.CurrentTrack?.Release?.EntryKey == EntryKey;
/// <summary>
/// True when this page's release content should be hidden for Theater Mode — only when Theater is on
/// AND this release is the one playing. Drives the eased collapse of the header/track-list regions.
/// </summary>
protected bool IsContentHidden => VisualizerControlState.TheaterMode && IsThisReleasePlaying;
/// <summary>
/// True when the Theater toggle should be offered on this page: a visualizer subsystem is on AND
/// this page's release is the one playing.
/// </summary>
protected bool ShowTheaterToggle =>
(VisualizerControlState.LavaEnabled || VisualizerControlState.WaveformEnabled) && IsThisReleasePlaying;
// The release EntryKey the ViewModel currently holds — tracks param-only navigations (e.g.
// /cuts/{a} -> /cuts/{b}) which reuse this component instance and fire OnParametersSet without
@@ -40,8 +70,22 @@ public abstract class CutDetailBase : ComponentBase, IDisposable
private void OnVisualizerStateChanged() => InvokeAsync(StateHasChanged);
private void OnPlayerStateChanged() => InvokeAsync(StateHasChanged);
protected override async Task OnParametersSetAsync()
{
// The player cascade is IsFixed, so the provider's re-render does not reach this page; subscribe
// to the StateChanged side-channel to re-render when playback moves between releases. Idempotent
// (reference-guarded) and unsubscribed on dispose — same posture as AudioPlayerBar.
if (PlayerService is not null && !ReferenceEquals(PlayerService, _subscribedPlayer))
{
if (_subscribedPlayer is not null)
_subscribedPlayer.StateChanged -= OnPlayerStateChanged;
PlayerService.StateChanged += OnPlayerStateChanged;
_subscribedPlayer = PlayerService;
}
if (_loaded && _loadedKey == EntryKey) return;
// Capture the key synchronously before any await so a re-entrant call (rapid navigation or a
@@ -75,6 +119,11 @@ public abstract class CutDetailBase : ComponentBase, IDisposable
{
_persistingSubscription.Dispose();
VisualizerControlState.Changed -= OnVisualizerStateChanged;
if (_subscribedPlayer is not null)
{
_subscribedPlayer.StateChanged -= OnPlayerStateChanged;
_subscribedPlayer = null;
}
}
// JSON-serializable bridge payload. Round-trips through PersistentComponentState's serializer.
DeepDrftPublic.Client/Pages/MixDetail.razor
+13 -11
View File
@@ -41,7 +41,7 @@ else
TrackId="@ViewModel.Track?.Id"
TrackEntryKey="@ViewModel.Track?.EntryKey" />
<div class="mix-detail-foreground">
<div class="mix-detail-foreground dd-detail-fill">
<MudContainer MaxWidth="MaxWidth.Large" Class="mix-detail-container">
@* Mix keeps the scaffold solely for the Phase 10 top row (back link | controls | lava-lamp).
Title/artist/genre/date/share/play all move into the overlaid hero, so the scaffold's
@@ -60,7 +60,9 @@ else
visible in Theater Mode — controls over the experience, not release content (§4/OQ4).
Wrapped so they cluster on the right rather than spreading across the SpaceBetween row. *@
<div class="dd-detail-top-actions">
<TheaterModeToggle />
@* Theater toggle only appears when this Mix is the currently-playing release
(Phase 20 Wave 2 §3). ShowTheaterToggle folds in the subsystem + release-playing gate. *@
<TheaterModeToggle Available="ShowTheaterToggle" />
@* Lava-lamp icon → popover panel, top-right across from the back link (Phase 12
§3d-revised). Replaces the former inline TopContent knob-bar: the icon IS the toggle
and the popover IS the panel. Mix takes the cleanest anchor case (§8e) — the popover's
@@ -69,10 +71,10 @@ else
</div>
</TopRightAction>
<Hero>
@* Theater Mode (Phase 20 §4): the hero overlay (Session/Mix release content) is removed
from the render so the full-bleed visualizer fills the surface. OFF restores it. *@
@if (!VisualizerControlState.TheaterMode)
{
@* Theater Mode (Phase 20 §4, Wave 2 §2): the hero overlay stays mounted and eases out via
a collapsing wrapper so it does not pop — collapsed to zero height when Theater is on AND
this Mix is the playing release. OFF eases the full-bleed visualizer back behind the hero. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
@* Cover-as-background hero with all metadata overlaid, square `mix-hero` sizing. The
cover art IS the background, so no separate cover thumbnail (CoverThumbKey defaults
to null). Share and play ride in as slots, matching Sessions. *@
@@ -96,14 +98,14 @@ else
}
</PlayContent>
</ReleaseHeroOverlay>
}
</div>
</Hero>
<BodyContent>
@if (!VisualizerControlState.TheaterMode)
{
@* Theater Mode (Wave 2 §2): eased collapse, mirroring the Hero region. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
@* Blurb sits below the hero, inside the scaffold's foreground stacking context. *@
<ReleaseDescription Description="@release.Description" />
}
</div>
</BodyContent>
</ReleaseDetailScaffold>
</MudContainer>
@@ -113,7 +115,7 @@ else
@code {
protected override string PersistKey => "mix-detail";
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
// PlayerService is cascaded by ReleaseDetailBase (used there for the Theater release-playing predicate).
[CascadingParameter] public IQueueService? Queue { get; set; }
// The hero now carries the play affordance (the scaffold's header is suppressed), so the
DeepDrftPublic.Client/Pages/ReleaseDetailBase.cs
+51 -2
View File
@@ -18,11 +18,41 @@ public abstract class ReleaseDetailBase : ComponentBase, IDisposable
[Inject] public required ReleaseDetailViewModel ViewModel { get; set; }
[Inject] public required PersistentComponentState PersistentState { get; set; }
// Theater Mode (Phase 20). The page owns the @if (!VisualizerControlState.TheaterMode) content gate,
// so it must re-render when the flag flips on the toggle. Property-injected; no constructor growth.
// Theater Mode (Phase 20). The page owns the content gate, so it must re-render when the flag flips
// on the toggle. Property-injected; no constructor growth.
[Inject] public required WaveformVisualizerControlState VisualizerControlState { get; set; }
// Theater Mode is scoped to the currently-playing release (Phase 20 Wave 2 §3). The page observes
// player state so the toggle availability and content gate re-evaluate live when playback starts,
// stops, or moves to a different release. Cascaded by AudioPlayerProvider; no constructor growth.
// The cascade is IsFixed, so the provider's own re-render does not reach this page — the page must
// subscribe to StateChanged to re-render itself (same posture as AudioPlayerBar).
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
private PersistingComponentStateSubscription _persistingSubscription;
private IStreamingPlayerService? _subscribedPlayer;
/// <summary>
/// True when the currently-playing track belongs to this page's release. Theater Mode only applies
/// to the playing release: a detail page whose release is not playing ignores the global flag and
/// shows no toggle. Identity is the release <c>EntryKey</c> — the canonical public key the routes
/// and <see cref="DeepDrftPublic.Client.Common.ReleaseRoutes"/> use.
/// </summary>
protected bool IsThisReleasePlaying =>
PlayerService?.CurrentTrack?.Release?.EntryKey == EntryKey;
/// <summary>
/// True when this page's release content should be hidden for Theater Mode — only when Theater is on
/// AND this release is the one playing. Drives the eased collapse of the hero/blurb regions.
/// </summary>
protected bool IsContentHidden => VisualizerControlState.TheaterMode && IsThisReleasePlaying;
/// <summary>
/// True when the Theater toggle should be offered on this page: a visualizer subsystem is on AND
/// this page's release is the one playing.
/// </summary>
protected bool ShowTheaterToggle =>
(VisualizerControlState.LavaEnabled || VisualizerControlState.WaveformEnabled) && IsThisReleasePlaying;
// The release EntryKey the ViewModel currently holds. Tracks param-only navigations (e.g.
// /mixes/{a} -> /mixes/{b}) which reuse this component instance and fire OnParametersSet
@@ -42,8 +72,22 @@ public abstract class ReleaseDetailBase : ComponentBase, IDisposable
private void OnVisualizerStateChanged() => InvokeAsync(StateHasChanged);
private void OnPlayerStateChanged() => InvokeAsync(StateHasChanged);
protected override async Task OnParametersSetAsync()
{
// The player cascade is IsFixed, so the provider's re-render does not reach this page; subscribe
// to the StateChanged side-channel to re-render when playback moves between releases. Idempotent
// (reference-guarded) and unsubscribed on dispose — same posture as AudioPlayerBar.
if (PlayerService is not null && !ReferenceEquals(PlayerService, _subscribedPlayer))
{
if (_subscribedPlayer is not null)
_subscribedPlayer.StateChanged -= OnPlayerStateChanged;
PlayerService.StateChanged += OnPlayerStateChanged;
_subscribedPlayer = PlayerService;
}
// Re-run whenever the route key changes. Component instances are reused across
// same-template navigations, so the load decision must live here, not in
// OnInitialized (which fires once per instance).
@@ -83,6 +127,11 @@ public abstract class ReleaseDetailBase : ComponentBase, IDisposable
{
_persistingSubscription.Dispose();
VisualizerControlState.Changed -= OnVisualizerStateChanged;
if (_subscribedPlayer is not null)
{
_subscribedPlayer.StateChanged -= OnPlayerStateChanged;
_subscribedPlayer = null;
}
}
// JSON-serializable bridge payload. Round-trips through PersistentComponentState's serializer.
DeepDrftPublic.Client/Pages/SessionDetail.razor
+10 -9
View File
@@ -49,7 +49,7 @@ else
TrackId="@ViewModel.Track?.Id"
TrackEntryKey="@ViewModel.Track?.EntryKey" />
<MudContainer MaxWidth="MaxWidth.Large" Class="session-detail-page session-detail-foreground">
<MudContainer MaxWidth="MaxWidth.Large" Class="session-detail-page session-detail-foreground dd-detail-fill">
<div class="session-detail-top-row">
<MudLink Href="/sessions" Typo="Typo.body2" Class="deepdrft-track-detail-back">
@@ -59,18 +59,19 @@ else
@* Theater toggle sits immediately LEFT of the lava-lamp popover (Phase 20 §3). The whole top
row (back + theater + lava) stays in Theater Mode — controls, not release content (§4/OQ4). *@
<div class="dd-detail-top-actions">
<TheaterModeToggle />
@* Theater toggle only appears when this Session is the currently-playing release
(Phase 20 Wave 2 §3). ShowTheaterToggle folds in the subsystem + release-playing gate. *@
<TheaterModeToggle Available="ShowTheaterToggle" />
@* Lava-lamp icon → popover panel (full parity, §3e/§3d-revised). Anchored top-right, clear of
the hero overlay and the share/play affordances overlaid on the hero below. *@
<WaveformVisualizerControlPopover />
</div>
</div>
@* Theater Mode (Phase 20 §4): the hero overlay + blurb (the session's release content) are removed
from the render so the ambient visualizer fills the surface. The top row above stays. OFF
restores this region byte-for-byte. *@
@if (!VisualizerControlState.TheaterMode)
{
@* Theater Mode (Phase 20 §4, Wave 2 §2): the hero overlay + blurb stay mounted and ease out via a
collapsing wrapper so they do not pop — collapsed to zero height when Theater is on AND this
Session is the playing release. The top row above stays. OFF eases this region back in. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
@* The overlay shows the cover thumbnail only when it differs from the resolved hero image —
when there is no dedicated hero, heroImage already falls back to release.ImagePath, so the
thumb would duplicate the background. That logic lives in ReleaseHeroOverlay. *@
@@ -96,7 +97,7 @@ else
</ReleaseHeroOverlay>
<ReleaseDescription Description="@release.Description" />
}
</div>
</MudContainer>
}
@@ -104,7 +105,7 @@ else
@code {
protected override string PersistKey => "session-detail";
[CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
// PlayerService is cascaded by ReleaseDetailBase (used there for the Theater release-playing predicate).
[CascadingParameter] public IQueueService? Queue { get; set; }
// Mirrors the play-toggle wiring the shared scaffold owns. Session detail composes the player
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+35
View File
@@ -360,6 +360,41 @@ h2, h3, h4, h5, h6,
gap: 0.25rem;
}
/* Full-screen detail body (Phase 20 Wave 2 §1). The content body always fills the viewport below the
fixed nav so the ambient/full-bleed visualizer reads as genuinely full-screen and the footer is pushed
below the fold (scroll to reach it) — independent of Theater Mode. Reuses the shared
--deepdrft-nav-height token (88px desktop / 72px mobile) so the clearance tracks the bar across
breakpoints; no new layout token. Applied to each detail page's foreground content container. */
.dd-detail-fill {
min-height: calc(100vh - var(--deepdrft-nav-height, 88px));
}
/* Eased content collapse for Theater Mode (Phase 20 Wave 2 §2). The detail content stays mounted and
collapses to zero height (and fades) when .dd-theater-collapsed is applied, so toggling Theater eases
both directions instead of popping — when collapsed the content is fully out of the way and the
visualizer is unobstructed. overflow:hidden clips the content during the transition; the large open
max-height accommodates any realistic content height (it is a ceiling, not a fixed size). The same
pattern drives the player-bar "now showing" band so the bar grows/shrinks smoothly too. */
.dd-theater-collapsible {
overflow: hidden;
max-height: 400vh;
opacity: 1;
transition: max-height 0.45s ease, opacity 0.3s ease;
}
.dd-theater-collapsed {
max-height: 0;
opacity: 0;
}
/* Honor reduced-motion: collapse still happens (it is layout, not decoration) but instantly, matching
the parallax precedent (transition-duration: 0). */
@media (prefers-reduced-motion: reduce) {
.dd-theater-collapsible {
transition-duration: 0ms;
}
}
.deepdrft-track-detail-meta {
display: flex;
flex-direction: row;