import * as React$1 from 'react';
import { Playback } from '@liqvid/playback';
export { Playback } from '@liqvid/playback';
import { EventEmitter } from 'events';
import StrictEventEmitter from 'strict-event-emitter-types';
import { Keymap } from '@liqvid/keymap';
export { Keymap as KeyMap, Keymap } from '@liqvid/keymap';
import * as animation from '@liqvid/utils/animation';
import { onDrag, anyHover, onClick as onClick$1 } from '@liqvid/utils/interaction';
import * as json from '@liqvid/utils/json';
import * as misc from '@liqvid/utils/misc';
import * as react from '@liqvid/utils/react';
import * as replayData from '@liqvid/utils/replay-data';
export { ReplayData } from '@liqvid/utils/replay-data';
import * as svg from '@liqvid/utils/svg';
import * as time from '@liqvid/utils/time';
import { useKeymap } from '@liqvid/keymap/react';
export { KeymapContext, useKeymap } from '@liqvid/keymap/react';
import { usePlayback, useTime } from '@liqvid/playback/react';
export { PlaybackContext, usePlayback, useTime } from '@liqvid/playback/react';

type Marker<M extends string = string> = [M, number, number];
interface ScriptEvents {
    markerupdate: number;
}
declare const Script_base: new () => StrictEventEmitter<EventEmitter, ScriptEvents>;
declare class Script<M extends string = string> extends Script_base {
    /** The underlying {@link Playback} instance. */
    playback: Playback;
    /** The array of markers, in the form [name, startTime, endTime]. */
    markers: Marker<M>[];
    /** Index of the active marker. */
    markerIndex: number;
    constructor(markers: readonly (readonly [M, number | string, number | string] | readonly [M, number | string])[]);
    /** @deprecated */
    get hub(): this;
    /** Name of the active marker. */
    get markerName(): string;
    /** Seek playback to the previous marker. */
    back(): void;
    /** Advance playback to the next marker. */
    forward(): void;
    /**
     * Returns the first marker with the given name.
     * @throws {Error} If no marker named `name` exists.
     */
    markerByName(name: string): Marker;
    /**
     * Returns the first index of a marker named `name`.
     * @throws {Error} If no marker named `name` exists.
     */
    markerNumberOf(name: string): number;
    /** If `start` is a string, returns the starting time of the marker with that name. Otherwise, returns `start`. */
    parseStart(start: number | string): number;
    /** If `end` is a string, returns the ending time of the marker with that name. Otherwise, returns `end`. */
    parseEnd(end: number | string): number;
    /** Update marker */
    __updateMarker(t: number): void;
}

interface ThumbData {
    /**
     * Number of columns per thumbnail sheet.
     * @default 5
     */
    cols?: number;
    /**
     * Number of rows per thumbnail sheet.
     * @default 5
     */
    rows?: number;
    /**
     * Width of individual thumbnails.
     * @default 160
     */
    width?: number;
    /**
     * Height of individual thumbnails.
     * @default 100
     */
    height?: number;
    /**
     * How many seconds between thumbnails.
     * @default 4
     */
    frequency?: number;
    /** URL pattern for thumbnails. Must include "%s". */
    path: string;
    /** Points of interest in the video to highlight. */
    highlights?: VideoHighlight[];
}
interface VideoHighlight {
    time: number;
    title: string;
}

declare function ScrubberBar(props: {
    thumbs: ThumbData;
}): React$1.JSX.Element;

