@cloud-app-dev/vidc 4.0.17 → 4.1.0

package/es/Player/frontend_timeline.js

@@ -0,0 +1,153 @@
+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 _templateObject, _templateObject2;
+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 _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 { useUpdateEffect } from 'ahooks';
+import moment from 'dayjs';
+import React, { startTransition, useMemo, useState } from 'react';
+import useBarStatus from "./contraller_bar/useBarStatus";
+import { currentLineCss, playerTimelineLayoutCss, useTimes } from "./timeline";
+import { FMT } from "./util";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var frontendLineMarkCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 2px;\n  height: 100%;\n  pointer-events: none;\n  background-color: #fff;\n"])));
+var frontendLineTipBoxCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: -130px;\n  width: max-content;\n  padding: 10px;\n  margin-left: -81px;\n  font-size: 12px;\n  line-height: 20px;\n  color: #fff;\n  background-color: rgb(0 0 0 / 65%);\n  border-radius: 3px;\n"])));
+function TipTitle(_ref) {
+  var end = _ref.end,
+    begin = _ref.begin,
+    left = _ref.left,
+    current = _ref.current,
+    markTime = _ref.markTime;
+  if (left === -1) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: frontendLineTipBoxCss,
+    style: {
+      left: left
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        fontWeight: 600
+      },
+      children: "\u5F55\u50CF\u4FE1\u606F"
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u5F00\u59CB\uFF1A", moment(begin).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u7ED3\u675F\uFF1A", moment(end).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u5F53\u524D\uFF1A", moment(current).format(FMT)]
+    })]
+  });
+}
+function FrontendTimeLine(_ref2) {
+  var duration = _ref2.duration,
+    begin = _ref2.begin,
+    end = _ref2.end,
+    onSeek = _ref2.onSeek;
+  // time 是记录seek时跳了多少
+  var _useState = useState({
+      time: 0,
+      markTime: 0,
+      left: -1,
+      visible: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var status = useBarStatus();
+
+  //获取视频当前播放时长单位s
+  var _useTimes = useTimes(),
+    _useTimes2 = _slicedToArray(_useTimes, 1),
+    currentTime = _useTimes2[0];
+  var rTime = useMemo(function () {
+    return state.time + currentTime;
+  }, [state.time, currentTime]);
+  useUpdateEffect(function () {
+    return setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        time: 0
+      });
+    });
+  }, [begin]);
+  var playPercent = useMemo(function () {
+    return rTime / duration * 100;
+  }, [duration, rTime]);
+  var cTime = useMemo(function () {
+    return begin + rTime * 1000;
+  }, [begin, rTime]);
+  var seekWithLine = function seekWithLine(e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    var current = e.pageX - rect.left;
+    var cTime = current / rect.width * duration;
+    onSeek === null || onSeek === void 0 ? void 0 : onSeek(begin + cTime * 1000);
+    //时间轴进度条rTime是要加上currentTime,这里要减去一下，包装交互一致性
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        time: cTime
+      });
+    });
+  };
+  var onLineMouseOver = function onLineMouseOver(e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    var left = e.pageX - rect.left;
+    var mTime = left / rect.width * duration;
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        left: left,
+        markTime: begin + mTime * 1000
+      });
+    });
+  };
+  var onLineMouseOut = function onLineMouseOut() {
+    return startTransition(function () {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          left: -1
+        });
+      });
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: playerTimelineLayoutCss,
+    style: status === 0 ? {
+      bottom: 0,
+      height: 4
+    } : undefined,
+    onClick: seekWithLine,
+    onMouseMove: onLineMouseOver,
+    onMouseOut: onLineMouseOut,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: currentLineCss,
+      style: {
+        width: "".concat(playPercent, "%")
+      }
+    }), /*#__PURE__*/_jsx(TipTitle, {
+      end: end,
+      begin: begin,
+      left: state.left,
+      current: cTime,
+      markTime: state.markTime
+    }), state.left !== -1 && /*#__PURE__*/_jsx("span", {
+      className: frontendLineMarkCss,
+      style: {
+        left: state.left
+      }
+    })]
+  });
+}
+export default FrontendTimeLine;

package/es/Player/iconfont.d.ts

@@ -0,0 +1,4 @@
+import { IIconFontProps } from '../IconFont';
+import './style/iconfont.js';
+declare function IconFont({ className, ...props }: IIconFontProps): import("react/jsx-runtime").JSX.Element;
+export default IconFont;

package/es/Player/iconfont.js

@@ -0,0 +1,21 @@
+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 = ["className"];
+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 Icon from "../IconFont";
+import "./style/iconfont.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function IconFont(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Icon, _objectSpread({
+    className: "".concat(className)
+  }, props));
+}
+export default IconFont;

