@cloud-app-dev/vidc 3.0.3 → 3.0.4

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

@@ -1,6 +1,7 @@
-import { Map, IMapInstance, IMapOptions } from '../interface';
+/// <reference types="src/map/amap" />
+import { IMapInstance, IMapOptions } from '../interface';
 declare class AMapInstance implements IMapInstance {
-    map: Map;
+    map: AMap.Map;
     config: IMapOptions;
     mapContainer: HTMLDivElement;
     constructor(ele: HTMLDivElement, config: IMapOptions);
@@ -8,7 +9,7 @@ declare class AMapInstance implements IMapInstance {
     destoryMap(): void;
     mapReset(): void;
     setZoom(zoom: number): void;
-    getZoom(): any;
+    getZoom(): number;
     setCenter(center: [number, number]): void;
     setZoomAndCenter(zoom: number, center: [number, number]): void;
 }

package/es/Map/BasicMap/AMapInstance.js

@@ -18,12 +18,11 @@ var AMapInstance = /*#__PURE__*/function () {
     value: function createMap() {
       var _a;
 
-      var _global = window;
-      this.map = new _global.AMap.Map(this.mapContainer, {
-        viewMode: '3D',
+      this.map = new AMap.Map(this.mapContainer, {
+        viewMode: '2D',
         zoom: this.config.zoom,
         center: this.config.center,
-        pitch: 72,
+        // pitch: 30,
         resizeEnable: true,
         mapStyle: "amap://styles/".concat((_a = this.config.amapStyle) !== null && _a !== void 0 ? _a : 'normal')
       });

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

@@ -8,8 +8,8 @@ declare class LeafletInstance implements IMapInstance {
     destoryMap(): void;
     setZoomAndCenter(zoom: number, center: [number, number] | LatLng): void;
     mapReset(): void;
-    setZoom(zoom: number): any;
-    setCenter(center: [number, number] | LatLng): any;
-    getZoom(): any;
+    setZoom(zoom: number): Map;
+    setCenter(center: [number, number] | LatLng): void;
+    getZoom(): number;
 }
 export default LeafletInstance;

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

@@ -1,5 +1,5 @@
-import { MapPoint, LClusterInterface } from '../interface';
-import { AMap as AMapType } from '../AMap';
+/// <reference types="src/map/amap" />
+import { MapPoint, Marker, LClusterInterface } from '../interface';
 import './index.less';
-export declare function useMarkerCluster(onPointClick?: (point: MapPoint) => void): LClusterInterface & AMapType.MarkerCluster;
-export declare function useMarkers(points?: MapPoint[]): any[];
+export declare function useMarkerCluster(onPointClick?: (point: MapPoint) => void): LClusterInterface & AMap.MarkerCluster;
+export declare function useMarkers(points?: MapPoint[]): Marker[];

package/es/Map/ClusterLayer/hook.js

@@ -1,3 +1,4 @@
+import _useUnmount from "ahooks/es/useUnmount";
 import _useUpdate from "ahooks/es/useUpdate";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -12,12 +13,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+/// <reference path="../AMap.d.ts" />
 import { useContext, useEffect, useRef, useState } from 'react';
 import useMapType from '../hook/useMapType';
 import { mapContext } from '../Context';
 import { createMapCenterIcon } from '../icon';
 import "./index.css";
-var _global = window;
 var clusterOptions = {
   showCoverageOnHover: false,
   maxClusterRadius: 80,
@@ -44,24 +45,19 @@ export function useMarkerCluster(onPointClick) {
     }
 
     if (type.AMap) {
-      var renderMarker = function renderMarker(context) {
-        var data = context.data[0];
-        context.marker.setLabel({
-          content: data.deviceName,
-          direction: 'top',
-          offset: [0, -2]
-        });
-        onPointClick && context.marker.on('click', function () {
-          return onPointClick(data);
-        });
-      };
-
-      instance.map.plugin(['AMap.MarkerCluster'], function () {
-        var AMap = _global.AMap;
+      AMap.plugin(['AMap.MarkerCluster'], function () {
         var cluster = new AMap.MarkerCluster(instance.map, [], {
           gridSize: 40,
-          renderMarker: renderMarker,
-          clusterByZoomChange: true
+          renderMarker: function renderMarker(context) {
+            var data = context.data[0];
+            context.marker.setLabel({
+              content: data.deviceName,
+              direction: 'top'
+            });
+            onPointClick && context.marker.on('click', function () {
+              return onPointClick(data);
+            });
+          }
         });
         cluster.on('click', function (e) {
           if (e.clusterData.length === 1) {
@@ -77,11 +73,13 @@ export function useMarkerCluster(onPointClick) {
 
     update(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
-    return function () {
-      return clusterRef.current && clusterRef.current.remove && clusterRef.current.remove();
-    };
-  }, []);
+
+  _useUnmount(function () {
+    try {
+      instance.map.remove(clusterRef.current);
+    } catch (_) {}
+  });
+
   return clusterRef.current;
 }
 export function useMarkers(points) {
@@ -120,8 +118,6 @@ export function useMarkers(points) {
     }
 
     if (type.AMap) {
-      var AMap = _global.AMap;
-
       for (var _i2 = 0, _l = points.length; _i2 < _l; _i2++) {
         var _point = points[_i2];
 

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="src/map/amap" />
 import { IClusterLayerProps } from './props';
 import './index.less';
 declare function ClusterLayer({ points, onPointClick, children }: IClusterLayerProps): JSX.Element;

package/es/Map/ClusterLayer/index.js

@@ -1,3 +1,4 @@
+/// <reference path="../AMap.d.ts" />
 import React, { useEffect } from 'react';
 import { useMarkerCluster, useMarkers } from './hook';
 import useMapType from '../hook/useMapType';

package/es/Map/InfoWindow/MakerLikeWindow.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+/// <reference types="src/map/amap" />
+import { InfoWindowProps } from '.';
+export default function MakerLikeWindow({ children, visible, center, width, height }: InfoWindowProps): JSX.Element;

package/es/Map/InfoWindow/MakerLikeWindow.js

@@ -0,0 +1,103 @@
+import _useUnmount from "ahooks/es/useUnmount";
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+/// <reference path="../AMap.d.ts" />
+import React, { useContext, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { mapContext } from '../Context';
+import useMapType from '../hook/useMapType';
+var maxIndex = 20;
+export default function MakerLikeWindow(_ref) {
+  var children = _ref.children,
+      visible = _ref.visible,
+      center = _ref.center,
+      width = _ref.width,
+      height = _ref.height;
+
+  var _useContext = useContext(mapContext),
+      instance = _useContext.instance;
+
+  var domref = useRef(null);
+  var markerRef = useRef(null);
+  var type = useMapType();
+  useEffect(function () {
+    if (!instance.map) {
+      return;
+    } // leaflet下还未实现
+
+
+    if (type.AMap && !markerRef.current) {
+      var marker = new AMap.Marker({
+        content: domref.current,
+        visible: false,
+        zIndex: maxIndex,
+        map: instance.map,
+        offset: [-width * 0.5, -height - 32]
+      });
+      markerRef.current = marker;
+      marker.on('click', function () {
+        maxIndex++;
+
+        if (marker.getzIndex() !== maxIndex) {
+          marker.setzIndex(maxIndex);
+        }
+      });
+    }
+  }, [instance.map, visible, center]);
+  useEffect(function () {
+    var marker = markerRef.current;
+
+    if (!marker || !center) {
+      return undefined;
+    }
+
+    if (type.AMap) {
+      var lnglat = _construct(AMap.LngLat, _toConsumableArray(center));
+
+      if (visible) {
+        marker.setPosition(lnglat);
+        marker.setContent(domref.current);
+        ReactDOM.render(children, domref.current);
+        marker.show();
+      } else {
+        marker.hide();
+        ReactDOM.unmountComponentAtNode(domref.current);
+        instance.map.remove(markerRef.current);
+        markerRef.current = null;
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [visible, center, instance.map]);
+
+  _useUnmount(function () {
+    try {
+      instance.map.remove(markerRef.current);
+      markerRef.current = null;
+    } catch (_) {}
+  });
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: domref,
+    style: {
+      width: width,
+      height: height
+    }
+  }));
+}

package/es/Map/InfoWindow/demo.js

@@ -1,3 +1,11 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
@@ -13,19 +21,41 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState } from 'react';
 import Map from '../BasicMap';
 import ClusterLayer from '../ClusterLayer';
-import InfoWindow from '.';
+import InfoWindow from './MakerLikeWindow';
 import deviceList from '../points.json';
 import Player from '../../Player';
 
 var App = function App() {
-  var _useState = useState({
-    visible: false,
-    center: undefined
-  }),
+  var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
 
+  var addDeviceInfoWindow = function addDeviceInfoWindow(item) {
+    var longitude = item.longitude,
+        latitude = item.latitude,
+        cid = item.cid;
+    var arr = state;
+    var index = arr.findIndex(function (v) {
+      return v.cid === cid;
+    });
+
+    if (index === -1) {
+      arr.push({
+        visible: true,
+        center: [longitude, latitude],
+        cid: cid,
+        url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+      });
+    }
+
+    if (index > -1 && !arr[index].visible) {
+      arr[index].visible = true;
+    }
+
+    setState(_toConsumableArray(arr));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%',
@@ -34,23 +64,20 @@ var App = function App() {
   }, /*#__PURE__*/React.createElement(Map, null, /*#__PURE__*/React.createElement(ClusterLayer, {
     points: deviceList,
     onPointClick: function onPointClick(point) {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          visible: true,
-          center: [point.longitude, point.latitude]
-        });
-      });
-    }
-  }), /*#__PURE__*/React.createElement(InfoWindow, {
-    visible: state.visible,
-    center: state.center
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 560,
-      height: 360,
-      background: '#fff'
+      return addDeviceInfoWindow(point);
     }
-  }, /*#__PURE__*/React.createElement(Player, null)))));
+  }), state.map(function (item) {
+    return /*#__PURE__*/React.createElement(InfoWindow, {
+      visible: item.visible,
+      center: item.center,
+      key: item.cid,
+      width: 200,
+      height: 100
+    }, /*#__PURE__*/React.createElement(Player, {
+      url: item.url,
+      hideContrallerBar: true
+    }));
+  })));
 };
 
 export default App;

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

@@ -1,8 +1,10 @@
-import React from 'react';
-interface InfoWindowProps {
-    children: React.ReactNode;
+/// <reference types="react" />
+/// <reference types="src/map/amap" />
+export interface InfoWindowProps {
+    children: JSX.Element;
     visible?: boolean;
     center?: [number, number];
+    width: number;
+    height: number;
 }
-export default function InfoWindow({ children, visible, center }: InfoWindowProps): JSX.Element;
-export {};
+export default function InfoWindow({ children, visible, center, width, height }: InfoWindowProps): JSX.Element;

package/es/Map/InfoWindow/index.js

@@ -16,15 +16,17 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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; }
 
+/// <reference path="../AMap.d.ts" />
 import React, { useContext, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { mapContext } from '../Context';
 import useMapType from '../hook/useMapType';
-var _global = window;
 export default function InfoWindow(_ref) {
   var children = _ref.children,
       visible = _ref.visible,
-      center = _ref.center;
+      center = _ref.center,
+      width = _ref.width,
+      height = _ref.height;
 
   var _useContext = useContext(mapContext),
       instance = _useContext.instance;
@@ -39,9 +41,8 @@ export default function InfoWindow(_ref) {
 
 
     if (type.AMap && !infoWindowRef.current) {
-      var AMap = _global.AMap;
       var infoWindow = new AMap.InfoWindow({
-        isCustom: true,
+        size: [width, height],
         content: domref.current,
         autoMove: false,
         offset: [0, -32]
@@ -58,11 +59,11 @@ export default function InfoWindow(_ref) {
     }
 
     if (type.AMap) {
-      var AMap = _global.AMap;
+      var map = instance.map;
 
       var lnglat = _construct(AMap.LngLat, _toConsumableArray(center));
 
-      instance.map.setCenter(lnglat); // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      map.setCenter(lnglat); // eslint-disable-next-line @typescript-eslint/no-unused-expressions
 
       visible ? !infoWindow.getIsOpen() ? (infoWindow.close(), infoWindow.open(instance.map, lnglat)) : infoWindow.open(instance.map, lnglat) : infoWindow.close();
     } // eslint-disable-next-line react-hooks/exhaustive-deps

package/es/Map/interface.d.ts

@@ -23,7 +23,7 @@ export interface IMapOptions {
 }
 export class IMapInstance {
   constructor(ele: HTMLDivElement, options?: IMapOptions);
-  map: Map;
+  map: AMap.Map | LMap.Map;
   config: IMapOptions;
   createMap(): void;
   destoryMap(): void;

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

@@ -1,11 +1,11 @@
+/// <reference types="src/map/amap" />
 import { Map } from '../interface';
-import { AMap as AMapType } from '../AMap';
 import './index.less';
 export interface IUseMarkerProps {
     map: Map;
     center: [number, number];
     createIcon: (options?: any) => any;
-    options?: AMapType.MarkerOptions;
+    options?: AMap.MarkerOptions;
 }
 declare function useMarker({ map, center, createIcon, options }: IUseMarkerProps): any;
 export default useMarker;

package/es/Map/useMarker/index.js

@@ -1,17 +1,3 @@
-function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 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."); }
@@ -24,10 +10,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+/// <reference path="../AMap.d.ts" />
 import { useEffect, useRef, useState } from 'react';
 import useMapType from '../hook/useMapType';
 import "./index.css";
-var _global = window;
 
 function useMarker(_ref) {
   var map = _ref.map,
@@ -70,13 +56,11 @@ function useMarker(_ref) {
     }
 
     if (type.AMap) {
-      var AMap = _global.AMap;
-
       if (inMap.current) {
-        state.marker.setPosition(_construct(AMap.LngLat, _toConsumableArray(center)));
+        state.marker.setPosition(center);
       } else {
         var _marker = new AMap.Marker(Object.assign({
-          position: _construct(AMap.LngLat, _toConsumableArray(center))
+          position: center
         }, options));
 
         map.add(_marker);

package/es/Player/api/index.js

@@ -44,7 +44,6 @@ var Api = /*#__PURE__*/function () {
 
 
     this.seekTo = function (seconds) {
-      debugger;
       _this.video.currentTime = seconds;
     };
 

package/es/Player/event/errorEvent.js

@@ -78,17 +78,12 @@ function ErrorEvent(_ref) {
     }
 
     event.on(EventName.ERROR, errorHandle);
+    event.on(EventName.CLEAR_ERROR_TIMER, clearErrorTimer);
     event.addEventListener('error', errorHandle); //获取video状态清除错误状态
 
     event.addEventListener('canplay', reloadSuccess);
     return function () {
-      //PS 对象销毁时事件自动回收
-      // if (flv) {
-      //   flv.off(flvjs.Events.ERROR, errorHandle);
-      // }
-      // if (hls) {
-      //   hls.off(Hls.Events.ERROR, errorHandle);
-      // }
+      // flv, hls事件不用主动销毁，库内部自己处理
       event.off(EventName.ERROR, errorHandle);
       event.removeEventListener('error', errorHandle);
       event.removeEventListener('canplay', reloadSuccess);
@@ -112,7 +107,7 @@ function ErrorEvent(_ref) {
     }, 2 * 1000);
     return function () {
       clearTimeout(reloadTimer.current);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [errorTimer, api, event, flv, hls]);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }

package/es/Player/single_player.js

@@ -16,6 +16,7 @@ import { __rest } from "tslib";
 import React, { useEffect, useMemo, useRef, useState, useImperativeHandle } from 'react';
 import { usePlayerApi } from './api';
 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';
@@ -99,7 +100,11 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         container: domRef.current
       });
     });
-  }, []); // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
+  }, []); // url 变化清理错误次数
+
+  useEffect(function () {
+    event && event.emit(EventName.CLEAR_ERROR_TIMER); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]); // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
 
   var reload = function reload() {
     return playReload(video, event, flv, hls, url);

package/es/ScreenPlayer/Live.js

@@ -14,6 +14,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { ScreenType, mergeFill } from './utils';
 import { LivePlayerWithExt } from './PlayerWithExt';
 import Tools from './LiveTools';
+import useVideoFit from './useVideoFit';
 import "./index.css";
 
 function LivePlayer(_ref) {
@@ -30,7 +31,12 @@ function LivePlayer(_ref) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var domRef = useRef(null); // 缓存所有player对象
+  var domRef = useRef(null);
+
+  var _useVideoFit = useVideoFit(domRef, []),
+      fit = _useVideoFit.fit,
+      toggleFit = _useVideoFit.toggleFit; // 缓存所有player对象
+
 
   var playerRef = useRef([]);
   var screenType = useMemo(function () {
@@ -96,6 +102,8 @@ function LivePlayer(_ref) {
       }
     }));
   })), /*#__PURE__*/React.createElement(Tools, {
+    fit: fit,
+    toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: state.screenNum,
     mode: state.mode,

package/es/ScreenPlayer/LiveTools.d.ts

@@ -10,6 +10,8 @@ interface IToolsProps {
     screenNum: number;
     mode: PlayModeType;
     getPlayerItem: () => ExportPlayerType | undefined;
+    fit?: string;
+    toggleFit?: () => void;
 }
-declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode }: IToolsProps): JSX.Element;
+declare function LiveTools({ containerRef, updateState, screenNum, getPlayerItem, mode, toggleFit, fit }: IToolsProps): JSX.Element;
 export default LiveTools;

package/es/ScreenPlayer/LiveTools.js

@@ -20,7 +20,9 @@ function LiveTools(_ref) {
       updateState = _ref.updateState,
       screenNum = _ref.screenNum,
       getPlayerItem = _ref.getPlayerItem,
-      mode = _ref.mode;
+      mode = _ref.mode,
+      toggleFit = _ref.toggleFit,
+      fit = _ref.fit;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -85,6 +87,11 @@ function LiveTools(_ref) {
     },
     onClick: reload
   }, "\u91CD\u8FDE"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: toggleFit
+  }, fit === 'fill' ? '自适应' : '填充'), /*#__PURE__*/React.createElement("span", {
     style: {
       padding: 6
     },