@cloud-app-dev/vidc 3.0.7 → 3.0.10

package/es/ScreenPlayer/PlayerWithExt.js

@@ -69,7 +69,8 @@ export function SegmentPlayerWithExt(_a) {
       segments = _a.segments,
       updatePlayer = _a.updatePlayer,
       onClick = _a.onClick,
-      props = __rest(_a, ["begin", "style", "className", "segments", "updatePlayer", "onClick"]);
+      mode = _a.mode,
+      props = __rest(_a, ["begin", "style", "className", "segments", "updatePlayer", "onClick", "mode"]);
 
   var ref = useRef();
   var update = useCallback(function () {
@@ -87,7 +88,7 @@ export function SegmentPlayerWithExt(_a) {
     onDoubleClick: toggleFullscreen
   }, /*#__PURE__*/React.createElement(ExtModel, {
     segments: segments,
-    mode: 1
+    mode: mode
   }, /*#__PURE__*/React.createElement(SegmentPlayer, Object.assign({}, props, {
     segments: segments,
     type: "hls",

package/es/ScreenPlayer/Record.d.ts

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

package/es/ScreenPlayer/Record.js

@@ -36,6 +36,16 @@ import useRecordList from './useRecordList';
 import useVideoFit from './useVideoFit';
 import DisableMark from '../DisableMark';
 import "./index.css";
+var defaultState = {
+  screenNum: 4,
+  selectIndex: 0,
+  modes: [],
+  currentTimes: [],
+  loading: false,
+  seekTo: 0,
+  mergeSegments: [],
+  timeMode: 24
+};
 /**
  * @desc 录像设计的时间全部需要到毫秒
  * @param param0
@@ -50,18 +60,10 @@ function RecordPlayer(_ref) {
       queryRecord = _ref.queryRecord,
       onIndexChange = _ref.onIndexChange,
       onClose = _ref.onClose,
-      onCloseAll = _ref.onCloseAll;
-
-  var _useState = useState({
-    screenNum: 4,
-    selectIndex: 0,
-    mode: 1,
-    currentTimes: [],
-    loading: false,
-    seekTo: 0,
-    mergeSegments: [],
-    timeMode: 24
-  }),
+      onCloseAll = _ref.onCloseAll,
+      download = _ref.download;
+
+  var _useState = useState(Object.assign({}, defaultState)),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
@@ -113,11 +115,6 @@ function RecordPlayer(_ref) {
 
     return (_a = state.currentTimes[state.selectIndex]) !== null && _a !== void 0 ? _a : segmentItem.date;
   }, [segmentItem.date, state.currentTimes, state.selectIndex]);
-  /**
-   *  专门
-   */
-
-  useEffect(function () {}, [fit]);
   /**
    * @desc 用户缓存接收list的变化。
    */
@@ -202,7 +199,10 @@ function RecordPlayer(_ref) {
     }
 
     if (newState.hasOwnProperty('mode')) {
-      obj.mode = newState.mode;
+      var newModes = _toConsumableArray(state.modes);
+
+      newModes[state.selectIndex] = newState.mode;
+      obj.modes = newModes;
     }
 
     if (newState.hasOwnProperty('timeMode')) {
@@ -319,7 +319,7 @@ function RecordPlayer(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-layout"
   }, screenList.map(function (item, index) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
 
     return item.recordType === 1 ? /*#__PURE__*/React.createElement(SegmentPlayerWithExt, Object.assign({}, item, {
       segments: ((_a = recordList[index]) === null || _a === void 0 ? void 0 : _a.segments) || [],
@@ -338,10 +338,11 @@ function RecordPlayer(_ref) {
       style: {
         width: screenType.width,
         height: screenType.height
-      }
+      },
+      mode: (_d = item.mode) !== null && _d !== void 0 ? _d : state.modes[index]
     })) : /*#__PURE__*/React.createElement(FrontendPlayerWithExt, Object.assign({}, item, {
       className: state.selectIndex === index ? 'player-current-index' : '',
-      segments: ((_d = recordList[index]) === null || _d === void 0 ? void 0 : _d.segments) || [],
+      segments: ((_e = recordList[index]) === null || _e === void 0 ? void 0 : _e.segments) || [],
       updatePlayer: function updatePlayer(player) {
         return _updatePlayer(player, index);
       },
@@ -352,8 +353,8 @@ function RecordPlayer(_ref) {
           });
         });
       },
-      mode: state.mode,
-      key: "".concat((_e = item === null || item === void 0 ? void 0 : item.date) !== null && _e !== void 0 ? _e : '', "-").concat((_f = item.cid) !== null && _f !== void 0 ? _f : '', "-").concat(index),
+      mode: (_f = item.mode) !== null && _f !== void 0 ? _f : state.modes[index],
+      key: "".concat((_g = item === null || item === void 0 ? void 0 : item.date) !== null && _g !== void 0 ? _g : '', "-").concat((_h = item.cid) !== null && _h !== void 0 ? _h : '', "-").concat(index),
       style: {
         width: screenType.width,
         height: screenType.height
@@ -369,13 +370,14 @@ function RecordPlayer(_ref) {
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: state.screenNum,
-    mode: state.mode,
+    mode: state.modes[state.selectIndex],
     containerRef: domRef,
     updateState: updateState,
     onTimeChange: onTimeChange,
     onClose: onClose,
     onCloseAll: onCloseAll,
-    timeMode: state.timeMode
+    timeMode: state.timeMode,
+    download: download
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
     updateState: updateState,

package/es/ScreenPlayer/RecordTools.d.ts

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

package/es/ScreenPlayer/RecordTools.js

@@ -22,6 +22,7 @@ import TimeMode from './TimeMode';
 function RecordTools(_ref) {
   var containerRef = _ref.containerRef,
       updateState = _ref.updateState,
+      download = _ref.download,
       screenNum = _ref.screenNum,
       timeMode = _ref.timeMode,
       getPlayerItem = _ref.getPlayerItem,
@@ -84,37 +85,56 @@ function RecordTools(_ref) {
     title: "\u91CD\u8F7D"
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
-    onClick: onClose
+    onClick: download
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
-    title: "\u5173\u95ED\u5F53\u524D"
+    type: "lm-player-xiazai",
+    title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
+    className: "player-tools-item",
+    onClick: function onClick() {
+      return updateState({
+        mode: mode !== 2 ? 2 : 1
+      });
+    }
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_Edit_LoadDown",
-    title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"
+    style: {
+      top: 2,
+      position: 'relative',
+      left: 1
+    },
+    type: "lm-player-S_Device_shezhi",
+    title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", {
     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"
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-tingzhi",
+    title: "\u505C\u6B62",
+    style: {
+      fontSize: 16
+    }
   })), /*#__PURE__*/React.createElement(TimeSelect, {
     time: time,
     onChange: onTimeChange
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
     onClick: playToggle
   }, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-Pause_Main",
-    title: "\u6682\u505C"
+    title: "\u6682\u505C",
+    style: {
+      fontSize: 22
+    }
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Play_Main",
+    style: {
+      fontSize: 17,
+      position: 'relative',
+      left: 2,
+      top: 2
+    },
+    type: "lm-player-bofang",
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
@@ -122,26 +142,16 @@ function RecordTools(_ref) {
     className: "player-tools-item",
     onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
+    type: "lm-player-quanbuguanbi",
     title: "\u5173\u95ED\u6240\u6709"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item",
-    onClick: function onClick() {
-      return updateState({
-        mode: mode === 1 ? 2 : 1
-      });
-    }
-  }, /*#__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",
+    type: "lm-player-huamianshiying",
     title: "\u81EA\u9002\u5E94"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ScreenSizeFull",
+    type: "lm-player-huamianshiying",
     title: "\u586B\u5145"
   })), /*#__PURE__*/React.createElement(ScreenSelect, {
     screenNum: screenNum,
@@ -150,10 +160,10 @@ function RecordTools(_ref) {
     className: "player-tools-item",
     onClick: toggleFullscreen
   }, isFullscreen ? /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-ExitFull_Main",
+    type: "lm-player-quanping",
     title: "\u5168\u5C4F"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Full_Main",
+    type: "lm-player-quanping",
     title: "\u5168\u5C4F"
   })), /*#__PURE__*/React.createElement(TimeMode, {
     timeMode: timeMode,

package/es/ScreenPlayer/ScreenSelect.js

@@ -1,28 +1,49 @@
-import "antd/lib/tooltip/style";
-import _Tooltip from "antd/lib/tooltip";
-import React from 'react';
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+import React, { useMemo } from 'react';
+import CustomRenderSelect from '../CustomRenderSelect';
 import { ScreenType } from './utils';
+import IconFont from '../Player/iconfont';
 
 function ScreenSelect(_ref) {
   var screenNum = _ref.screenNum,
       updateState = _ref.updateState;
-  return /*#__PURE__*/React.createElement(_Tooltip, {
-    title: /*#__PURE__*/React.createElement("div", null, ScreenType.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: "".concat(item.name),
-        style: {
-          padding: 6
-        },
-        onClick: function onClick() {
-          return updateState({
-            screenNum: item.name
-          });
-        }
-      }, item.name);
-    }))
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
-  }, screenNum));
+  var icon = useMemo(function () {
+    return ScreenType.find(function (v) {
+      return v.name === screenNum;
+    }).icon;
+  }, []);
+  return /*#__PURE__*/React.createElement(CustomRenderSelect, {
+    value: screenNum,
+    dropdownClassName: "custom-select-dropdown ",
+    customRender: function customRender() {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "select-current-screen-item"
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: icon
+      }));
+    },
+    onChange: function onChange(v) {
+      return updateState({
+        screenNum: v
+      });
+    },
+    placement: "topLeft"
+  }, ScreenType.map(function (item) {
+    return /*#__PURE__*/React.createElement(_Select.Option, {
+      key: "".concat(item.name),
+      value: item.name
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingRight: 4,
+        color: 'var(--icon)',
+        position: 'relative',
+        top: 1
+      }
+    }, /*#__PURE__*/React.createElement(IconFont, {
+      type: item.icon
+    })), item.name, "\u5206\u5C4F");
+  }));
 }
 
 export default ScreenSelect;

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -9,5 +9,5 @@ interface ISegmentTimeLineProps {
         timeMode: number;
     }) => void;
 }
