@cloud-app-dev/vidc 3.0.15 → 3.0.17

package/es/DisableMark/index.d.ts

@@ -3,6 +3,7 @@ import './index.less';
 interface IDisableMarkProps {
     children: React.ReactNode;
     disabled: boolean;
+    width?: string | number;
 }
-export default function DisableMark({ children, disabled }: IDisableMarkProps): JSX.Element;
+export default function DisableMark({ children, disabled, width }: IDisableMarkProps): JSX.Element;
 export {};

package/es/DisableMark/index.js

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

package/es/Map/BasicMap/AMapInstance.d.ts

@@ -12,5 +12,8 @@ declare class AMapInstance implements IMapInstance {
     getZoom(): number;
     setCenter(center: [number, number]): void;
     setZoomAndCenter(zoom: number, center: [number, number]): void;
+    on(type: string, fn: (e: any) => void): void;
+    off(type: string, fn: (e: any) => void): void;
+    setCursor(cursor: string): void;
 }
 export default AMapInstance;

package/es/Map/BasicMap/AMapInstance.js

@@ -66,13 +66,28 @@ var AMapInstance = /*#__PURE__*/function () {
   }, {
     key: "setCenter",
     value: function setCenter(center) {
-      return this.map.setCenter(center);
+      this.map.setCenter(center);
     }
   }, {
     key: "setZoomAndCenter",
     value: function setZoomAndCenter(zoom, center) {
       this.map.setZoomAndCenter(zoom, center);
     }
+  }, {
+    key: "on",
+    value: function on(type, fn) {
+      this.map.on(type, fn);
+    }
+  }, {
+    key: "off",
+    value: function off(type, fn) {
+      this.map.off(type, fn);
+    }
+  }, {
+    key: "setCursor",
+    value: function setCursor(cursor) {
+      this.map.setDefaultCursor(cursor);
+    }
   }]);
 
   return AMapInstance;

package/es/Map/BasicMap/LeafletInstance.d.ts

@@ -8,8 +8,11 @@ declare class LeafletInstance implements IMapInstance {
     destoryMap(): void;
     setZoomAndCenter(zoom: number, center: [number, number] | LatLng): void;
     mapReset(): void;
-    setZoom(zoom: number): Map;
+    setZoom(zoom: number): void;
     setCenter(center: [number, number] | LatLng): void;
     getZoom(): number;
+    on(type: string, fn: (event: any) => void): void;
+    off(type: string, fn: (event: any) => void): void;
+    setCursor(cursor: string): void;
 }
 export default LeafletInstance;

package/es/Map/BasicMap/LeafletInstance.js

@@ -78,18 +78,33 @@ var LeafletInstance = /*#__PURE__*/function () {
   }, {
     key: "setZoom",
     value: function setZoom(zoom) {
-      return this.map.setZoom(zoom);
+      this.map.setZoom(zoom);
     }
   }, {
     key: "setCenter",
     value: function setCenter(center) {
-      return this.map.setCenter(center);
+      this.map.setCenter(center);
     }
   }, {
     key: "getZoom",
     value: function getZoom() {
       return this.map.getZoom();
     }
+  }, {
+    key: "on",
+    value: function on(type, fn) {
+      this.map.on(type, fn);
+    }
+  }, {
+    key: "off",
+    value: function off(type, fn) {
+      this.map.off(type, fn);
+    }
+  }, {
+    key: "setCursor",
+    value: function setCursor(cursor) {
+      this.map.setDefaultCursor(cursor);
+    }
   }]);
 
   return LeafletInstance;

package/es/Map/LevelCenter/index.d.ts

@@ -1,13 +1,16 @@
+import React from 'react';
 import { LatLng, MapPoint } from '../interface';
 import './index.less';
 export interface ILevelCenter {
     center?: [number, number];
     zoom?: number;
     points: MapPoint[];
+    enableClick?: boolean;
     onLevelCenterChange?: (options: {
         center: [number, number] | LatLng;
         zoom: number;
     }) => void;
+    children?: React.ReactNode;
 }
 declare const _default: (props: ILevelCenter) => JSX.Element;
 export default _default;

