feat(public): add Theater Mode to release detail pages
Toggle left of the lava popover hides release content so the visualizer fills the surface; player bar grows to carry the playing release's cover, title, and share. State on WaveformVisualizerControlState; pages and bar observe it.
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
|
||||
@using DeepDrftModels.DTOs
|
||||
@using DeepDrftPublic.Client.Common
|
||||
@using DeepDrftPublic.Client.Controls
|
||||
|
||||
@* "Now showing" block surfaced in the player bar when Theater Mode is ON (Phase 20 §5/§7). Theater
|
||||
hides the release page, so the bar carries the release identity the page would have shown: cover art,
|
||||
the release title linked to its detail page, and a release-mode share. Purely presentational — it owns
|
||||
no player logic and no Theater state; AudioPlayerBar mounts it only when state.TheaterMode &&
|
||||
CurrentTrack?.Release is not null, so Release is non-null here.
|
||||
|
||||
Theming is all reuse (§8, zero new CSS): the cover reuses the deepdrft-track-detail-cover-art /
|
||||
-placeholder idiom; the share glyph goes green-accent in both themes via .dd-accent-icon; surface and
|
||||
text come from the bar's own .player-surface and the .now-showing-* classes in the global sheet, which
|
||||
bind the theme-aware --deepdrft-page-* aliases. *@
|
||||
|
||||
<div class="now-showing">
|
||||
<div class="now-showing-cover">
|
||||
@if (!string.IsNullOrEmpty(Release.ImagePath))
|
||||
{
|
||||
<div class="deepdrft-track-detail-cover-art now-showing-cover-art"
|
||||
style="@($"background-image: url('api/image/{Uri.EscapeDataString(Release.ImagePath)}');")"></div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary now-showing-cover-placeholder">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<a href="@ReleaseRoutes.DetailHref(Release)" class="now-showing-title-link">
|
||||
<MudText Typo="Typo.subtitle2" Class="now-showing-title text-truncate">
|
||||
@Release.Title
|
||||
</MudText>
|
||||
</a>
|
||||
|
||||
<div class="dd-accent-icon now-showing-share">
|
||||
<SharePopover ReleaseEntryKey="@Release.EntryKey" ReleaseMedium="@Release.Medium" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>The current playing track's release. Non-null by the bar's mount gate.</summary>
|
||||
[Parameter, EditorRequired] public ReleaseDto Release { get; set; } = default!;
|
||||
}
|
||||
Reference in New Issue
Block a user