interface PlayerEvents {
    canplay: void;
    canplaythrough: void;
    canvasClick: void;
}
interface Props$2 extends React$1.HTMLAttributes<HTMLDivElement> {
    controls?: JSX.Element | JSX.Element[];
    playback?: Playback;
    script?: Script;
    thumbs?: ThumbData;
}
declare class Player extends React$1.PureComponent<Props$2> {
    /**
     * Liqvid analogue of the [`canplay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event) event.
     * This can be used to wait for Audio or Video files to load. You can also use {@link obstruct} to add custom loaders.
     */
    canPlay: Promise<void>;
    /**
     * Liqvid analogue of the [`canplaythrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event) event.
     * This can be used to wait for Audio or Video files to load. You can also use {@link obstruct} to add custom loaders.
     */
    canPlayThrough: Promise<void>;
    /** The {@link HTMLDivElement `<div>`} where content is attached (separate from controls). */
    canvas: HTMLDivElement;
    /** Whether keyboard controls are currently being handled. */
    captureKeys: boolean;
    hub: StrictEventEmitter<EventEmitter, PlayerEvents>;
    /** {@link Keymap} attached to the player */
    keymap: Keymap;
    /** {@link Playback} attached to the player */
    playback: Playback;
    /** {@link Script} attached to the player */
    script: Script;
    buffers: Map<HTMLMediaElement, [number, number][]>;
    private __canPlayTasks;
    private __canPlayThroughTasks;
    private dag;
    /** {@link React.Context} used to access ambient Player */
    static Context: React$1.Context<Player>;
    /**
     * Symbol to access the {@link Player} instance attached to a DOM element
     *
     * `player.canvas.parentElement[Player.symbol] === player`
     */
    static symbol: symbol;
    /** Default controls appearing on the left */
    static defaultControlsLeft: React$1.JSX.Element;
    /** Default controls appearing on the right */
    static defaultControlsRight: React$1.JSX.Element;
    static defaultProps: {
        controls: React$1.JSX.Element;
        style: {};
    };
    constructor(props: Props$2);
    componentDidMount(): void;
    private updateTree;
    private canvasClick;
    onMouseUp(e: React$1.MouseEvent<HTMLDivElement>): void;
    static allowScroll(e: React$1.TouchEvent | TouchEvent): void;
    /**
     * Prevent canvas clicks from pausing the video.
     * @param e Click event on video canvas
     * @deprecated Use data-affords="click" instead
     */
    static preventCanvasClick(e: MouseEvent | React$1.MouseEvent): void;
    /** Suspends keyboard controls so that components can receive keyboard input. */
    suspendKeyCapture(): void;
    /** Resumes keyboard controls. */
    resumeKeyCapture(): void;
    /** @deprecated */
    ready(): void;
    /**
     * Reparse a section of the document for `during()` and `from()`
     * @param node Element to reparse
     */
    reparseTree(node: HTMLElement | SVGElement): void;
    registerBuffer(elt: HTMLMediaElement): void;
    unregisterBuffer(elt: HTMLMediaElement): void;
    updateBuffer(elt: HTMLMediaElement, buffers: [number, number][]): void;
    /**
     * Obstruct {@link canPlay} or {@link canPlayThrough} events
     * @param event Which event type to obstruct
     * @param task Promise to append
     */
    obstruct(event: "canplay" | "canplaythrough", task: Promise<unknown>): void;
    render(): React$1.JSX.Element;
}

interface Props$1 extends React$1.HTMLAttributes<HTMLMediaElement> {
    obstructCanPlay?: boolean;
    obstructCanPlayThrough?: boolean;
    start?: number;
}
declare class Media extends React$1.PureComponent<Props$1, Record<string, never>, Player> {
    protected playback: Playback;
    protected player: Player;
    protected domElement: HTMLMediaElement;
    /** When the media element should start playing. */
    start: number;
    static defaultProps: {
        obstructCanPlay: boolean;
        obstructCanPlayThrough: boolean;
    };
    static contextType: React$1.Context<Player>;
    constructor(props: Props$1, context: Player);
    componentDidMount(): void;
    componentWillUnmount(): void;
    get end(): number;
    pause(): void;
    play(): Promise<void>;
    onPlay(): void;
    onRateChange(): void;
    onSeek(t: number): void;
    onTimeUpdate(t: number): void;
    onVolumeChange(): void;
    onDomPlay(): void;
    onDomPause(): void;
}

/** Liqvid equivalent of {@link HTMLAudioElement `<audio>`}. */
declare class Audio extends Media {
    /** The underlying <audio> element. */
    domElement: HTMLAudioElement;
    componentDidMount(): void;
    render(): React$1.JSX.Element;
}

interface Props {
    children?: React$1.ReactNode;
    map?: Record<string, unknown>;
}
/**
 * This class gives a way to automagically attach data loaded from a file as attributes on elements.
 * This is provided to facilitate the development of—and provide a standard interface for—GUI tools.
 */
