@cloud-app-dev/vidc 3.2.17 → 3.2.19

package/es/Picture/index.js

@@ -31,17 +31,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-/* eslint-disable jsx-a11y/alt-text */
-import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import DomMove from "../DomMove";
-import { getRectImagePath } from "./loadCaptureRectImage";
-import { computedBound } from "./dragBound";
-import { customContextMenu, computedRectScale, cloneImageNode } from "./utils";
-import useDraw from "./useDraw";
-import Tools from "./component/Tools";
+import useSimpleState from "../useSimpleState";
+import DefaultRects from "./component/DefaultRects";
 import DrawRect from "./component/DrawRect";
+import Tools from "./component/Tools";
 import WheelScale from "./component/WheelScale";
-import DefaultRects from "./component/DefaultRects";
+import { computedBound } from "./dragBound";
+import { getRectImagePath } from "./loadCaptureRectImage";
+import useDraw from "./useDraw";
+import { cloneImageNode, computedRectScale, customContextMenu } from "./utils";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -70,23 +70,43 @@ function Picture(_ref) {
       onMenuClick = _useMemo.onMenuClick,
       children = _useMemo.children;
 
-  var _useState = useState({
+  var _useSimpleState = useSimpleState({
     x: 0,
     y: 0,
     rotate: 0,
     scale: 1,
     baseXOrY: 'x',
     forceUpdateKey: Date.now(),
-    fullScreenStatus: false
+    fullScreenStatus: false,
+    localUrl: ''
   }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+      _useSimpleState2 = _slicedToArray(_useSimpleState, 3),
+      state = _useSimpleState2[0],
+      updateState = _useSimpleState2[1],
+      setState = _useSimpleState2[2];
 
   var layoutRef = useRef(null);
   var moveActionRef = useRef(null);
   var domImgRef = useRef(null);
   var imageSourceRef = useRef(null);
+  useEffect(function () {
+    if (!imagePath) {
+      return undefined;
+    }
+
+    var localUrl;
+    fetch(imagePath).then(function (res) {
+      return res.blob();
+    }).then(function (blob) {
+      localUrl = URL.createObjectURL(blob);
+      updateState({
+        localUrl: localUrl
+      });
+    });
+    return function () {
+      return URL.revokeObjectURL(localUrl);
+    };
+  }, [imagePath]);
 
   var _useDraw = useDraw(layoutRef.current, isOpenSelect),
       _useDraw2 = _slicedToArray(_useDraw, 2),
@@ -95,7 +115,7 @@ function Picture(_ref) {
 
   var loadImageSuccess = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(flag) {
-      var _domImgRef$current, width, height;
+      var nodeEle, _ref3, width, height;
 
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
@@ -105,8 +125,9 @@ function Picture(_ref) {
               return cloneImageNode(domImgRef.current);
 
             case 2:
-              imageSourceRef.current = _context.sent;
-              _domImgRef$current = domImgRef.current, width = _domImgRef$current.width, height = _domImgRef$current.height;
+              nodeEle = _context.sent;
+              imageSourceRef.current = nodeEle;
+              _ref3 = domImgRef.current, width = _ref3.width, height = _ref3.height;
               setState(function (old) {
                 return _objectSpread(_objectSpread({}, old), {}, {
                   forceUpdateKey: Date.now(),
@@ -115,7 +136,7 @@ function Picture(_ref) {
                 });
               });
 
-            case 5:
+            case 6:
             case "end":
               return _context.stop();
           }
@@ -176,13 +197,14 @@ function Picture(_ref) {
 
   var resetPicture = useCallback(function (event) {
     event.stopPropagation();
+    var moveObj = moveActionRef.current;
     setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
         scale: 1,
         rotate: 0
       });
     });
-    moveActionRef.current.updatePosition({
+    moveObj.updatePosition({
       x: 0,
       y: 0
     });
@@ -191,9 +213,9 @@ function Picture(_ref) {
    * 拖拽更新位置
    */
 
-  var onDragChange = useCallback(function (_ref3) {
-    var x = _ref3.x,
-        y = _ref3.y;
+  var onDragChange = useCallback(function (_ref4) {
+    var x = _ref4.x,
+        y = _ref4.y;
     return setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
         x: x,
@@ -216,7 +238,8 @@ function Picture(_ref) {
     var position = computedBound(layoutRef.current, currrentPosition, scale, rotate);
 
     if (position) {
-      moveActionRef.current.updatePosition(position);
+      var moveObj = moveActionRef.current;
+      moveObj.updatePosition(position);
     }
   }, [state]);
   /**
@@ -262,7 +285,7 @@ function Picture(_ref) {
     return computedRectScale({
       imageSource: imageSourceRef.current,
       domImg: domImgRef.current,
-      rects: rects
+      rects: rects !== null && rects !== void 0 ? rects : []
     });
   }, [rects, state.forceUpdateKey]);
   var isEmpty = useMemo(function () {
@@ -324,7 +347,8 @@ function Picture(_ref) {
               maxHeight: baseXOrY === 'x' ? 'unset' : height || '100%'
             },
             draggable: false,
-            src: imagePath,
+            src: state.localUrl,
+            "data-src": imagePath,
             onLoad: function onLoad() {
               return loadImageSuccess();
             }
@@ -332,8 +356,8 @@ function Picture(_ref) {
             rect: selectArea,
             onMenuClick: onMenuClick,
             getRectImage: getRectImage,
-            menus: menus,
-            canRenderMenu: isEnd && !disabledDrawMenu && menus.length > 0,
+            menus: menus !== null && menus !== void 0 ? menus : [],
+            canRenderMenu: isEnd && !disabledDrawMenu && menus && menus.length > 0,
             containerDom: layoutRef.current
           }) : !isOpenSelect ? /*#__PURE__*/_jsx(DefaultRects, {
             rects: scaleRects,

package/es/Picture/index.less

@@ -1,13 +1,14 @@
 .picture-view-layout {
   position: relative;
+  min-height: 300px;
   overflow: hidden;
   user-select: none;
-  min-height: 300px;
+
   .picture-move-layout {
     & > div {
       width: 100%;
       height: 100%;
-      transition: all 0.3s;
+      transition: all .3s;
       overflow: hidden;
     }
   }

package/es/Picture/useDraw.d.ts

@@ -1 +1 @@
-export default function useDraw(dom: HTMLElement, open: boolean): [number[], boolean];
+export default function useDraw(dom: HTMLElement, open?: boolean): [number[], boolean];

package/es/Picture/useDraw.js

@@ -12,7 +12,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { useState, useRef, useCallback } from 'react';
+import { useCallback, useRef, useState } from 'react';
 export default function useDraw(dom, open) {
   var _useState = useState({
     rect: [0, 0, 0, 0],

package/es/Picture/utils.d.ts

@@ -1,12 +1,13 @@
 import { ImageType, RectType } from './interface';
 export declare function customContextMenu(e: any): boolean;
-export declare function cloneImageNode(image: HTMLImageElement): Promise<unknown>;
+export declare function cloneImageNode(image: HTMLImageElement): Promise<Node>;
+export declare function getCaptureRect(rect: number[], type: ImageType): number[];
 export declare function computedRectScale({ imageSource, domImg, rects }: {
     imageSource: HTMLImageElement;
     domImg: HTMLImageElement;
     rects: RectType[];
 }): {
-    rect: number[];
+    rect: any;
     type: ImageType;
     needExpand?: boolean | undefined;
     imgId?: string | undefined;
@@ -18,4 +19,3 @@ export declare function computedRectScale({ imageSource, domImg, rects }: {
     lowQuality?: boolean | undefined;
     base64?: string | undefined;
 }[];
-export declare function getCaptureRect(rect: number[], type: ImageType): number[];

package/es/Picture/utils.js

@@ -4,6 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { cloneDeep } from 'lodash-es';
 export function customContextMenu(e) {
   e.preventDefault();
@@ -11,7 +12,7 @@ export function customContextMenu(e) {
 }
 export function cloneImageNode(image) {
   if (!image) {
-    return Promise.resolve();
+    return Promise.reject();
   }
 
   var newImage = image.cloneNode();
@@ -24,43 +25,11 @@ export function cloneImageNode(image) {
     }, false);
   });
 }
-export function computedRectScale(_ref) {
-  var imageSource = _ref.imageSource,
-      domImg = _ref.domImg,
-      rects = _ref.rects;
-
-  if (!imageSource || !domImg) {
-    return [];
-  }
-
-  var width = domImg.width;
-  var height = domImg.height;
-  var scaleOptions = {
-    scaleX: width / imageSource.width,
-    scaleY: height / imageSource.height
-  };
-  return rects.map(function (item) {
-    var rect = item.needExpand ? getCaptureRect(cloneDeep(item.rect), item.type) : cloneDeep(item.rect);
-    rect[0] = Math.round(rect[0] * scaleOptions.scaleX);
-    rect[0] < 0 && (rect[0] = 0);
-    rect[2] = Math.round(rect[2] * scaleOptions.scaleX);
-    rect[2] < 0 && (rect[2] = 0);
-    rect[1] = Math.round(rect[1] * scaleOptions.scaleY);
-    rect[1] < 0 && (rect[1] = 0);
-    rect[3] = Math.round(rect[3] * scaleOptions.scaleY);
-    rect[3] < 0 && (rect[3] = 0);
-    rect[2] > width - rect[0] && (rect[2] = width - rect[0]);
-    rect[3] > height - rect[1] && (rect[3] = height - rect[1]);
-    return _objectSpread(_objectSpread({}, item), {}, {
-      rect: rect
-    });
-  });
-}
 export function getCaptureRect(rect, type) {
   var rectArea = rect;
 
   if (rectArea.length !== 4) {
-    console.error('区域有误 实例：string = "x,y,w,h"! ', rect);
+    console.error('区域有误 rect = "[x,y,w,h]"! ', rect);
     return [0, 0, 0, 0];
   }
 
@@ -93,4 +62,36 @@ export function getCaptureRect(rect, type) {
   }
 
   return [x, y, w, h];
+}
+export function computedRectScale(_ref) {
+  var imageSource = _ref.imageSource,
+      domImg = _ref.domImg,
+      rects = _ref.rects;
+
+  if (!imageSource || !domImg) {
+    return [];
+  }
+
+  var width = domImg.width;
+  var height = domImg.height;
+  var scaleOptions = {
+    scaleX: width / imageSource.width,
+    scaleY: height / imageSource.height
+  };
+  return rects.map(function (item) {
+    var rect = item.needExpand ? getCaptureRect(cloneDeep(item.rect), item.type) : cloneDeep(item.rect);
+    rect[0] = Math.round(rect[0] * scaleOptions.scaleX);
+    rect[0] < 0 && (rect[0] = 0);
+    rect[2] = Math.round(rect[2] * scaleOptions.scaleX);
+    rect[2] < 0 && (rect[2] = 0);
+    rect[1] = Math.round(rect[1] * scaleOptions.scaleY);
+    rect[1] < 0 && (rect[1] = 0);
+    rect[3] = Math.round(rect[3] * scaleOptions.scaleY);
+    rect[3] < 0 && (rect[3] = 0);
+    rect[2] > width - rect[0] && (rect[2] = width - rect[0]);
+    rect[3] > height - rect[1] && (rect[3] = height - rect[1]);
+    return _objectSpread(_objectSpread({}, item), {}, {
+      rect: rect
+    });
+  });
 }

package/es/Player/api/index.d.ts

@@ -7,15 +7,15 @@ declare class Api {
     get video(): HTMLVideoElement | null;
     play: () => void;
     pause: () => void;
-    get paused(): boolean;
-    get muted(): boolean;
+    get paused(): boolean | undefined;
+    get muted(): boolean | undefined;
     /**
      * 设置currentTime实现seek
      * @param {*} seconds
      */
     seekTo: (seconds: number) => void;
     setVolume: (fraction: number) => void;
-    getVolume: () => number;
+    getVolume: () => number | undefined;
     mute: () => void;
     unmute: () => void;
     /**
@@ -34,19 +34,19 @@ declare class Api {
     /**
      * 获取视频总时长
      */
-    getDuration: () => any;
+    getDuration: () => number | undefined;
     /**
      * 获取当前播放时间
      */
-    getCurrentTime: () => number;
+    getCurrentTime: () => number | undefined;
     /**
      * 获取缓存时间
      */
-    getSecondsLoaded: () => any;
+    getSecondsLoaded: () => number;
     /**
      * 获取当前视频缓存的起止时间
      */
-    getBufferedTime: () => any;
+    getBufferedTime: () => number[];
     /**
      * 视频截屏方法
      */
@@ -64,5 +64,5 @@ export declare type TypeAndPlay = {
     hls?: Hls;
 };
 export declare function useTypeAndPlay(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: Flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [string, Flvjs.Player, Hls];
-export declare function usePlayerApi(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: Flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [Api, [string, Flvjs.Player, Hls]];
+export declare function usePlayerApi(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: Flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [Api | undefined, [string, Flvjs.Player, Hls]];
 export default Api;

package/es/Player/api/index.js

@@ -33,36 +33,52 @@ var Api = /*#__PURE__*/function () {
 
     _defineProperty(this, "play", function () {
       tryCatch(function () {
-        return _this.video.play();
+        var _this$video;
+
+        return (_this$video = _this.video) === null || _this$video === void 0 ? void 0 : _this$video.play();
       });
     });
 
     _defineProperty(this, "pause", function () {
-      _this.video.pause();
+      var _this$video2;
+
+      (_this$video2 = _this.video) === null || _this$video2 === void 0 ? void 0 : _this$video2.pause();
     });
 
     _defineProperty(this, "seekTo", function (seconds) {
-      _this.video.currentTime = seconds;
+      if (_this.video) {
+        _this.video.currentTime = seconds;
+      }
     });
 
     _defineProperty(this, "setVolume", function (fraction) {
-      _this.video.volume = fraction;
+      if (_this.video) {
+        _this.video.volume = fraction;
+      }
     });
 
     _defineProperty(this, "getVolume", function () {
-      return _this.video.volume;
+      var _this$video3;
+
+      return (_this$video3 = _this.video) === null || _this$video3 === void 0 ? void 0 : _this$video3.volume;
     });
 
     _defineProperty(this, "mute", function () {
-      _this.video.muted = true;
+      if (_this.video) {
+        _this.video.muted = true;
+      }
     });
 
     _defineProperty(this, "unmute", function () {
-      _this.video.muted = false;
+      if (_this.video) {
+        _this.video.muted = false;
+      }
     });
 
     _defineProperty(this, "requestPictureInPicture", function () {
-      _this.video.requestPictureInPicture();
+      var _this$video4;
+
+      (_this$video4 = _this.video) === null || _this$video4 === void 0 ? void 0 : _this$video4.requestPictureInPicture();
     });
 
     _defineProperty(this, "exitPictureInPicture", function () {
@@ -72,15 +88,17 @@ var Api = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "setPlaybackRate", function (rate) {
-      _this.video.playbackRate = rate;
+      if (_this.video) {
+        _this.video.playbackRate = rate;
+      }
     });
 
     _defineProperty(this, "getDuration", function () {
-      var _this$video = _this.video,
-          duration = _this$video.duration,
-          seekable = _this$video.seekable;
+      var _ref = _this.video || {},
+          duration = _ref.duration,
+          seekable = _ref.seekable;
 
-      if (duration === Infinity && seekable.length > 0) {
+      if (duration === Infinity && seekable && seekable.length > 0) {
         return seekable.end(seekable.length - 1);
       }
 
@@ -88,7 +106,9 @@ var Api = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "getCurrentTime", function () {
-      return _this.video.currentTime;
+      var _this$video5;
+
+      return (_this$video5 = _this.video) === null || _this$video5 === void 0 ? void 0 : _this$video5.currentTime;
     });
 
     _defineProperty(this, "getSecondsLoaded", function () {
@@ -96,30 +116,34 @@ var Api = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "getBufferedTime", function () {
-      var buffered = _this.video.buffered;
+      var _buffered$end, _buffered$start, _this$getDuration;
+
+      var _ref2 = _this.video || {},
+          buffered = _ref2.buffered;
 
-      if (buffered.length === 0) {
+      if (buffered && buffered.length === 0) {
         return [0, 0];
       }
 
-      var end = buffered.end(buffered.length - 1);
-      var start = buffered.start(buffered.length - 1);
-
-      var duration = _this.getDuration();
+      var end = (_buffered$end = buffered === null || buffered === void 0 ? void 0 : buffered.end(buffered.length - 1)) !== null && _buffered$end !== void 0 ? _buffered$end : 0;
+      var start = (_buffered$start = buffered === null || buffered === void 0 ? void 0 : buffered.start(buffered.length - 1)) !== null && _buffered$start !== void 0 ? _buffered$start : 0;
+      var duration = (_this$getDuration = _this.getDuration()) !== null && _this$getDuration !== void 0 ? _this$getDuration : 0;
 
       if (end > duration) {
-        return duration;
+        return [start, duration];
       }
 
       return [start, end];
     });
 
     _defineProperty(this, "snapshot", function () {
+      var _this$video$videoWidt, _this$video6, _this$video$videoHeig, _this$video7, _ctx;
+
       var canvas = document.createElement('canvas');
       var ctx = canvas.getContext('2d');
-      canvas.width = _this.video.videoWidth;
-      canvas.height = _this.video.videoHeight;
-      ctx.drawImage(_this.video, 0, 0, canvas.width, canvas.height);
+      canvas.width = (_this$video$videoWidt = (_this$video6 = _this.video) === null || _this$video6 === void 0 ? void 0 : _this$video6.videoWidth) !== null && _this$video$videoWidt !== void 0 ? _this$video$videoWidt : 0;
+      canvas.height = (_this$video$videoHeig = (_this$video7 = _this.video) === null || _this$video7 === void 0 ? void 0 : _this$video7.videoHeight) !== null && _this$video$videoHeig !== void 0 ? _this$video$videoHeig : 0;
+      (_ctx = ctx) === null || _ctx === void 0 ? void 0 : _ctx.drawImage(_this.video, 0, 0, canvas.width, canvas.height);
       setTimeout(function () {
         canvas.remove();
         canvas = null;
@@ -153,12 +177,16 @@ var Api = /*#__PURE__*/function () {
   }, {
     key: "paused",
     get: function get() {
-      return this.video.paused;
+      var _this$video8;
+
+      return (_this$video8 = this.video) === null || _this$video8 === void 0 ? void 0 : _this$video8.paused;
     }
   }, {
     key: "muted",
     get: function get() {
-      return this.video.muted;
+      var _this$video9;
+
+      return (_this$video9 = this.video) === null || _this$video9 === void 0 ? void 0 : _this$video9.muted;
     }
     /**
      * 设置currentTime实现seek
@@ -204,28 +232,32 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
 
       default:
         options.type = 'native';
-        video.setAttribute('src', url);
+        video === null || video === void 0 ? void 0 : video.setAttribute('src', url !== null && url !== void 0 ? url : '');
         break;
     }
 
-    video.paused && tryCatch(function () {
-      return video.play();
+    (video === null || video === void 0 ? void 0 : video.paused) && tryCatch(function () {
+      return video === null || video === void 0 ? void 0 : video.play();
     });
     setState(options);
     return function () {
       if (options.flv) {
         options.flv.pause();
         tryCatch(function () {
-          return options.flv.destroy();
+          var _options$flv;
+
+          return (_options$flv = options.flv) === null || _options$flv === void 0 ? void 0 : _options$flv.destroy();
         });
       } else if (options.hls) {
-        video.pause();
+        video === null || video === void 0 ? void 0 : video.pause();
         tryCatch(function () {
-          return options.hls.destroy();
+          var _options$hls;
+
+          return (_options$hls = options.hls) === null || _options$hls === void 0 ? void 0 : _options$hls.destroy();
         });
       } else {
-        video.pause();
-        video.removeAttribute('src');
+        video === null || video === void 0 ? void 0 : video.pause();
+        video === null || video === void 0 ? void 0 : video.removeAttribute('src');
       }
 
       setState({});
@@ -235,7 +267,7 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
 } //创建Api
 
 export function usePlayerApi(url, type, isLive, container, segments, flvConfig, hlsConfig) {
-  var _useState3 = useState(null),
+  var _useState3 = useState(undefined),
       _useState4 = _slicedToArray(_useState3, 2),
       api = _useState4[0],
       setApi = _useState4[1];

package/es/Player/context.d.ts

@@ -5,10 +5,10 @@ export interface IPlayerContextProps {
     /**
      * @description 用于获取微应用顶层的dom节点
      */
-    container: HTMLElement;
-    api: Api;
-    event: VideoEventInstance;
-    isLive: boolean;
+    container?: HTMLElement;
+    api?: Api;
+    event?: VideoEventInstance;
+    isLive?: boolean;
     isFpsPlay: boolean;
     children: React.ReactNode;
 }

package/es/Player/contraller_bar/contraller_event.js

@@ -13,7 +13,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useRef, useContext } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { Context } from "../context";
 import EventName from "../event/eventName";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ function ContrallerEvent(_ref) {
       event = _useContext.event,
       container = _useContext.container;
 
-  var timer = useRef(null);
+  var timer = useRef();
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36,14 +36,14 @@ function ContrallerEvent(_ref) {
   var showContraller = function showContraller() {
     clearTimeout(timer.current);
     setVisibel(true);
-    event.emit(EventName.SHOW_CONTRALLER);
+    event === null || event === void 0 ? void 0 : event.emit(EventName.SHOW_CONTRALLER);
   };
 
   var hideContraller = function hideContraller() {
     clearTimeout(timer.current);
     timer.current = setTimeout(function () {
       setVisibel(false);
-      event.emit(EventName.HIDE_CONTRALLER);
+      event === null || event === void 0 ? void 0 : event.emit(EventName.HIDE_CONTRALLER);
     }, 3 * 1000);
   };