@cloud-app-dev/vidc 3.0.3 → 3.0.6

package/es/Player/live_heart.js

@@ -1,28 +1,10 @@
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
-
-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, { useEffect, useState } from 'react';
+import _useRafInterval from "ahooks/es/useRafInterval";
+import React, { useEffect } from 'react';
 import BrowserTab from './event/browserTabEvent';
 
 function LiveHeart(_ref) {
   var api = _ref.api;
 
-  var _useState = useState(Date.now()),
-      _useState2 = _slicedToArray(_useState, 2),
-      runDep = _useState2[0],
-      setRundep = _useState2[1];
-
   var run = function run() {
     var current = api.getCurrentTime();
     var buffered = api.getSecondsLoaded();
@@ -30,6 +12,7 @@ function LiveHeart(_ref) {
     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();
     }
   };
 
@@ -41,21 +24,13 @@ function LiveHeart(_ref) {
     BrowserTab.addEventListener(browserTabChange);
     return function () {
       BrowserTab.removeEventListener(browserTabChange);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [api]);
 
-  _useUpdateEffect(function () {
-    run();
-  }, [runDep]);
+  _useRafInterval(function () {
+    return run();
+  }, 30 * 1000);
 
-  useEffect(function () {
-    var timer = setInterval(function () {
-      return setRundep(Date.now());
-    }, 30 * 1000);
-    return function () {
-      return clearInterval(timer);
-    };
-  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 

package/es/Player/single_player.js

@@ -16,6 +16,7 @@ import { __rest } from "tslib";
 import React, { useEffect, useMemo, useRef, useState, useImperativeHandle } from 'react';
 import { usePlayerApi } from './api';
 import { usePlayerEvent, useRegisterPlayerEvents, useVideoEvents } from './event';
+import EventName from './event/eventName';
 import ContrallerBar from './contraller_bar';
 import ContrallerEvent from './contraller_bar/contraller_event';
 import LiveHeart from './live_heart';
@@ -99,7 +100,11 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         container: domRef.current
       });
     });
-  }, []); // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
+  }, []); // url 变化清理错误次数
+
+  useEffect(function () {
+    event && event.emit(EventName.CLEAR_ERROR_TIMER); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]); // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
 
   var reload = function reload() {
     return playReload(video, event, flv, hls, url);

package/es/ScreenPlayer/Live.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ILivePlayerProps } from './interface';
 import './index.less';
-declare function LivePlayer({ list, children }: ILivePlayerProps): JSX.Element;
+declare function LivePlayer({ list, children, onIndexChange, onClose, onCloseAll }: ILivePlayerProps): JSX.Element;
 export default LivePlayer;

package/es/ScreenPlayer/Live.js

@@ -10,16 +10,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ScreenType, mergeFill } from './utils';
 import { LivePlayerWithExt } from './PlayerWithExt';
 import Tools from './LiveTools';
+import useVideoFit from './useVideoFit';
 import "./index.css";
 
 function LivePlayer(_ref) {
   var _ref$list = _ref.list,
       list = _ref$list === void 0 ? [] : _ref$list,
-      children = _ref.children;
+      children = _ref.children,
+      onIndexChange = _ref.onIndexChange,
+      onClose = _ref.onClose,
+      onCloseAll = _ref.onCloseAll;
 
   var _useState = useState({
     screenNum: 4,
@@ -30,7 +34,12 @@ function LivePlayer(_ref) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var domRef = useRef(null); // 缓存所有player对象
+  var domRef = useRef(null);
+
+  var _useVideoFit = useVideoFit(domRef, []),
+      fit = _useVideoFit.fit,
+      toggleFit = _useVideoFit.toggleFit; // 缓存所有player对象
+
 
   var playerRef = useRef([]);
   var screenType = useMemo(function () {
@@ -67,8 +76,13 @@ function LivePlayer(_ref) {
     setState(function (old) {
       return Object.assign(Object.assign({}, old), obj);
     });
-  };
+  }; // index变化同步到父组件
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
 
+  useEffect(function () {
+    return onIndexChange(state.selectIndex);
+  }, [state.selectIndex]);
   return /*#__PURE__*/React.createElement("div", {
     className: "split-screen-player-wrapper",
     ref: domRef
@@ -96,6 +110,10 @@ function LivePlayer(_ref) {
       }
     }));
   })), /*#__PURE__*/React.createElement(Tools, {
+    onClose: onClose,
+    onCloseAll: onCloseAll,
+    fit: fit,
+    toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: state.screenNum,
     mode: state.mode,

package/es/ScreenPlayer/LiveTools.d.ts

@@ -10,6 +10,10 @@ interface IToolsProps {
     screenNum: number;
     mode: PlayModeType;
     getPlayerItem: () => ExportPlayerType | undefined;
+    fit?: string;
+    toggleFit?: () => void;
+    onClose?: () => void;
+    onCloseAll?: () => void;
 }
-declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode }: IToolsProps): JSX.Element;
+declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, onClose, onCloseAll }: IToolsProps): JSX.Element;
 export default LiveTools;

