@cloud-app-dev/vidc 3.0.8 → 3.0.11

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, snapshot, defaultScreen, screenChange, defaultSelectIndex, }: IRecordPlayerProps): JSX.Element;
 export default RecordPlayer;

package/es/ScreenPlayer/Record.js

@@ -1,5 +1,6 @@
 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); }
 
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import "antd/lib/message/style";
 import _message from "antd/lib/message";
 import _usePrevious from "ahooks/es/usePrevious";
@@ -36,6 +37,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 +61,16 @@ 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,
+      snapshot = _ref.snapshot,
+      defaultScreen = _ref.defaultScreen,
+      screenChange = _ref.screenChange,
+      defaultSelectIndex = _ref.defaultSelectIndex;
+
+  var _useState = useState(Object.assign(Object.assign({}, defaultState), {
+    screenNum: defaultScreen !== null && defaultScreen !== void 0 ? defaultScreen : defaultState.screenNum
+  })),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
@@ -113,11 +122,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 +206,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')) {
@@ -306,20 +313,44 @@ function RecordPlayer(_ref) {
     setState(function (old) {
       return Object.assign({}, old);
     });
-  }; // index变化同步到父组件
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
+  /**
+   * 同步外部的selectIndex变化
+   */
 
 
   useEffect(function () {
-    return onIndexChange(state.selectIndex);
+    if (typeof defaultSelectIndex !== 'number') {
+      return;
+    }
+
+    setState(function (old) {
+      if (old.selectIndex !== defaultSelectIndex) {
+        return Object.assign(Object.assign({}, old), {
+          selectIndex: defaultSelectIndex
+        });
+      }
+
+      return old;
+    });
+  }, [defaultSelectIndex]); // index变化同步到父组件
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  _useUpdateEffect(function () {
+    return onIndexChange && onIndexChange(state.selectIndex);
   }, [state.selectIndex]);
+
+  _useUpdateEffect(function () {
+    return screenChange && screenChange(state.screenNum);
+  }, [state.screenNum]);
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "split-screen-player-wrapper split-screen-player-wrapper-record",
-    ref: domRef
+    className: "split-screen-player-wrapper split-screen-player-wrapper-record"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "player-layout"
+    className: "player-layout",
+    ref: domRef
   }, 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 +369,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 +384,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 +401,15 @@ 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,
+    snapshot: snapshot
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
     updateState: updateState,

package/es/ScreenPlayer/RecordTools.d.ts

@@ -19,6 +19,7 @@ interface IToolsProps {
     onCloseAll?: () => void;
     timeMode: number;
     download?: () => void;
+    snapshot?: (base64: string) => void;
 }
-declare function RecordTools({ containerRef, updateState, download, 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, snapshot, }: IToolsProps): JSX.Element;
 export default RecordTools;

package/es/ScreenPlayer/RecordTools.js

