@if (hasPlayback()) {
    <section class="player-shell" aria-label="Inline player">
        <header class="player-shell__header">
            <div class="player-shell__eyebrow">Now Playing</div>
            <div class="player-shell__title-row">
                <div class="player-shell__heading">
                    <h3 class="player-shell__title" [matTooltip]="title()">
                        {{ title() }}
                    </h3>
                    @if (episodeMetadataText(); as episodeText) {
                        <div class="player-shell__episode-meta">
                            {{ episodeText }}
                        </div>
                    }
                </div>
                <div class="player-shell__actions">
                    <button
                        mat-button
                        type="button"
                        [cdkCopyToClipboard]="streamUrl()"
                        [matTooltip]="streamUrl()"
                        (click)="onCopied()"
                    >
                        <mat-icon>content_copy</mat-icon>
                        Copy Stream URL
                    </button>
                    <button
                        mat-stroked-button
                        type="button"
                        (click)="onClose()"
                    >
                        <mat-icon>close</mat-icon>
                        Close Player
                    </button>
                </div>
            </div>
        </header>

        <div class="player-shell__viewport">
            <app-web-player-view
                [streamUrl]="streamUrl()"
                [title]="title()"
                [playback]="playback()"
                [startTime]="startTime()"
                [seriesNavigation]="seriesNavigation()"
                (timeUpdate)="onTimeUpdate($event)"
                (playbackEnded)="onPlaybackEnded()"
                (previousEpisodeRequested)="onPreviousEpisodeRequested()"
                (nextEpisodeRequested)="onNextEpisodeRequested()"
                (externalFallbackRequested)="
                    onExternalFallbackRequested($event)
                "
            />
        </div>
    </section>
}