@useloops/design-system/dist/systems/Platform/VideoControls/VideoControls.d.ts

The official React based Loops design system

import * as react from 'react';
import { FunctionComponent, ReactElement } from 'react';
import { MarkerComponentProps } from './components/Timeline/components/Markers/Markers.js';

type Marker = {
    id: string;
    timeStamp: number;
    meta?: Record<string, unknown>;
};
type VideoControlsProps = {
    videoElement: HTMLVideoElement;
    id?: string;
    options?: {
        rtl?: boolean;
        volumeControls?: boolean;
        volumeControlsType?: 'volume' | 'mute';
        normaliseTime?: boolean;
        markerIndicator?: boolean;
        markerIndicatorMode?: 'time' | 'percentage';
        markerIndicatorSize?: number;
        disableBufferingEvents?: boolean;
    };
    slots?: {
        marker?: FunctionComponent<MarkerComponentProps>;
        bottom?: ReactElement;
    };
    initialMuted?: boolean;
    initialVolume?: number;
    initialCurrentTime?: number;
    initialEndTime?: number;
    markers?: Marker[];
    events?: {
        onReset?: () => void;
        onEnd?: () => void;
        onPlay?: () => void;
        onFirstPlay?: () => void;
        onTimeUpdate?: (time: number) => void;
        onFirstEnded?: () => void;
        onPause?: () => void;
        onSeeking?: (seekTo: number) => void;
        onSeekStart?: () => void;
        onSeekEnd?: (time?: number) => void;
        onRestart?: () => void;
        onVolumeChange?: (volume: number) => void;
        onVolumeMute?: (muted: boolean) => void;
    };
    videoSeekTime?: number;
};
declare const _default: react.NamedExoticComponent<VideoControlsProps & react.RefAttributes<any>>;

export { _default as default };
export type { Marker, VideoControlsProps };