declare class IdMap extends React$1.PureComponent<Props> {
    static Context: React$1.Context<any[]>;
    /** IDs found within the IdMap */
    foundIds: Set<string>;
    constructor(props: Props);
    render(): React$1.JSX.Element;
    renderContent([foundIds, map]: [Set<string>, unknown]): React$1.ReactNode[];
}

/** Liqvid equivalent of {@link HTMLVideoElement `<video>`}. */
declare class Video extends Media {
    /** The underlying <video> element. */
    domElement: HTMLVideoElement;
    render(): React$1.JSX.Element;
}

declare function showIf(cond: boolean): {
    style?: React.CSSProperties;
};
/** Returns a CSS block to show the element only when marker name begins with `prefix` */
declare function during(prefix: string): {
    "data-during": string;
};
/** Returns a CSS block to show the element when marker is in [first, last) */
declare function from(first: string, last?: string): {
    "data-from-first": string;
    "data-from-last": string;
};

declare const authoring_d_showIf: typeof showIf;
declare const authoring_d_during: typeof during;
declare const authoring_d_from: typeof from;
declare namespace authoring_d {
  export {
    authoring_d_showIf as showIf,
    authoring_d_during as during,
    authoring_d_from as from,
  };
}

type Move = Parameters<typeof onDrag>[0];
type Down = Parameters<typeof dragHelper>[1];
type Up = Parameters<typeof onDrag>[2];
/**
 * Helper for implementing drag functionality, abstracting over mouse vs touch events.
 * @returns An event listener which should be added to both `mousedown` and `touchstart` events.
 */
declare function dragHelper<T extends HTMLElement | SVGElement>(move: Move, 
/** Callback for when dragging begins (pointer is touched). */
down?: (
/** The underlying `mousedown` or `touchstart` event */
e: MouseEvent | React.MouseEvent<T> | React.TouchEvent<T> | TouchEvent, 
/** Information about the pointer location */
hit: {
    /** Horizontal coordinate of pointer */
    x: number;
    /** Vertical coordinate of pointer */
    y: number;
}, 
/** The upHandler used internally by this method */
upHandler: (e: MouseEvent | TouchEvent) => void, 
/** The moveHandler used internally by this method */
moveHandler: (e: MouseEvent | TouchEvent) => void) => void, 
/** Callback for when dragging ends (pointer is lifted). */
up?: Up): (e: MouseEvent | React.MouseEvent<T> | React.TouchEvent<T> | TouchEvent) => void;
/**
 * Helper for implementing drag functionality, abstracting over mouse vs touch events.
 * @param innerRef Any `ref` that you want attached to the element, since this method attaches its own `ref` attribute. This is a hack around https://github.com/facebook/react/issues/2043.
 * @returns An object of event handlers which should be added to a React element with {...}
 */
declare function dragHelperReact<T extends HTMLElement | SVGElement>(move: Move, down?: Down, up?: Up, innerRef?: React.Ref<T>): {
    "data-affords": string;
    onMouseDown: (e: MouseEvent | TouchEvent | React$1.MouseEvent<HTMLElement | SVGElement, MouseEvent> | React$1.TouchEvent<HTMLElement | SVGElement>) => void;
    ref: (ref: T) => void;
    onTouchStart?: undefined;
} | {
    "data-affords": string;
    onMouseDown: (e: MouseEvent | TouchEvent | React$1.MouseEvent<HTMLElement | SVGElement, MouseEvent> | React$1.TouchEvent<HTMLElement | SVGElement>) => void;
    onTouchStart: (e: MouseEvent | TouchEvent | React$1.MouseEvent<HTMLElement | SVGElement, MouseEvent> | React$1.TouchEvent<HTMLElement | SVGElement>) => void;
    ref?: undefined;
};

declare const interactivity_d_dragHelper: typeof dragHelper;
declare const interactivity_d_dragHelperReact: typeof dragHelperReact;
declare namespace interactivity_d {
  export {
    interactivity_d_dragHelper as dragHelper,
    interactivity_d_dragHelperReact as dragHelperReact,
  };
}

/** Promisifed version of [canplay](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event) event */
declare function awaitMediaCanPlay(media: HTMLMediaElement): Promise<void>;
/** Promisified version of [`canplaythrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event) event. */
declare function awaitMediaCanPlayThrough(media: HTMLMediaElement): Promise<void>;

