@cloud-app-dev/vidc 4.0.17 → 4.1.0

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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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 ? 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 ? 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 ? 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,30 @@
+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(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* 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,10 @@
+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): import("react/jsx-runtime").JSX.Element;
+export default FPSPlay;

package/es/Player/fps_play.js

@@ -0,0 +1,88 @@
+var _templateObject;
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import useRafInterval from "../useRafInterval";
+import { useRegisterPlayerEvent } from "./event";
+import Events from "./event/eventName";
+import { getDomStyleValue } from "./util";
+import { jsx as _jsx } from "react/jsx-runtime";
+var fpsPlayCanvasCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n"])));
+var oneFps = 1 / 30;
+function FPSPlay(_ref) {
+  var api = _ref.api,
+    event = _ref.event,
+    fpsDelay = _ref.fpsDelay,
+    fps = _ref.fps;
+  var _useState = useState(Date.now()),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceKey = _useState2[0],
+    update = _useState2[1];
+  var ref = useRef(null);
+  var timerRef = useRef();
+  var fps_second = useMemo(function () {
+    return fps ? 1 / fps : oneFps;
+  }, [fps]);
+  useEffect(function () {
+    var fpsCapture = function fpsCapture() {
+      if (!ref.current || !(event !== null && event !== void 0 && event.video) || !api) {
+        return;
+      }
+      var video = event.video;
+      var fpsTime = api.getCurrentTime() + fps_second;
+      video.currentTime = fpsTime;
+      if (video.currentTime >= api.getDuration()) {
+        clearInterval(timerRef.current);
+        video.currentTime = 0;
+        event.emit(Events.PLAY_ENDED);
+      }
+      var canvas = ref.current;
+      var ctx = canvas.getContext('2d');
+      var _video$getBoundingCli = video.getBoundingClientRect(),
+        width = _video$getBoundingCli.width,
+        height = _video$getBoundingCli.height;
+      canvas.width = width;
+      canvas.height = height;
+      var fit = getDomStyleValue(video, 'object-fit');
+      if (fit === 'fill') {
+        //全画面绘制，存在拉伸
+        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, width, height);
+      } else {
+        // 自适应绘制
+        var videoWidth = video.videoWidth;
+        var videoHeight = video.videoHeight;
+        var scale = height / videoHeight;
+        var s_vw = scale * videoWidth;
+        var paddingSize = (width - s_vw) / 2;
+        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, paddingSize, 0, s_vw, height);
+      }
+    };
+    fpsCapture();
+    timerRef.current = setInterval(fpsCapture, fpsDelay);
+    return function () {
+      clearInterval(timerRef.current);
+    };
+  }, [api, event, fpsDelay, forceKey, fps_second]);
+  useRegisterPlayerEvent(Events.CANVAS_PAUSE, function () {
+    clearInterval(timerRef.current);
+  });
+  useRegisterPlayerEvent(Events.CANVAS_PLAY, function () {
+    update(Date.now());
+  });
+
+  // TODO: 未知情况，video会自动播放，轮训检测并暂停零时解决
+  useRafInterval(function () {
+    return !(api !== null && api !== void 0 && api.paused) ? api === null || api === void 0 ? void 0 : api.pause() : null;
+  }, 10);
+  return /*#__PURE__*/_jsx("canvas", {
+    className: fpsPlayCanvasCss,
+    ref: ref
+  });
+}
+export default FPSPlay;

package/es/Player/frontend_player.d.ts

@@ -0,0 +1,7 @@
+import type { IFrontendPlayerProps } from './player';
+/**
+ * @desc 主组件，负责片段整体逻辑控制
+ * @return JSX.Element
+ */
+declare function FrontendPlayer({ url, begin, end, onSeek, forwordRef, customTimeLine, onCanPlayerInit, ...props }: IFrontendPlayerProps): import("react/jsx-runtime").JSX.Element;
+export default FrontendPlayer;

package/es/Player/frontend_player.js

@@ -0,0 +1,71 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["url", "begin", "end", "onSeek", "forwordRef", "customTimeLine", "onCanPlayerInit"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { useMemoizedFn, useUpdate } from 'ahooks';
+import React, { useMemo, useRef } from 'react';
+import Events from "./event/eventName";
+import FrontendTimeLine from "./frontend_timeline";
+import SinglePlayer from "./single_player";
+
+/**
+ * @desc 主组件，负责片段整体逻辑控制
+ * @return JSX.Element
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function FrontendPlayer(_ref) {
+  var url = _ref.url,
+    begin = _ref.begin,
+    end = _ref.end,
+    onSeek = _ref.onSeek,
+    forwordRef = _ref.forwordRef,
+    customTimeLine = _ref.customTimeLine,
+    onCanPlayerInit = _ref.onCanPlayerInit,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var update = useUpdate();
+  var ref = useRef(null);
+  var playRef = forwordRef ? forwordRef : ref;
+  var _ref2 = playRef.current || {},
+    api = _ref2.api,
+    event = _ref2.event;
+
+  // 转换毫秒
+  var duration = useMemo(function () {
+    return (end !== null && end !== void 0 ? end : 0 - (begin !== null && begin !== void 0 ? begin : 0)) / 1000;
+  }, [begin, end]); //单位s 秒
+
+  // 重置reload
+  var reload = useMemoizedFn(function () {
+    var _playRef$current, _playRef$current2;
+    (_playRef$current = playRef.current) === null || _playRef$current === void 0 ? void 0 : _playRef$current.event.emit(Events.RELOAD);
+    onSeek === null || onSeek === void 0 ? void 0 : onSeek(begin);
+    (_playRef$current2 = playRef.current) === null || _playRef$current2 === void 0 ? void 0 : _playRef$current2.api.reload();
+  });
+  var onInit = useMemoizedFn(function () {
+    update();
+    onCanPlayerInit === null || onCanPlayerInit === void 0 ? void 0 : onCanPlayerInit();
+  });
+  var hasReady = api && event;
+  var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/_jsx(FrontendTimeLine, {
+    end: end !== null && end !== void 0 ? end : 0,
+    onSeek: onSeek,
+    begin: begin !== null && begin !== void 0 ? begin : 0,
+    duration: duration
+  });
+  return /*#__PURE__*/_jsx(SinglePlayer, _objectSpread({
+    ref: playRef,
+    url: url,
+    reload: reload,
+    onCanPlayerInit: onInit,
+    isLive: false,
+    type: "flv",
+    customTimeLine: hasReady ? timeline : /*#__PURE__*/_jsx(_Fragment, {})
+  }, props));
+}
+export default FrontendPlayer;

package/es/Player/frontend_timeline.d.ts

@@ -0,0 +1,8 @@
+interface ITimeLineProps {
+    duration: number;
+    begin: number;
+    end: number;
+    onSeek?: (time: number) => void;
+}
+declare function FrontendTimeLine({ duration, begin, end, onSeek }: ITimeLineProps): import("react/jsx-runtime").JSX.Element;
+export default FrontendTimeLine;