package/es/ScreenPlayer/LiveTools.js

@@ -1,3 +1,4 @@
+import _useUpdate from "ahooks/es/useUpdate";
 import _useFullscreen3 from "ahooks/es/useFullscreen";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -13,29 +14,39 @@ 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 { ScreenType } from './utils';
+import IconFont from '../Player/iconfont';
+import ScreenSelect from './ScreenSelect';
 
 function LiveTools(_ref) {
   var containerRef = _ref.containerRef,
       updateState = _ref.updateState,
       screenNum = _ref.screenNum,
       getPlayerItem = _ref.getPlayerItem,
-      mode = _ref.mode;
+      mode = _ref.mode,
+      toggleFit = _ref.toggleFit,
+      fit = _ref.fit,
+      onClose = _ref.onClose,
+      onCloseAll = _ref.onCloseAll;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
       isFullscreen = _useFullscreen2[0],
-      toggleFullscreen = _useFullscreen2[1].toggleFullscreen; // 播放状态控制
+      toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
+
+  var update = _useUpdate(); // 播放状态控制
 
 
   var playToggle = function playToggle() {
-    var player = getPlayerItem();
+    var player = getPlayerItem(); // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+
     player ? player.video.paused ? player.api.play() : player.api.pause() : undefined;
+    update();
   }; // 重连
 
 
   var reload = function reload() {
-    var player = getPlayerItem();
+    var player = getPlayerItem(); // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+
     player ? player.reload ? player.reload() : player.api.reload() : undefined;
   };
 
@@ -44,52 +55,85 @@ function LiveTools(_ref) {
     return player ? player.api.snapshot() : undefined;
   };
 
+  var player = getPlayerItem();
   return /*#__PURE__*/React.createElement("div", {
     className: "player-tools"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "split-num"
-  }, ScreenType.map(function (item) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: "".concat(item.name),
-      style: {
-        padding: 6
-      },
-      onClick: function onClick() {
-        return updateState({
-          screenNum: item.name
-        });
-      }
-    }, item.name);
-  }), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
-    onClick: toggleFullscreen
-  }, isFullscreen ? '退出' : '全屏'), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
+    className: "player-tools-left"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-volume-close",
+    title: "\u97F3\u91CF"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-xiangji1fill",
+    title: "\u622A\u56FE",
+    onClick: snapshot
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: reload
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-Refresh_Main",
+    title: "\u91CD\u8F7D"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-YesorNo_No_Dark",
+    title: "\u5173\u95ED\u5F53\u524D"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "player-tools-mid"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: playToggle
+  }, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-Pause_Main",
+    title: "\u6682\u505C"
+  }) : /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-Play_Main",
+    title: "\u64AD\u653E"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "player-tools-right"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: onCloseAll
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-YesorNo_No_Dark",
+    title: "\u5173\u95ED\u6240\u6709"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
     onClick: function onClick() {
       return updateState({
         mode: mode === 1 ? 2 : 1
       });
     }
