import { type ReadSignal, type StoreContext } from 'maverick.js';
import { Component, type HTMLCustomElement } from 'maverick.js/element';
import type { DOMEvent } from 'maverick.js/std';
import { type MediaContext } from '../../core/api/context';
import { SliderStoreFactory } from './slider/api/store';
declare global {
interface MaverickElements {
'media-slider-video': MediaSliderVideoElement;
}
}
/**
* Used to load a low-resolution video to be displayed when the user is hovering over or dragging
* the time slider. The preview video will automatically be updated to be in-sync with the current
* preview position, so ensure it has the same length as the original media (i.e., same duration).
*
* @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-video}
* @example
* ```html
*
*
*
* ```
*/
export declare class SliderVideo extends Component {
static el: import("maverick.js/element").CustomElementDefinition;
protected _media: MediaContext;
protected _slider: StoreContext;
protected _video: HTMLVideoElement | null;
protected _canPlay: import("maverick.js").WriteSignal;
protected _error: import("maverick.js").WriteSignal;
protected _src: ReadSignal;
protected _hidden: ReadSignal;
protected onAttach(): void;
protected onConnect(): void;
render(): import("maverick.js").JSX.Element;
protected _getSrc(): string | null | undefined;
protected _isLoading(): boolean;
protected _isHidden(): boolean;
protected _onSrcChange(): void;
protected _onCanPlay(event?: Event): void;
protected _onError(event?: Event): void;
protected _onTimeUpdate(): void;
protected _setVideo(el: HTMLVideoElement | null): void;
}
export interface MediaSliderVideoElement extends HTMLCustomElement {
}
export interface SliderVideoAPI {
props: SliderVideoProps;
events: SliderVideoEvents;
}
export interface SliderVideoProps {
/**
* The URL of a media resource to use.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src}
*/
src: string | undefined;
}
export interface SliderVideoEvents {
'can-play': SliderVideoCanPlayEvent;
error: SliderVideoErrorEvent;
}
/**
* Fired when the user agent can play the media, but estimates that **not enough** data has been
* loaded to play the media up to its end without having to stop for further buffering of content.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event}
*/
export interface SliderVideoCanPlayEvent extends DOMEvent {
/** The `canplay` media event. */
trigger?: Event;
}
/**
* Fired when media loading or playback has encountered any issues (for example, a network
* connectivity problem). The event detail contains a potential message containing more
* information about the error (empty string if nothing available), and a code that identifies
* the general type of error that occurred.
*
* @see {@link https://html.spec.whatwg.org/multipage/media.html#error-codes}
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event}
*/
export interface SliderVideoErrorEvent extends DOMEvent {
/** The `error` media event. */
trigger: Event;
}