iptvnator/libs/ui/components/src/lib/content-hero/content-hero.component.html

<!-- Hero Section with Backdrop -->
<!-- The skeleton keeps the stage height: whether the title has a backdrop
     is unknown until it loads, and most detail pages do. -->
<section
    class="hero"
    [class.hero--compact]="layout() === 'compact' && !isLoading()"
>
    @if (errorMessage()) {
        <div class="hero__content hero__error">
            <mat-icon class="error-icon">cloud_off</mat-icon>
            <h2 class="error-title">{{ errorMessage() }}</h2>
            <ng-content select="[hero-error-actions]"></ng-content>
        </div>
    } @else if (isLoading()) {
        <!-- Placeholders at the loaded hero's geometry, bottom-aligned like
             it: eyebrow, title, chips, two description lines, the action
             row and the credits. -->
        <div
            class="hero__content hero__content--skeleton"
            data-test-id="hero-skeleton"
            aria-hidden="true"
        >
            <div class="poster">
                <span class="skeleton skeleton--poster"></span>
            </div>
            <div class="details">
                <span class="skeleton skeleton--kind"></span>
                <span class="skeleton skeleton--title"></span>
                <span class="details__tags">
                    <span class="skeleton skeleton--chip"></span>
                    <span class="skeleton skeleton--chip"></span>
                    <span class="skeleton skeleton--chip"></span>
                </span>
                <span class="skeleton-lines">
                    <span class="skeleton skeleton--line"></span>
                    <span class="skeleton skeleton--line"></span>
                </span>
                <span class="action-buttons">
                    <span class="skeleton skeleton--primary"></span>
                    <span class="skeleton skeleton--icon-button"></span>
                    <span class="skeleton skeleton--icon-button"></span>
                </span>
                <span class="skeleton-lines skeleton-lines--meta">
                    <span class="skeleton skeleton--line"></span>
                    <span class="skeleton skeleton--line"></span>
                </span>
            </div>
        </div>
    } @else {
        <!-- Backdrop Image -->
        <div
            class="hero__backdrop"
            [class.hero__backdrop--blurred]="usesPosterBackdrop()"
            [style.backgroundImage]="
                backdropImageUrl() ? null : fallbackBackdropBackground()
            "
        >
            @if (backdropImageUrl(); as backdropImage) {
                <img
                    class="hero__backdrop-image"
                    [src]="backdropImage"
                    (error)="onBackdropError()"
                    alt=""
                    aria-hidden="true"
                />
            }
        </div>

        @if (trailerBackdropUrl(); as trailerUrl) {
            <app-hero-trailer-backdrop
                #trailer
                class="hero__trailer"
                [embedUrl]="trailerUrl"
                [title]="formattedTitle()"
            />
            <!-- Above the content layer, or the content box would take the clicks -->
            @if (trailer.playing()) {
                <button
                    type="button"
                    class="hero__trailer-mute"
                    [matTooltip]="
                        (trailer.muted()
                            ? 'PORTALS.DETAIL.TRAILER_UNMUTE'
                            : 'PORTALS.DETAIL.TRAILER_MUTE'
                        ) | translate
                    "
                    [attr.aria-label]="
                        (trailer.muted()
                            ? 'PORTALS.DETAIL.TRAILER_UNMUTE'
                            : 'PORTALS.DETAIL.TRAILER_MUTE'
                        ) | translate
                    "
                    [attr.aria-pressed]="!trailer.muted()"
                    data-test-id="trailer-backdrop-mute"
                    (click)="trailer.toggleMute()"
                >
                    <mat-icon aria-hidden="true">{{
                        trailer.muted() ? 'volume_off' : 'volume_up'
                    }}</mat-icon>
                </button>
            }
        }

        <!-- Scrim: strong on the text side, fading into the page below -->
        <div class="hero__vignette"></div>

        <!-- Hero Content -->
        <div class="hero__content">
            <!-- Poster Card -->
            <div class="poster">
                @if (posterUrl() && !posterError()) {
                    <img
                        class="poster__image"
                        [src]="posterUrl()"
                        (error)="onPosterError()"
                        alt=""
                    />
                } @else {
                    <div
                        class="poster__placeholder"
                        [style.backgroundImage]="fallbackPosterBackground()"
                    >
                        <mat-icon class="poster__placeholder-icon"
                            >movie</mat-icon
                        >
                        <span class="poster__placeholder-text">{{
                            formattedTitle()
                        }}</span>
                    </div>
                }
            </div>

            <div class="details">
                @if (kindLabel(); as kind) {
                    <p class="details__kind" data-test-id="detail-kind">
                        {{ kind }}
                    </p>
                }

                <h1 class="details__title">{{ formattedTitle() }}</h1>

                <!-- Tags Slot -->
                <div class="details__tags">
                    <ng-content select="[hero-tags]"></ng-content>
                </div>

                <!-- Description -->
                @if (description()) {
                    <p
                        #descriptionEl
                        class="details__description"
                        [class.details__description--expanded]="
                            isDescriptionExpanded()
                        "
                    >
                        {{ description() }}
                    </p>
                    @if (hasDescriptionOverflow() || isDescriptionExpanded()) {
                        <button
                            type="button"
                            class="details__description-toggle"
                            (click)="toggleDescription()"
                            [attr.aria-expanded]="isDescriptionExpanded()"
                        >
                            <span>{{
                                (isDescriptionExpanded()
                                    ? 'SHOW_LESS'
                                    : 'SHOW_MORE'
                                ) | translate
                            }}</span>
                            <mat-icon aria-hidden="true">
                                {{
                                    isDescriptionExpanded()
                                        ? 'expand_less'
                                        : 'expand_more'
                                }}
                            </mat-icon>
                        </button>
                    }
                }

                @if (progress() !== null) {
                    <span
                        class="details__progress"
                        role="progressbar"
                        aria-valuemin="0"
                        aria-valuemax="100"
                        [attr.aria-valuenow]="progress()"
                        data-test-id="detail-progress"
                    >
                        <i [style.width.%]="progress()"></i>
                    </span>
                }

                <!-- Action Buttons Slot -->
                <div class="action-buttons">
                    <ng-content select="[hero-actions]"></ng-content>
                </div>

                <!-- Credits / metadata slot -->
                <div class="details__meta">
                    <ng-content select="[hero-meta]"></ng-content>
                </div>
            </div>
        </div>
    }
</section>