-  }, "\u5207\u6362", mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
-    onClick: playToggle
-  }, "\u64AD\u653E/\u6682\u505C"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
-    onClick: reload
-  }, "\u91CD\u8FDE"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
-    onClick: snapshot
-  }, "\u622A\u56FE")));
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-YesorNo_No_Dark",
+    title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: toggleFit
+  }, fit === 'fill' ? /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-S_View_ScreenSizeFull",
+    title: "\u81EA\u9002\u5E94"
+  }) : /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-S_View_ScreenSizeFull",
+    title: "\u586B\u5145"
+  })), /*#__PURE__*/React.createElement(ScreenSelect, {
+    screenNum: screenNum,
+    updateState: updateState
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: toggleFullscreen
+  }, isFullscreen ? /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-ExitFull_Main",
+    title: "\u5168\u5C4F"
+  }) : /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-Full_Main",
+    title: "\u5168\u5C4F"
+  }))));
 }
 
 export default LiveTools;

package/es/ScreenPlayer/PlayerWithExt.js

@@ -1,3 +1,5 @@
+import _useFullscreen3 from "ahooks/es/useFullscreen";
+
 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."); }
@@ -18,6 +20,8 @@ import FrontendPlayer from '../Player/frontend_player';
 import ExtModel from '../PlayerExt';
 import moment from 'moment';
 export function LivePlayerWithExt(_a) {
+  var _b;
+
   var mode = _a.mode,
       isLive = _a.isLive,
       url = _a.url,
@@ -33,10 +37,16 @@ export function LivePlayerWithExt(_a) {
   var update = useCallback(function () {
     return updatePlayer(ref);
   }, [updatePlayer]);
+
+  var _useFullscreen = _useFullscreen3((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
+      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+      toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
+
   return /*#__PURE__*/React.createElement("div", {
     className: "player-with-ext-layout ".concat(className),
     style: style,
-    onClick: onClick
+    onClick: onClick,
+    onDoubleClick: toggleFullscreen
   }, /*#__PURE__*/React.createElement(ExtModel, {
     url: url,
     mode: mode,
@@ -51,6 +61,8 @@ export function LivePlayerWithExt(_a) {
   }))));
 }
 export function SegmentPlayerWithExt(_a) {
+  var _b;
+
   var begin = _a.begin,
       style = _a.style,
       className = _a.className,
@@ -63,10 +75,16 @@ export function SegmentPlayerWithExt(_a) {
   var update = useCallback(function () {
     return updatePlayer(ref);
   }, [updatePlayer]);
+
+  var _useFullscreen4 = _useFullscreen3((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
+      _useFullscreen5 = _slicedToArray(_useFullscreen4, 2),
+      toggleFullscreen = _useFullscreen5[1].toggleFullscreen;
+
   return /*#__PURE__*/React.createElement("div", {
     className: "player-with-ext-layout ".concat(className),
     style: style,
-    onClick: onClick
+    onClick: onClick,
+    onDoubleClick: toggleFullscreen
   }, /*#__PURE__*/React.createElement(ExtModel, {
     segments: segments,
     mode: 1
@@ -90,6 +108,8 @@ export function FrontendPlayerWithExt(_ref) {
       onClick = _ref.onClick,
       pluginDownloadUrl = _ref.pluginDownloadUrl;
 
+  var _a;
+
   var _useState = useState({
     begin: 0,
     end: 0,
@@ -136,11 +156,16 @@ export function FrontendPlayerWithExt(_ref) {
   var update = useCallback(function () {
     return updatePlayer(ref);
   }, [updatePlayer]);
-  console.log(state.url);
+
+  var _useFullscreen6 = _useFullscreen3((_a = ref.current) === null || _a === void 0 ? void 0 : _a.container),
+      _useFullscreen7 = _slicedToArray(_useFullscreen6, 2),
+      toggleFullscreen = _useFullscreen7[1].toggleFullscreen;
+
   return /*#__PURE__*/React.createElement("div", {
     className: "player-with-ext-layout ".concat(className),
     style: style,
-    onClick: onClick
+    onClick: onClick,
+    onDoubleClick: toggleFullscreen
   }, /*#__PURE__*/React.createElement(ExtModel, {
     segments: segments,
     mode: mode,

package/es/ScreenPlayer/Record.d.ts

@@ -6,5 +6,5 @@ import './index.less';
  * @param param0
  * @returns
  */
-declare function RecordPlayer({ list, children, queryRecord, onIndexChange }: IRecordPlayerProps): JSX.Element;
+declare function RecordPlayer({ list, children, queryRecord, onIndexChange, onClose, onCloseAll }: IRecordPlayerProps): JSX.Element;
 export default RecordPlayer;

package/es/ScreenPlayer/Record.js

@@ -32,6 +32,7 @@ import RecordTools from './RecordTools';
 import SegmentTimeLine from './SegmentTimeLine';
 import useRecordList from './useRecordList';
 import useVideoFit from './useVideoFit';
+import DisableMark from '../DisableMark';
 import "./index.css";
 /**
  * @desc 录像设计的时间全部需要到毫秒
@@ -45,7 +46,9 @@ function RecordPlayer(_ref) {
   var list = _ref.list,
       children = _ref.children,
       queryRecord = _ref.queryRecord,
-      onIndexChange = _ref.onIndexChange;
+      onIndexChange = _ref.onIndexChange,
+      onClose = _ref.onClose,
+      onCloseAll = _ref.onCloseAll;
 
   var _useState = useState({
     screenNum: 4,
@@ -278,7 +281,16 @@ function RecordPlayer(_ref) {
       }, _callee);
     }));
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [segmentItem.cid, segmentItem.recordType, segmentItem.segments, state.loading]); // index变化同步到父组件
+  [segmentItem.cid, segmentItem.recordType, segmentItem.segments, state.loading]);
+
+  var _updatePlayer = function updatePlayer(player, index) {
+    playerRef.current[index] = player;
+    setState(function (old) {
+      return Object.assign({}, old);
+    });
+  };
+
+  console.log(segmentItem.cid); // index变化同步到父组件
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
   useEffect(function () {
@@ -297,7 +309,7 @@ function RecordPlayer(_ref) {
       key: "".concat((_b = item === null || item === void 0 ? void 0 : item.date) !== null && _b !== void 0 ? _b : '', "-").concat((_c = item.cid) !== null && _c !== void 0 ? _c : '', "-").concat(index),
       className: state.selectIndex === index ? 'player-current-index' : '',
       updatePlayer: function updatePlayer(player) {
-        return playerRef.current[index] = player;
+        return _updatePlayer(player, index);
       },
       onClick: function onClick() {
         return setState(function (old) {
@@ -314,7 +326,7 @@ function RecordPlayer(_ref) {
       className: state.selectIndex === index ? 'player-current-index' : '',
       segments: ((_d = recordList[index]) === null || _d === void 0 ? void 0 : _d.segments) || [],
       updatePlayer: function updatePlayer(player) {
-        return playerRef.current[index] = player;
+        return _updatePlayer(player, index);
       },
       onClick: function onClick() {
         return setState(function (old) {
@@ -330,21 +342,28 @@ function RecordPlayer(_ref) {
         height: screenType.height
       }
     }));
-  })), /*#__PURE__*/React.createElement(RecordTools, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "player-tools-group"
+  }, /*#__PURE__*/React.createElement(DisableMark, {
+    disabled: !segmentItem.cid
+  }, /*#__PURE__*/React.createElement(RecordTools, {
+    time: state.currentTimes[state.selectIndex],
     fit: fit,
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: state.screenNum,
     mode: state.mode,
     containerRef: domRef,
-    updateState: updateState
+    updateState: updateState,
+    onTimeChange: onTimeChange,
+    onClose: onClose,
+    onCloseAll: onCloseAll
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
-    disabled: !!segmentItem.cid,
     begin: timeBegin,
     timeCell: segmentItem.segments,
     key: state.selectIndex,
     onTimeChange: onTimeChange
-  }), children && /*#__PURE__*/React.cloneElement(children, {
+  }))), children && /*#__PURE__*/React.cloneElement(children, {
     selectIndex: state.selectIndex
   }));
 }

package/es/ScreenPlayer/RecordTools.d.ts

@@ -12,6 +12,10 @@ interface IToolsProps {
     getPlayerItem: () => ExportPlayerType | undefined;
     fit?: string;
     toggleFit?: () => void;
+    time?: number;
+    onTimeChange?: (time: number) => void;
+    onClose?: () => void;
+    onCloseAll?: () => void;
 }
-declare function RecordTools({ containerRef, updateState, screenNum, getPlayerItem, mode, fit, toggleFit }: IToolsProps): JSX.Element;
+declare function RecordTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll }: IToolsProps): JSX.Element;
 export default RecordTools;