@cloud-app-dev/vidc 3.0.5 → 3.0.6

package/es/DisableMark/index.css

@@ -0,0 +1,9 @@
+.disable-mark {
+  position: absolute;
+  cursor: not-allowed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}

package/es/DisableMark/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+interface IDisableMarkProps {
+    children: React.ReactNode;
+    disabled: boolean;
+}
+export default function DisableMark({ children, disabled }: IDisableMarkProps): JSX.Element;
+export {};

package/es/DisableMark/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import "./index.css";
+export default function DisableMark(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled;
+  console.log(disabled);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, disabled ? /*#__PURE__*/React.createElement("div", {
+    className: "disable-mark"
+  }) : null, children);
+}

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/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,7 +10,7 @@ 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';
@@ -20,7 +20,10 @@ 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,
@@ -73,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
@@ -102,6 +110,8 @@ function LivePlayer(_ref) {
       }
     }));
   })), /*#__PURE__*/React.createElement(Tools, {
+    onClose: onClose,
+    onCloseAll: onCloseAll,
     fit: fit,
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,

package/es/ScreenPlayer/LiveTools.d.ts

@@ -12,6 +12,8 @@ interface IToolsProps {
     getPlayerItem: () => ExportPlayerType | undefined;
     fit?: string;
     toggleFit?: () => void;
+    onClose?: () => void;
+    onCloseAll?: () => void;
 }
-declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit }: 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

@@ -24,7 +24,9 @@ function LiveTools(_ref) {
       getPlayerItem = _ref.getPlayerItem,
       mode = _ref.mode,
       toggleFit = _ref.toggleFit,
-      fit = _ref.fit;
+      fit = _ref.fit,
+      onClose = _ref.onClose,
+      onCloseAll = _ref.onCloseAll;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -76,7 +78,8 @@ function LiveTools(_ref) {
     type: "lm-player-Refresh_Main",
     title: "\u91CD\u8F7D"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
+    className: "player-tools-item",
+    onClick: onClose
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-YesorNo_No_Dark",
     title: "\u5173\u95ED\u5F53\u524D"
@@ -94,7 +97,8 @@ function LiveTools(_ref) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
+    className: "player-tools-item",
+    onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-YesorNo_No_Dark",
     title: "\u5173\u95ED\u6240\u6709"

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,
@@ -285,9 +288,10 @@ function RecordPlayer(_ref) {
     setState(function (old) {
       return Object.assign({}, old);
     });
-  }; // index变化同步到父组件
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
 
+  console.log(segmentItem.cid); // index变化同步到父组件
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 
   useEffect(function () {
     return onIndexChange(state.selectIndex);
@@ -338,7 +342,11 @@ 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,
@@ -347,14 +355,15 @@ function RecordPlayer(_ref) {
     mode: state.mode,
     containerRef: domRef,
     updateState: updateState,
-    onTimeChange: onTimeChange
+    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

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

package/es/ScreenPlayer/RecordTools.js

@@ -27,7 +27,9 @@ function RecordTools(_ref) {
       toggleFit = _ref.toggleFit,
       fit = _ref.fit,
       time = _ref.time,
-      onTimeChange = _ref.onTimeChange;
+      onTimeChange = _ref.onTimeChange,
+      onClose = _ref.onClose,
+      onCloseAll = _ref.onCloseAll;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -79,7 +81,8 @@ function RecordTools(_ref) {
     type: "lm-player-Refresh_Main",
     title: "\u91CD\u8F7D"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
+    className: "player-tools-item",
+    onClick: onClose
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-YesorNo_No_Dark",
     title: "\u5173\u95ED\u5F53\u524D"
@@ -114,7 +117,8 @@ function RecordTools(_ref) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
+    className: "player-tools-item",
+    onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-YesorNo_No_Dark",
     title: "\u5173\u95ED\u6240\u6709"

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -4,7 +4,6 @@ interface ISegmentTimeLineProps {
     begin?: number;
     timeCell?: ISegmentType[];
     onTimeChange?: (time: number) => void;
-    disabled?: boolean;
 }
-declare function SegmentTimeLine({ begin, timeCell, disabled, onTimeChange }: ISegmentTimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ begin, timeCell, onTimeChange }: ISegmentTimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -7,7 +7,6 @@ import TimeSlider from './TimeSlider';
 function SegmentTimeLine(_ref) {
   var begin = _ref.begin,
       timeCell = _ref.timeCell,
-      disabled = _ref.disabled,
       onTimeChange = _ref.onTimeChange;
   var ref = useRef();
 
@@ -36,9 +35,7 @@ function SegmentTimeLine(_ref) {
   }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run]);
   return /*#__PURE__*/React.createElement("div", {
     className: "record-time-line"
-  }, !disabled && /*#__PURE__*/React.createElement("div", {
-    className: "time-line-mask"
-  }), /*#__PURE__*/React.createElement("canvas", {
+  }, /*#__PURE__*/React.createElement("canvas", {
     ref: ref
   }));
 }

package/es/ScreenPlayer/demo.js

@@ -24,6 +24,7 @@ export default function App() {
       height: 800
     }
   }, /*#__PURE__*/React.createElement(LivePlayer, {
-    list: list
+    list: list,
+    onIndexChange: console.log
   })));
 }

package/es/ScreenPlayer/index.css

@@ -6,7 +6,7 @@
   min-width: 600px;
 }
 .split-screen-player-wrapper .player-layout {
-  height: calc(100% - 42px);
+  height: calc(100% - 88px);
 }
 .split-screen-player-wrapper .player-layout .player-with-ext-layout {
   float: left;
@@ -19,6 +19,10 @@
 .split-screen-player-wrapper .player-layout .player-with-ext-layout.player-current-index .lm-player-ext-layout {
   border: 1px solid var(--primary);
 }
+.split-screen-player-wrapper .player-tools-group {
+  height: 88px;
+  position: relative;
+}
 .split-screen-player-wrapper .player-record-time {
   width: 100%;
   height: 100%;
@@ -95,9 +99,6 @@
   z-index: 5;
   cursor: not-allowed;
 }
-.split-screen-player-wrapper.split-screen-player-wrapper-record .player-layout {
-  height: calc(100% - 42px - 60px);
-}
 .player-time-select {
   width: 190px;
   display: flex;

package/es/ScreenPlayer/interface.d.ts

@@ -23,6 +23,19 @@ export interface IRecordPlayerProps {
    * 窗口索引变化，后续基于索引传入播放必要数据
    */
   onIndexChange: (idx: number) => void;
+
+  /**
+   * 关闭单个窗口
+   */
+  onClose?: () => void;
+
+  /**
+   * 关闭所有窗口
+   */
+  onCloseAll?: () => void;
+  /**
+   * 窗口索引变化，后续基于索引传入播放必要数据
+   */
 }
 
 export interface IRecordPlayerState {
@@ -70,6 +83,20 @@ export type ScreenItemLivePlayerType = {
 export interface ILivePlayerProps {
   list?: ScreenItemLivePlayerType[];
   children?: JSX.Element;
+
+  /**
+   * 关闭单个窗口
+   */
+  onClose?: () => void;
+
+  /**
+   * 关闭所有窗口
+   */
+  onCloseAll?: () => void;
+  /**
+   * 窗口索引变化，后续基于索引传入播放必要数据
+   */
+  onIndexChange: (idx: number) => void;
 }
 
 export interface ILivePlayerState {

package/es/index.d.ts

@@ -6,6 +6,7 @@ export { default as Box } from './Box';
 export { default as CheckGroupFixed } from './CheckGroupFixed';
 export { default as Config } from './Config';
 export { default as ConfigContext } from './ConfigContext';
+export { default as DisableMark } from './DisableMark';
 export { default as DomMove } from './DomMove';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';

package/es/index.js

@@ -6,6 +6,7 @@ export { default as Box } from './Box';
 export { default as CheckGroupFixed } from './CheckGroupFixed';
 export { default as Config } from './Config';
 export { default as ConfigContext } from './ConfigContext';
+export { default as DisableMark } from './DisableMark';
 export { default as DomMove } from './DomMove';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",