@@ -32,7 +32,8 @@ function RecordTools(_ref) {
       time = _ref.time,
       onTimeChange = _ref.onTimeChange,
       onClose = _ref.onClose,
-      onCloseAll = _ref.onCloseAll;
+      onCloseAll = _ref.onCloseAll,
+      snapshot = _ref.snapshot;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -56,9 +57,10 @@ function RecordTools(_ref) {
     player ? player.reload ? player.reload() : player.api.reload() : undefined;
   };
 
-  var snapshot = function snapshot() {
+  var snapshotaction = function snapshotaction() {
     var player = getPlayerItem();
-    return player ? player.api.snapshot() : undefined;
+    var base64 = player ? player.api.snapshot() : undefined;
+    snapshot && snapshot(base64);
   };
 
   var player = getPlayerItem();
@@ -76,7 +78,7 @@ function RecordTools(_ref) {
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-xiangji1fill",
     title: "\u622A\u56FE",
-    onClick: snapshot
+    onClick: snapshotaction
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: reload
@@ -85,38 +87,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",
-    onClick: download
+    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"
@@ -124,26 +144,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,
@@ -152,10 +162,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/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.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,7 +7,6 @@ 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';
-import { nextTick } from 'process';
 var hours = [1, 6, 12, 24];
 var currentColor = '#FF000A';
 var normalLineColor = '#ffffff';
@@ -202,7 +203,7 @@ var TimeSlider = /*#__PURE__*/function () {
         _this.hours_per_ruler = _this.zoom;
       }
 
-      nextTick(function () {
+      _nextTick(function () {
         return _this.options.onHoursPerChange && _this.options.onHoursPerChange(_this.hours_per_ruler);
       });
 

package/es/ScreenPlayer/demo.js

@@ -3,16 +3,16 @@ import _ConfigProvider from "antd/lib/config-provider";
 import React from 'react';
 import LivePlayer from './Live';
 var list = [{
-  url: 'https://6a75ef90-6-server.antelopecloud.cn/flv_live?app=live&token=542449336_3356491776_1691734783_0e329cf89f3333a17ccaf8533466a577',
+  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693469173_b34efba891f35a66b227642f66272534',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-2-server.antelopecloud.cn/flv_live?app=live&token=542453242_3356491776_1691734590_6fb5b57fd5095ff2e6ff331fe605a593',
+  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693469173_b34efba891f35a66b227642f66272534',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-2-server.antelopecloud.cn/flv_live?app=live&token=542453302_3356491776_1691735024_3bb73732b5e0a857b70248a179804801',
+  url: 'https://6a75ef90-1-server.antelopecloud.cn/flv_live?app=live&token=542453821_3356491776_1693535323_3a90f54c141b9a246d5679678ebafe90',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-0-server.antelopecloud.cn/flv_live?app=live&token=557997490_3356491776_1691725056_86b4dd8105fea7b1180408a63d17b37b',
+  url: 'https://6a75ef88-6-server.antelopecloud.cn/flv_live?app=live&token=542449206_3356491776_1693535342_803846974f04eb02e8115d10432d062f',
   type: 'flv'
 }];
 export default function App() {

package/es/ScreenPlayer/demo2.js

@@ -28,7 +28,7 @@ import RecordPlayer from './Record';
 import moment from 'moment';
 import Service from '../Service';
 import { completionSegments } from './utils';
-var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTY1NjgzMTU3MywidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTM5NzYzMTU3M30.OWPxfPgFBWqGJaRsYLSAZohn2AarhbkOuWLa1bwgZE4";
+var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MjI1ODMwNzUxNSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTk5OTEwNzUxNX0.uk_G3vqBCFqxQM2jbV6CSN-z9YNVt_cx5nWXkSuCOIA";
 var cids = ['538509097', '539172446'];
 
 var query = function query(_ref) {

package/es/ScreenPlayer/index.css

@@ -19,13 +19,14 @@
 .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.split-screen-player-live-wrapper .player-layout {
+  height: calc(100% - 42px);
+}
 .split-screen-player-wrapper .player-tools-group {
   height: 88px;
   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 +70,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 +80,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 +124,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 {
@@ -22,7 +24,7 @@ export interface IRecordPlayerProps {
   /**
    * 窗口索引变化，后续基于索引传入播放必要数据
    */
-  onIndexChange: (idx: number) => void;
+  onIndexChange?: (idx: number) => void;
 
   /**
    * 关闭单个窗口
@@ -37,6 +39,14 @@ export interface IRecordPlayerProps {
    * 录像下载回调
    */
   download?: () => void;
+
+  snapshot?: (base64: string) => void;
+
+  screenChange?: (num: number) => void;
+
+  defaultScreen?: 1 | 4 | 6 | 9 | 16;
+
+  defaultSelectIndex?: number;
 }
 
 export interface IRecordPlayerState {
@@ -53,7 +63,7 @@ export interface IRecordPlayerState {
   /**
    * 插件OR浏览器
    */
-  mode: PlayModeType;
+  modes: PlayModeType[];
 
   /**
    * 时间轴开始时间
@@ -84,6 +94,8 @@ export interface IRecordPlayerState {
 export type ScreenItemLivePlayerType = {
   url?: string;
   type?: 'flv' | 'hls' | 'native';
+  mode?: PlayModeType;
+  cid?: string;
 };
 
 export interface ILivePlayerProps {
@@ -102,13 +114,21 @@ export interface ILivePlayerProps {
   /**
    * 窗口索引变化，后续基于索引传入播放必要数据
    */
-  onIndexChange: (idx: number) => void;
+  onIndexChange?: (idx: number) => void;
+
+  snapshot?: (base64: string) => void;
+
+  screenChange?: (num: number) => void;
+
+  defaultScreen?: 1 | 4 | 6 | 9 | 16;
+
+  defaultSelectIndex?: number;
 }
 
 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;