deepdrft/DeepDrftPublic.Client/Pages/SessionDetail.razor

@page "/sessions/{EntryKey}"
@using DeepDrftModels.DTOs
@using DeepDrftPublic.Client.Controls
@using DeepDrftPublic.Client.Services
@inherits ReleaseDetailBase

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

@if (ViewModel.IsLoading)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-cover">
            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="320px" />
        </div>
        <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">Session not found.</MudText>
            <div class="d-flex justify-center mt-4">
                <MudButton Href="/sessions"
                           Variant="Variant.Text"
                           StartIcon="@Icons.Material.Filled.ArrowBack">
                    All sessions
                </MudButton>
            </div>
        </div>
    </div>
}
else
{
    var release = ViewModel.Release;
    var heroKey = release.SessionMetadata?.HeroImageEntryKey;
    // Hero image precedence: the session's dedicated hero, then the release cover, then a placeholder.
    var heroImage = !string.IsNullOrEmpty(heroKey) ? heroKey : release.ImagePath;
    // Show the cover thumbnail only when it differs from what the hero displays. When there is no
    // dedicated hero, the hero already falls back to release.ImagePath — rendering the cover too
    // would duplicate the same image.
    var showCover = !string.IsNullOrEmpty(release.ImagePath) && release.ImagePath != heroImage;
    var hasGenre = release.Genre is not null;
    var hasDate = release.ReleaseDate is not null;

    <MudContainer MaxWidth="MaxWidth.Large" Class="session-detail-page">

        <MudLink Href="/sessions" Typo="Typo.body2" Class="deepdrft-track-detail-back">
            &larr; All sessions
        </MudLink>

        @* The hero is the positioning context for every overlay row; the gradient shim and the
           top/bottom overlays are absolutely positioned children of this wrapper. *@
        <div class="session-hero">
            @if (!string.IsNullOrEmpty(heroImage))
            {
                <MudPaper Elevation="0" Square="true" Class="session-hero-img"
                          Style="@($"background-image: url('api/image/{Uri.EscapeDataString(heroImage)}');")" />
            }
            else
            {
                <MudPaper Elevation="0" Square="true" Class="session-hero-placeholder deepdrft-gradient-soft-secondary">
                    <MudIcon Icon="@Icons.Material.Filled.Piano" Color="Color.Primary" />
                </MudPaper>
            }

            @* Darkening shim so overlaid text/controls stay legible over any image. *@
            <div class="session-hero-shim"></div>

            @* Top overlay: secondary details (genre, release date) and the share affordance. *@
            <div class="session-hero-top">
                <MudStack Row AlignItems="AlignItems.Center" Spacing="3" Class="session-hero-meta">
                    @if (hasGenre)
                    {
                        <MudChip T="string" Variant="Variant.Outlined" Class="session-overlay-chip">
                            @release.Genre
                        </MudChip>
                    }
                    @if (hasDate)
                    {
                        <div class="session-overlay-date">
                            <span class="session-overlay-label">Released</span>
                            <span class="session-overlay-value">@release.ReleaseDate!.Value.ToString("MMMM yyyy")</span>
                        </div>
                    }
                </MudStack>
                @* Release-mode share: copies the canonical /sessions/{entryKey} URL, not a single track (§3b). *@
                <div class="session-hero-share">
                    <SharePopover ReleaseEntryKey="@release.EntryKey" ReleaseMedium="@release.Medium" />
                </div>
            </div>

            @* Bottom overlay: cover thumbnail, title/artist, and the play affordance in one row. *@
            <div class="session-hero-bottom">
                <MudStack Row AlignItems="AlignItems.Center" Spacing="4" Class="session-hero-bottom-row">
                    @if (showCover)
                    {
                        <div class="session-cover-thumb">
                            <MudPaper Elevation="0" Square="true" Class="deepdrft-track-detail-cover-art"
                                      Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath!)}');")" />
                        </div>
                    }
                    <div class="session-hero-titles">
                        <div class="session-overlay-title">@release.Title</div>
                        <div class="session-overlay-artist">@release.Artist</div>
                    </div>
                    @if (ViewModel.Track is not null)
                    {
                        <div class="session-hero-play">
                            <PlayStateIcon Track="@ViewModel.Track" Size="Size.Large" Color="Color.Secondary" OnToggle="@PlayTrack" />
                        </div>
                    }
                </MudStack>
            </div>
        </div>

    </MudContainer>
}

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

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

    // Mirrors the play-toggle wiring the shared scaffold owns. Session detail composes the player
    // affordance directly (it diverges from ReleaseDetailScaffold for the overlay layout), so the
    // toggle logic lives here: 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);
        }
    }
}