-declare function SegmentTimeLine({ begin, timeCell, onTimeChange, timeMode }: ISegmentTimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ begin, timeCell, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -1,3 +1,5 @@
+import _useUnmount from "ahooks/es/useUnmount";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useThrottleFn2 from "ahooks/es/useThrottleFn";
 import _useSize from "ahooks/es/useSize";
 import moment from 'moment';
@@ -8,8 +10,10 @@ function SegmentTimeLine(_ref) {
   var begin = _ref.begin,
       timeCell = _ref.timeCell,
       onTimeChange = _ref.onTimeChange,
-      timeMode = _ref.timeMode;
+      timeMode = _ref.timeMode,
+      updateState = _ref.updateState;
   var ref = useRef();
+  var timeSliderRef = useRef();
 
   var size = _useSize(ref);
 
@@ -24,17 +28,32 @@ function SegmentTimeLine(_ref) {
       minutes: 0,
       seconds: 0
     }).valueOf();
-    var timeLine = new TimeSlider(ref.current, {
+    timeSliderRef.current = new TimeSlider(ref.current, {
       onTimeChange: run,
       start_timestamp: time - timeMode / 2 * 3600 * 1000,
       current_timestamp: time,
       timecell: timeCell,
-      hours_per_ruler: timeMode
+      hours_per_ruler: timeMode,
+      onHoursPerChange: function onHoursPerChange(hour) {
+        return updateState({
+          timeMode: hour
+        });
+      }
     });
-    return function () {
-      return timeLine.destory();
-    };
-  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run, timeMode]);
+  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run]);
+  /**
+   * hour变化更新时间轴而不是重绘
+   */
+
+  _useUpdateEffect(function () {
+    return timeSliderRef.current.drawHourChange(timeMode);
+  }, [timeMode]);
+
+  _useUnmount(function () {
+    timeSliderRef.current.destory();
+    timeSliderRef.current = null;
+  });
+
   return /*#__PURE__*/React.createElement("div", {
     className: "record-time-line"
   }, /*#__PURE__*/React.createElement("canvas", {

package/es/ScreenPlayer/TimeMode.js

@@ -10,13 +10,19 @@ function TimeMode(_ref) {
     value: timeMode,
     onChange: onChange,
     className: "time-mode-select",
-    dropdownClassName: "time-mode-select-dropdown",
+    dropdownClassName: "custom-select-dropdown",
     placement: "topLeft"
   }, TimeModeLibs.map(function (item) {
     return /*#__PURE__*/React.createElement(_Select.Option, {
       value: item.name,
       key: item.name
-    }, item.name, "\u5C0F\u65F6");
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'inline-block',
+        width: 20,
+        textAlign: 'center'
+      }
+    }, item.name), "\u5C0F\u65F6");
   }));
 }
 

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -5,6 +5,7 @@ export interface ITimeSliderOptions {
     timecell?: TimeCellItem[];
     current_timestamp?: number;
     onTimeChange?: (time: number, outTimeline?: boolean) => void;
+    onHoursPerChange?: (hour: number) => void;
 }
 export declare type TimeCellItem = ISegmentType;
 export default class TimeSlider {
@@ -115,6 +116,7 @@ export default class TimeSlider {
      * 滚轮放大缩小，以时间轴中心为准 mousewheel事件
      */
     mousewheelFunc: (event: any) => void;
+    drawHourChange(hour: number): void;
     /**
      * 获取鼠标posx
      * @param {*} e

package/es/ScreenPlayer/TimeSlider.js

@@ -1,3 +1,5 @@
+import _nextTick from "@cloud-app-dev/utils/es/nextTick";
+
 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, descriptor.key, descriptor); } }
@@ -5,6 +7,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 import moment from 'moment';
+var hours = [1, 6, 12, 24];
 var currentColor = '#FF000A';
 var normalLineColor = '#ffffff';
 var hoverLineColor = '#319BFF';
@@ -177,24 +180,33 @@ var TimeSlider = /*#__PURE__*/function () {
       var middle_time = _this.start_timestamp + _this.hours_per_ruler * 3600 * 1000 / 2; //ms 记住当前中间的时间
 
       if (delta < 0) {
-        _this.zoom = _this.zoom + 4;
+        // 缩小
+        var index = hours.indexOf(_this.zoom);
 
-        if (_this.zoom >= 24) {
-          _this.zoom = 24; //放大最大24小时
+        if (index === hours.length - 1) {
+          _this.zoom = hours[index];
+        } else {
+          _this.zoom = hours[index + 1];
         }
 
         _this.hours_per_ruler = _this.zoom;
       } else if (delta > 0) {
         // 放大
-        _this.zoom = _this.zoom - 4;
+        var _index = hours.indexOf(_this.zoom);
 
-        if (_this.zoom <= 1) {
-          _this.zoom = 1; //缩小最小1小时
+        if (_index === 0) {
+          _this.zoom = hours[0];
+        } else {
+          _this.zoom = hours[_index - 1];
         }
 
         _this.hours_per_ruler = _this.zoom;
       }
 
+      _nextTick(function () {
+        return _this.options.onHoursPerChange && _this.options.onHoursPerChange(_this.hours_per_ruler);
+      });
+
       _this.clearCanvas();
 
       _this.start_timestamp = middle_time - _this.hours_per_ruler * 3600 * 1000 / 2; //start_timestamp = 当前中间的时间 - zoom/2
@@ -512,6 +524,17 @@ var TimeSlider = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "drawHourChange",
+    value: function drawHourChange(hour) {
+      var middle_time = this.start_timestamp + this.hours_per_ruler * 3600 * 1000 / 2; //ms 记住当前中间的时间
+
+      this.hours_per_ruler = this.zoom = hour;
+      this.clearCanvas();
+      this.start_timestamp = middle_time - this.hours_per_ruler * 3600 * 1000 / 2; //start_timestamp = 当前中间的时间 - zoom/2
+
+      this.init(this.start_timestamp, this.timecell, true);
+    }
     /**
      * 清除canvas 每次重新绘制需要先清除
      */

package/es/ScreenPlayer/index.css

@@ -24,8 +24,6 @@
   position: relative;
 }
 .split-screen-player-wrapper .player-record-time {
-  width: 100%;
-  height: 100%;
   text-align: center;
   background-color: var(--gray11);
   line-height: 42px;
@@ -69,7 +67,8 @@
   color: var(--gray1);
   text-align: center;
   cursor: pointer;
-  margin-right: 4px;
+  margin-right: 10px;
+  display: inline-block;
 }
 .split-screen-player-wrapper .player-tools .player-tools-item .lm-player-iconfont {
   font-size: 20px;
@@ -78,6 +77,23 @@
   background-color: var(--gray11);
   border-radius: var(--radius1);
 }
+.split-screen-player-wrapper .player-tools .select-current-screen-item {
+  font-size: 18px;
+  width: 32px;
+  height: 32px;
+  color: var(--gray1);
+  text-align: center;
+  cursor: pointer;
+  margin-right: 6px;
+  display: inline-block;
+}
+.split-screen-player-wrapper .player-tools .select-current-screen-item .lm-player-iconfont {
+  font-size: 20px;
+}
+.split-screen-player-wrapper .player-tools .select-current-screen-item:hover {
+  background-color: var(--gray11);
+  border-radius: var(--radius1);
+}
 .split-screen-player-wrapper.split-screen-player-wrapper-record .record-time-line {
   width: 100%;
   height: 46px;
@@ -105,20 +121,20 @@
   justify-content: space-around;
   align-items: center;
 }
-.time-mode-select {
+.cloudapp-select.time-mode-select {
   font-size: var(--fs-small);
   color: var(--gray1);
 }
-.time-mode-select .cloudapp-select-selector {
-  background-color: transparent !important;
-  border-radius: var(--radius1) !important;
+.cloudapp-select.time-mode-select .cloudapp-select-selector {
+  background-color: transparent;
+  border-radius: var(--radius1);
 }
-.time-mode-select .anticon {
+.cloudapp-select.time-mode-select .anticon {
   color: var(--gray1);
 }
-.time-mode-select-dropdown {
+.custom-select-dropdown {
   font-size: var(--fs-small);
 }
-.time-mode-select-dropdown .cloudapp-select-item {
+.custom-select-dropdown .cloudapp-select-item {
   font-size: var(--fs-small);
 }

package/es/ScreenPlayer/interface.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PlayModeType } from '../PlayerExt';
 import { ISegmentType } from '../Player/player';
 
 export type RecordItem = {
@@ -8,6 +9,7 @@ export type RecordItem = {
   segments?: ISegmentType[];
   url?: string;
   recordType?: 1 | 2; //1云录像 2前端录像
+  mode?: PlayModeType;
 };
 
 export interface IRecordPlayerProps {
@@ -34,8 +36,9 @@ export interface IRecordPlayerProps {
    */
   onCloseAll?: () => void;
   /**
-   * 窗口索引变化，后续基于索引传入播放必要数据
+   * 录像下载回调
    */
+  download?: () => void;
 }
 
 export interface IRecordPlayerState {
@@ -52,7 +55,7 @@ export interface IRecordPlayerState {
   /**
    * 插件OR浏览器
    */
-  mode: PlayModeType;
+  modes: PlayModeType[];
 
   /**
    * 时间轴开始时间
@@ -77,12 +80,13 @@ export interface IRecordPlayerState {
   /**
    * 录像时间轴单页绘制时长单位（hour）
    */
-  timeMode:number
+  timeMode: number;
 }
 
 export type ScreenItemLivePlayerType = {
   url?: string;
   type?: 'flv' | 'hls' | 'native';
+  mode?: PlayModeType;
 };
 
 export interface ILivePlayerProps {
@@ -107,7 +111,7 @@ export interface ILivePlayerProps {
 export interface ILivePlayerState {
   screenNum: number;
   selectIndex: number;
-  mode: PlayModeType;
+  modes: PlayModeType[];
 }
 
 export const RecordPlayer: React.FC<IRecordPlayerProps>;

package/es/ScreenPlayer/utils.d.ts

@@ -3,6 +3,7 @@ export declare const ScreenType: {
     name: number;
     width: string;
     height: string;
+    icon: string;
 }[];
 export declare const TimeModeLibs: {
     name: number;