@cloud-app-dev/vidc 4.0.20 → 4.0.21

package/es/Player/demo.js

@@ -0,0 +1,266 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, ConfigProvider, Input, Select } from 'antd';
+import moment from 'dayjs';
+import React, { useState } from 'react';
+import FrontendPlayer from "./frontend_player";
+import SegmentPlayer from "./segment_player";
+import Player from "./single_player";
+var options = [{
+  value: '',
+  label: '自动'
+}, {
+  value: 'flv',
+  label: 'FLV'
+}, {
+  value: 'hls',
+  label: 'HLS'
+}];
+var options2 = [{
+  value: 1,
+  label: '直播'
+}, {
+  value: 0,
+  label: '录像'
+}];
+function Demo1() {
+  var _useState = useState({
+      type: undefined,
+      isLive: 1,
+      url: 'http://192.168.14.4:17095/flv/live/1bfa0ef04688adf36/1.flv?trace_id=8f7fae97-8434-4dd4-a856-114378fdb61d3',
+      tempUrl: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u6807\u51C6\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 10,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    value: state.type || '',
+    onChange: function onChange(val) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          type: val
+        });
+      });
+    }
+  }, options.map(function (v) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: v.label,
+      value: v.value
+    }, v.label);
+  })), /*#__PURE__*/React.createElement(Input, {
+    style: {
+      flex: 1,
+      height: 32
+    },
+    type: "text",
+    placeholder: "\u8BF7\u8F93\u5165\u89C6\u9891\u5730\u5740",
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          tempUrl: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Select, {
+    value: state.isLive,
+    onChange: function onChange(val) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          isLive: val
+        });
+      });
+    }
+  }, options2.map(function (v) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: v.label,
+      value: v.value
+    }, v.label);
+  })), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: 60,
+      height: 32
+    },
+    onClick: function onClick() {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          url: state.tempUrl
+        });
+      });
+    }
+  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(Player, {
+    fpsDelay: 800,
+    oneFpsPlay: true,
+    type: state.type,
+    url: state.url,
+    isLive: !!state.isLive,
+    customTimeLine: state.isLive ? /*#__PURE__*/React.createElement(React.Fragment, null) : undefined
+  })));
+}
+var mm = moment().set('hours', 0).set('minutes', 0).set('seconds', 0);
+var m = mm.clone();
+function Demo2() {
+  var _useState3 = useState({
+      isLive: 1,
+      segments: [{
+        beginTime: m.valueOf(),
+        endTime: m.set('minutes', 1).valueOf(),
+        url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+      }, {
+        beginTime: m.set('minutes', 1).valueOf(),
+        endTime: m.set('minutes', 2).valueOf()
+      }, {
+        beginTime: m.set('minutes', 2).valueOf(),
+        endTime: m.set('minutes', 3).valueOf(),
+        url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=1'
+      }, {
+        beginTime: m.set('minutes', 3).valueOf(),
+        endTime: m.set('minutes', 4).valueOf()
+      }, {
+        beginTime: m.set('minutes', 4).valueOf(),
+        endTime: m.set('minutes', 5).valueOf(),
+        url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=2'
+      }],
+      tempUrl: ''
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, " Sements\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 10,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    style: {
+      flex: 1,
+      height: 32
+    },
+    type: "text",
+    placeholder: "\u8BF7\u8F93\u5165\u89C6\u9891\u7247\u6BB5JSON",
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          tempUrl: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: 60,
+      height: 32
+    },
+    onClick: function onClick() {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          segments: JSON.parse(state.tempUrl)
+        });
+      });
+    }
+  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(SegmentPlayer, {
+    oneFpsPlay: true,
+    begin: mm.valueOf(),
+    segments: state.segments,
+    isLive: false
+  })));
+}
+function Demo3() {
+  var _useState5 = useState({
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
+      tempUrl: '',
+      begin: 1652889636000,
+      end: 1652890200000
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    state = _useState6[0],
+    setState = _useState6[1];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, " \u524D\u7AEF\u5F55\u50CF\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 10,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    style: {
+      flex: 1,
+      height: 32
+    },
+    type: "text",
+    placeholder: "\u8BF7\u8F93\u5165\u524D\u7AEF\u5F55\u50CF\u5730\u5740",
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          tempUrl: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: 60,
+      height: 32
+    },
+    onClick: function onClick() {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          url: state.tempUrl
+        });
+      });
+    }
+  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(FrontendPlayer, {
+    begin: state.begin,
+    end: state.end,
+    url: state.url,
+    onSeek: function onSeek(time) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          url: "".concat(old.url, "?").concat(time)
+        });
+      });
+    },
+    type: "native"
+  })));
+}
+var App = function App() {
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement(Demo1, null), /*#__PURE__*/React.createElement(Demo2, null), /*#__PURE__*/React.createElement(Demo3, null));
+};
+export default App;