package/es/Player/index.d.ts

@@ -0,0 +1,2 @@
+import SinglePlayer from './single_player';
+export default SinglePlayer;

package/es/Player/index.js

@@ -0,0 +1,2 @@
+import SinglePlayer from "./single_player";
+export default SinglePlayer;

package/es/Player/live_heart.d.ts

@@ -0,0 +1,8 @@
+import type Api from './api';
+import type VideoEventInstance from './event';
+declare function useLiveHeart({ api, event, isLive }: {
+    api?: Api;
+    event?: VideoEventInstance;
+    isLive?: boolean;
+}): void;
+export default useLiveHeart;

package/es/Player/live_heart.js

@@ -0,0 +1,45 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useDocumentVisibility, useRafInterval, useUpdateEffect } from 'ahooks';
+import { useRef } from 'react';
+import Events from "./event/eventName";
+function useLiveHeart(_ref) {
+  var api = _ref.api,
+    event = _ref.event,
+    isLive = _ref.isLive;
+  var documentVisibility = useDocumentVisibility();
+  var cTimeRef = useRef(0);
+  var run = function run() {
+    var _api$getCurrentTime;
+    if (!isLive || documentVisibility !== 'visible' || !api) {
+      return;
+    }
+    var current = (_api$getCurrentTime = api.getCurrentTime()) !== null && _api$getCurrentTime !== void 0 ? _api$getCurrentTime : 0;
+    var buffered = api.getSecondsLoaded();
+    if (buffered - current > 5) {
+      console.debug("\u5F53\u524D\u5EF6\u65F6\u8FC7\u5927current->".concat(current, " buffered->").concat(buffered, ", \u57FA\u4E8E\u89C6\u9891\u5F53\u524D\u7F13\u5B58\u65F6\u95F4\u66F4\u65B0\u5F53\u524D\u64AD\u653E\u65F6\u95F4 updateTime -> ").concat(buffered - 2));
+      api.seekTo(buffered - 2 > 0 ? buffered - 2 : 0);
+      api.play();
+    }
+  };
+  useUpdateEffect(function () {
+    return run();
+  }, [documentVisibility]);
+  useRafInterval(function () {
+    var _api$getCurrentTime2;
+    return cTimeRef.current = (_api$getCurrentTime2 = api === null || api === void 0 ? void 0 : api.getCurrentTime()) !== null && _api$getCurrentTime2 !== void 0 ? _api$getCurrentTime2 : 0;
+  }, 1 * 1000);
+  useRafInterval(function () {
+    return run();
+  }, 30 * 1000);
+  useRafInterval(function () {
+    var _api$video;
+    if (!api || !event) {
+      return;
+    }
+    var cuurentTime = api.getCurrentTime();
+    if (!!isLive && !((_api$video = api.video) !== null && _api$video !== void 0 && _api$video.paused) && cuurentTime === cTimeRef.current) {
+      event.emit(Events.ERROR, 'long time no play！');
+    }
+  }, 20 * 1000);
+}
+export default useLiveHeart;

package/es/Player/message.d.ts

@@ -0,0 +1,3 @@
+declare function VideoMessage(): import("react/jsx-runtime").JSX.Element;
+export declare const NoSource: () => import("react/jsx-runtime").JSX.Element;
+export default VideoMessage;

package/es/Player/message.js

