@cloud-app-dev/vidc 3.0.17 → 3.0.19

package/es/Player/contraller_bar/left_bar.js

@@ -10,41 +10,39 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useContext } from 'react';
 import IconFont from '../iconfont';
 import Bar from './bar';
-import { useTimes } from '../timeline';
-import { timeStamp } from '../util';
+import { Context } from '../context';
+import { useVideoEvent } from '../event';
+import Volume from './volume';
+import Time from './time';
 
 function LeftBar(_ref) {
-  var api = _ref.api,
-      event = _ref.event,
-      container = _ref.container,
-      isLive = _ref.isLive,
-      reload = _ref.reload,
+  var reload = _ref.reload,
       leftExtContents = _ref.leftExtContents,
       leftMidExtContents = _ref.leftMidExtContents,
-      hideTimeProgress = _ref.hideTimeProgress;
+      hideTimeProgress = _ref.hideTimeProgress,
+      oneFpsPlay = _ref.oneFpsPlay;
+
+  var _useContext = useContext(Context),
+      api = _useContext.api,
+      container = _useContext.container,
+      isLive = _useContext.isLive,
+      isFpsPlay = _useContext.isFpsPlay;
 
   var _useState = useState(Date.now()),
       _useState2 = _slicedToArray(_useState, 2),
       dep = _useState2[0],
       setDep = _useState2[1];
 
-  useEffect(function () {
-    var updateRender = function updateRender() {
-      return setDep(Date.now());
-    };
+  var updateRender = function updateRender() {
+    return setDep(Date.now());
+  };
 
-    event.addEventListener('play', updateRender);
-    event.addEventListener('pause', updateRender);
-    event.addEventListener('volumechange', updateRender);
-    return function () {
-      event.removeEventListener('play', updateRender);
-      event.removeEventListener('pause', updateRender);
-      event.removeEventListener('volumechange', updateRender);
-    };
-  }, [event]);
+  useVideoEvent('play', updateRender);
+  useVideoEvent('pause', updateRender);
+  useVideoEvent('volumechange', updateRender);
   var video = container.querySelector('video'); //缓存值
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -56,13 +54,7 @@ function LeftBar(_ref) {
   }, [paused]);
   var statusText = useMemo(function () {
     return paused ? '播放' : '暂停';
-  }, [paused]);
-
-  var _useTimes = useTimes(api, event, hideTimeProgress),
-      _useTimes2 = _slicedToArray(_useTimes, 3),
-      current = _useTimes2[0],
-      duration = _useTimes2[2]; //TODO 方法
-
+  }, [paused]); //TODO 方法
 
   var changePlayStatus = useCallback(function () {
     if (video === null || video === void 0 ? void 0 : video.paused) {
@@ -75,16 +67,20 @@ function LeftBar(_ref) {
   }, [video, api]);
   return /*#__PURE__*/React.createElement("div", {
     className: "contraller-left-bar"
-  }, leftExtContents, /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
+  }, leftExtContents, !isFpsPlay && /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
     onClick: changePlayStatus,
     type: statusIconClassName,
     title: statusText
-  })), !isLive && !hideTimeProgress && /*#__PURE__*/React.createElement("span", {
-    className: "video-time-progress"
-  }, timeStamp(current), "/", timeStamp(duration || 0)), /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
+  })), /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(Volume, {
+    api: api
+  })), !isLive && !hideTimeProgress && /*#__PURE__*/React.createElement(Time, null), /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
     onClick: reload,
     type: "lm-player-Refresh_Main",
     title: "\u91CD\u8F7D"
+  })), !isLive && oneFpsPlay && /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
+    onClick: isFpsPlay ? api.closeFpsPlay : api.openFpsPlay,
+    type: "lm-player-zhuzhenplay",
+    title: "\u9010\u5E27\u64AD\u653E"
   })), leftMidExtContents);
 }
 

package/es/Player/contraller_bar/right_bar.d.ts

@@ -1,13 +1,8 @@
 import React from 'react';
-import Api from '../api';
 interface IRightBarProps {
-    container?: HTMLElement;
     visibel?: boolean;
-    api: Api;
-    video?: HTMLVideoElement;
-    isLive?: boolean;
     rightExtContents: React.ReactNode;
     rightMidExtContents: React.ReactNode;
 }
-declare function RightBar({ container, rightExtContents, rightMidExtContents }: IRightBarProps): JSX.Element;
+declare function RightBar({ rightExtContents, rightMidExtContents }: IRightBarProps): JSX.Element;
 export default RightBar;

package/es/Player/contraller_bar/right_bar.js

@@ -10,16 +10,19 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React from 'react';
+import React, { useContext } from 'react';
 import IconFont from '../iconfont';
 import Bar from './bar';
 import useFullscreen from '../../useFullscreen';
