deepdrft/DeepDrftPublic.Client/Pages/MixDetail.razor

@page "/mixes/{EntryKey}"
@using DeepDrftPublic.Client.Controls
@using DeepDrftPublic.Client.Services
@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;

    @* 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">
        @* 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
           default header and meta regions are suppressed (ShowHeader/ShowMeta=false) and the share
           row stays off (ShowShareRow=false). *@
        <ReleaseDetailScaffold Title="@release.Title"
                               Artist="@release.Artist"
                               Track="@ViewModel.Track"
                               BackHref="/mixes"
                               BackLabel="All mixes"
                               ShowHeader="false"
                               ShowMeta="false"
                               ShowShareRow="false">
            <TopContent>
                @* The eight-knob band lives in its own full-width area below the back/lamp top row.
                   Phase 10 §4: the control is ALWAYS rendered; the lava-lamp toggle feeds its Visible
                   parameter, and the control itself @if-gates the knobs while holding the container's
                   reserved height — so content below never pops on toggle. The band mutates the shared
                   MixVisualizerControlState; the backdrop bridge pushes the dials. A knob drag does not
                   toggle it — the lamp's click does. *@
                <MixVisualizerControls Visible="@_controlsExpanded" />
            </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>
                @* 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. *@
                <ReleaseHeroOverlay Class="mix-hero"
                                    HeroImageKey="@release.ImagePath"
                                    PlaceholderIcon="@Icons.Material.Filled.Album"
                                    Title="@release.Title"
                                    Artist="@release.Artist"
                                    Genre="@release.Genre"
                                    ReleaseDate="@release.ReleaseDate">
                    <ShareContent>
                        @* Release-mode share: copies the canonical /mixes/{entryKey} URL, not a single track (§3b). *@
                        <SharePopover ReleaseEntryKey="@release.EntryKey" ReleaseMedium="@release.Medium" />
                    </ShareContent>
                    <PlayContent>
                        @if (ViewModel.Track is not null)
                        {
                            <PlayStateIcon Track="@ViewModel.Track" Size="Size.Large" Color="Color.Secondary" OnToggle="@PlayTrack" />
                        }
                    </PlayContent>
                </ReleaseHeroOverlay>
            </Hero>
        </ReleaseDetailScaffold>
      </MudContainer>
    </div>
}

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

    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }

    // The hero now carries the play affordance (the scaffold's header is suppressed), so the
    // play-toggle is wired here directly — mirroring SessionDetail. Toggle if this track is already
    // active, otherwise start a fresh stream.
    private async Task PlayTrack()
    {
        var track = ViewModel.Track;
        if (track is null || PlayerService is null) return;

        var isThisTrack = PlayerService.CurrentTrack?.Id == track.Id;
        if (isThisTrack && (PlayerService.IsPlaying || PlayerService.IsPaused))
        {
            await PlayerService.TogglePlayPause();
        }
        else
        {
            await PlayerService.SelectTrackStreaming(track);
        }
    }

    // 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;
}