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

Build awesome media experiences on the web.

import { Component, ComponentInstance, type HTMLCustomElement } from 'maverick.js/element';
import type { VTTCue } from 'media-captions';
import { type MediaContext } from '../core/api/context';
declare global {
    interface MaverickElements {
        'media-thumbnail': MediaThumbnailElement;
    }
}
/**
 * Used to load and display a preview thumbnail at the given `time`.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/display/thumbnail}
 * @example
 * ```html
 * <media-player thumbnails="https://media-files.vidstack.io/thumbnails.vtt">
 *   <!-- ... -->
 *   <media-thumbnail time="10"></media-thumbnail>
 * </media-player>
 * ```
 */
export declare class Thumbnail extends Component<ThumbnailAPI> {
    static el: import("maverick.js/element").CustomElementDefinition<ThumbnailAPI>;
    protected _media: MediaContext;
    protected _img: HTMLImageElement | null;
    protected _coords: ThumbnailCoords | null;
    protected _styleResets: (() => void)[];
    protected _src: import("maverick.js").WriteSignal<string>;
    protected _loaded: import("maverick.js").WriteSignal<boolean>;
    protected _activeCue: import("maverick.js").WriteSignal<VTTCue | null>;
    constructor(instance: ComponentInstance<ThumbnailAPI>);
    protected onAttach(): void;
    protected onConnect(): void;
    protected _onLoadStart(): void;
    protected _onLoaded(): void;
    protected _isLoading(): boolean;
    protected _isHidden(): boolean;
    protected _onFindActiveCue(): void;
    protected _onImgRef(el: HTMLImageElement): void;
    protected _onResolveThumbnail(): void;
    protected _resolveThumbnailSrc(baseURL: string, src: string): string;
    protected _resolveThumbnailCoords(coords: string): ThumbnailCoords | null;
    protected _requestResize: () => void;
    protected _resize(): void;
    protected _style(el: HTMLElement, name: string, value: string): void;
    protected _resetStyles(): void;
    render(): import("maverick.js").JSX.Element;
}
export interface ThumbnailAPI {
    props: ThumbnailProps;
}
export interface ThumbnailProps {
    /**
     * Finds, loads, and displays the first active thumbnail cue that's start/end times are in range.
     */
    time: number;
}
export interface ThumbnailCoords {
    w: number;
    h: number;
    x: number;
    y: number;
}
export interface MediaThumbnailElement extends HTMLCustomElement<Thumbnail> {
}