package/es/Player/empty.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Empty(): React.JSX.Element;

package/es/Player/empty.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Empty() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}

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

@@ -0,0 +1,14 @@
+import Flvjs from '@cloud-app-dev/mpegts.js';
+import Hls from 'hls.js';
+import type VideoEventInstance from '.';
+interface IErrorEventProps {
+    event?: VideoEventInstance;
+    errorReloadTimer: number;
+    flv: Flvjs.Player;
+    hls: Hls;
+    reload: () => void;
+    unload: () => void;
+    errorHandleAdapter?: (errorInfo: any) => boolean;
+}
+declare function useErrorEvent({ event, reload, unload, errorReloadTimer, flv, hls, errorHandleAdapter }: IErrorEventProps): void;
+export default useErrorEvent;

package/es/Player/event/errorEvent.js

@@ -0,0 +1,88 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import Flvjs from '@cloud-app-dev/mpegts.js';
+import Hls from 'hls.js';
+import { useEffect, useRef, useState } from 'react';
+import { useRegisterPlayerEvent, useVideoEvent } from '.';
+import EventName from "./eventName";
+function useErrorEvent(_ref) {
+  var event = _ref.event,
+    reload = _ref.reload,
+    unload = _ref.unload,
+    errorReloadTimer = _ref.errorReloadTimer,
+    flv = _ref.flv,
+    hls = _ref.hls,
+    errorHandleAdapter = _ref.errorHandleAdapter;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    errorTimer = _useState2[0],
+    setErrorTime = _useState2[1];
+  var errorInfo = useRef(null);
+  var reloadTimer = useRef();
+  var errorHandle = function errorHandle() {
+    var _console;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (args[2] && args[2].msg && args[2].msg.includes('Unsupported audio')) {
+      return;
+    }
+    (_console = console).error.apply(_console, args);
+    errorInfo.current = args;
+    if (!(errorHandleAdapter !== null && errorHandleAdapter !== void 0 && errorHandleAdapter(args))) {
+      setErrorTime(errorTimer + 1);
+    }
+  };
+  var clearErrorTimer = function clearErrorTimer() {
+    return setErrorTime(0);
+  };
+  var reloadSuccess = function reloadSuccess() {
+    if (errorTimer > 0) {
+      console.warn('视频重连成功！');
+      event === null || event === void 0 || event.emit(EventName.RELOAD_SUCCESS);
+      clearErrorTimer();
+    }
+  };
+  useVideoEvent('error', errorHandle, event);
+  useVideoEvent('canplay', reloadSuccess, event);
+  useRegisterPlayerEvent(EventName.ERROR, errorHandle, event);
+  useRegisterPlayerEvent(EventName.CLEAR_ERROR_TIMER, clearErrorTimer, event);
+  useEffect(function () {
+    if (flv) {
+      flv.on(Flvjs.Events.ERROR, errorHandle);
+    }
+    if (hls) {
+      hls.on(Hls.Events.ERROR, errorHandle);
+    }
+    //事件销毁由flv、hls销毁时控制
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flv, hls]);
+  useEffect(function () {
+    if (errorTimer === 0) {
+      return undefined;
+    }
+    if (errorTimer > errorReloadTimer) {
+      unload();
+      event === null || event === void 0 || event.emit(EventName.RELOAD_FAIL);
+      return undefined;
+    }
+    console.warn("\u89C6\u9891\u64AD\u653E\u51FA\u9519\uFF0C\u6B63\u5728\u8FDB\u884C\u91CD\u8FDE".concat(errorTimer));
+    reloadTimer.current = setTimeout(function () {
+      event === null || event === void 0 || event.emit.apply(event, [EventName.ERROR_RELOAD, errorTimer].concat(_toConsumableArray(errorInfo.current)));
+      reload();
+    }, 2 * 1000);
+    return function () {
+      clearTimeout(reloadTimer.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errorTimer, event, flv, hls]);
+}
+export default useErrorEvent;

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,29 @@
+var Events = {
+  RELOAD: 'reload',
+  //手动视频重载
+  RELOAD_FAIL: 'reloadFail',
+  // 视频出错，重连失败
+  RELOAD_SUCCESS: 'reloadSuccess',
+  //视频出错，重连成功
+  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',
+  CANVAS_PAUSE: 'canvasPause',
+  // 逐帧暂停
+  CANVAS_PLAY: 'canvasPlay' //逐帧播放
+};
+export default Events;

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

@@ -0,0 +1,24 @@
+import type { CustomEvent, EventInfo } from '../player';
+declare class VideoEventInstance {
+    video: HTMLVideoElement;
+    events: {
+        [key: string]: EventInfo;
+    };
+    playerEvents: {
+        [key: string]: (() => void)[];
+    };
+    constructor(video: HTMLVideoElement);
+    on(eventName: string, handle: () => void): void;
+    addEventListener(eventName: string, handle: () => void): void;
+    removeEventListener(eventName: string, handle: () => void): void;
+    emit(eventName: string, ...data: any): void;
+    off(eventName: string, handle: () => void): void;
+    destroy(): void;
+}
+type PlayEvent = VideoEventInstance;
+export declare function usePlayerEvent(video?: HTMLVideoElement): PlayEvent | undefined;
+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

@@ -0,0 +1,205 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { useLatest } from 'ahooks';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import nextTick from "../../nextTick";
+import { Context } from "../context";
+var VideoEventInstance = /*#__PURE__*/function () {
+  function VideoEventInstance(video) {
+    _classCallCheck(this, VideoEventInstance);
+    _defineProperty(this, "video", void 0);
+    _defineProperty(this, "events", void 0);
+    _defineProperty(this, "playerEvents", void 0);
+    this.video = video;
+    this.events = {};
+    this.playerEvents = {};
+  }
+  _createClass(VideoEventInstance, [{
+    key: "on",
+    value: function on(eventName, handle) {
+      this.events && this.events[eventName] ? this.events[eventName].listener.push(handle) : this.events[eventName] = {
+        type: eventName,
+        listener: [handle]
+      };
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(eventName, handle) {
+      if (this.video) {
+        this.playerEvents[eventName] ? this.playerEvents[eventName].push(handle) : this.playerEvents[eventName] = [handle];
+        this.video.addEventListener(eventName, handle, false);
+      }
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(eventName, handle) {
+      if (this.video) {
+        if (!this.playerEvents || !this.playerEvents[eventName]) {
+          return;
+        }
+        var index = this.playerEvents[eventName].findIndex(function (v) {
+          return v === handle;
+        });
+        index > -1 && this.playerEvents[eventName].splice(index, 1);
+        this.video.removeEventListener(eventName, handle, false);
+      }
+    }
+  }, {
+    key: "emit",
+    value: function emit(eventName) {
+      for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        data[_key - 1] = arguments[_key];
+      }
+      if (!this.events || !this.events[eventName]) {
+        return;
+      }
+      this.events[eventName].listener.forEach(function (v) {
+        v.apply(void 0, data);
+      });
+    }
+  }, {
+    key: "off",
+    value: function off(eventName, handle) {
+      if (!this.events || !this.events.eventName) {
+        return;
+      }
+      var index = this.events[eventName].listener.findIndex(function (v) {
+        return v === handle;
+      });
+      index > -1 && this.events[eventName].listener.splice(index, 1);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this = this;
+      Object.keys(this.playerEvents).forEach(function (key) {
+        _this.playerEvents[key].forEach(function (fn) {
+          _this.removeEventListener(key, fn);
+        });
+      });
+      this.playerEvents = {};
+      this.events = {};
+      this.video = null;
+    }
+  }]);
+  return VideoEventInstance;
+}();
+export function usePlayerEvent(video) {
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    event = _useState2[0],
+    setEvent = _useState2[1];
+  useEffect(function () {
+    if (!video) {
+      console.debug('wait create event...');
+      return undefined;
+    }
+    var event = new VideoEventInstance(video);
+    setEvent(event);
+    return function () {
+      return nextTick(function () {
+        return event.destroy();
+      });
+    };
+  }, [video]);
+  return event;
+}
+export function useVideoEvent(eventName, handle, context) {
+  var ctx = useContext(Context);
+  var event = useMemo(function () {
+    var _ctx$event;
+    return (_ctx$event = ctx === null || ctx === void 0 ? void 0 : ctx.event) !== null && _ctx$event !== void 0 ? _ctx$event : 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 () {
+      return 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 _ctx$event2;
+    return (_ctx$event2 = ctx === null || ctx === void 0 ? void 0 : ctx.event) !== null && _ctx$event2 !== void 0 ? _ctx$event2 : 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) {
+      return undefined;
+    }
+    events.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        eventName = _ref2[0],
+        handle = _ref2[1];
+      event.addEventListener(eventName, handle);
+    });
+    return function () {
+      events.forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          eventName = _ref4[0],
+          handle = _ref4[1];
+        event.removeEventListener(eventName, handle);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [event]);
+}
+export function useRegisterPlayerEvents(event, events) {
+  useEffect(function () {
+    if (!event || !events) {
+      return undefined;
+    }
+    events.forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        eventName = _ref6[0],
+        handle = _ref6[1];
+      event.on(eventName, handle);
+    });
+    return function () {
+      events.forEach(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+          eventName = _ref8[0],
+          handle = _ref8[1];
+        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 @@
+import React from '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): React.JSX.Element;
+export default FPSPlay;