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
*
*
*
*
* ```
*/
export declare class Thumbnail extends Component {
static el: import("maverick.js/element").CustomElementDefinition;
protected _media: MediaContext;
protected _img: HTMLImageElement | null;
protected _coords: ThumbnailCoords | null;
protected _styleResets: (() => void)[];
protected _src: import("maverick.js").WriteSignal;
protected _loaded: import("maverick.js").WriteSignal;
protected _activeCue: import("maverick.js").WriteSignal;
constructor(instance: ComponentInstance);
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 {
}