@cloud-app-dev/vidc 2.1.0-alpha.8 → 2.2.0-alpha.2

package/es/LoaderApp/index.js

@@ -1,3 +1,5 @@
+import _useUnmount from "ahooks/es/useUnmount";
+import _useMount from "ahooks/es/useMount";
 import _uuid from "@cloud-app-dev/utils/es/uuid";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -13,7 +15,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 React, { useRef, useEffect, useState, useMemo } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import { getMicroConfig } from './utils';
 import LoaderModule from './loader';
 import "./index.css";
@@ -36,8 +38,7 @@ function LoaderApp(_ref) {
       status = _useState2[0],
       setStatus = _useState2[1];
 
-  useEffect(function () {
-    var app;
+  _useMount(function () {
     var config = getMicroConfig(appConfig, appProps, domRef.current);
 
     if (!config) {
@@ -72,26 +73,25 @@ function LoaderApp(_ref) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                app = mod;
                 loadedAppRef.current = mod;
 
                 if (!status) {
-                  _context.next = 5;
+                  _context.next = 4;
                   break;
                 }
 
-                _context.next = 5;
-                return app.bootstrap(props);
+                _context.next = 4;
+                return mod.bootstrap(props);
 
-              case 5:
+              case 4:
                 setStatus('bootstrap');
-                _context.next = 8;
-                return app.mount(props);
+                _context.next = 7;
+                return mod.mount(props);
 
-              case 8:
+              case 7:
                 setStatus('mount');
 
-              case 9:
+              case 8:
               case "end":
                 return _context.stop();
             }
@@ -99,16 +99,20 @@ function LoaderApp(_ref) {
         }, _callee);
       }));
     });