package/es/Map/LevelCenter/index.js

@@ -1,17 +1,20 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import _useMount from "ahooks/es/useMount";
+import React, { useCallback, useContext, useMemo } from 'react';
 import ClusterLayer from '../ClusterLayer';
-import FindPio from '../FindPio';
 import ResetTools from '../ResetTools';
 import DragMarker from './DragMarker';
 import withMap from '../withMap';
 import { mapContext } from '../Context';
+import useMapEvent from '../hook/useMapEvent';
 import "./index.css";
 
 function LevelCenter(_ref) {
   var center = _ref.center,
       zoom = _ref.zoom,
       points = _ref.points,
-      onLevelCenterChange = _ref.onLevelCenterChange;
+      onLevelCenterChange = _ref.onLevelCenterChange,
+      enableClick = _ref.enableClick,
+      children = _ref.children;
 
   var _useContext = useContext(mapContext),
       instance = _useContext.instance;
@@ -21,22 +24,39 @@ function LevelCenter(_ref) {
   }, [center, instance]);
   var defaultZoom = useMemo(function () {
     return zoom || instance.config.zoom;
-  }, [zoom, instance]);
+  }, [zoom, instance]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   var mapRest = useCallback(function () {
     return instance.setZoomAndCenter(defaultZoom, defaultCenter);
   }, [defaultZoom, defaultCenter]);
-  useEffect(function () {
-    return mapRest();
-  }, []);
+
+  _useMount(function () {
+    if (enableClick) {
+      instance.setCursor('pointer');
+    }
+
+    mapRest();
+  });
+
+  useMapEvent('click', function (event) {
+    if (enableClick) {
+      var _center = [event.lnglat.lng, event.lnglat.lat];
+      instance.setCenter(_center);
+      onLevelCenterChange === null || onLevelCenterChange === void 0 ? void 0 : onLevelCenterChange({
+        center: _center,
+        zoom: defaultZoom
+      });
+    }
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClusterLayer, {
     points: points
-  }), /*#__PURE__*/React.createElement(FindPio, null), /*#__PURE__*/React.createElement(ResetTools, {
+  }), /*#__PURE__*/React.createElement(ResetTools, {
     onMapReset: mapRest
   }), /*#__PURE__*/React.createElement(DragMarker, {
     center: defaultCenter,
     zoom: defaultZoom,
     onChange: onLevelCenterChange
-  }));
+  }), children);
 }
 
 export default withMap(LevelCenter, 'lv-center-map-container');

package/es/Map/SinglePoint/index.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import _useMount from "ahooks/es/useMount";
+import React, { useCallback, useContext, useMemo } from 'react';
 import ResetTools from '../ResetTools';
 import Marker from './Marker';
 import withMap from '../withMap';
