@aidenlx/player/types/ui/poster/PosterElement.d.ts

Headless web components that make integrating media on the a web a breeze.

import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
import { MediaRemoteControl } from '../../media';
/**
 * Loads and displays the current media poster image. By default, the media provider's
 * loading strategy is respected, otherwise you can specify `eager` or `lazy`.
 *
 * 💡 The following img attributes are applied:
 *
 * - `img-loading`: When the poster image is in the process of being downloaded by the browser.
 * - `img-loaded`: When the poster image has successfully loaded.
 * - `img-error`: When the poster image has failed to load.
 *
 * @tagname vds-poster
 * @csspart img - The img element.
 * @example
 * ```html
 * <vds-media-ui>
 *   <vds-poster
 *     alt="Large alien ship hovering over New York."
 *   ></vds-poster>
 * </vds-media-ui>
 * ```
 * @example
 * ```css
 * vds-poster {
 *   position: absolute;
 *   top: 0;
 *   left: 0;
 *   width: 100%;
 *   height: 100%;
 * }
 * ```
 */
export declare class PosterElement extends LitElement {
    static get styles(): CSSResultGroup;
    constructor();
    protected __src?: string;
    protected __canLoad: boolean;
    /**
     * The URL of the current poster resource.
     *
     * @default undefined
     */
    get src(): string | undefined;
    /**
     * Whether the poster should be loaded immediately, or once it has entered the viewport.
     * By default it is `undefined`, in which it falls back to respecting the loading strategy
     * defined on the media provider element.
     *
     * @default undefined
     */
    loading?: 'eager' | 'lazy';
    /**
     * ♿ **ARIA:** Provides alternative information for a poster image if a user for some reason
     * cannot view it.
     *
     * @default undefined
     */
    alt?: string;
    protected _mediaRemoteControl: MediaRemoteControl;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected render(): TemplateResult;
    protected _setImgLoadingAttr(): void;
    protected _handleImgLoad(): void;
    protected _handleImgError(): void;
    protected _handleCanLoadChange(canLoad: boolean): void;
}
//# sourceMappingURL=PosterElement.d.ts.map