-    return function () {
-      console.debug('LoaderApp is destory!');
-
-      if (app) {
-        app.unmount(props);
-        setStatus('unmount');
-        app = null;
-      }
-    };
-  }, []);
+  });
+
+  _useUnmount(function () {
+    if (loadedAppRef.current) {
+      var app = loadedAppRef.current;
+      var props = Object.assign(Object.assign({}, appProps), {
+        container: domRef.current
+      });
+      app.unmount(props);
+      setStatus('unmount');
+      loadedAppRef.current = null;
+    }
+  });
+
   return /*#__PURE__*/React.createElement("main", {
     ref: domRef,
     className: "loaded-app-layout ".concat(appConfig.routerPrefix, "-").concat(id),

package/es/LoaderApp/loader.js

@@ -1,5 +1,5 @@
 import { __awaiter } from "tslib";
-import { arrayify, rewrite } from './utils';
+import { arrayify, fetchStyle, rewrite } from './utils';
 var _global = window;
 export function createScopedCssText(_ref) {
   var styleNode = _ref.styleNode,
@@ -27,11 +27,7 @@ export function LoaderStyle(_ref2) {
             }
 
             _context.next = 3;
-            return fetch(style).then(function (r) {
-              return r.text();
-            }).catch(function () {
-              return '';
-            });
+            return fetchStyle(style);
 
           case 3:
             cssText = _context.sent;

package/es/LoaderApp/utils.d.ts

@@ -10,5 +10,6 @@ export declare const getMicroConfig: (appConfig: AppItemType, appProps: any, con
         html: string;
     };
 };
+export declare function fetchStyle(style: string): Promise<string>;
 export declare const arrayify: <T>(list: CSSRuleList | any[]) => T[];
 export declare function rewrite(rules: CSSRule[], prefix?: string): string;

package/es/LoaderApp/utils.js

@@ -1,3 +1,4 @@
+import { __awaiter } from "tslib";
 export var getMicroConfig = function getMicroConfig() {
   var appConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var appProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -18,6 +19,42 @@ export var getMicroConfig = function getMicroConfig() {
     entry: microAppEntry
   };
 };
+var styleCache = {};
+export function fetchStyle(style) {
+  return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var cssText;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!styleCache[style]) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return", styleCache[style]);
+
+          case 2:
+            _context.next = 4;
+            return fetch(style).then(function (r) {
+              return r.text();
+            }).catch(function () {
+              return '';
+            });
+
+          case 4:
+            cssText = _context.sent;
+            styleCache[style] = cssText;
+            return _context.abrupt("return", cssText);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+}
 var RuleType = {
   // type: rule will be rewrote
   STYLE: 1,

package/es/Modal/index.d.ts

@@ -1,4 +1,5 @@
 import { ModalProps } from './interface';
+import React from 'react';
 import './index.less';
 declare function Modal({ children, className, style, getContainer, ...props }: ModalProps): JSX.Element;
 declare namespace Modal {
@@ -13,5 +14,31 @@ declare namespace Modal {
     var warning: import("antd/lib/modal/confirm").ModalFunc;
     var confirm: import("antd/lib/modal/confirm").ModalFunc;
     var destroyAll: () => void;
+    var useModal: (prefixCls?: string) => {
+        open: (options: IUseModalHookState) => void;
+        close: () => void;
+    };
+    var useAntdModal: typeof import("antd/lib/modal/useModal").default;
+    var RefModal: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<IRefModalMethodsProps>>;
+}
+export interface IUseModalHookState {
+    content?: React.ReactNode;
+    visible?: boolean;
+    title?: React.ReactNode;
+    onOk?: () => void;
+    width?: number | string;
+    className?: string;
+}
+export interface IUseModalHookState {
+    content?: React.ReactNode;
+    visible?: boolean;
+    title?: React.ReactNode;
+    onOk?: () => void;
+    width?: number | string;
+    className?: string;
+}
+export interface IRefModalMethodsProps {
+    open: (options: IUseModalHookState) => void;
+    close: () => void;
 }
 export default Modal;

package/es/Modal/index.js

@@ -1,8 +1,26 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
 import "antd/lib/modal/style";
 import _Modal from "antd/lib/modal";
+
+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 { __rest } from "tslib";
-import React from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import CC from '../ConfigContext';
 import "./index.css";
+import ConfigContext from '../ConfigContext';
 
 function Modal(_a) {
   var children = _a.children,
@@ -24,6 +42,139 @@ Modal.defaultProps = {
   className: '',
   getContainer: false
 };
+
+function useModal() {
+  var prefixCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cloudapp';
+  var context = useContext(CC.Context);
+  var container = useMemo(function () {
+    var _a;
+
+    return (_a = context === null || context === void 0 ? void 0 : context.root) !== null && _a !== void 0 ? _a : document.body;
+  }, [context === null || context === void 0 ? void 0 : context.root]);
+  var div = useMemo(function () {
+    return document.createElement('div');
+  }, []);
+
+  var _useState = useState({
+    content: null,
+    visible: false,
+    title: '',
+    onOk: undefined,
+    width: undefined,
+    className: undefined
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var root = useMemo(function () {
+    return ReactDOMClient.createRoot(div);
+  }, []);
+  useEffect(function () {
+    container.appendChild(div);
+    return function () {
+      setTimeout(function () {
+        return root.unmount(), div.remove();
+      }, 100);
+    };
+  }, []);
+  useEffect(function () {
+    root.render( /*#__PURE__*/React.createElement(_ConfigProvider, {
+      prefixCls: prefixCls,
+      getPopupContainer: function getPopupContainer() {
+        return container;
+      }
+    }, /*#__PURE__*/React.createElement(Modal, {
+      okText: "\u786E\u5B9A",
+      cancelText: "\u53D6\u6D88",
+      visible: state.visible,
+      onOk: state.onOk,
+      onCancel: close,
+      destroyOnClose: true,
+      title: state.title,
+      width: state.width,
+      className: state.className,
+      getContainer: false
+    }, state.content)));
+  }, [state.content, state.visible, state.title, state.onOk, state.width, state.className]);
+
+  var open = function open(options) {
+    setState(function (old) {
+      return Object.assign(Object.assign(Object.assign({}, old), options), {
+        visible: true
+      });
+    });
+  };
+
+  var close = function close() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        visible: false
+      });
+    });
+  };
+
+  return {
+    open: open,
+    close: close
+  };
+}
+
+var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
+  var context = useContext(ConfigContext.Context);
+  var root = useMemo(function () {
+    return (context === null || context === void 0 ? void 0 : context.root) || document.body;
+  }, [context === null || context === void 0 ? void 0 : context.root]);
+
+  var _useState3 = useState({
+    content: null,
+    visible: false,
+    title: '',
+    onOk: undefined,
+    width: undefined,
+    className: undefined
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var open = function open(options) {
+    setState(function (old) {
+      return Object.assign(Object.assign(Object.assign({}, old), options), {
+        visible: true
+      });
+    });
+  };
+
+  var close = function close() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        visible: false
+      });
+    });
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close
+    };
+  }, [state]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    okText: "\u786E\u5B9A",
+    cancelText: "\u53D6\u6D88",
+    visible: state.visible,
+    onOk: state.onOk,
+    onCancel: close,
+    destroyOnClose: true,
+    title: state.title,
+    width: state.width,
+    className: state.className,
+    getContainer: function getContainer() {
+      return root;
+    }
+  }, state.content);
+});
 Modal.info = _Modal.info;
 Modal.success = _Modal.success;
 Modal.error = _Modal.error;