@@ -0,0 +1,147 @@
+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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+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 _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, keyframes } from '@emotion/css';
+import { useContext, useMemo, useRef, useState } from 'react';
+import { Context } from "./context";
+import { useRegisterPlayerEvent, useVideoEvent } from "./event";
+import EventName from "./event/eventName";
+import IconFont from "./iconfont";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var lmPlayerMessageMaskCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  background: transparent;\n  opacity: 0;\n  transition: all 0.5s;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"])));
+var lmPlayerLoadingIconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: -1;\n  font-size: 48px;\n  visibility: hidden;\n"])));
+var lmPlayerMaskLoadingAnimationCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 1;\n  background: rgb(0 0 0 / 60%);\n  opacity: 1;\n"])));
+var loadingAnimationFrames = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var lmPlayerLoadingAnimationCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  z-index: 9;\n  visibility: visible;\n  animation: ", " 1s linear infinite;\n"])), loadingAnimationFrames);
+var lmPlayerLoadfailCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  z-index: 9;\n  visibility: visible;\n"])));
+var lmPlayerMessageCss = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 10px;\n  font-size: 16px;\n  color: #fff;\n"])));
+function VideoMessage() {
+  var _useContext = useContext(Context),
+    api = _useContext.api;
+  var _useState = useState({
+      status: null,
+      errorTimer: 1,
+      loading: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeRef = useRef();
+  var message = useMemo(function () {
+    if (state.status === 'fail') {
+      console.warn("\u89C6\u9891\u9519\u8BEF\uFF0C\u8BF7\u624B\u52A8\u5237\u65B0\u91CD\u8BD5\uFF01");
+      return '请稍后重试';
+    }
+    if (state.status === 'reload') {
+      console.warn("\u7B2C".concat(state.errorTimer, "\u6B21\u91CD\u8FDE"));
+      return "\u6B63\u5728\u5237\u65B0...";
+    }
+    return '';
+  }, [state.errorTimer, state.status]);
+  var openLoading = function openLoading() {
+    clearTimeout(timeRef.current);
+    timeRef.current = setTimeout(function () {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          loading: true
+        });
+      });
+    }, 200);
+  };
+  var closeLoading = function closeLoading() {
+    clearTimeout(timeRef.current);
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        loading: false
+      });
+    });
+  };
+  var errorReload = function errorReload(timer) {
+    clearTimeout(timeRef.current);
+    setState(function () {
+      return {
+        status: 'reload',
+        errorTimer: timer,
+        loading: true
+      };
+    });
+  };
+  var reloadFail = function reloadFail() {
+    return setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        status: 'fail'
+      });
+    });
+  };
+  var reloadSuccess = function reloadSuccess() {
+    return setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        status: null
+      });
+    });
+  };
+  var reload = function reload() {
+    return setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        status: 'reload',
+        loading: true
+      });
+    });
+  };
+  var playEnd = function playEnd() {
+    clearTimeout(timeRef.current);
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        status: null,
+        loading: false
+      });
+    });
+    api === null || api === void 0 ? void 0 : api.pause();
+  };
+  useVideoEvent('loadstart', openLoading);
+  useVideoEvent('loadeddata', closeLoading);
+  useVideoEvent('canplay', closeLoading);
+  useRegisterPlayerEvent(EventName.ERROR_RELOAD, errorReload);
+  useRegisterPlayerEvent(EventName.RELOAD_FAIL, reloadFail);
+  useRegisterPlayerEvent(EventName.RELOAD_SUCCESS, reloadSuccess);
+  useRegisterPlayerEvent(EventName.RELOAD, reload);
+  useRegisterPlayerEvent(EventName.HISTORY_PLAY_END, playEnd);
+  useRegisterPlayerEvent(EventName.CLEAR_ERROR_TIMER, reloadSuccess);
+  var loading = state.loading,
+    status = state.status;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "".concat(lmPlayerMessageMaskCss, " ").concat(loading || status === 'fail' ? lmPlayerMaskLoadingAnimationCss : ''),
+    children: [/*#__PURE__*/_jsx(IconFont, {
+      type: status === 'fail' ? 'lm-player-YesorNo_No_Dark' : 'lm-player-Loading',
+      className: "".concat(lmPlayerLoadingIconCss, " ").concat(loading && status !== 'fail' ? lmPlayerLoadingAnimationCss : status === 'fail' ? lmPlayerLoadfailCss : '')
+    }), /*#__PURE__*/_jsx("span", {
+      className: lmPlayerMessageCss,
+      children: message
+    })]
+  });
+}
+export var NoSource = function NoSource() {
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(lmPlayerMessageMaskCss, " ").concat(lmPlayerMaskLoadingAnimationCss),
+    children: /*#__PURE__*/_jsx(IconFont, {
+      style: {
+        fontSize: 80
+      },
+      type: "lm-player-PlaySource",
+      title: "\u8BF7\u9009\u62E9\u89C6\u9891\u6E90"
+    })
+  });
+};
+export default VideoMessage;

package/es/Player/player.d.ts

