deepdrft/DeepDrftPublic.Client/Pages/MixDetail.razor

@page "/mixes/{EntryKey}"
@using DeepDrftPublic.Client.Controls
@inherits ReleaseDetailBase

<PageTitle>@(ViewModel.Release?.Title ?? "Mix") - DeepDrft</PageTitle>

@if (ViewModel.IsLoading)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-masthead">
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="70%" Height="56px" />
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="40%" Height="32px" />
        </div>
    </div>
}
else if (ViewModel.NotFound || ViewModel.Release is null)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-masthead">
            <MudText Typo="Typo.h4" Align="Align.Center">Mix not found.</MudText>
            <div class="d-flex justify-center mt-4">
                <MudButton Href="/mixes"
                           Variant="Variant.Text"
                           StartIcon="@Icons.Material.Filled.ArrowBack">
                    All mixes
                </MudButton>
            </div>
        </div>
    </div>
}
else
{
    var release = ViewModel.Release;
    var hasGenre = release.Genre is not null;
    var hasDate = release.ReleaseDate is not null;

    @* Full-page waveform sits behind the scaffold content. The scaffold's container is positioned
       above it via the mix-detail-foreground stacking context. TrackId lets the visualizer couple to
       playback only when the player is on this mix's track. *@
    <MixWaveformVisualizer ReleaseEntryKey="@release.EntryKey" TrackId="@ViewModel.Track?.Id" />

    <div class="mix-detail-foreground">
      <MudContainer MaxWidth="MaxWidth.Large" Class="mix-detail-container">
        <ReleaseDetailScaffold Title="@release.Title"
                               Artist="@release.Artist"
                               Track="@ViewModel.Track"
                               BackHref="/mixes"
                               BackLabel="All mixes"
                               ShowMeta="@(hasGenre || hasDate)"
                               ShowShareRow="false">
            <TopContent>
                @* The seven-knob band lives in its own full-width area below the back/lamp top row.
                   Blazor — not CSS — controls its visibility: it is rendered only while the lava-lamp is
                   on, so when off it is not in the DOM at all. No background, no animation, no reflow of
                   the row above. The band mutates the shared MixVisualizerControlState; the backdrop
                   bridge pushes the dials. A knob drag does not toggle it — the lamp's click does. *@
                @if (_controlsExpanded)
                {
                    <MixVisualizerControls />
                }
            </TopContent>
            <TopRightAction>
                @* Lava-lamp button top-right, across from the back link. Toggles the knob band below the
                   row. The icon swaps to its FILLED variant while the band is shown (§7f / Part B). *@
                <MudTooltip Text="Visualizer settings">
                    <MudIconButton Icon="@(_controlsExpanded ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
                                   Size="Size.Large"
                                   Color="Color.Secondary"
                                   Disabled="@(!RendererInfo.IsInteractive)"
                                   OnClick="@ToggleSettings"
                                   aria-label="Visualizer settings"
                                   aria-expanded="@_controlsExpanded" />
                </MudTooltip>
            </TopRightAction>
            <Hero>
                <div class="mix-detail-cover">
                    @if (!string.IsNullOrEmpty(release.ImagePath))
                    {
                        <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
                                  Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath)}');")" />
                    }
                    else
                    {
                        <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
                            <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
                        </MudPaper>
                    }
                </div>
            </Hero>
            <MetaContent>
                @if (hasGenre)
                {
                    <div>
                        <MudChip T="string" Variant="Variant.Outlined" Color="Color.Tertiary" Class="deepdrft-genre-chip">
                            @release.Genre
                        </MudChip>
                    </div>
                }
                @if (hasDate)
                {
                    <div>
                        <MudText Typo="Typo.overline">Released</MudText>
                        <MudText Typo="Typo.body1">@release.ReleaseDate!.Value.ToString("MMMM yyyy")</MudText>
                    </div>
                }
            </MetaContent>
            <BodyContent>
                @* Release-mode share: copies the canonical /mixes/{entryKey} URL, not a single track (§3b). *@
                <div class="deepdrft-share-row">
                    <SharePopover ReleaseEntryKey="@release.EntryKey" ReleaseMedium="@release.Medium" />
                </div>
            </BodyContent>
        </ReleaseDetailScaffold>
      </MudContainer>
    </div>
}

@code {
    protected override string PersistKey => "mix-detail";

    // Lava-lamp knob-band visibility. Pure presentation over MixVisualizerControlState — gates whether
    // the seven-knob MixVisualizerControls is rendered into the TopContent band; toggling it touches no
    // control value or bridge push. The lava-lamp button's filled/outline glyph is driven off this flag.
    private bool _controlsExpanded;

    private void ToggleSettings() => _controlsExpanded = !_controlsExpanded;
}