@if (hasPlayback()) {
    <section class="player-shell" aria-label="Inline player">
        <header class="player-shell__header">
            <div class="player-shell__title-row">
                <div class="player-shell__heading">
                    <div class="player-shell__eyebrow">
                        {{ 'PORTALS.NOW_PLAYING' | translate }}
                    </div>
                    <h3 class="player-shell__title" [matTooltip]="title()">
                        {{ title() }}
                        @if (episodeMetadataText(); as episodeText) {
                            <span class="player-shell__episode-meta">
                                · {{ episodeText }}
                            </span>
                        }
                    </h3>
                </div>
                <div class="player-shell__actions">
                    @if (allSources().length > 1) {
                        <app-vod-sources-chip
                            class="player-shell__sources"
                            [sources]="allSources()"
                            [count]="alternativeSources().length"
                            [matchKind]="sourcesMatchKind()"
                            [resumeLabel]="sourcesResumeLabel()"
                            [autoFailoverEnabled]="sourcesAutoFailoverEnabled()"
                            [autoFailoverSupported]="
                                sourcesAutoFailoverSupported()
                            "
                            [playbackLive]="sourcesPlaybackLive()"
                            (playRequested)="
                                alternativeSourceRequested.emit($event)
                            "
                            (pinRequested)="sourcePinRequested.emit($event)"
                            (checkRequested)="sourceCheckRequested.emit($event)"
                            (autoFailoverToggled)="
                                sourcesAutoFailoverToggled.emit($event)
                            "
                        />
                    }
                    <button
                        mat-button
                        type="button"
                        [cdkCopyToClipboard]="streamUrl()"
                        [matTooltip]="streamUrl()"
                        (click)="onCopied()"
                    >
                        <mat-icon>content_copy</mat-icon>
                        {{ 'PORTALS.COPY_STREAM_URL' | translate }}
                    </button>
                    <button
                        mat-stroked-button
                        type="button"
                        (click)="onClose()"
                    >
                        <mat-icon>close</mat-icon>
                        {{ 'PORTALS.CLOSE_PLAYER' | translate }}
                    </button>
                </div>
            </div>
        </header>

        <div
            class="player-shell__viewport"
            #stageViewport
            [class.player-shell__viewport--with-rail]="upNextRailVisible()"
        >
            @if (ambientEnabled()) {
                <div
                    class="player-shell__ambient"
                    aria-hidden="true"
                    [style.--ambient-image]="ambientImageStyle()"
                ></div>
            }
            <app-web-player-view
                [playbackSessionKey]="playbackSessionKey()"
                [streamUrl]="streamUrl()"
                [title]="title()"
                [mediaTitle]="playerMediaTitle()"
                [upNext]="playerUpNext()"
                [playback]="playback()"
                [volume]="volume()"
                [playerOverride]="playerOverride()"
                [startTime]="startTime()"
                [seriesNavigation]="seriesNavigation()"
                [alternativeSources]="alternativeSources()"
                (alternativeSourceRequested)="
                    alternativeSourceRequested.emit($event)
                "
                (sourceCheckRequested)="sourceCheckRequested.emit($event)"
                (playbackFailed)="playbackFailed.emit($event)"
                (timeUpdate)="onTimeUpdate($event)"
                (playbackEnded)="onPlaybackEnded()"
                (previousEpisodeRequested)="onPreviousEpisodeRequested()"
                (nextEpisodeRequested)="onNextEpisodeRequested()"
                (externalFallbackRequested)="
                    onExternalFallbackRequested($event)
                "
            />
            @if (upNextRailVisible()) {
                <app-up-next-rail
                    class="player-shell__rail"
                    [items]="upNextRailItems()"
                    (episodeSelected)="onUpNextEpisodeSelected($event)"
                />
            }
        </div>
    </section>
}

<!-- Stamped into the player's fullscreen side panel (FULLSCREEN_CHANNEL_PANEL):
     the series' seasons and episodes, picked through the same inline path as
     the Up Next rail so fullscreen survives the switch. -->
<ng-template #fullscreenEpisodePanel let-open="open" let-close="close">
    <app-fullscreen-episode-panel
        [seasons]="episodePanel.seasons()"
        [open]="open()"
        (seasonSelected)="episodePanelSeasonSelected.emit($event)"
        (episodeSelected)="onPanelEpisodeSelected($event, close)"
    />
</ng-template>