vidstack/dist/types/player/ui/poster.d.ts

Build awesome media experiences on the web.

import { type ReadSignal } from 'maverick.js';
import { Component, type HTMLCustomElement } from 'maverick.js/element';
import { type MediaContext } from '../core/api/context';
declare global {
    interface MaverickElements {
        'media-poster': MediaPosterElement;
    }
}
/**
 * Loads and displays the current media poster image. By default, the media provider's
 * loading strategy is respected meaning the poster won't load until the media can.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/layout/poster}
 * @example
 * ```html
 * <media-player poster="...">
 *   <media-poster alt="Large alien ship hovering over New York."></media-poster>
 * </media-player>
 * ```
 */
export declare class Poster extends Component<PosterAPI> {
    static el: import("maverick.js/element").CustomElementDefinition<PosterAPI>;
    protected _media: MediaContext;
    protected _imgLoading: import("maverick.js").WriteSignal<boolean>;
    protected _imgError: import("maverick.js").WriteSignal<boolean>;
    protected _imgSrc: ReadSignal<string | null>;
    protected _imgAlt: ReadSignal<string | null | undefined>;
    protected onAttach(el: HTMLElement): void;
    protected onConnect(el: HTMLElement): void;
    protected _isHidden(): boolean;
    protected _getImgSrc(): string | null;
    protected _getImgAlt(): string | null | undefined;
    protected _onLoadStart(): void;
    protected _onLoad(): void;
    protected _onError(): void;
    render(): import("maverick.js").JSX.Element;
}
export interface PosterAPI {
    props: PosterProps;
}
export interface PosterProps {
    /**
     * ♿ **ARIA:** Provides alternative information for a poster image if a user for some reason
     * cannot view it.
     */
    alt: string | undefined;
}
export interface MediaPosterElement extends HTMLCustomElement<Poster> {
}