@cloud-app-dev/vidc 3.2.11 → 3.2.14

package/es/ScreenPlayer/useTimeSlider.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
 import type { ISegmentType } from '../Player/player';
 export interface ITimeSliderOptions {
-    hoursPer?: number;
-    begin?: number;
+    hoursPer: number;
+    begin: number;
     segments?: TimeCellItem[];
-    currentTime?: number;
-    onTimeChange?: (options: {
+    currentTime: number;
+    onTimeChange: (options: {
         currentTime?: number;
         begin?: number;
     }, outTimeline?: boolean) => void;
-    onHoursPerChange?: (hour: number) => void;
+    onHoursPerChange: (hour: number) => void;
 }
 export declare type ITimeSliderState = {
     hoursPer: number;
     begin: number;
     currentTime: number;
     hover: {
-        x: number;
-        time: number;
+        x?: number;
+        time?: number;
     };
 };
 export declare type TimeCellItem = ISegmentType;
-declare function useTimeSlider(canvasRef: React.MutableRefObject<HTMLCanvasElement>, { hoursPer, begin, currentTime, segments, onTimeChange, onHoursPerChange }: ITimeSliderOptions): void;
+declare function useTimeSlider(canvasRef: React.RefObject<HTMLCanvasElement>, { hoursPer, begin, currentTime, segments, onTimeChange, onHoursPerChange }: ITimeSliderOptions): void;
 export default useTimeSlider;

package/es/ScreenPlayer/useTimeSlider.js

@@ -2,12 +2,25 @@ import _nextTick from "@cloud-app-dev/utils/es/nextTick";
 import _useEventListener from "ahooks/es/useEventListener";
 import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useSize from "ahooks/es/useSize";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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 moment from 'moment';
 import { useEffect, useMemo, useRef, useState } from 'react';
 var hours = [1, 6, 12, 24];
@@ -20,6 +33,7 @@ var distance_between_gtitle = 80;
 /**
  * 下一个刻度
  */
+
 function ms_to_next_step(timestamp, step) {
   var remainder = timestamp % step;
   return remainder ? step - remainder : 0;
@@ -28,6 +42,8 @@ function ms_to_next_step(timestamp, step) {
  * 返回 2018-01-01 10:00:00 格式时间
  * @param {*} time
  */
+
+
 function formartTimestemp(time) {
   return moment(time).format('YYYY-MM-DD HH:mm:ss');
 }
@@ -35,19 +51,25 @@ function formartTimestemp(time) {
  * 返回时间轴上刻度的时间
  * @param {*} datetime new Date 格式
  */
+
+
 function graduation_title(datetime) {
   var mom = moment(datetime);
   var h = mom.get('hours');
   var m = mom.get('minutes');
   var s = mom.get('seconds');
+
   if (h === 0 && m === 0 && s === 0) {
     return mom.format('YYYY.MM.DD');
   }
+
   return mom.format('HH:mm');
 }
 /**
  * 绘制线条
  */
+
+
 function drawLine(ctx, beginX, beginY, endX, endY, color, width) {
   ctx.beginPath();
   ctx.moveTo(beginX, beginY);
@@ -56,81 +78,104 @@ function drawLine(ctx, beginX, beginY, endX, endY, color, width) {
   ctx.lineWidth = width;
   ctx.stroke();
 }
+
 function drawText(ctx, _ref) {
   var fillStyle = _ref.fillStyle,
-    font = _ref.font,
-    text = _ref.text,
-    x = _ref.x,
-    y = _ref.y;
+      font = _ref.font,
+      text = _ref.text,
+      x = _ref.x,
+      y = _ref.y;
   ctx.fillStyle = fillStyle;
   ctx.font = font;
   ctx.fillText(text, x, y);
 }
+
 function useTimeSlider(canvasRef, _ref2) {
   var hoursPer = _ref2.hoursPer,
-    begin = _ref2.begin,
-    currentTime = _ref2.currentTime,
-    _ref2$segments = _ref2.segments,
-    segments = _ref2$segments === void 0 ? [] : _ref2$segments,
-    onTimeChange = _ref2.onTimeChange,
-    onHoursPerChange = _ref2.onHoursPerChange;
+      begin = _ref2.begin,
+      currentTime = _ref2.currentTime,
+      _ref2$segments = _ref2.segments,
+      segments = _ref2$segments === void 0 ? [] : _ref2$segments,
+      onTimeChange = _ref2.onTimeChange,
+      onHoursPerChange = _ref2.onHoursPerChange;
+
   var _useState = useState({
-      hoursPer: hoursPer,
-      begin: begin,
-      currentTime: currentTime,
-      hover: {
-        x: 0,
-        time: null
-      }
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
+    hoursPer: hoursPer,
+    begin: begin,
+    currentTime: currentTime,
+    hover: {
+      x: 0,
+      time: undefined
+    }
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
   var extRef = useRef({
-    mousedownTime: null,
+    mousedownTime: undefined,
     mousedownX: 0
   });
+
   var size = _useSize(canvasRef);
+
   var canvas = canvasRef.current;
+
   var _useMemo = useMemo(function () {
-      return size ? size : {
-        width: 0,
-        height: 0
-      };
-    }, [size]),
-    width = _useMemo.width,
-    height = _useMemo.height;
+    return size ? size : {
+      width: 0,
+      height: 0
+    };
+  }, [size]),
+      width = _useMemo.width,
+      height = _useMemo.height;
+
   var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+
   var update = function update() {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return setState(function (old) {
-      return Object.assign(Object.assign({}, old), params);
+      return _objectSpread(_objectSpread({}, old), params);
     });
   };
+
   var clearCanvas = function clearCanvas() {
-    return ctx.clearRect(0, 0, width, height);
+    return ctx === null || ctx === void 0 ? void 0 : ctx.clearRect(0, 0, width, height);
   };
   /**
    * 绘制覆盖时间刻度颜色，表示有录像的部分
    */
+
+
   var drawOverlay = function drawOverlay() {
     segments.forEach(function (item) {
-      var _a;
       var px_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
+
       var beginX = (item.beginTime - state.begin) * px_ms;
       var scale_width = (item.endTime - item.beginTime) * px_ms;
-      ctx.fillStyle = item.url ? ((_a = item.style) === null || _a === void 0 ? void 0 : _a.background) || hoverLineColor : '#242C3D';
-      ctx.fillRect(beginX, height - 10, scale_width + 1, height);
+
+      if (ctx) {
+        var _item$style;
+
+        ctx.fillStyle = item.url ? ((_item$style = item.style) === null || _item$style === void 0 ? void 0 : _item$style.background) || hoverLineColor : '#242C3D';
+        ctx.fillRect(beginX, height - 10, scale_width + 1, height);
+      }
     });
   };
   /**
    * 绘制刻度相关的
    */
+
+
   var drawScale = function drawScale() {
     var px_per_min = width / (state.hoursPer * 60); // px/min
+
     var px_per_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
+
     var px_per_step = minStepSize; // px/格 默认最小值20px
+
     var min_per_step = px_per_step / px_per_min; // min/格
+
     for (var i = 0; i < minPerStep.length; i++) {
       if (min_per_step <= minPerStep[i]) {
         //让每格时间在minutes_per_step规定的范围内
@@ -139,22 +184,33 @@ function useTimeSlider(canvasRef, _ref2) {
         break;
       }
     }
+
     var medium_step = 30;
+
     for (var _i2 = 0; _i2 < minPerStep.length; _i2++) {
       if (distance_between_gtitle / px_per_min <= minPerStep[_i2]) {
         medium_step = minPerStep[_i2];
         break;
       }
     }
+
     var num_steps = width / px_per_step; //总格数
+
     var ms_offset = ms_to_next_step(state.begin, min_per_step * 60 * 1000); //开始的偏移时间 ms
+
     var px_offset = ms_offset * px_per_ms; //开始的偏移距离 px
+
     var ms_per_step = px_per_step / px_per_ms; // ms/step
+
     var graduation_left, graduation_time, lineH;
+
     for (var _i3 = 0; _i3 < num_steps; _i3++) {
       graduation_left = px_offset + _i3 * px_per_step; // 距离=开始的偏移距离+格数*px/格
+
       graduation_time = state.begin + ms_offset + _i3 * ms_per_step; //时间=左侧开始时间+偏移时间+格数*ms/格
+
       var date = moment(graduation_time);
+
       if (date.get('hours') === 0 && date.get('minutes') === 0) {
         lineH = 10;
         var big_date = graduation_title(date.valueOf());
@@ -169,7 +225,9 @@ function useTimeSlider(canvasRef, _ref2) {
       } else if (graduation_time / (60 * 1000) % medium_step === 0) {
         lineH = 10;
         var middle_date = graduation_title(date.valueOf());
+
         var _x = graduation_left - (middle_date.length > 5 ? 24 : 12);
+
         drawText(ctx, {
           fillStyle: normalLineColor,
           font: '10px Arial',
@@ -180,6 +238,7 @@ function useTimeSlider(canvasRef, _ref2) {
       } else {
         lineH = 5;
       }
+
       drawLine(ctx, graduation_left, height - lineH, graduation_left, height, normalLineColor, 2);
     }
   };
@@ -187,17 +246,22 @@ function useTimeSlider(canvasRef, _ref2) {
    * 绘制当前刻度
    * @returns
    */
+
+
   var drawCurrentLine = function drawCurrentLine() {
     var currentTime = state.currentTime,
-      begin = state.begin,
-      hoursPer = state.hoursPer;
+        begin = state.begin,
+        hoursPer = state.hoursPer;
     var time = currentTime;
     var range = [begin, currentTime + hoursPer * 3600 * 1000];
+
     if (time < range[0] || time > range[1]) {
       return;
     }
+
     var ms_current = time - begin;
     var px_per_ms = width / (hoursPer * 60 * 60 * 1000); // px/ms
+
     var left = px_per_ms * ms_current;
     drawText(ctx, {
       fillStyle: '#ffffff',
@@ -211,52 +275,67 @@ function useTimeSlider(canvasRef, _ref2) {
   /**
    * 绘制提示时间
    */
+
+
   var drawHoverLine = function drawHoverLine() {
+    var _state$hover$x, _state$hover$time, _state$hover$x2, _state$hover$x3;
+
     drawText(ctx, {
       fillStyle: hoverLineColor,
       font: '12px Arial',
-      x: state.hover.x - 50,
+      x: (_state$hover$x = state.hover.x) !== null && _state$hover$x !== void 0 ? _state$hover$x : 0 - 50,
       y: 12,
-      text: formartTimestemp(state.hover.time)
+      text: formartTimestemp((_state$hover$time = state.hover.time) !== null && _state$hover$time !== void 0 ? _state$hover$time : 0)
     });
-    drawLine(ctx, state.hover.x, 20, state.hover.x, height, hoverLineColor, 1);
+    drawLine(ctx, (_state$hover$x2 = state.hover.x) !== null && _state$hover$x2 !== void 0 ? _state$hover$x2 : 0, 20, (_state$hover$x3 = state.hover.x) !== null && _state$hover$x3 !== void 0 ? _state$hover$x3 : 0, height, hoverLineColor, 1);
   };
   /**
    * 获取鼠标posx
    * @param {*} e
    */
+
+
   var get_cursor_x_position = function get_cursor_x_position(e) {
     return e.offsetX;
   };
   /**
    * 更新画布大小
    */
+
+
   _useUpdateEffect(function () {
     if (canvas) {
       canvas.width = width;
       canvas.height = height;
     }
   }, [canvas, height, width]);
+
   useEffect(function () {
     if (canvas) {
       clearCanvas();
       drawOverlay();
       drawScale();
       drawCurrentLine();
-      state.hover.time && drawHoverLine();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      if (state.hover.time) {
+        drawHoverLine();
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [canvas, state.begin, state.currentTime, state.hoursPer, segments, state.hover, size]);
+
   _useUpdateEffect(function () {
     return update({
       begin: begin
     });
   }, [begin]);
+
   _useUpdateEffect(function () {
     return update({
       hoursPer: hoursPer
     });
   }, [hoursPer]);
+
   _useUpdateEffect(function () {
     return update({
       currentTime: currentTime
@@ -265,12 +344,16 @@ function useTimeSlider(canvasRef, _ref2) {
   /**
    * 触发绘制范围单位（hour）
    */
+
+
   _useEventListener('mousewheel', function (event) {
     event.preventDefault();
     var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
     var middle_time = state.begin + state.hoursPer * 3600 * 1000 / 2; //ms 记住当前中间的时间
+
     var new_hoursPer = state.hoursPer;
     var index = hours.indexOf(new_hoursPer);
+
     if (delta < 0) {
       // 缩小
       if (index === hours.length - 1) {
@@ -286,13 +369,16 @@ function useTimeSlider(canvasRef, _ref2) {
         new_hoursPer = hours[index - 1];
       }
     }
+
     var new_begin = middle_time - state.hoursPer * 3600 * 1000 / 2; //new_begin = 当前中间的时间 - hoursPer/2
+
     setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         begin: new_begin,
         hoursPer: new_hoursPer
       });
     });
+
     _nextTick(function () {
       return onHoursPerChange === null || onHoursPerChange === void 0 ? void 0 : onHoursPerChange(new_hoursPer);
     });
@@ -302,12 +388,14 @@ function useTimeSlider(canvasRef, _ref2) {
   /**
    * 用于处理canvas移除hover效果
    */
+
+
   _useEventListener('mouseout', function () {
     return setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         hover: {
           x: 0,
-          time: null
+          time: undefined
         }
       });
     });
@@ -317,13 +405,15 @@ function useTimeSlider(canvasRef, _ref2) {
   /**
    * hover效果绘制
    */
+
+
   _useEventListener('mousemove', function (e) {
     if (extRef.current.mousedownTime) {
       setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
+        return _objectSpread(_objectSpread({}, old), {}, {
           hover: old.hover.time ? {
             x: 0,
-            time: null
+            time: undefined
           } : old.hover
         });
       });
@@ -331,9 +421,10 @@ function useTimeSlider(canvasRef, _ref2) {
       // 触发绘制hover tips
       var pos_x = get_cursor_x_position(e);
       var ms_per_px = state.hoursPer * 3600 * 1000 / width; // ms/px
+
       var current_timestamp = state.begin + pos_x * ms_per_px;
       setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
+        return _objectSpread(_objectSpread({}, old), {}, {
           hover: {
             x: pos_x,
             time: current_timestamp
@@ -347,6 +438,8 @@ function useTimeSlider(canvasRef, _ref2) {
   /**
    * 标记点击、拖动的触发器
    */
+
+
   _useEventListener('mousedown', function (e) {
     extRef.current.mousedownTime = Date.now();
     extRef.current.mousedownX = get_cursor_x_position(e); //记住mousedown的位置
@@ -356,53 +449,66 @@ function useTimeSlider(canvasRef, _ref2) {
   /**
    * 处理点击、结束拖动的处理
    */
+
+
   _useEventListener('mouseup', function (e) {
     if (!extRef.current.mousedownTime) {
       // 未在canvas上触发mousedown 过滤
       return;
     }
+
     var clickDelay = Date.now() - extRef.current.mousedownTime;
+
     if (clickDelay < 200 && e.target === canvas) {
       // click 事件
       var pos_x = get_cursor_x_position(e); //鼠标距离 px
+
       var ms_per_px = state.hoursPer * 3600 * 1000 / width; // ms/px
+
       var new_current = state.begin + pos_x * ms_per_px;
       var segmentItem = segments.find(function (v) {
         return new_current >= v.beginTime && new_current < v.endTime;
-      });
-      // 当前片段没有录像的时候
-      var outTimeline = segmentItem && !segmentItem.url;
-      // const new_begin = new_current - (state.hoursPer * 60 * 60 * 1000) / 2;
+      }); // 当前片段没有录像的时候
+
+      var _outTimeline = segmentItem && !segmentItem.url; // const new_begin = new_current - (state.hoursPer * 60 * 60 * 1000) / 2;
       // setState((old) => ({ ...old, begin: new_begin, current: new_current }));
+
+
       setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
+        return _objectSpread(_objectSpread({}, old), {}, {
           current: new_current
         });
       });
+
       _nextTick(function () {
         return onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
           currentTime: new_current
-        }, outTimeline);
+        }, _outTimeline);
       });
-    }
-    // 清楚拖拽关联信息
-    extRef.current.mousedownTime = null;
+    } // 清楚拖拽关联信息
+
+
+    extRef.current.mousedownTime = undefined;
     extRef.current.mousedownX = 0;
   }, {
     target: document
   });
-  var moveTimerRef = useRef(null);
+
+  var moveTimerRef = useRef();
   /**
    * 拖动处理
    */
+
   _useEventListener('mousemove', function (e) {
     if (!extRef.current.mousedownTime) {
       return;
     }
-    clearTimeout(moveTimerRef.current);
-    // 触发拖动
+
+    clearTimeout(moveTimerRef.current); // 触发拖动
+
     var pos_x = get_cursor_x_position(e);
     var px_per_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
+
     var diff_x = pos_x - extRef.current.mousedownX;
     var new_begin = state.begin - Math.round(diff_x / px_per_ms);
     extRef.current.mousedownX = pos_x;
@@ -418,4 +524,5 @@ function useTimeSlider(canvasRef, _ref2) {
     target: document
   });
 }
+
 export default useTimeSlider;

package/es/ScreenPlayer/useVideoFit.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export default function useVideoFit(containerRef: React.MutableRefObject<HTMLDivElement>, deps?: any[]): {
+export default function useVideoFit(containerRef: React.RefObject<HTMLDivElement>, deps?: any[]): {
     fit: string;
     toggleFit: () => void;
 };

package/es/ScreenPlayer/useVideoFit.js

@@ -1,30 +1,43 @@
 import _useToggle3 from "ahooks/es/useToggle";
+
 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."); }
+
 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 { useEffect, useMemo } from 'react';
 export default function useVideoFit(containerRef) {
   var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
   var _useToggle = _useToggle3('contain', 'fill'),
-    _useToggle2 = _slicedToArray(_useToggle, 2),
-    fit = _useToggle2[0],
-    toggle = _useToggle2[1].toggle;
+      _useToggle2 = _slicedToArray(_useToggle, 2),
+      fit = _useToggle2[0],
+      toggle = _useToggle2[1].toggle;
+
   useEffect(function () {
     if (!containerRef.current) {
       return;
     }
+
     var videos = containerRef.current.querySelectorAll('video');
     Array.from(videos).forEach(function (item) {
       item.style.objectFit = fit;
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [].concat(_toConsumableArray(deps), [fit]));
   return useMemo(function () {
     return {

package/es/ScreenPlayer/utils.d.ts

@@ -8,7 +8,7 @@ export declare const ScreenType: {
 export declare const TimeModeLibs: {
     name: number;
 }[];
-export declare function mergeFill<T, S>(len: number, mergeArr: T[], fillItem: S): (T | S)[];
+export declare function mergeFill<T, S>(len: number, mergeArr: T[] | undefined, fillItem: S): (T | S)[];
 /**
  * unix时间戳
  * @param start

package/es/ScreenPlayer/utils.js

@@ -33,7 +33,9 @@ export var TimeModeLibs = [{
 }, {
   name: 24
 }];
-export function mergeFill(len, mergeArr, fillItem) {
+export function mergeFill(len) {
+  var mergeArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var fillItem = arguments.length > 2 ? arguments[2] : undefined;
   return new Array(len).fill(fillItem).map(function (v, i) {
     return mergeArr[i] ? mergeArr[i] : v;
   });
@@ -44,14 +46,17 @@ export function mergeFill(len, mergeArr, fillItem) {
  * @param end
  * @param segments
  */
+
 export var completionSegments = function completionSegments(start, end, segments) {
   var arr = [];
+
   if (segments.length > 0 && start < +segments[0].beginTime) {
     arr.push({
       beginTime: start,
       endTime: +segments[0].beginTime
     });
   }
+
   segments.reduce(function (prev, current, idx) {
     if (arr.length === 0 && idx === 0) {
       prev.push(current);
@@ -63,17 +68,21 @@ export var completionSegments = function completionSegments(start, end, segments
     } else {
       prev.push(current);
     }
+
     return prev;
   }, arr);
+
   if (end > +segments[segments.length - 1].endTime) {
     arr.push({
       beginTime: segments[segments.length - 1].endTime,
       endTime: end
     });
   }
+
   return arr;
 };
 export function sleep(time) {
+  // eslint-disable-next-line no-promise-executor-return
   return new Promise(function (reslove) {
     return setTimeout(function () {
       return reslove(time);