declare const media_d_awaitMediaCanPlay: typeof awaitMediaCanPlay;
declare const media_d_awaitMediaCanPlayThrough: typeof awaitMediaCanPlayThrough;
declare namespace media_d {
  export {
    media_d_awaitMediaCanPlay as awaitMediaCanPlay,
    media_d_awaitMediaCanPlayThrough as awaitMediaCanPlayThrough,
  };
}

/**
    Drop-in replacement for onClick handlers which works better on mobile.
  The innerRef attribute, and the implementation, is a hack around https://github.com/facebook/react/issues/2043.
*/
declare const onClick: <T extends HTMLElement | SVGElement>(callback: (e: React.MouseEvent<T> | TouchEvent) => void, innerRef?: React.Ref<T>) => {
    onClick: (e: React.MouseEvent<T> | TouchEvent) => void;
    ref?: undefined;
} | {
    ref: (ref: T) => void;
    onClick?: undefined;
};

declare const mobile_d_onClick: typeof onClick;
declare const mobile_d_anyHover: typeof anyHover;
declare namespace mobile_d {
  export {
    mobile_d_onClick as onClick,
    mobile_d_anyHover as anyHover,
    onClick$1 as attachClickHandler,
  };
}

declare const Utils_animation: typeof animation;
declare const Utils_json: typeof json;
declare const Utils_misc: typeof misc;
declare const Utils_react: typeof react;
declare const Utils_replayData: typeof replayData;
declare const Utils_svg: typeof svg;
declare const Utils_time: typeof time;
declare namespace Utils {
  export {
    Utils_animation as animation,
    authoring_d as authoring,
    interactivity_d as interactivity,
    Utils_json as json,
    media_d as media,
    Utils_misc as misc,
    mobile_d as mobile,
    Utils_react as react,
    Utils_replayData as replayData,
    Utils_svg as svg,
    Utils_time as time,
  };
}

/** Access the ambient {@link Player} */
declare function usePlayer(): Player;
/** Register a callback for when the marker changes */
declare function useMarkerUpdate(callback: (prevIndex: number) => void, deps?: React.DependencyList): void;
/** Access the ambient {@link Script} */
declare function useScript<M extends string = string>(): Script<M>;
/** Register a callback for when the time changes */
declare function useTimeUpdate(callback: (t: number) => void, deps?: React.DependencyList): void;

/** Captions control. */
declare function Captions(): React$1.JSX.Element;

/** Fullscreen control */
declare function FullScreen(): React$1.JSX.Element;

/** Control for playing/pausing */
declare function PlayPause(): React$1.JSX.Element;

/** Settings menu */
declare function Settings(): React$1.JSX.Element;

declare function TimeDisplay(): React$1.JSX.Element;

/** Volume control */
declare function Volume(): React$1.JSX.Element;

declare const Controls: {
    Captions: typeof Captions;
    FullScreen: typeof FullScreen;
    PlayPause: typeof PlayPause;
    ScrubberBar: typeof ScrubberBar;
    Settings: typeof Settings;
    TimeDisplay: typeof TimeDisplay;
    Volume: typeof Volume;
};

interface Liqvid {
    Audio: typeof Audio;
    Controls: typeof Controls;
    IdMap: typeof IdMap;
    Keymap: typeof Keymap;
    Media: typeof Media;
    Playback: typeof Playback;
    Player: typeof Player;
    Script: typeof Script;
    Utils: typeof Utils;
    Video: typeof Video;
    useKeymap: typeof useKeymap;
    useMarkerUpdate: typeof useMarkerUpdate;
    usePlayback: typeof usePlayback;
    usePlayer: typeof usePlayer;
    useScript: typeof useScript;
    useTime: typeof useTime;
    useTimeUpdate: typeof useTimeUpdate;
}
declare global {
    interface Window {
        Liqvid: Liqvid;
        /** @deprecated */
        RactivePlayer: Liqvid;
    }
}

export { Audio, Controls, IdMap, Media, Player, Script, Utils, Video, useMarkerUpdate, usePlayer, useScript, useTimeUpdate };