@@ -31,4 +182,7 @@ Modal.warn = _Modal.warn;
 Modal.warning = _Modal.warning;
 Modal.confirm = _Modal.confirm;
 Modal.destroyAll = _Modal.destroyAll;
+Modal.useModal = useModal;
+Modal.useAntdModal = _Modal.useModal;
+Modal.RefModal = RefModal;
 export default Modal;

package/es/Picture/component/DefaultRects/RectInfo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RectType } from '../../interface';
 interface IRectInfoProps {
     item: RectType;

package/es/Picture/component/DefaultRects/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RectType } from '../../interface';
 import './index.less';
 interface IDefaultRectsProps {
@@ -6,7 +7,7 @@ interface IDefaultRectsProps {
     onClickRect?: (item: RectType & {
         base64: string;
     }) => void;
-    getRectImage: (rect: number[]) => void;
+    getRectImage: (rect: number[]) => string;
 }
 declare function DefaultRects({ rects, containerDom, onClickRect, getRectImage }: IDefaultRectsProps): JSX.Element;
 export default DefaultRects;

package/es/Picture/component/DrawRect/index.d.ts

@@ -1,14 +1,13 @@
+/// <reference types="react" />
 import { MenuRectType } from '../../interface';
 import './index.less';
 interface IDrawRectProps {
     rect: number[];
     canRenderMenu?: boolean;
     containerDom: HTMLDivElement;
-    onMenuClick: (options: MenuRectType & {
-        base64: string;
-    }) => void;
+    onMenuClick: (options: MenuRectType) => void;
     menus: MenuRectType[];
-    getRectImage: (rect: number[]) => void;
+    getRectImage: (rect: number[]) => string;
 }
 declare function DrawRect({ rect, canRenderMenu, containerDom, onMenuClick, menus, getRectImage }: IDrawRectProps): JSX.Element;
 export default DrawRect;

package/es/Picture/component/MoveContent/index.js

@@ -36,7 +36,23 @@ var MoveContentView = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MoveContentView);
 
     _this = _super.call(this, props);
+    _this.position = {
+      x: 0,
+      y: 0
+    };
+    _this.DA = {
+      x: 0,
+      y: 0
+    };
+    _this.moveEvents = [];
+    _this.isDrag = false;
     _this.dragRef = /*#__PURE__*/React.createRef();
+    _this.deviation = {
+      offsetX: 0,
+      offsetY: 0,
+      width: 0,
+      height: 0
+    };
 
     _this.onMouseMove = function (event) {
       if (_this.isDrag) {
@@ -104,18 +120,6 @@ var MoveContentView = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.isDrag = false;
-    _this.DA = {
-      x: 0,
-      y: 0
-    };
-    _this.moveEvents = [];
-    _this.deviation = {
-      offsetX: 0,
-      offsetY: 0,
-      width: 0,
-      height: 0
-    };
     return _this;
   }
 

package/es/Picture/component/RectMenu/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 import { MenuRectType } from 'src/Picture/interface';
 interface IRectMenuProps {
@@ -5,9 +6,7 @@ interface IRectMenuProps {
     y: number;
     menus: MenuRectType[];
     containerDom: HTMLDivElement;
-    onMenuClick: (options: MenuRectType & {
-        base64: string;
-    }) => void;
+    onMenuClick: (options: MenuRectType) => void;
 }
 declare function RectMenu({ x, y, menus, containerDom, onMenuClick }: IRectMenuProps): JSX.Element;
 export default RectMenu;

package/es/Picture/component/Tools/index.js

@@ -72,11 +72,6 @@ function Tools(_ref) {
       return containerEle;
     },
     fullScreenChange: fullScreenChange
-  }, function (isFullscreen) {
-    return /*#__PURE__*/React.createElement(IconFont, {
-      title: !isFullscreen ? '全屏' : '退出全屏',
-      type: !isFullscreen ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit'
-    });
   }))));
 }
 

