video-react-new 0.19.0 → 0.21.0

package/dist/index.d.ts

@@ -0,0 +1,785 @@
+import React, { ReactEventHandler, ReactNode } from 'react';
+
+declare module 'video-react-new' {
+  type PreloadType = 'auto' | 'metadata' | 'none';
+
+  interface PlayerPropsType {
+    children?: any;
+
+    width?: string | number;
+    height?: string | number;
+    fluid?: boolean; // = true;
+    muted?: boolean; // = false;
+    playsInline?: boolean; // = false;
+    aspectRatio?: string; // = 'auto';
+    className?: string;
+    videoId?: string;
+
+    startTime?: number;
+    loop?: boolean;
+    autoPlay?: boolean;
+    src?: string;
+    poster?: string;
+    preload?: PreloadType; // = 'auto';
+
+    onLoadStart?: ReactEventHandler;
+    onWaiting?: ReactEventHandler;
+    onCanPlay?: ReactEventHandler;
+    onCanPlayThrough?: ReactEventHandler;
+    onPlaying?: ReactEventHandler;
+    onEnded?: ReactEventHandler;
+    onSeeking?: ReactEventHandler;
+    onSeeked?: ReactEventHandler;
+    onPlay?: ReactEventHandler;
+    onPause?: ReactEventHandler;
+    onProgress?: ReactEventHandler;
+    onDurationChange?: ReactEventHandler;
+    onError?: ReactEventHandler;
+    onSuspend?: ReactEventHandler;
+    onAbort?: ReactEventHandler;
+    onEmptied?: ReactEventHandler;
+    onStalled?: ReactEventHandler;
+    onLoadedMetadata?: ReactEventHandler;
+    onLoadedData?: ReactEventHandler;
+    onTimeUpdate?: ReactEventHandler;
+    onRateChange?: ReactEventHandler;
+    onVolumeChange?: ReactEventHandler;
+
+    store?: object;
+  }
+
+  class Player extends React.Component<PlayerPropsType> {
+    readonly video: Video;
+
+    getDefaultChildren(originalChildren): Array<React.Component>;
+
+    getChildren(props): Array<React.Component>;
+
+    setWidthOrHeight(style: object, name: string, value: string | number);
+
+    getStyle(): object;
+
+    // get redux state
+    // { player, operation }
+    getState(): object;
+
+    // get playback rate
+    get playbackRate(): number;
+
+    // set playback rate
+    // speed of video
+    set playbackRate(rate: number);
+
+    get muted(): boolean;
+
+    set muted(val: boolean);
+
+    get volume(): number;
+
+    set volume(val: number);
+
+    // video width
+    get videoWidth(): number;
+
+    // video height
+    get videoHeight(): number;
+
+    // play the video
+    play();
+
+    // pause the video
+    pause();
+
+    // Change the video source and re-load the video:
+    load();
+
+    // Add a new text track to the video
+    addTextTrack(
+      kind: TextTrackKind,
+      label?: string,
+      language?: string
+    ): TextTrack;
+
+    // Check if your browser can play different types of video:
+    canPlayType(type: string): CanPlayTypeResult;
+
+    // seek video by time
+    seek(time: number);
+
+    // jump forward x seconds
+    forward(seconds: number);
+
+    // jump back x seconds
+    replay(seconds: number);
+
+    // enter or exist full screen
+    toggleFullscreen();
+
+    // subscribe to player state change
+    subscribeToStateChange(listener: (state: any, prevState: any) => void);
+  }
+
+  interface VideoPropsType {
+    actions?: object;
+    player?: object;
+    children?: any;
+    startTime?: number;
+    loop?: boolean;
+    muted?: boolean;
+    autoPlay?: boolean;
+    playsInline?: boolean;
+    src?: string;
+    poster?: string;
+    className?: string;
+    preload?: PreloadType;
+    crossOrigin?: string;
+
+    onLoadStart?: ReactEventHandler;
+    onWaiting?: ReactEventHandler;
+    onCanPlay?: ReactEventHandler;
+    onCanPlayThrough?: ReactEventHandler;
+    onPlaying?: ReactEventHandler;
+    onEnded?: ReactEventHandler;
+    onSeeking?: ReactEventHandler;
+    onSeeked?: ReactEventHandler;
+    onPlay?: ReactEventHandler;
+    onPause?: ReactEventHandler;
+    onProgress?: ReactEventHandler;
+    onDurationChange?: ReactEventHandler;
+    onError?: ReactEventHandler;
+    onSuspend?: ReactEventHandler;
+    onAbort?: ReactEventHandler;
+    onEmptied?: ReactEventHandler;
+    onStalled?: ReactEventHandler;
+    onLoadedMetadata?: ReactEventHandler;
+    onLoadedData?: ReactEventHandler;
+    onTimeUpdate?: ReactEventHandler;
+    onRateChange?: ReactEventHandler;
+    onVolumeChange?: ReactEventHandler;
+    onResize?: ReactEventHandler;
+  }
+
+  class Video extends React.Component<VideoPropsType> {
+    // get all video properties
+    getProperties(): any;
+
+    // get playback rate
+    get playbackRate(): number;
+
+    // set playback rate
+    // speed of video
+    set playbackRate(rate: number);
+
+    get muted(): boolean;
+
+    set muted(val: boolean);
+
+    get volume(): number;
+
+    set volume(val: number);
+
+    // video width
+    get videoWidth(): number;
+
+    // video height
+    get videoHeight(): number;
+
+    // play the video
+    play();
+
+    // pause the video
+    pause();
+
+    // Change the video source and re-load the video:
+    load();
+
+    // Add a new text track to the video
+    addTextTrack(
+      kind: TextTrackKind,
+      label?: string,
+      language?: string
+    ): TextTrack;
+
+    // Check if your browser can play different types of video:
+    canPlayType(type: string): CanPlayTypeResult;
+
+    // toggle play
+    togglePlay();
+
+    // seek video by time
+    seek(time: number);
+
+    // jump forward x seconds
+    forward(seconds: number);
+
+    // jump back x seconds
+    replay(seconds: number);
+
+    // enter or exist full screen
+    toggleFullscreen();
+  }
+
+  interface BigPlayButtonPropsType {
+    actions?: object;
+    player?: object;
+    position?: 'center' | 'left-top'; // = 'left';
+    className?: string;
+  }
+
+  class BigPlayButton extends React.Component<BigPlayButtonPropsType> {}
+
+  interface LoadingSpinnerPropsType {
+    player?: object;
+    className?: string;
+  }
+  class LoadingSpinner extends React.Component<LoadingSpinnerPropsType> {}
+
+  interface PosterImagePropsType {
+    poster?: string;
+    player?: object;
+    actions?: object;
+    className?: string;
+  }
+  class PosterImage extends React.Component<PosterImagePropsType> {}
+
+  interface BezelPropsType {
+    manager?: object;
+    className?: string;
+  }
+  class Bezel extends React.Component<BezelPropsType> {}
+
+  interface ShortcutPropsType {
+    clickable?: boolean; // = true;
+    dblclickable?: boolean; // = true;
+    manager?: object;
+    actions?: object;
+    player?: object;
+    shortcuts?: Array<any>;
+  }
+  class Shortcut extends React.Component<ShortcutPropsType> {}
+
+  interface ControlBarPropsType {
+    children?: any;
+    autoHide?: boolean; // = true;
+    autoHideTime?: number; // used in Player
+    disableDefaultControls?: boolean;
+    disableCompletely?: boolean; // = false;
+    className?: string;
+  }
+  class ControlBar extends React.Component<ControlBarPropsType> {}
+
+  interface PlayTogglePropsType {
+    actions?: object;
+    player?: object;
+    className?: string;
+  }
+  class PlayToggle extends React.Component<PlayTogglePropsType> {}
+
+  type ForwardSecondsType = 5 | 10 | 30;
+  interface ForwardControlPropsType {
+    actions?: object;
+    className?: string;
+    seconds?: ForwardSecondsType; // = 10;
+  }
+  class ForwardControl extends React.Component<ForwardControlPropsType> {}
+
+  interface ReplayControlPropsType {
+    actions?: object;
+    className?: string;
+    seconds?: ForwardSecondsType; // = 10;
+  }
+  class ReplayControl extends React.Component<ReplayControlPropsType> {}
+
+  interface FullscreenTogglePropsType {
+    actions?: object;
+    player?: object;
+    className?: string;
+  }
+  class FullscreenToggle extends React.Component<FullscreenTogglePropsType> {}
+
+  interface ProgressControlPropsType {
+    player?: object;
+    className?: string;
+  }
+  class ProgressControl extends React.Component<ProgressControlPropsType> {}
+
+  interface SeekBarPropsType {
+    player?: object;
+    mouseTime?: object;
+    actions?: object;
+    className?: string;
+  }
+  class SeekBar extends React.Component<SeekBarPropsType> {
+    /**
+     * Get percentage of video played
+     *
+     * @return {Number} Percentage played
+     * @method getPercent
+     */
+    getPercent(): number;
+  }
+
+  interface SliderPropsType {
+    className?: string;
+    onMouseDown?: ReactEventHandler;
+    onMouseMove?: ReactEventHandler;
+    stepForward?: Function;
+    stepBack?: Function;
+    sliderActive?: ReactEventHandler;
+    sliderInactive?: ReactEventHandler;
+    onMouseUp?: ReactEventHandler;
+    onFocus?: ReactEventHandler;
+    onBlur?: ReactEventHandler;
+    onClick?: ReactEventHandler;
+    getPercent?: () => number;
+    vertical?: boolean;
+    children?: ReactNode;
+    label?: string;
+    valuenow?: string;
+    valuetext?: string;
+  }
+  class Slider extends React.Component<SliderPropsType> {}
+
+  interface PlayProgressBarPropsType {
+    currentTime?: number;
+    duration?: number;
+    percentage?: string;
+    className?: string;
+  }
+  class PlayProgressBar extends React.Component<PlayProgressBarPropsType> {}
+
+  interface LoadProgressBarPropsType {
+    duration?: number;
+    buffered?: object;
+    className?: string;
+  }
+  const LoadProgressBar: React.FC<LoadProgressBarPropsType>;
+
+  interface MouseTimeDisplayPropsType {
+    duration?: number;
+    mouseTime?: {
+      time: number;
+      position: number;
+    };
+    className?: string;
+    text?: string;
+  }
+  const MouseTimeDisplay: React.FC<MouseTimeDisplayPropsType>;
+
+  interface RemainingTimeDisplayPropsType {
+    player?: {
+      currentTime: number;
+      duration: number;
+    };
+    className?: string;
+  }
+  const RemainingTimeDisplay: React.FC<RemainingTimeDisplayPropsType>;
+
+  interface CurrentTimeDisplayPropsType {
+    player?: {
+      currentTime: number;
+      duration: number;
+    };
+    className?: string;
+  }
+  const CurrentTimeDisplay: React.FC<CurrentTimeDisplayPropsType>;
+
+  interface DurationDisplayPropsType {
+    player?: {
+      duration: number;
+    };
+    className?: string;
+  }
+  const DurationDisplay: React.FC<DurationDisplayPropsType>;
+
+  interface TimeDividerPropsType {
+    separator?: string;
+    className?: string;
+  }
+  const TimeDivider: React.FC<TimeDividerPropsType>;
+
+  interface VolumeMenuButtonPropsType {
+    player?: {
+      volume: number;
+      muted: boolean;
+    };
+    actions?: object;
+    vertical?: boolean;
+    className?: string;
+    alwaysShowVolume?: boolean;
+  }
+  class VolumeMenuButton extends React.Component<VolumeMenuButtonPropsType> {
+    get volumeLevel(): number;
+  }
+
+  interface PlaybackRateMenuButtonPropsType {
+    player?: object;
+    actions?: object;
+    rates?: Array<number>; // = [2, 1.5, 1.25, 1, 0.5, 0.25];
+    className?: string;
+  }
+  class PlaybackRateMenuButton extends React.Component<
+    PlaybackRateMenuButtonPropsType
+  > {}
+
+  interface ClosedCaptionButtonPropsType {
+    player?: object;
+    actions?: object;
+    className?: string;
+    offMenuText?: string; // = 'Off';
+    showOffMenu?: boolean; // = true;
+    kinds?: Array<string>; // = ['captions', 'subtitles']; // `kind`s of TextTrack to look for to associate it with this menu.
+  }
+  class ClosedCaptionButton extends React.Component<
+    ClosedCaptionButtonPropsType
+  > {}
+
+  class PlaybackRate extends React.Component {}
+
+  interface MenuButtonPropsType {
+    inline?: boolean;
+    items?: Array<any>;
+    className?: string;
+    onSelectItem?: ReactEventHandler;
+    children?: any;
+    selectedIndex?: number;
+  }
+  class MenuButton extends React.Component<MenuButtonPropsType> {}
+
+  namespace playerActions {
+    type OPERATE = 'video-react-new/OPERATE';
+    type FULLSCREEN_CHANGE = 'video-react-new/FULLSCREEN_CHANGE';
+    type PLAYER_ACTIVATE = 'video-react-new/PLAYER_ACTIVATE';
+    type USER_ACTIVATE = 'video-react-new/USER_ACTIVATE';
+
+    function handleFullscreenChange(
+      isFullscreen: boolean
+    ): {
+      type: FULLSCREEN_CHANGE;
+      isFullscreen;
+    };
+
+    function activate(
+      activity
+    ): {
+      type: PLAYER_ACTIVATE;
+      activity;
+    };
+
+    function userActivate(
+      activity
+    ): {
+      type: USER_ACTIVATE;
+      activity;
+    };
+
+    function play(operation: {
+      action: 'play';
+      source: string;
+    }): {
+      type: OPERATE;
+      operation;
+    };
+
+    function pause(operation: {
+      action: 'pause';
+      source: string;
+    }): {
+      type: OPERATE;
+      operation;
+    };
+
+    function togglePlay(operation?: {
+      action: 'toggle-play';
+      source: string;
+    }): {
+      type: OPERATE;
+      operation;
+    };
+
+    // seek video by time
+    function seek(
+      time: number,
+      operation?: {
+        action: 'seek';
+        source: string;
+      }
+    ): {
+      type: OPERATE;
+      operation;
+    };
+
+    // jump forward x seconds
+    function forward(
+      seconds: number,
+      operation?: {
+        action: string;
+        source: string;
+      }
+    ): {
+      type: OPERATE;
+      operation;
+    };
+
+    // jump back x seconds
+    function replay(
+      seconds: number,
+      operation?: {
+        action: string;
+        source: string;
+      }
+    ): {
+      type: OPERATE;
+      operation;
+    };
+
+    function changeRate(
+      rate: number,
+      operation?: {
+        action: 'change-rate';
+        source: string;
+      }
+    ): {
+      type: OPERATE;
+      operation;
+    };
+
+    function changeVolume(
+      volume: number,
+      operation?: {
+        action: 'change-volume';
+        source: string;
+      }
+    ): {
+      type: OPERATE;
+      operation;
+    };
+
+    function mute(
+      muted: boolean,
+      operation?: {
+        action: 'muted' | 'unmuted';
+        source: string;
+      }
+    ): {
+      type: OPERATE;
+      operation;
+    };
+
+    function toggleFullscreen(player): { type: string; [key: string]: any };
+  }
+
+  namespace videoActions {
+    type LOAD_START = 'video-react-new/LOAD_START';
+    type CAN_PLAY = 'video-react-new/CAN_PLAY';
+    type WAITING = 'video-react-new/WAITING';
+    type CAN_PLAY_THROUGH = 'video-react-new/CAN_PLAY_THROUGH';
+    type PLAYING = 'video-react-new/PLAYING';
+    type PLAY = 'video-react-new/PLAY';
+    type PAUSE = 'video-react-new/PAUSE';
+    type END = 'video-react-new/END';
+    type SEEKING = 'video-react-new/SEEKING';
+    type SEEKED = 'video-react-new/SEEKED';
+    type SEEKING_TIME = 'video-react-new/SEEKING_TIME';
+    type END_SEEKING = 'video-react-new/END_SEEKING';
+    type DURATION_CHANGE = 'video-react-new/DURATION_CHANGE';
+    type TIME_UPDATE = 'video-react-new/TIME_UPDATE';
+    type VOLUME_CHANGE = 'video-react-new/VOLUME_CHANGE';
+    type PROGRESS_CHANGE = 'video-react-new/PROGRESS_CHANGE';
+    type RATE_CHANGE = 'video-react-new/RATE_CHANGE';
+    type SUSPEND = 'video-react-new/SUSPEND';
+    type ABORT = 'video-react-new/ABORT';
+    type EMPTIED = 'video-react-new/EMPTIED';
+    type STALLED = 'video-react-new/STALLED';
+    type LOADED_META_DATA = 'video-react-new/LOADED_META_DATA';
+    type LOADED_DATA = 'video-react-new/LOADED_DATA';
+    type RESIZE = 'video-react-new/RESIZE';
+    type ERROR = 'video-react-new/ERROR';
+    type ACTIVATE_TEXT_TRACK = 'video-react-new/ACTIVATE_TEXT_TRACK';
+
+    function handleLoadStart(
+      videoProps
+    ): {
+      type: LOAD_START;
+      videoProps;
+    };
+
+    function handleCanPlay(
+      videoProps
+    ): {
+      type: CAN_PLAY;
+      videoProps;
+    };
+
+    function handleWaiting(
+      videoProps
+    ): {
+      type: WAITING;
+      videoProps;
+    };
+
+    function handleCanPlayThrough(
+      videoProps
+    ): {
+      type: CAN_PLAY_THROUGH;
+      videoProps;
+    };
+
+    function handlePlaying(
+      videoProps
+    ): {
+      type: PLAYING;
+      videoProps;
+    };
+
+    function handlePlay(
+      videoProps
+    ): {
+      type: PLAY;
+      videoProps;
+    };
+
+    function handlePause(
+      videoProps
+    ): {
+      type: PAUSE;
+      videoProps;
+    };
+
+    function handleEnd(
+      videoProps
+    ): {
+      type: END;
+      videoProps;
+    };
+
+    function handleSeeking(
+      videoProps
+    ): {
+      type: SEEKING;
+      videoProps;
+    };
+
+    function handleSeeked(
+      videoProps
+    ): {
+      type: SEEKED;
+      videoProps;
+    };
+
+    function handleDurationChange(
+      videoProps
+    ): {
+      type: DURATION_CHANGE;
+      videoProps;
+    };
+
+    function handleTimeUpdate(
+      videoProps
+    ): {
+      type: TIME_UPDATE;
+      videoProps;
+    };
+
+    function handleVolumeChange(
+      videoProps
+    ): {
+      type: VOLUME_CHANGE;
+      videoProps;
+    };
+
+    function handleProgressChange(
+      videoProps
+    ): {
+      type: PROGRESS_CHANGE;
+      videoProps;
+    };
+
+    function handleRateChange(
+      videoProps
+    ): {
+      type: RATE_CHANGE;
+      videoProps;
+    };
+
+    function handleSuspend(
+      videoProps
+    ): {
+      type: SUSPEND;
+      videoProps;
+    };
+
+    function handleAbort(
+      videoProps
+    ): {
+      type: ABORT;
+      videoProps;
+    };
+
+    function handleEmptied(
+      videoProps
+    ): {
+      type: EMPTIED;
+      videoProps;
+    };
+
+    function handleStalled(
+      videoProps
+    ): {
+      type: STALLED;
+      videoProps;
+    };
+
+    function handleLoadedMetaData(
+      videoProps
+    ): {
+      type: LOADED_META_DATA;
+      videoProps;
+    };
+
+    function handleLoadedData(
+      videoProps
+    ): {
+      type: LOADED_DATA;
+      videoProps;
+    };
+
+    function handleResize(
+      videoProps
+    ): {
+      type: RESIZE;
+      videoProps;
+    };
+
+    function handleError(
+      videoProps
+    ): {
+      type: ERROR;
+      videoProps;
+    };
+
+    function handleSeekingTime(
+      time
+    ): {
+      type: SEEKING_TIME;
+      time;
+    };
+
+    function handleEndSeeking(
+      time
+    ): {
+      type: END_SEEKING;
+      time;
+    };
+
+    function activateTextTrack(
+      textTrack
+    ): {
+      type: ACTIVATE_TEXT_TRACK;
+      textTrack;
+    };
+  }
+
+  function playerReducer(state: any, action: any);
+  function operationReducer(state: any, action: any);
+}