+import { Context } from '../context';
 
 function RightBar(_ref) {
-  var container = _ref.container,
-      rightExtContents = _ref.rightExtContents,
+  var rightExtContents = _ref.rightExtContents,
       rightMidExtContents = _ref.rightMidExtContents;
 
+  var _useContext = useContext(Context),
+      container = _useContext.container;
+
   var _useFullscreen = useFullscreen(container),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
       isFullScreen = _useFullscreen2[0],

package/es/Player/contraller_bar/time.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Time(): JSX.Element;
+export default Time;

package/es/Player/contraller_bar/time.js

@@ -0,0 +1,34 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useContext } from 'react';
+import { Context } from '../context';
+import { useTimes } from '../timeline';
+import { timeStamp } from '../util';
+
+function Time() {
+  var _useContext = useContext(Context),
+      api = _useContext.api,
+      event = _useContext.event,
+      isFpsPlay = _useContext.isFpsPlay;
+
+  var _useTimes = useTimes(api, event, isFpsPlay),
+      _useTimes2 = _slicedToArray(_useTimes, 3),
+      current = _useTimes2[0],
+      duration = _useTimes2[2];
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: "video-time-progress"
+  }, timeStamp(current), "/", timeStamp(duration || 0));
+}
+
+export default Time;

package/es/Player/contraller_bar/useBarStatus.js

@@ -10,7 +10,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { useRegisterPlayerEvents } from '../event';
 import EventName from '../event/eventName';
 
 function useBarStatus(event) {
@@ -19,33 +20,25 @@ function useBarStatus(event) {
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1]; // 监听
+      setState = _useState2[1];
 
-
-  useEffect(function () {
-    var show = function show() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: 1
-        });
+  var show = function show() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: 1
       });
-    };
+    });
+  };
 
-    var hide = function hide() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: 0
-        });
+  var hide = function hide() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: 0
       });
-    };
-
-    event.on(EventName.SHOW_CONTRALLER, show);
-    event.on(EventName.HIDE_CONTRALLER, hide);
-    return function () {
-      event.off(EventName.SHOW_CONTRALLER, show);
-      event.off(EventName.HIDE_CONTRALLER, hide);
-    };
-  }, []);
+    });
+  };
+
+  useRegisterPlayerEvents(event, [[EventName.SHOW_CONTRALLER, show], [EventName.HIDE_CONTRALLER, hide]]);
   return state.status;
 }
 

package/es/Player/contraller_bar/volume.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type Api from '../api';
+import '../style/volume.less';
+declare function Volume({ api, style }: {
+    api: Api;
+    style?: React.CSSProperties;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Volume>;
+export default _default;

package/es/Player/contraller_bar/volume.js

@@ -0,0 +1,86 @@
+import "antd/lib/slider/style";
+import _Slider from "antd/lib/slider";
+import "antd/lib/tooltip/style";
+import _Tooltip from "antd/lib/tooltip";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _useUpdate from "ahooks/es/useUpdate";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useMemo, useState } from 'react';
+import IconFont from '../iconfont';
+import "../style/volume.css";
+
+function Volume(_ref) {
+  var api = _ref.api,
+      style = _ref.style;
+
+  var _a;
+
+  var _useState = useState(Math.round((_a = api === null || api === void 0 ? void 0 : api.getVolume()) !== null && _a !== void 0 ? _a : 0 * 100)),
+      _useState2 = _slicedToArray(_useState, 2),
+      val = _useState2[0],
+      setVal = _useState2[1];
+
+  var update = _useUpdate(); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  var volume = useMemo(function () {
+    return (api === null || api === void 0 ? void 0 : api.muted) ? 0 : val;
+  }, undefined);
+
+  var onChange = function onChange(num) {
+    if (api === null || api === void 0 ? void 0 : api.muted) {
+      api === null || api === void 0 ? void 0 : api.unmute();
+    }
+
+    setVal(num);
+    update();
+  };
+
+  var toggleMuted = function toggleMuted() {
+    if (!api) {
+      return;
+    }
+
+    if (api.muted) {
+      api.unmute();
+      setVal(100);
+    } else {
+      api.mute();
+      setVal(0);
+    }
+
+    update();
+  };
+
+  _useUpdateEffect(function () {
+    return api === null || api === void 0 ? void 0 : api.setVolume(val / 100);
+  }, [val]);
+
+  return /*#__PURE__*/React.createElement(_Tooltip, {
+    showArrow: false,
+    overlayClassName: "lm-player-volume-popup",
+    title: /*#__PURE__*/React.createElement(_Slider, {
+      onChange: onChange,
+      vertical: true,
+      value: val
+    })
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    style: style,
+    type: volume !== 0 ? 'lm-player-volume-open' : 'lm-player-volume-close',
+    onClick: toggleMuted
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Volume);

package/es/Player/demo.js

@@ -117,6 +117,8 @@ function Demo1() {
       });
     }
   }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(Player, {
+    fpsDelay: 800,
+    oneFpsPlay: true,
     type: state.type,
     url: state.url,
     isLive: !!state.isLive,
@@ -214,6 +216,7 @@ function Demo2() {
       });
     }
   }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(SegmentPlayer, {
+    oneFpsPlay: true,
     begin: mm.valueOf(),
     segments: state.segments,
     isLive: false
@@ -278,7 +281,8 @@ function Demo3() {
           url: "".concat(old.url, "?").concat(time)
         });
       });
