@cloud-app-dev/vidc 3.0.4 → 3.0.5

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTM4OTU0MzA4NSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTEzMDM0MzA4NX0.-0vh7SpomB6UWteJ6WIA5VneryhSW3Vrsz6RnHfgcRI';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTY1NjgzMTU3MywidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTM5NzYzMTU3M30.OWPxfPgFBWqGJaRsYLSAZohn2AarhbkOuWLa1bwgZE4';
 
 export default defineConfig({
   title: 'CloudApp VIDC',
@@ -39,12 +39,17 @@ export default defineConfig({
       },
     },
   },
-  mfsu: {
-    development: {
-      output: './.mfsu/dev',
-    },
-    production: undefined,
-  },
+  mfsu:
+    process.env.NODE_ENV === 'development'
+      ? {
+          development: {
+            output: './.mfsu/dev',
+          },
+          production: {
+            output: './.mfsu/prod',
+          },
+        }
+      : undefined,
   scripts: ['//at.alicdn.com/t/font_1724012_972m5d05cou.js'],
   styles: [
     `:root{

package/es/Drawer/index.css

@@ -17,6 +17,7 @@
 .lm-drawer-container.cloudapp-drawer .cloudapp-drawer-header .cloudapp-drawer-title {
   color: inherit;
   font-size: var(--fs-large);
+  line-height: 2em;
 }
 .lm-drawer-container.cloudapp-drawer .cloudapp-drawer-header .cloudapp-drawer-close {
   padding: 0;

package/es/Map/AMap.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 declare global {
   namespace AMap {
     /**
@@ -75,6 +77,7 @@ declare global {
      * @param {boolean} [opts.geodesic=false] 是否绘制成大地线，默认false
      * @param {boolean} [opts.showDir=false] 是否延路径显示白色方向箭头,默认false。建议折线宽度大于6时使用
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     export class BezierCurve extends CombinePolyline<Required<BezierCurveOptions>> {
       _prevZoom: number;
       readonly className: OverlayType;
@@ -364,6 +367,7 @@ declare global {
      * });
      * map.addLayer(buildingLayer);
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     export class BuildingLayer extends BuildingLayer_2 {
       constructor(opts?: Partial<BuildingLayerOpts> | any);
       /**
@@ -406,6 +410,7 @@ declare global {
     /**
      * @public
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     class BuildingLayer_2 extends Layer {
       CLASS_NAME: string;
       constructor();
@@ -464,6 +469,7 @@ declare global {
      * @extends {ImageLayer}
      * @public
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     export class CanvasLayer extends CoreImageLayer {
       constructor(opts?: CanvasLayerOptions);
       /**
@@ -549,6 +555,7 @@ declare global {
      * 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
      * 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 （如此反复）组成的虚线
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     export class Circle extends CombinePolygon<Required<CircleOptions>> {
       readonly className: OverlayType;
 
@@ -642,6 +649,7 @@ declare global {
      * @param {boolean} [opts.draggable=false] 设置多边形是否可拖拽移动，默认为false
      * @param {object} [opts.extData]  用户自定义属性，支持JavaScript API任意数据类型，如Polygon的id等
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     export class CircleMarker extends CoreCircleMarker {
       className: OverlayType;
 
@@ -731,6 +739,7 @@ declare global {
      * @public
      * @private
      */
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define, @typescript-eslint/no-unused-vars
     abstract class CombinePolygon<T = any> extends CorePolygon {
       abstract setOptions(optsArg: any): void;
       /**
@@ -5054,7 +5063,11 @@ declare global {
     export class MarkerCluster extends Event {
       constructor(map: AMap.Map, dataOtions: any[], MarkerClusterOptions: MarkerClusterOptions);
       setData(data: any[]);
-      
+    }
+
+    export class ControlBar extends Control {
+      constructor(options: any);
+      addTo(map: AMap.Map): void;
     }
 
     /**

package/es/Map/BasicMap/AMapInstance.js

@@ -16,16 +16,32 @@ var AMapInstance = /*#__PURE__*/function () {
   _createClass(AMapInstance, [{
     key: "createMap",
     value: function createMap() {
+      var _this = this;
+
       var _a;
 
       this.map = new AMap.Map(this.mapContainer, {
-        viewMode: '2D',
+        viewMode: '3D',
         zoom: this.config.zoom,
         center: this.config.center,
-        // pitch: 30,
+        rotateEnable: true,
+        pitchEnable: true,
+        pitch: 50,
+        rotation: -15,
+        zooms: [2, 20],
         resizeEnable: true,
         mapStyle: "amap://styles/".concat((_a = this.config.amapStyle) !== null && _a !== void 0 ? _a : 'normal')
       });
+      AMap.plugin(['AMap.ControlBar'], function () {
+        var controlBar = new AMap.ControlBar({
+          position: {
+            right: '10px',
+            top: '10px'
+          }
+        });
+
+        _this.map.addControl(controlBar);
+      });
     }
   }, {
     key: "destoryMap",

package/es/Map/Config/utils.js

@@ -10,7 +10,7 @@ var localconfig = {
   center: [118.767413, 32.041544],
   maxZoom: 18,
   minZoom: 3,
-  zoom: 8,
+  zoom: 16,
   zoomOffset: 0,
   distance: 50,
   amapStyle: 'normal',
@@ -25,7 +25,7 @@ export function queryMapConfig(type) {
           case 0:
             url = localconfig.url, crs = localconfig.crs, maxBounds = localconfig.maxBounds, subdomains = localconfig.subdomains, zoom = localconfig.zoom, zoomOffset = localconfig.zoomOffset, center = localconfig.center, maxZoom = localconfig.maxZoom, minZoom = localconfig.minZoom, distance = localconfig.distance, amapStyle = localconfig.amapStyle;
 
-            if (!(type == 'L')) {
+            if (!(type === 'L')) {
               _context.next = 3;
               break;
             }

package/es/Player/demo.js

@@ -118,7 +118,8 @@ function Demo1() {
   }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(Player, {
     type: state.type,
     url: state.url,
-    isLive: !!state.isLive
+    isLive: !!state.isLive,
+    customTimeLine: state.isLive ? /*#__PURE__*/React.createElement(React.Fragment, null) : undefined
   }));
 }
 
@@ -199,8 +200,8 @@ function Demo3() {
   var _useState5 = useState({
     url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
     tempUrl: '',
-    begin: 1652889636,
-    end: 1652890200
+    begin: 1652889636000,
+    end: 1652890200000
   }),
       _useState6 = _slicedToArray(_useState5, 2),
       state = _useState6[0],

package/es/Player/iconfont.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './style/iconfont.less';
+import './style/iconfont.css';
 interface IPlayerIconFontProps extends React.AllHTMLAttributes<HTMLLIElement> {
     type: string;
     className: string;

package/es/Player/iconfont.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import "./style/iconfont.css";
+import './style/iconfont.css';
 
 function IconFont(_a) {
   var type = _a.type,

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,7 +14,8 @@ 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,
@@ -27,17 +29,22 @@ function LiveTools(_ref) {
   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;
   };
 
@@ -46,57 +53,83 @@ 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"
+  }, /*#__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"
+  }, /*#__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
-    },
+  }, /*#__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("span", {
-    style: {
-      padding: 6
-    },
-    onClick: snapshot
-  }, "\u622A\u56FE")));
+  }, 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

@@ -40,7 +40,6 @@ export function LivePlayerWithExt(_a) {
 
   var _useFullscreen = _useFullscreen3((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
-      _ = _useFullscreen2[0],
       toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
 
   return /*#__PURE__*/React.createElement("div", {
@@ -79,7 +78,6 @@ export function SegmentPlayerWithExt(_a) {
 
   var _useFullscreen4 = _useFullscreen3((_b = ref.current) === null || _b === void 0 ? void 0 : _b.container),
       _useFullscreen5 = _slicedToArray(_useFullscreen4, 2),
-      _ = _useFullscreen5[0],
       toggleFullscreen = _useFullscreen5[1].toggleFullscreen;
 
   return /*#__PURE__*/React.createElement("div", {
@@ -161,7 +159,6 @@ export function FrontendPlayerWithExt(_ref) {
 
   var _useFullscreen6 = _useFullscreen3((_a = ref.current) === null || _a === void 0 ? void 0 : _a.container),
       _useFullscreen7 = _slicedToArray(_useFullscreen6, 2),
-      _ = _useFullscreen7[0],
       toggleFullscreen = _useFullscreen7[1].toggleFullscreen;
 
   return /*#__PURE__*/React.createElement("div", {

package/es/ScreenPlayer/Record.js

@@ -278,9 +278,17 @@ 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);
+    });
+  }; // index变化同步到父组件
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
+
   useEffect(function () {
     return onIndexChange(state.selectIndex);
   }, [state.selectIndex]);
@@ -297,7 +305,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 +322,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) {
@@ -331,13 +339,15 @@ function RecordPlayer(_ref) {
       }
     }));
   })), /*#__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
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
     disabled: !!segmentItem.cid,
     begin: timeBegin,

package/es/ScreenPlayer/RecordTools.d.ts

@@ -12,6 +12,8 @@ interface IToolsProps {
     getPlayerItem: () => ExportPlayerType | undefined;
     fit?: string;
     toggleFit?: () => void;
+    time?: number;
+    onTimeChange?: (time: number) => 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 }: IToolsProps): JSX.Element;
 export default RecordTools;

package/es/ScreenPlayer/RecordTools.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,7 +14,9 @@ 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';
+import TimeSelect from './TimeSelect';
 
 function RecordTools(_ref) {
   var containerRef = _ref.containerRef,
@@ -21,23 +24,30 @@ function RecordTools(_ref) {
       screenNum = _ref.screenNum,
       getPlayerItem = _ref.getPlayerItem,
       mode = _ref.mode,
+      toggleFit = _ref.toggleFit,
       fit = _ref.fit,
-      toggleFit = _ref.toggleFit;
+      time = _ref.time,
+      onTimeChange = _ref.onTimeChange;
 
   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;
   };
 
@@ -46,57 +56,100 @@ function RecordTools(_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);
+    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"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-YesorNo_No_Dark",
+    title: "\u5173\u95ED\u5F53\u524D"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-S_Edit_LoadDown",
+    title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"
+  }))), /*#__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(TimeSelect, {
+    time: time,
+    onChange: onTimeChange
   }), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
-    onClick: toggleFullscreen
-  }, isFullscreen ? '退出' : '全屏'), /*#__PURE__*/React.createElement("span", {
-    style: {
-      padding: 6
-    },
+    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"
+  }, /*#__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
-    },
+  }, /*#__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("span", {
-    style: {
-      padding: 6
-    },
-    onClick: snapshot
-  }, "\u622A\u56FE")));
+  }, 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 RecordTools;

package/es/ScreenPlayer/ScreenSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IScreenSelect {
+    screenNum: number;
+    updateState: (arg: any) => void;
+}
+declare function ScreenSelect({ screenNum, updateState }: IScreenSelect): JSX.Element;
+export default ScreenSelect;

package/es/ScreenPlayer/ScreenSelect.js

@@ -0,0 +1,28 @@
+import "antd/lib/tooltip/style";
+import _Tooltip from "antd/lib/tooltip";
+import React from 'react';
+import { ScreenType } from './utils';
+
+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));
+}
+
+export default ScreenSelect;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -1,5 +1,6 @@
 import _useThrottleFn2 from "ahooks/es/useThrottleFn";
 import _useSize from "ahooks/es/useSize";
+import moment from 'moment';
 import React, { useEffect, useRef } from 'react';
 import TimeSlider from './TimeSlider';
 
@@ -18,10 +19,15 @@ function SegmentTimeLine(_ref) {
       run = _useThrottleFn.run;
 
   useEffect(function () {
+    var time = begin !== null && begin !== void 0 ? begin : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    }).valueOf();
     var timeLine = new TimeSlider(ref.current, {
       onTimeChange: run,
-      start_timestamp: begin ? begin - 12 * 3600 * 1000 : begin,
-      current_timestamp: begin,
+      start_timestamp: time - 12 * 3600 * 1000,
+      current_timestamp: time,
       timecell: timeCell
     });
     return function () {

package/es/ScreenPlayer/TimeSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ITimeSelectProps {
+    time?: number;
+    onChange?: (time: number) => void;
+}
+declare function TimeSelect({ time, onChange }: ITimeSelectProps): JSX.Element;
+export default TimeSelect;

package/es/ScreenPlayer/TimeSelect.js

@@ -0,0 +1,129 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import "antd/lib/input-number/style";
+import _InputNumber from "antd/lib/input-number";
+import "antd/lib/popover/style";
+import _Popover from "antd/lib/popover";
+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, { useMemo, useState } from 'react';
+import moment from 'moment';
+
+function TimeSelect(_ref) {
+  var time = _ref.time,
+      onChange = _ref.onChange;
+
+  var _useState = useState(function () {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    return [m.hours(), m.minutes(), m.seconds()];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      values = _useState2[0],
+      setValues = _useState2[1];
+
+  var timeStr = useMemo(function () {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    return m.format('HH:mm:ss');
+  }, [time]);
+
+  var onChangeTime = function onChangeTime() {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    var newTime = m.set({
+      hours: values[0],
+      minutes: values[1],
+      seconds: values[2]
+    }).valueOf();
+    console.log(values, newTime);
+    onChange && onChange(newTime);
+  };
+
+  _useUpdateEffect(function () {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    setValues([m.hours(), m.minutes(), m.seconds()]);
+  }, [time]);
+
+  var formatter = function formatter(value) {
+    return String(value).length === 1 ? "0".concat(value) : value + '';
+  };
+
+  return /*#__PURE__*/React.createElement(_Popover, {
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "player-time-select"
+    }, /*#__PURE__*/React.createElement(_InputNumber, {
+      size: "small",
+      style: {
+        width: 36
+      },
+      formatter: formatter,
+      controls: false,
+      value: values[0],
+      onChange: function onChange(v) {
+        return setValues(function (old) {
+          return [v, old[1], old[2]];
+        });
+      }
+    }), ":", /*#__PURE__*/React.createElement(_InputNumber, {
+      size: "small",
+      style: {
+        width: 36
+      },
+      formatter: formatter,
+      controls: false,
+      value: values[1],
+      onChange: function onChange(v) {
+        return setValues(function (old) {
+          return [old[0], v, old[2]];
+        });
+      }
+    }), ":", /*#__PURE__*/React.createElement(_InputNumber, {
+      size: "small",
+      style: {
+        width: 36
+      },
+      formatter: formatter,
+      controls: false,
+      value: values[2],
+      onChange: function onChange(v) {
+        return setValues(function (old) {
+          return [old[0], old[1], v];
+        });
+      }
+    }), /*#__PURE__*/React.createElement(_Button, {
+      size: "small",
+      type: "primary",
+      onClick: onChangeTime
+    }, "\u786E\u5B9A"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-record-time"
+  }, timeStr));
+}
+
+export default TimeSelect;

package/es/ScreenPlayer/demo.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export default function (): JSX.Element;
+export default function App(): JSX.Element;

package/es/ScreenPlayer/demo.js

@@ -1,3 +1,5 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
 import React from 'react';
 import LivePlayer from './Live';
 var list = [{
@@ -13,13 +15,15 @@ var list = [{
   url: 'https://6a75ef90-0-server.antelopecloud.cn/flv_live?app=live&token=557997490_3356491776_1691725056_86b4dd8105fea7b1180408a63d17b37b',
   type: 'flv'
 }];
-export default function () {
-  return /*#__PURE__*/React.createElement("div", {
+export default function App() {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: 1200,
       height: 800
     }
   }, /*#__PURE__*/React.createElement(LivePlayer, {
     list: list
-  }));
+  })));
 }

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.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTM4OTU0MzA4NSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTEzMDM0MzA4NX0.-0vh7SpomB6UWteJ6WIA5VneryhSW3Vrsz6RnHfgcRI";
+var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTY1NjgzMTU3MywidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTM5NzYzMTU3M30.OWPxfPgFBWqGJaRsYLSAZohn2AarhbkOuWLa1bwgZE4";
 var cids = ['538509097', '539172446'];
 
 var query = function query(_ref) {

package/es/ScreenPlayer/index.css

@@ -3,10 +3,10 @@
   height: 100%;
   box-sizing: border-box;
   user-select: none;
+  min-width: 600px;
 }
 .split-screen-player-wrapper .player-layout {
   height: calc(100% - 42px);
-  border-bottom: 1px solid var(--gray12);
 }
 .split-screen-player-wrapper .player-layout .player-with-ext-layout {
   float: left;
@@ -19,9 +19,60 @@
 .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-record-time {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background-color: var(--gray11);
+  line-height: 42px;
+  padding: 0 16px;
+  font-size: 16px;
+  color: var(--gray1);
+  margin: 0 20px;
+}
 .split-screen-player-wrapper .player-tools {
   height: 42px;
   background-color: var(--gray12);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.split-screen-player-wrapper .player-tools .player-tools-left,
+.split-screen-player-wrapper .player-tools .player-tools-right {
+  min-width: 35%;
+  display: flex;
+  align-items: center;
+}
+.split-screen-player-wrapper .player-tools .player-tools-right {
+  justify-content: flex-end;
+  margin-right: 0;
+  margin-left: 4px;
+}
+.split-screen-player-wrapper .player-tools .player-tools-mid {
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  height: 100%;
+}
+.split-screen-player-wrapper .player-tools .player-tools-mid .player-tools-item {
+  margin: 0;
+}
+.split-screen-player-wrapper .player-tools .player-tools-item {
+  font-size: 18px;
+  width: 32px;
+  height: 32px;
+  color: var(--gray1);
+  text-align: center;
+  cursor: pointer;
+  margin-right: 4px;
+}
+.split-screen-player-wrapper .player-tools .player-tools-item .lm-player-iconfont {
+  font-size: 20px;
+}
+.split-screen-player-wrapper .player-tools .player-tools-item:hover {
+  background-color: var(--gray11);
+  border-radius: var(--radius1);
 }
 .split-screen-player-wrapper.split-screen-player-wrapper-record .record-time-line {
   width: 100%;
@@ -47,3 +98,9 @@
 .split-screen-player-wrapper.split-screen-player-wrapper-record .player-layout {
   height: calc(100% - 42px - 60px);
 }
+.player-time-select {
+  width: 190px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}

package/es/Timeout/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { BasicTarget } from 'ahooks/es/utils/domTarget';
-import 'antd/es/modal/style/css';
 interface ITimeoutProps {
     /**
-     *ß
+     * 容器
+     * @default `document.body`
      */
     contianer?: BasicTarget;
     /**
@@ -14,20 +14,19 @@ interface ITimeoutProps {
      * 超时动作，默认退出登录
      */
     onTimeout?: () => void;
+    /**
+     * 忽略的情况
+     */
+    ignore?: () => boolean;
 }
 /**
- *
+ * @desc 用户创建界面超时回调
  */
-declare function Timeout({ contianer, time, onTimeout }: ITimeoutProps): JSX.Element;
+declare function Timeout({ contianer, time, onTimeout, ignore }: ITimeoutProps): JSX.Element;
 declare namespace Timeout {
     var defaultProps: {
         time: number;
         contianer: HTMLElement;
-        onTimeout: typeof defaultTimeoutAction;
     };
 }
-declare function defaultTimeoutAction(): {
-    destroy: () => void;
-    update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-};
 export default Timeout;

package/es/Timeout/index.js

@@ -1,5 +1,3 @@
-import "antd/lib/modal/style";
-import _Modal from "antd/lib/modal";
 import _useEventListener from "ahooks/es/useEventListener";
 import _useRafInterval from "ahooks/es/useRafInterval";
 
@@ -16,16 +14,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useRef, useState } from 'react';
-//此处antd有bug不能定制样式前缀
-import 'antd/es/modal/style/css';
+
 /**
- *
+ * @desc 用户创建界面超时回调
  */
-
 function Timeout(_ref) {
   var contianer = _ref.contianer,
       time = _ref.time,
-      onTimeout = _ref.onTimeout;
+      onTimeout = _ref.onTimeout,
+      ignore = _ref.ignore;
   var cuurentTimeRef = useRef(Date.now());
   var lockstatusRef = useRef(false);
 
@@ -37,15 +34,24 @@ function Timeout(_ref) {
       setState = _useState2[1];
 
   _useRafInterval(function () {
-    return setState(function (old) {
+    var now = Date.now();
+    setState(function (old) {
       return Object.assign(Object.assign({}, old), {
-        timelock: Date.now()
+        timelock: now
       });
     });
+    var isIgnore = ignore ? ignore() : false;
+
+    if (isIgnore) {
+      // 如果当前需要忽略，那么重置时间
+      cuurentTimeRef.current = now;
+    }
   }, 1 * 1000);
 
   useEffect(function () {
-    if (!lockstatusRef.current && state.timelock - cuurentTimeRef.current > time * 1000) {
+    var isIgnore = ignore ? ignore() : false;
+
+    if (!lockstatusRef.current && state.timelock - cuurentTimeRef.current > time * 1000 && !isIgnore) {
       lockstatusRef.current = true;
       onTimeout && onTimeout();
       setTimeout(function () {
@@ -64,20 +70,8 @@ function Timeout(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 
-function defaultTimeoutAction() {
-  return _Modal.warning({
-    title: '系统提示',
-    content: /*#__PURE__*/React.createElement("p", null, "\u60A8\u957F\u65F6\u95F4\u672A\u64CD\u4F5C\u7CFB\u7EDF\uFF0C\u8BF7\u91CD\u65B0\u767B\u5F55\uFF01"),
-    onOk: function onOk() {
-      sessionStorage.clear();
-      window.location.replace('/login');
-    }
-  });
-}
-
 Timeout.defaultProps = {
   time: 15 * 60,
-  contianer: document.body,
-  onTimeout: defaultTimeoutAction
+  contianer: document.body
 };
 export default Timeout;

package/package.json

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