@@ -15,13 +16,15 @@ function SinglePoint(_ref) {
   var type = useMapType();
   var defaultCenter = useMemo(function () {
     return type.AMap ? [point.longitude, point.latitude] : [point.latitude, point.longitude];
-  }, [point.latitude, point.longitude, instance]);
+  }, [type.AMap, point.longitude, point.latitude]);
   var mapRest = useCallback(function () {
     return instance.setZoomAndCenter(instance.config.zoom, defaultCenter);
-  }, [defaultCenter]);
-  useEffect(function () {
+  }, [defaultCenter, instance]);
+
+  _useMount(function () {
     return mapRest();
-  }, []);
+  });
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResetTools, {
     onMapReset: mapRest
   }), /*#__PURE__*/React.createElement(Marker, {

package/es/Map/hook/useMapEvent.d.ts

@@ -0,0 +1,2 @@
+declare function useMapEvent(type: string, fn: (event: any) => void): void;
+export default useMapEvent;

package/es/Map/hook/useMapEvent.js

@@ -0,0 +1,22 @@
+import _useCreation from "ahooks/es/useCreation";
+import { useContext, useEffect } from 'react';
+import { mapContext } from '../Context';
+
+function useMapEvent(type, fn) {
+  var action = _useCreation(function () {
+    return fn;
+  }, []);
+
+  var _useContext = useContext(mapContext),
+      instance = _useContext.instance;
+
+  useEffect(function () {
+    console.log(11111);
+    instance.on(type, action);
+    return function () {
+      return instance.off(type, action);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
+export default useMapEvent;

package/es/Map/interface.d.ts

@@ -32,6 +32,9 @@ export class IMapInstance {
   setCenter(center: [number, number] | LatLng): void;
   getZoom(): number;
   setZoomAndCenter(zoom: number, center: [number, number] | LatLng): void;
+  on(type: string, fn: (e: any) => void): void;
+  off(type: string, fn: (e: any) => void): void;
+  setCursor(cursor: string);
 }
 
 export interface MapPoint {

package/es/Player/event/errorEvent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type VideoEventInstance from '.';
 import type Api from '../api';
 import Flvjs from '@cloud-app-dev/flv.js';
@@ -11,6 +10,7 @@ interface IErrorEventProps {
     hls: Hls;
     reload: () => void;
     unload: () => void;
+    errorHandleAdapter?: (errorInfo: any) => boolean;
 }
-declare function ErrorEvent({ event, api, reload, unload, errorReloadTimer, flv, hls }: IErrorEventProps): JSX.Element;
-export default ErrorEvent;
+declare function useErrorEvent({ event, api, reload, unload, errorReloadTimer, flv, hls, errorHandleAdapter }: IErrorEventProps): void;
+export default useErrorEvent;

package/es/Player/event/errorEvent.js

@@ -18,19 +18,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import EventName from './eventName';
 import Flvjs from '@cloud-app-dev/flv.js';
 import Hls from 'hls.js';
 
-function ErrorEvent(_ref) {
+function useErrorEvent(_ref) {
   var event = _ref.event,
       api = _ref.api,
       reload = _ref.reload,
       unload = _ref.unload,
       errorReloadTimer = _ref.errorReloadTimer,
       flv = _ref.flv,
-      hls = _ref.hls;
+      hls = _ref.hls,
+      errorHandleAdapter = _ref.errorHandleAdapter;
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -54,7 +55,10 @@ function ErrorEvent(_ref) {
       (_console = console).error.apply(_console, args);
 
       errorInfo.current = args;
-      setErrorTime(errorTimer + 1);
+
+      if (!(errorHandleAdapter === null || errorHandleAdapter === void 0 ? void 0 : errorHandleAdapter(args))) {
+        setErrorTime(errorTimer + 1);
+      }
     };
 
     var reloadSuccess = function reloadSuccess() {
@@ -77,17 +81,22 @@ function ErrorEvent(_ref) {
       hls.on(Hls.Events.ERROR, errorHandle);
     }
 
-    event.on(EventName.ERROR, errorHandle);
-    event.on(EventName.CLEAR_ERROR_TIMER, clearErrorTimer);
-    event.addEventListener('error', errorHandle); //获取video状态清除错误状态
+    if (event) {
+      event.on(EventName.ERROR, errorHandle);
+      event.on(EventName.CLEAR_ERROR_TIMER, clearErrorTimer);
+      event.addEventListener('error', errorHandle); //获取video状态清除错误状态
+
+      event.addEventListener('canplay', reloadSuccess);
+    }
 
-    event.addEventListener('canplay', reloadSuccess);
     return function () {
       // flv, hls事件不用主动销毁，库内部自己处理
-      event.off(EventName.ERROR, errorHandle);
-      event.removeEventListener('error', errorHandle);
-      event.removeEventListener('canplay', reloadSuccess);
-    };
+      if (event) {
+        event.off(EventName.ERROR, errorHandle);
+        event.removeEventListener('error', errorHandle);
+        event.removeEventListener('canplay', reloadSuccess);
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event, flv, hls, errorTimer]);
   useEffect(function () {
     if (errorTimer === 0) {
@@ -109,7 +118,6 @@ function ErrorEvent(_ref) {
       clearTimeout(reloadTimer.current);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [errorTimer, api, event, flv, hls]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 
-export default ErrorEvent;
+export default useErrorEvent;

package/es/Player/live_heart.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import type Api from './api';
 import type VideoEventInstance from './event';
-declare function LiveHeart({ api, event }: {
+declare function useLiveHeart({ api, event, isLive }: {
     api: Api;
     event: VideoEventInstance;
-}): JSX.Element;
-export default LiveHeart;
+    isLive: boolean;
+}): void;
+export default useLiveHeart;

package/es/Player/live_heart.js

@@ -1,18 +1,23 @@
 import _useRafInterval from "ahooks/es/useRafInterval";
 import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useDocumentVisibility from "ahooks/es/useDocumentVisibility";
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import Events from './event/eventName';
 
-function LiveHeart(_ref) {
+function useLiveHeart(_ref) {
   var api = _ref.api,
-      event = _ref.event;
+      event = _ref.event,
+      isLive = _ref.isLive;
 
   var documentVisibility = _useDocumentVisibility();
 
   var cTimeRef = useRef(null);
 
   var run = function run() {
+    if (!isLive && documentVisibility !== 'visible') {
+      return;
+    }
+
     var current = api.getCurrentTime();
     var buffered = api.getSecondsLoaded();
 
@@ -38,12 +43,10 @@ function LiveHeart(_ref) {
   _useRafInterval(function () {
     var cuurentTime = api.getCurrentTime();
 
-    if (!api.video.paused && cuurentTime === cTimeRef.current) {
+    if (!!isLive && !api.video.paused && cuurentTime === cTimeRef.current) {
       event.emit(Events.ERROR);
     }
   }, 20 * 1000);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 
-export default LiveHeart;
+export default useLiveHeart;

package/es/Player/message.js

@@ -134,7 +134,7 @@ function VideoMessage(_ref) {
       event.off(EventName.HISTORY_PLAY_END, playEnd);
       event.off(EventName.CLEAR_ERROR_TIMER, reloadSuccess);
     };
-  }, [event]);
+  }, [api, event]);
   var loading = state.loading,
       status = state.status;
   return /*#__PURE__*/React.createElement("div", {

package/es/Player/single_player.js

@@ -19,9 +19,9 @@ import { usePlayerEvent, useRegisterPlayerEvents, useVideoEvents } from './event
 import EventName from './event/eventName';
 import ContrallerBar from './contraller_bar';
 import ContrallerEvent from './contraller_bar/contraller_event';
-import LiveHeart from './live_heart';
+import useLiveHeart from './live_heart';
 import VideoMessage from './message';
-import ErrorEvent from './event/errorEvent';
+import useErrorEvent from './event/errorEvent';
 import { getVideoType, playReload, playUnload } from './util';
 import Timeline from './timeline';
 import "./style/index.css";
@@ -85,7 +85,6 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _usePlayerApi2 = _slicedToArray(_usePlayerApi, 2),
       api = _usePlayerApi2[0],
       _usePlayerApi2$ = _slicedToArray(_usePlayerApi2[1], 3),
-      _ = _usePlayerApi2$[0],
       flv = _usePlayerApi2$[1],
       hls = _usePlayerApi2$[2]; // 判断是否有链接传入
 
@@ -167,7 +166,23 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onCanPlayerInit === null || onCanPlayerInit === void 0 ? void 0 : onCanPlayerInit();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [api, event, video]);
+  }, [api, event, video]); // 补货视频错误，自定义处理
+
+  useErrorEvent({
+    unload: unload,
+    flv: flv,
+    hls: hls,
+    api: playApi,
+    event: event,
+    reload: reload,
+    errorReloadTimer: errorReloadTimer
+  }); // 直播缓冲追回
+
+  useLiveHeart({
+    api: playApi,
+    event: event,
+    isLive: isLive
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: "lm-player-container ".concat(className),
     ref: domRef
@@ -204,18 +219,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   })), customTimeLine ? customTimeLine : !hideContrallerBar ? /*#__PURE__*/React.createElement(Timeline, {
     api: playApi,
     event: event
-  }) : null, /*#__PURE__*/React.createElement(ErrorEvent, {
-    unload: unload,
-    flv: flv,
-    hls: hls,
-    api: playApi,
-    event: event,
-    reload: reload,
-    errorReloadTimer: errorReloadTimer
-  }), isLive && /*#__PURE__*/React.createElement(LiveHeart, {
-    api: playApi,
-    event: playEvent
-  })), children);
+  }) : null), children);
 });
 SinglePlayer.defaultProps = {
   isLive: true,

package/es/ScreenPlayer/Live.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ILivePlayerProps } from './interface';
 import './index.less';
-declare function LivePlayer({ list, children, onIndexChange, onClose, onCloseAll, snapshot, defaultScreen, screenChange, defaultSelectIndex }: ILivePlayerProps): JSX.Element;
+declare function LivePlayer({ list, children, onIndexChange, onClose, onCloseAll, snapshot, defaultScreen, screenChange, defaultSelectIndex, oneWinExtTools, allWinExtTools, ...options }: ILivePlayerProps): JSX.Element;
 declare namespace LivePlayer {
     var defaultProps: {
         list: any[];

package/es/ScreenPlayer/Live.js

@@ -20,6 +20,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import { __rest } from "tslib";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ScreenType, mergeFill } from './utils';
 import { LivePlayerWithExt } from './PlayerWithExt';
@@ -27,16 +28,19 @@ import Tools from './LiveTools';
 import useVideoFit from './useVideoFit';
 import "./index.css";
 
-function LivePlayer(_ref) {
-  var list = _ref.list,
-      children = _ref.children,
-      onIndexChange = _ref.onIndexChange,
-      onClose = _ref.onClose,
-      onCloseAll = _ref.onCloseAll,
-      snapshot = _ref.snapshot,
-      defaultScreen = _ref.defaultScreen,
-      screenChange = _ref.screenChange,
-      defaultSelectIndex = _ref.defaultSelectIndex;
+function LivePlayer(_a) {
+  var list = _a.list,
+      children = _a.children,
+      onIndexChange = _a.onIndexChange,
+      onClose = _a.onClose,
+      onCloseAll = _a.onCloseAll,
+      snapshot = _a.snapshot,
+      defaultScreen = _a.defaultScreen,
+      screenChange = _a.screenChange,
+      defaultSelectIndex = _a.defaultSelectIndex,
+      oneWinExtTools = _a.oneWinExtTools,
+      allWinExtTools = _a.allWinExtTools,
+      options = __rest(_a, ["list", "children", "onIndexChange", "onClose", "onCloseAll", "snapshot", "defaultScreen", "screenChange", "defaultSelectIndex", "oneWinExtTools", "allWinExtTools"]);
 
   var _useState = useState({
     screenNum: defaultScreen !== null && defaultScreen !== void 0 ? defaultScreen : 4,
@@ -51,18 +55,24 @@ function LivePlayer(_ref) {
 
   var _useVideoFit = useVideoFit(domRef, []),
       fit = _useVideoFit.fit,
-      toggleFit = _useVideoFit.toggleFit; // 缓存所有player对象
+      toggleFit = _useVideoFit.toggleFit; // 若外部来控制screenNum 则由外部完全控制
 
 
+  var screenNum = useMemo(function () {
+    var _a;
+
+    return (_a = options.screenNum) !== null && _a !== void 0 ? _a : state.screenNum;
+  }, [options.screenNum, state.screenNum]); // 缓存所有player对象
+
   var playerRef = useRef([]);
   var screenType = useMemo(function () {
     return ScreenType.find(function (v) {
-      return v.name === state.screenNum;
+      return v.name === screenNum;
     });
-  }, [state.screenNum]);
+  }, [screenNum]);
   var screenList = useMemo(function () {
-    return mergeFill(state.screenNum, list, {});
-  }, [list, state.screenNum]); // 获取选中player对象
+    return mergeFill(screenNum, list, {});
+  }, [list, screenNum]); // 获取选中player对象
 
   var getPlayerItem = function getPlayerItem() {
     var _a;
@@ -75,9 +85,15 @@ function LivePlayer(_ref) {
     var obj = {};
 
     if (newState.hasOwnProperty('screenNum')) {
-      obj.screenNum = newState.screenNum;
+      if (options.screenNum) {
+        // 若外部控制，不需要update state
+        screenChange === null || screenChange === void 0 ? void 0 : screenChange(newState.screenNum);
+      } else {
+        obj.screenNum = newState.screenNum;
+      } // 修正选中索引
+
 
-      if (obj.screenNum < state.selectIndex) {
+      if (newState.screenNum < state.selectIndex) {
         obj.selectIndex = 0;
       }
     }
@@ -166,11 +182,13 @@ function LivePlayer(_ref) {
     disabled: !segmentItem.url,
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
-    screenNum: state.screenNum,
+    screenNum: screenNum,
     mode: state.modes[state.selectIndex],
     containerRef: domRef,
     updateState: updateState,
-    snapshot: snapshot
+    snapshot: snapshot,
+    oneWinExtTools: oneWinExtTools,
+    allWinExtTools: allWinExtTools
   }), children && /*#__PURE__*/React.cloneElement(children, {
     selectIndex: state.selectIndex
   }));

package/es/ScreenPlayer/LiveTools.d.ts

@@ -16,6 +16,14 @@ interface IToolsProps {
     onCloseAll?: () => void;
     disabled: boolean;
     snapshot?: (base64?: string) => void;
+    /**
+     * 单窗口拓展工具条,左侧
+     */
+    oneWinExtTools?: JSX.Element;
+    /**
+     * 全局窗口工具条，右侧
+     */
+    allWinExtTools?: JSX.Element;
 }
-declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, onClose, onCloseAll, disabled, snapshot }: IToolsProps): JSX.Element;
+declare function LiveTools({ containerRef, oneWinExtTools, allWinExtTools, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, onClose, onCloseAll, disabled, snapshot, }: IToolsProps): JSX.Element;
 export default LiveTools;

package/es/ScreenPlayer/LiveTools.js

@@ -21,6 +21,8 @@ import useFullscreen from '../useFullscreen';
 
 function LiveTools(_ref) {
   var containerRef = _ref.containerRef,
+      oneWinExtTools = _ref.oneWinExtTools,
+      allWinExtTools = _ref.allWinExtTools,
       updateState = _ref.updateState,
       screenNum = _ref.screenNum,
       getPlayerItem = _ref.getPlayerItem,
@@ -71,7 +73,8 @@ function LiveTools(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "player-tools"
   }, /*#__PURE__*/React.createElement(DisableMark, {
-    disabled: disabled
+    disabled: disabled,
+    width: "70%"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-left"
   }, /*#__PURE__*/React.createElement("span", {
@@ -120,7 +123,7 @@ function LiveTools(_ref) {
       position: 'relative',
       top: 1
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
@@ -147,7 +150,7 @@ function LiveTools(_ref) {
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, allWinExtTools, /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {

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, download, snapshot, defaultScreen, screenChange, defaultSelectIndex, }: IRecordPlayerProps): JSX.Element;
+declare function RecordPlayer({ list, children, queryRecord, onIndexChange, onClose, onCloseAll, download, snapshot, defaultScreen, screenChange, defaultSelectIndex, oneWinExtTools, allWinExtTools, ...options }: IRecordPlayerProps): JSX.Element;
 export default RecordPlayer;

package/es/ScreenPlayer/Record.js

@@ -27,7 +27,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { __awaiter } from "tslib";
+import { __awaiter, __rest } from "tslib";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ScreenType, mergeFill, differenceWithIndexs, FILTER_KEY } from './utils';
 import { SegmentPlayerWithExt, FrontendPlayerWithExt } from './PlayerWithExt';
@@ -53,39 +53,48 @@ var defaultState = {
  * @returns
  */
 
-function RecordPlayer(_ref) {
+function RecordPlayer(_a) {
   var _this = this;
 
-  var list = _ref.list,
-      children = _ref.children,
-      queryRecord = _ref.queryRecord,
-      onIndexChange = _ref.onIndexChange,
-      onClose = _ref.onClose,
-      onCloseAll = _ref.onCloseAll,
-      download = _ref.download,
-      snapshot = _ref.snapshot,
-      defaultScreen = _ref.defaultScreen,
-      screenChange = _ref.screenChange,
-      defaultSelectIndex = _ref.defaultSelectIndex;
+  var list = _a.list,
+      children = _a.children,
+      queryRecord = _a.queryRecord,
+      onIndexChange = _a.onIndexChange,
+      onClose = _a.onClose,
+      onCloseAll = _a.onCloseAll,
+      download = _a.download,
+      snapshot = _a.snapshot,
+      defaultScreen = _a.defaultScreen,
+      screenChange = _a.screenChange,
+      defaultSelectIndex = _a.defaultSelectIndex,
+      oneWinExtTools = _a.oneWinExtTools,
+      allWinExtTools = _a.allWinExtTools,
+      options = __rest(_a, ["list", "children", "queryRecord", "onIndexChange", "onClose", "onCloseAll", "download", "snapshot", "defaultScreen", "screenChange", "defaultSelectIndex", "oneWinExtTools", "allWinExtTools"]);
 
   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];
+      setState = _useState2[1]; // 若外部来控制screenNum 则由外部完全控制
 
+
+  var screenNum = useMemo(function () {
+    var _a;
+
+    return (_a = options.screenNum) !== null && _a !== void 0 ? _a : state.screenNum;
+  }, [options.screenNum, state.screenNum]);
   var domRef = useRef(null);
   var screenType = useMemo(function () {
     return ScreenType.find(function (v) {
-      return v.name === state.screenNum;
+      return v.name === screenNum;
     });
-  }, [state.screenNum]);
+  }, [screenNum]);
   var screenList = useMemo(function () {
-    return mergeFill(state.screenNum, list, {
+    return mergeFill(screenNum, list, {
       recordType: 1
     });
-  }, [state.screenNum, list]);
+  }, [screenNum, list]);
 
   var _useVideoFit = useVideoFit(domRef, []),
       fit = _useVideoFit.fit,
@@ -198,9 +207,15 @@ function RecordPlayer(_ref) {
     var obj = {};
 
     if (newState.hasOwnProperty('screenNum')) {
-      obj.screenNum = newState.screenNum;
+      if (options.screenNum) {
+        // 若外部控制，不需要update state
+        screenChange === null || screenChange === void 0 ? void 0 : screenChange(newState.screenNum);
+      } else {
+        obj.screenNum = newState.screenNum;
+      } // 修正选中索引
+
 
-      if (obj.screenNum < state.selectIndex) {
+      if (newState.screenNum < state.selectIndex) {
         obj.selectIndex = 0;
       }
     }
@@ -398,13 +413,14 @@ function RecordPlayer(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-group"
   }, /*#__PURE__*/React.createElement(DisableMark, {
-    disabled: !segmentItem.cid
+    disabled: !segmentItem.cid,
+    width: "70%"
   }, /*#__PURE__*/React.createElement(RecordTools, {
     time: state.currentTimes[state.selectIndex],
     fit: fit,
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
-    screenNum: state.screenNum,
+    screenNum: screenNum,
     mode: state.modes[state.selectIndex],
     containerRef: domRef,
     updateState: updateState,
@@ -413,7 +429,9 @@ function RecordPlayer(_ref) {
     onCloseAll: onCloseAll,
     timeMode: state.timeMode,
     download: download,
-    snapshot: snapshot
+    snapshot: snapshot,
+    oneWinExtTools: oneWinExtTools,
+    allWinExtTools: allWinExtTools
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
     updateState: updateState,

package/es/ScreenPlayer/RecordTools.d.ts

@@ -20,6 +20,14 @@ interface IToolsProps {
     timeMode: number;
     download?: () => void;
     snapshot?: (base64: string) => void;
+    /**
+     * 单窗口拓展工具条,左侧
+     */
+    oneWinExtTools?: JSX.Element;
+    /**
+     * 全局窗口工具条，右侧
+     */
+    allWinExtTools?: JSX.Element;
 }
-declare function RecordTools({ containerRef, updateState, download, screenNum, timeMode, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll, snapshot, }: IToolsProps): JSX.Element;
+declare function RecordTools({ containerRef, updateState, download, screenNum, timeMode, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll, snapshot, oneWinExtTools, allWinExtTools, }: IToolsProps): JSX.Element;
 export default RecordTools;

package/es/ScreenPlayer/RecordTools.js

@@ -34,7 +34,9 @@ function RecordTools(_ref) {
       onTimeChange = _ref.onTimeChange,
       onClose = _ref.onClose,
       onCloseAll = _ref.onCloseAll,
-      snapshot = _ref.snapshot;
+      snapshot = _ref.snapshot,
+      oneWinExtTools = _ref.oneWinExtTools,
+      allWinExtTools = _ref.allWinExtTools;
 
   var _useFullscreen = useFullscreen(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -114,7 +116,7 @@ function RecordTools(_ref) {
     },
     type: "lm-player-S_Device_shezhi",
     title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
@@ -148,7 +150,7 @@ function RecordTools(_ref) {
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, allWinExtTools, /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {

package/es/ScreenPlayer/interface.d.ts

@@ -40,13 +40,40 @@ export interface IRecordPlayerProps {
    */
   download?: () => void;
 
+  /**
+   * 截图
+   */
   snapshot?: (base64: string) => void;
 
+  /**
+   * 窗口变化
+   */
   screenChange?: (num: number) => void;
 
+  /**
+   * 默认窗口数量
+   */
   defaultScreen?: 1 | 4 | 6 | 9 | 16;
 
+  /**
+   * 窗口数量，若有值数量将由外部控制
+   */
+  screenNum?: 1 | 4 | 6 | 9 | 16;
+
+  /**
+   * 默认选中窗口
+   * @default 0
+   */
   defaultSelectIndex?: number;
+  /**
+   * 单窗口拓展工具条,左侧
+   */
+  oneWinExtTools?: JSX.Element;
+
+  /**
+   * 全局窗口工具条，右侧
+   */
+  allWinExtTools?: JSX.Element;
 }
 
 export interface IRecordPlayerState {
@@ -116,13 +143,41 @@ export interface ILivePlayerProps {
    */
   onIndexChange?: (idx: number) => void;
 
+  /**
+   * 截图
+   */
   snapshot?: (base64: string) => void;
 
+  /**
+   * 窗口变化
+   */
   screenChange?: (num: number) => void;
 
+  /**
+   * 默认窗口数量
+   */
   defaultScreen?: 1 | 4 | 6 | 9 | 16;
 
+  /**
+   * 窗口数量，若有值由外部来完全控制
+   */
+  screenNum?: 1 | 4 | 6 | 9 | 16;
+
+  /**
+   * 默认选中窗口
+   * @default 0
+   */
   defaultSelectIndex?: number;
+
+  /**
+   * 单窗口拓展工具条,左侧
+   */
+  oneWinExtTools?: JSX.Element;
+
+  /**
+   * 全局窗口工具条，右侧
+   */
+  allWinExtTools?: JSX.Element;
 }
 
 export interface ILivePlayerState {

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.15",
+  "version": "3.0.17",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -42,6 +42,8 @@
   },
   "devDependencies": {
     "@cloud-app-dev/utils": "^4.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.0.1",
     "@types/leaflet": "^1.7.11",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.7.6",