@@ -0,0 +1,233 @@
+import type Flvjs from '@cloud-app-dev/mpegts.js';
+import type Hls from 'hls.js';
+import type { HlsConfig } from 'hls.js';
+import type React from 'react';
+import type Api from './api';
+import type VideoEventInstance from './event';
+
+export type FlvPlayerConfig = {
+  mediaDataSource: Flvjs.MediaDataSource;
+  config: Flvjs.Config;
+};
+
+export interface ISinglePlayerProps {
+  /**
+   * 视频播放地址
+   */
+  url?: string;
+
+  /**
+   * 容器类名
+   */
+  className?: string;
+  children?: React.ReactNode;
+
+  /**
+   * 同html video muted  静音
+   * @default true
+   */
+  muted?: boolean;
+  /**
+   * 同html video autoplay  自动播放
+   * @default true
+   */
+  autoPlay?: boolean;
+
+  /**
+   * 同html video playsinline  自动播放
+   * @default false
+   */
+  playsInline?: boolean;
+  /**
+   *同html video preload  预加载
+   */
+  preload?: string;
+  /**
+   * 视频封面
+   */
+  poster?: string;
+
+  /**
+   * 同html video loop  循环
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * 视频格式
+   * @default 'native'
+   */
+  type?: 'flv' | 'hls' | 'native';
+
+  /**
+   * 隐藏工具栏
+   * @default false
+   */
+  hideContrallerBar?: boolean;
+
+  /**
+   * 直播模式
+   * @default true
+   */
+  isLive?: boolean;
+
+  /**
+   * 工具栏右外侧拓展
+   */
+  rightExtContents?: React.ReactNode;
+  /**
+   * 工具栏右内侧拓展
+   */
+  rightMidExtContents?: React.ReactNode;
+  /**
+   * 工具栏左外侧拓展
+   */
+  leftExtContents?: React.ReactNode;
+  /**
+   * 工具栏左内侧拓展
+   */
+  leftMidExtContents?: React.ReactNode;
+
+  /**
+   * 自定义时间轴
+   */
+  customTimeLine?: React.ReactNode;
+
+  /**
+   * 错误重试次数
+   * @default 5
+   */
+  errorReloadTimer?: number;
+
+  /**
+   * 自定义flv参数配置
+   * @type FlvPlayerConfig
+   */
+  flvConfig?: FlvPlayerConfig;
+
+  /**
+   * 自定义hls参数配置
+   * @type HlsConfig
+   */
+  hlsConfig?: HlsConfig;
+
+  /**
+   * 自定义reload函数
+   */
+  reload?: () => void;
+
+  /**
+   * extaction
+   */
+  extActions?: { [key: string]: (...args: any) => void };
+
+  /**
+   * 视频可播放时执行钩子
+   */
+  onCanPlayerInit?: () => void;
+
+  /**
+   * 自定义video事件
+   */
+  videoEvents?: CustomEvent[];
+
+  /**
+   * 自定义播放器的事件
+   */
+  playerEvents?: CustomEvent[];
+
+  /**
+   * 开启单帧播放
+   */
+  oneFpsPlay?: boolean;
+
+  /**
+   * 获取视频针的频次 (ms)
+   */
+  fpsDelay?: number;
+
+  /**
+   * 视频每秒多少帧，用于控制逐帧播放
+   */
+  fps?: number;
+}
+
+export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive' | 'reload'> {
+  /**
+   * 前端录像开始时间
+   */
+  begin?: number;
+
+  /**
+   * 前端录像结束时间
+   */
+  end?: number;
+
+  /**
+   * 录像时间轴发生变化回调
+   */
+  onSeek?: (time: number) => void;
+
+  forwordRef?: React.MutableRefObject<ExportPlayerType>;
+}
+
+export interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url'> {
+  /**
+   * 云录像片段信息
+   */
+  segments?: ISegmentType[];
+
+  /**
+   * 云录像开始时间
+   */
+  begin?: number;
+
+  forwordRef?: React.MutableRefObject<ExportPlayerType>;
+
+  defaultIndex?: number;
+}
+
+export const SinglePlayer: React.FunctionComponent<ISinglePlayerProps>;
+export const FrontendPlayer: React.FunctionComponent<IFrontendPlayerProps>;
+export const SegmentPlayer: React.FunctionComponent<ISegmentPlayerProps>;
+
+export type EventInfo = {
+  type: string;
+  listener: ((...args: any) => void)[];
+};
+
+export type ExportPlayerType = {
+  video: HTMLVideoElement;
+  container: HTMLElement;
+  api: Api;
+  event: VideoEventInstance;
+  plugins: [Flvjs.Player, Hls];
+  fit?: string;
+  setIndex?: (i: number) => void;
+  seekTo?: (i: number) => void;
+  reload?: () => void;
+};
+
+export interface ISegmentType {
+  id?: string;
+  /**
+   * 视频片段地址
+   */
+  url?: string;
+
+  /**
+   * 片段开始时间
+   */
+  beginTime: number;
+
+  /**
+   * 片段结束时间
+   */
+  endTime: number;
+
+  style?: any;
+}
+
+export const ISegmentTypeDemo: React.FC<ISegmentType>;
+
+export type CustomEvent = [string, () => void];

package/es/Player/segment_player.d.ts

@@ -0,0 +1,8 @@
+import type { ISegmentPlayerProps } from './player';
+/**
+ * @desc 主组件，负责片段整体逻辑控制
+ * @param param0
+ * @returns
+ */
+declare function SegmentPlayer({ segments, begin, forwordRef, defaultIndex, onCanPlayerInit, customTimeLine, ...props }: ISegmentPlayerProps): import("react/jsx-runtime").JSX.Element;
+export default SegmentPlayer;