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

Build awesome media experiences on the web.

import { Component, type HTMLCustomElement } from 'maverick.js/element';
import { type MediaContext } from '../core/api/context';
declare global {
    interface MaverickElements {
        'media-gesture': MediaGestureElement;
    }
}
/**
 * This component enables actions to be performed on the media based on user gestures.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/gesture}
 * @example
 * ```html
 * <media-player>
 *   <media-outlet>
 *     <media-gesture event="pointerup" action="toggle:paused"></media-gesture>
 *     <media-gesture
 *       event="dblpointerup"
 *       action="toggle:fullscreen"
 *     ></media-gesture>
 *   </media-outlet>
 * </media-player>
 * ```
 */
export declare class Gesture extends Component<GestureAPI> {
    static el: import("maverick.js/element").CustomElementDefinition<GestureAPI>;
    protected _media: MediaContext;
    protected _outlet: HTMLElement | null;
    protected onAttach(): void;
    protected onConnect(): void;
    protected _attachListener(): void;
    protected _presses: number;
    protected _pressTimerId: number;
    protected _acceptEvent(event: Event): void;
    protected _handleEvent(event: Event): void;
    /** Validate event occurred in gesture bounds. */
    protected _inBounds(event: Event): boolean;
    /** Validate gesture has the highest z-index in this triggered group. */
    protected _isTopLayer(): boolean;
    protected _performAction(action: string | undefined, trigger: Event): void;
}
export interface GestureAPI {
    props: GestureProps;
}
export interface GestureProps {
    /**
     * The DOM event type that will trigger this gesture. It can be any valid DOM event type. Any
     * event can be prefixed with `dbl` to ensure it occurs twice in succession (max 200ms gap).
     *
     * @example 'pointerup'
     * @example 'dblpointerup'
     * @example 'mouseleave'
     */
    event: GestureEventType | undefined;
    /**
     * An action describes the type of media request event that will be dispatched, which will
     * ultimately perform some operation on the player.
     *
     * @example 'play'
     * @example 'seek:30'
     * @example 'seek:-30'
     * @example 'toggle:paused'
     */
    action: GestureAction | undefined;
}
export type GestureEventType = keyof HTMLElementEventMap | `dbl${keyof HTMLElementEventMap}`;
export type GestureAction = 'play' | 'pause' | `seek:${number}` | `toggle:${'paused' | 'muted' | 'fullscreen' | 'user-idle'}`;
export interface MediaGestureElement extends HTMLCustomElement<Gesture> {
}