-    }
+    },
+    type: "native"
   }));
 }
 

package/es/Player/event/errorEvent.js

@@ -22,6 +22,7 @@ import { useState, useEffect, useRef } from 'react';
 import EventName from './eventName';
 import Flvjs from '@cloud-app-dev/flv.js';
 import Hls from 'hls.js';
+import { useRegisterPlayerEvent, useVideoEvent } from '.';
 
 function useErrorEvent(_ref) {
   var event = _ref.event,
@@ -40,64 +41,54 @@ function useErrorEvent(_ref) {
 
   var errorInfo = useRef(null);
   var reloadTimer = useRef(null);
-  useEffect(function () {
-    var errorHandle = function errorHandle() {
-      var _console;
 
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
+  var errorHandle = function errorHandle() {
+    var _console;
 
-      if (args[2] && args[2].msg && args[2].msg.includes('Unsupported audio')) {
-        return;
-      }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-      (_console = console).error.apply(_console, args);
+    if (args[2] && args[2].msg && args[2].msg.includes('Unsupported audio')) {
+      return;
+    }
 
-      errorInfo.current = args;
+    (_console = console).error.apply(_console, args);
 
-      if (!(errorHandleAdapter === null || errorHandleAdapter === void 0 ? void 0 : errorHandleAdapter(args))) {
-        setErrorTime(errorTimer + 1);
-      }
-    };
+    errorInfo.current = args;
 
-    var reloadSuccess = function reloadSuccess() {
-      if (errorTimer > 0) {
-        console.warn('视频重连成功！');
-        event.emit(EventName.RELOAD_SUCCESS);
-        clearErrorTimer();
-      }
-    };
+    if (!(errorHandleAdapter === null || errorHandleAdapter === void 0 ? void 0 : errorHandleAdapter(args))) {
+      setErrorTime(errorTimer + 1);
+    }
+  };
 
-    var clearErrorTimer = function clearErrorTimer() {
-      return setErrorTime(0);
-    };
+  var clearErrorTimer = function clearErrorTimer() {
+    return setErrorTime(0);
+  };
 
+  var reloadSuccess = function reloadSuccess() {
+    if (errorTimer > 0) {
+      console.warn('视频重连成功！');
+      event.emit(EventName.RELOAD_SUCCESS);
+      clearErrorTimer();
+    }
+  };
+
+  useVideoEvent('error', errorHandle);
+  useVideoEvent('canplay', reloadSuccess);
+  useRegisterPlayerEvent(EventName.ERROR, errorHandle);
+  useRegisterPlayerEvent(EventName.CLEAR_ERROR_TIMER, clearErrorTimer);
+  useEffect(function () {
     if (flv) {
       flv.on(Flvjs.Events.ERROR, errorHandle);
     }
 
     if (hls) {
       hls.on(Hls.Events.ERROR, errorHandle);
-    }
-
-    if (event) {
-      event.on(EventName.ERROR, errorHandle);
-      event.on(EventName.CLEAR_ERROR_TIMER, clearErrorTimer);
-      event.addEventListener('error', errorHandle); //获取video状态清除错误状态
-
-      event.addEventListener('canplay', reloadSuccess);
-    }
+    } //事件销毁由flv、hls销毁时控制
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    return function () {
-      // flv, hls事件不用主动销毁，库内部自己处理
-      if (event) {
-        event.off(EventName.ERROR, errorHandle);
-        event.removeEventListener('error', errorHandle);
-        event.removeEventListener('canplay', reloadSuccess);
-      }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [event, flv, hls, errorTimer]);
+  }, [flv, hls]);
   useEffect(function () {
     if (errorTimer === 0) {
       return undefined;

package/es/Player/event/eventName.d.ts

@@ -1,3 +1,18 @@
-import type { EventName } from '../player';
-declare const Events: EventName;
+declare const Events: {
+    RELOAD: string;
+    RELOAD_FAIL: string;
+    RELOAD_SUCCESS: string;
+    ERROR: string;
+    ERROR_RELOAD: string;
+    HISTORY_PLAY_END: string;
+    PLAY_ENDED: string;
+    SEEK: string;
+    TRANSFORM: string;
+    CHANGE_PLAY_INDEX: string;
+    HIDE_CONTRALLER: string;
+    SHOW_CONTRALLER: string;
+    CLEAR_ERROR_TIMER: string;
+    CANVAS_PAUSE: string;
+    CANVAS_PLAY: string;
+};
 export default Events;

package/es/Player/event/eventName.js

@@ -5,11 +5,15 @@ var Events = {
   ERROR: 'error',
   ERROR_RELOAD: 'errorRload',
   HISTORY_PLAY_END: 'historyPlayEnd',
+  PLAY_ENDED: 'play_ended',
   SEEK: 'seek',
   TRANSFORM: 'transform',
   CHANGE_PLAY_INDEX: 'changePlayIndex',
   HIDE_CONTRALLER: 'hideContraller',
   SHOW_CONTRALLER: 'showContraller',
-  CLEAR_ERROR_TIMER: 'clearErrorTimer'
+  CLEAR_ERROR_TIMER: 'clearErrorTimer',
+  CANVAS_PAUSE: 'canvasPause',
+  CANVAS_PLAY: 'canvasPlay' //逐帧播放
+
 };
 export default Events;

package/es/Player/event/index.d.ts

@@ -17,6 +17,8 @@ declare class VideoEventInstance {
 }
 declare type PlayEvent = VideoEventInstance;
 export declare function usePlayerEvent(video: HTMLVideoElement): PlayEvent;
+export declare function useVideoEvent(eventName: string, handle: (event: any) => void, context?: VideoEventInstance): void;
+export declare function useRegisterPlayerEvent(eventName: string, handle: (event: any) => void, context?: VideoEventInstance): void;
 export declare function useVideoEvents(event: VideoEventInstance, events: CustomEvent[]): void;
 export declare function useRegisterPlayerEvents(event: VideoEventInstance, events: CustomEvent[]): void;
 export default VideoEventInstance;

package/es/Player/event/index.js

@@ -1,3 +1,4 @@
+import _useLatest from "ahooks/es/useLatest";
 import _nextTick from "@cloud-app-dev/utils/es/nextTick";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -18,7 +19,8 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { Context } from '../context';
 
 var VideoEventInstance = /*#__PURE__*/function () {
   function VideoEventInstance(video) {
@@ -128,6 +130,56 @@ export function usePlayerEvent(video) {
   }, [video]);
   return event;
 }
+export function useVideoEvent(eventName, handle, context) {
+  var ctx = useContext(Context);
+  var event = useMemo(function () {
+    var _a;
+
+    return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.event) !== null && _a !== void 0 ? _a : context;
+  }, [context, ctx === null || ctx === void 0 ? void 0 : ctx.event]);
+
+  var handlerRef = _useLatest(handle);
+
+  useEffect(function () {
+    if (!event) {
+      return undefined;
+    }
+
+    var eventListener = function eventListener(event) {
+      return handlerRef.current(event);
+    };
+
+    event.addEventListener(eventName, eventListener);
+    return function () {
+      event.removeEventListener(eventName, eventListener);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [event, eventName]);
+}
+export function useRegisterPlayerEvent(eventName, handle, context) {
+  var ctx = useContext(Context);
+  var event = useMemo(function () {
+    var _a;
+
+    return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.event) !== null && _a !== void 0 ? _a : context;
+  }, [context, ctx === null || ctx === void 0 ? void 0 : ctx.event]);
+
+  var handlerRef = _useLatest(handle);
+
+  useEffect(function () {
+    if (!event) {
+      return undefined;
+    }
+
+    var eventListener = function eventListener(event) {
+      return handlerRef.current(event);
+    };
+
+    event.on(eventName, eventListener);
+    return function () {
+      event.off(eventName, eventListener);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [event, eventName]);
+}
 export function useVideoEvents(event, events) {
   useEffect(function () {
     if (!event || !events) {
@@ -149,7 +201,7 @@ export function useVideoEvents(event, events) {
 
         event.removeEventListener(eventName, handle);
       });
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event]);
 }
 export function useRegisterPlayerEvents(event, events) {
@@ -173,7 +225,7 @@ export function useRegisterPlayerEvents(event, events) {
 
         event.off(eventName, handle);
       });
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event]);
 }
 export default VideoEventInstance;

package/es/Player/fps_play.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type Api from './api';
+import type VideoEventInstance from './event';
+interface IFPSPlay {
+    api: Api;
+    event: VideoEventInstance;
+    fpsDelay?: number;
+    fps?: number;
+}
+declare function FPSPlay({ api, event, fpsDelay, fps }: IFPSPlay): JSX.Element;
+export default FPSPlay;