package/es/Picture/component/WheelScale/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface IWheelScaleProps {
     dom: HTMLElement;
     setScale: (scale: number) => void;

package/es/Picture/component/WheelScale/index.js

@@ -13,14 +13,14 @@ function WheelScale(_ref) {
 
   useEffect(function () {
     if (!dom) {
-      return null;
+      return undefined;
     }
 
-    dom.addEventListener('mousewheel', onWheel, {
+    dom.addEventListener('wheel', onWheel, {
       passive: false
     });
     return function () {
-      return dom.removeEventListener('mousewheel', onWheel);
+      return dom.removeEventListener('wheel', onWheel);
     };
   }, [dom, onWheel]);
   return /*#__PURE__*/React.createElement(React.Fragment, null);

package/es/Picture/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IPictureProps } from './interface';
 import './index.less';
 declare function Picture({ className, width, height, minHeight, disabledDrag, imagePath, rects, isOpenSelect, disabledDrawMenu, menus, hasTool, fullScreenEle, ...props }: IPictureProps): JSX.Element;

package/es/Picture/index.js

@@ -152,7 +152,7 @@ function Picture(_a) {
    */
 
   var resetPicture = useCallback(function (event) {
-    event.stopPropagation(event);
+    event.stopPropagation();
     setState(function (old) {
       return Object.assign(Object.assign({}, old), {
         scale: 1,
@@ -304,7 +304,9 @@ function Picture(_a) {
     draggable: false,
     src: imagePath,
     key: imagePath,
-    onLoad: loadImageSuccess
+    onLoad: function onLoad() {
+      return loadImageSuccess();
+    }
   }), !isEmpty ? /*#__PURE__*/React.createElement(DrawRect, {
     rect: selectArea,
     onMenuClick: onMenuClick,

package/es/Picture/interface.d.ts

@@ -4,6 +4,7 @@ export type MenuRectType = {
   pathname: string;
   title: string;
   icon: string;
+  base64?: string;
 };
 
 export type TagItemType = {
@@ -28,6 +29,7 @@ export type RectType = {
   feature?: string;
   dupId?: string;
   lowQuality?: boolean;
+  base64?: string;
 };
 
 export type PositionType = {
@@ -59,8 +61,8 @@ export interface IPictureProps {
   disabledDrawMenu?: false;
   menus?: MenuRectType[];
   imgDownload?: () => void;
-  onClickRect?: (item: RectType & { base64: string }) => void;
-  onMenuClick?: (item: MenuRectType & { base64: string }) => void;
+  onClickRect?: (item: RectType) => void;
+  onMenuClick?: (item: MenuRectType) => void;
   children?: (option: any) => void;
   hasTool?: boolean;
   fullScreenEle?: Element;

package/es/Picture/utils.d.ts

@@ -18,5 +18,6 @@ export declare function computedRectScale({ imageSource, domImg, rects }: {
     feature?: string;
     dupId?: string;
     lowQuality?: boolean;
+    base64?: string;
 }[];
 export declare function getCaptureRect(rect: number[], type: ImageType): number[];

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

@@ -0,0 +1,71 @@
+import flvjs from 'flv.zv.js';
+import Hls, { HlsConfig } from 'hls.js';
+import type { FlvPlayerConfig } from '../player';
+declare class Api {
+    container: HTMLElement;
+    constructor(container: HTMLElement);
+    get video(): HTMLVideoElement;
+    /**
+     * 全屏
+     */
+    requestFullScreen: () => void;
+    /**
+     * 退出全屏
+     */
+    cancelFullScreen: () => void;
+    play: () => void;
+    pause: () => void;
+    /**
+     * 设置currentTime实现seek
+     * @param {*} seconds
+     * @param {*} noEmit
+     */
+    seekTo: (seconds: number) => void;
+    setVolume: (fraction: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    /**
+     * 开启画中画功能
+     */
+    requestPictureInPicture: () => void;
+    /**
+     * 关闭画中画功能
+     */
+    exitPictureInPicture: () => void;
+    /**
+     * 设置播放速率
+     * @param {*} rate
+     */
+    setPlaybackRate: (rate: number) => void;
+    /**
+     * 获取视频总时长
+     */
+    getDuration: () => number;
+    /**
+     * 获取当前播放时间
+     */
+    getCurrentTime: () => number;
+    /**
+     * 获取缓存时间
+     */
+    getSecondsLoaded: () => any;
+    /**
+     * 获取当前视频缓存的起止时间
+     */
+    getBufferedTime: () => number | number[];
+    /**
+     * 视频截屏方法
+     */
+    snapshot: () => string;
+    unload: () => void;
+    reload: () => void;
+    destroy: () => void;
+}
+export declare type TypeAndPlay = {
+    type?: string;
+    flv?: flvjs.Player;
+    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 default Api;