@cloud-app-dev/vidc 4.0.15 → 4.1.0

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

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

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

@@ -1,11 +1,16 @@
-import React, { useCallback, useMemo, useRef, useEffect } from 'react';
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+import { useMemoizedFn } from 'ahooks';
+import React, { useEffect, useMemo, useRef } from 'react';
 import IconFont from "../../../IconFont";
 import { computedMenuPosition } from "./utils";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MENU_WIDTH = 110;
 var MENU_HEIGHT = 30;
+var selectRectMenuLayoutCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 105px;\n  overflow: hidden;\n  font-size: var(--fs-small);\n"])));
+var menuActionItemCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 4px 10px;\n  margin-bottom: 4px;\n  color: rgb(0 0 0 / 65%);\n  white-space: nowrap;\n  background: #fff;\n  border-radius: 15px;\n  box-shadow: 0 0 2px rgb(0 0 0 / 20%);\n  .anticon {\n    padding-right: 2px;\n    font-size: 16px;\n    color: #89b;\n  }\n  &:hover {\n    color: #fff;\n    cursor: pointer;\n    background: #fa0;\n    .anticon {\n      color: #fff;\n    }\n  }\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
 function RectMenu(_ref) {
   var x = _ref.x,
     y = _ref.y,
@@ -32,9 +37,9 @@ function RectMenu(_ref) {
     });
   }, [height, size, width, x, y]);
   var domRef = useRef(null);
-  var handleCancelB = useCallback(function (e) {
+  var handleCancelB = useMemoizedFn(function (e) {
     return e.stopPropagation();
-  }, []);
+  });
 
   //防止click事件冒泡到查看器
   useEffect(function () {
@@ -52,12 +57,12 @@ function RectMenu(_ref) {
       }
     };
   }, [handleCancelB]);
-  var onClickMenu = useCallback(function (e, item) {
+  var onClickMenu = useMemoizedFn(function (e, item) {
     e.stopPropagation();
     onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item);
-  }, [onMenuClick]);
+  });
   return /*#__PURE__*/_jsx("div", {
-    className: "select-rect-menu-layout",
+    className: selectRectMenuLayoutCss,
     style: {
       left: position.x,
       top: position.y
@@ -65,7 +70,7 @@ function RectMenu(_ref) {
     ref: domRef,
     children: menus.map(function (v) {
       return /*#__PURE__*/_jsxs("div", {
-        className: "menu-action-item",
+        className: menuActionItemCss,
         onClick: function onClick(e) {
           return onClickMenu(e, v);
         },

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 interface IToolsProps {
     scale: number;
     imgDownload?: () => void;
@@ -8,5 +7,5 @@ interface IToolsProps {
     containerEle: HTMLDivElement;
     resetPicture: (event: React.MouseEvent) => void;
 }
-declare function Tools({ scale, imgDownload, setScale, setRotate, containerEle, resetPicture }: IToolsProps): JSX.Element;
+declare function Tools({ scale, imgDownload, setScale, setRotate, containerEle, resetPicture }: IToolsProps): import("react/jsx-runtime").JSX.Element;
 export default Tools;

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

@@ -1,8 +1,14 @@
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useFullscreen } from 'ahooks';
 import { Tooltip } from 'antd';
 import React from 'react';
-import FullScreen from "../../../FullScreen";
 import IconFont from "../../../Player/iconfont";
-import "./index.less";
+import { pictureActionsCss, pictureToolsCss } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -13,9 +19,13 @@ function Tools(_ref) {
     setRotate = _ref.setRotate,
     containerEle = _ref.containerEle,
     resetPicture = _ref.resetPicture;
+  var _useFullscreen = useFullscreen(containerEle),
+    _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+    isFullscreen = _useFullscreen2[0],
+    toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "picture-tools",
+      className: pictureToolsCss,
       children: [/*#__PURE__*/_jsx(Tooltip, {
         placement: "left",
         title: "\u590D\u4F4D",
@@ -73,18 +83,20 @@ function Tools(_ref) {
         })
       })]
     }), /*#__PURE__*/_jsxs("div", {
-      className: "picture-actions",
+      className: pictureActionsCss,
       children: [imgDownload && /*#__PURE__*/_jsx("div", {
         onClick: imgDownload,
         children: /*#__PURE__*/_jsx(IconFont, {
           type: "lm-player-S_Edit_LoadDown"
         })
       }), /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(FullScreen, {
-          className: "footer_window",
-          getContainer: function getContainer() {
-            return containerEle;
-          }
+        children: /*#__PURE__*/_jsx("span", {
+          className: "className=\"footer_window",
+          onClick: toggleFullscreen,
+          children: /*#__PURE__*/_jsx(IconFont, {
+            className: "defualt-fullscreen-icon icon-primary",
+            type: !isFullscreen ? 'lm-player-S_View_ScreenViewFull' : 'lm-player-S_View_ScreenViewExit'
+          })
         })
       })]
     })]

package/es/Picture/component/Tools/style.d.ts

@@ -0,0 +1,2 @@
+export declare const pictureToolsCss: string;
+export declare const pictureActionsCss: string;

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

@@ -0,0 +1,5 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+export var pictureToolsCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 10px;\n  bottom: 10px;\n  background: #fff;\n  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 30%);\n  &.actions-change-rotate {\n    bottom: 150px;\n  }\n  & > div {\n    width: 30px;\n    height: 25px;\n    line-height: 25px;\n    text-align: center;\n    cursor: pointer;\n\n    &.disabled {\n      color: #999;\n      cursor: not-allowed;\n\n      .anticon {\n        color: #999;\n      }\n    }\n  }\n"])));
+export var pictureActionsCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  & > div {\n    float: left;\n    width: 28px;\n    height: 28px;\n    margin-left: 4px;\n    line-height: 28px;\n    text-align: center;\n    cursor: pointer;\n    background: #fff;\n  }\n\n  .tools-screen-layer .anticon {\n    padding-right: 0;\n  }\n"])));

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 interface IWheelScaleProps {
     dom: HTMLElement;
     setScale: (scale: number) => void;
 }
-declare function WheelScale({ dom, setScale }: IWheelScaleProps): JSX.Element;
+declare function WheelScale({ dom, setScale }: IWheelScaleProps): import("react/jsx-runtime").JSX.Element;
 export default WheelScale;

package/es/Picture/demo.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export default function App(): JSX.Element;
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/es/Picture/demo.js

@@ -5,7 +5,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Button, ConfigProvider, Modal } from 'antd';
-import React from 'react';
 import Picture from '.';
 import { useSimpleState } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -80,6 +79,7 @@ export default function App() {
         },
         width: 844,
         destroyOnClose: true,
+        forceRender: true,
         children: /*#__PURE__*/_jsx("div", {
           style: {
             width: 800,

package/es/Picture/index.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
 import type { 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;
+declare function Picture({ className, width, height, minHeight, disabledDrag, imagePath, rects, isOpenSelect, disabledDrawMenu, menus, hasTool, fullScreenEle, ...props }: IPictureProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Picture {
     var defaultProps: {
         width: string;

package/es/Picture/index.js

@@ -1,9 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
-import _useUpdateLayoutEffect from "ahooks/es/useUpdateLayoutEffect";
-import _useMemoizedFn from "ahooks/es/useMemoizedFn";
-import _useSize from "ahooks/es/useSize";
 var _excluded = ["className", "width", "height", "minHeight", "disabledDrag", "imagePath", "rects", "isOpenSelect", "disabledDrawMenu", "menus", "hasTool", "fullScreenEle"];
+var _templateObject, _templateObject2, _templateObject3;
 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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -17,6 +14,9 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+import { useMemoizedFn, useSize, useUpdateEffect, useUpdateLayoutEffect } from 'ahooks';
 import React, { useEffect, useMemo, useRef } from 'react';
 import DomMove from "../DomMove";
 import useSimpleState from "../useSimpleState";
@@ -27,10 +27,12 @@ import WheelScale from "./component/WheelScale";
 import { getRectImagePath } from "./loadCaptureRectImage";
 import useDraw from "./useDraw";
 import { computedRectScale, customContextMenu, getImgSize } from "./utils";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+var pictureViewLayout = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  min-height: 300px;\n  overflow: hidden;\n  user-select: none;\n"])));
+var pictureMoveLayoutDiv = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: max-content;\n  height: max-content;\n  transition: all 0.3s;\n  overflow: hidden;\n"])));
+var pictureMoveLayoutImg = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 function Picture(_ref) {
   var _layoutRef$current;
   var className = _ref.className,
@@ -73,7 +75,7 @@ function Picture(_ref) {
   var layoutRef = useRef(null);
   var moveActionRef = useRef(null);
   var domImgRef = useRef(null);
-  var size = _useSize(layoutRef);
+  var size = useSize(layoutRef);
   useEffect(function () {
     if (!imagePath) {
       return undefined;
@@ -101,7 +103,7 @@ function Picture(_ref) {
     isEnd = _useDraw2[1];
 
   // init loaded
-  var loadImageSuccess = _useMemoizedFn(function () {
+  var loadImageSuccess = useMemoizedFn(function () {
     if (!state.localUrl || !layoutRef.current || !domImgRef.current) {
       return;
     }
@@ -128,12 +130,12 @@ function Picture(_ref) {
   });
 
   // 更新重绘
-  _useUpdateLayoutEffect(function () {
+  useUpdateLayoutEffect(function () {
     loadImageSuccess();
   }, [size]);
 
   // 更新重绘
-  _useUpdateLayoutEffect(function () {
+  useUpdateLayoutEffect(function () {
     // Rects重新计算
     updateState({
       forceUpdateKey: Date.now()
@@ -143,7 +145,7 @@ function Picture(_ref) {
   /**
    * 设置图片缩放
    */
-  var setScale = _useMemoizedFn(function (changeValue) {
+  var setScale = useMemoizedFn(function (changeValue) {
     var currentValue = state.scale;
     if (currentValue === 3 && changeValue > 0) {
       return;
@@ -168,7 +170,7 @@ function Picture(_ref) {
   /**
    * 设置图谱旋转
    */
-  var setRotate = _useMemoizedFn(function (changeValue) {
+  var setRotate = useMemoizedFn(function (changeValue) {
     var currentValue = state.rotate;
     setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
@@ -180,7 +182,7 @@ function Picture(_ref) {
   /**
    * 重置图片位置
    */
-  var resetPicture = _useMemoizedFn(function (event) {
+  var resetPicture = useMemoizedFn(function (event) {
     event.stopPropagation();
     var moveObj = moveActionRef.current;
     setState(function (old) {
@@ -198,7 +200,7 @@ function Picture(_ref) {
   /**
    * 拖拽更新位置
    */
-  var onDragChange = _useMemoizedFn(function (_ref2) {
+  var onDragChange = useMemoizedFn(function (_ref2) {
     var x = _ref2.x,
       y = _ref2.y;
     return setState(function (old) {
@@ -212,7 +214,7 @@ function Picture(_ref) {
   /**
    * 拖拽结束更新位置，计算边界
    */
-  var onDragEnd = _useMemoizedFn(function (_, currrentPosition) {
+  var onDragEnd = useMemoizedFn(function (_, currrentPosition) {
     if (!layoutRef.current || !domImgRef.current) {
       return undefined;
     }
@@ -244,7 +246,7 @@ function Picture(_ref) {
   /**
    * 获取结构化的小图(base64)
    */
-  var getRectImage = _useMemoizedFn(function (rect) {
+  var getRectImage = useMemoizedFn(function (rect) {
     return getRectImagePath(domImgRef.current, rect);
   });
 
@@ -265,7 +267,7 @@ function Picture(_ref) {
     getRectImage: getRectImage,
     containerEle: layoutRef.current
   };
-  _useUpdateEffect(function () {
+  useUpdateEffect(function () {
     if (isOpenSelect) {
       var moveObj = moveActionRef.current;
       moveObj.updatePosition({
@@ -282,7 +284,7 @@ function Picture(_ref) {
   }, [isOpenSelect]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "picture-view-layout ".concat(className),
+      className: "".concat(pictureViewLayout, " ").concat(className),
       style: {
         width: width,
         height: height,
@@ -291,18 +293,18 @@ function Picture(_ref) {
       ref: layoutRef,
       onContextMenu: customContextMenu,
       children: [/*#__PURE__*/_jsx(DomMove, {
-        className: "picture-move-layout",
         disabled: isOpenSelect || disabledDrag,
         ref: moveActionRef,
         onDragChange: onDragChange,
         onDragEnd: onDragEnd,
         children: /*#__PURE__*/_jsxs("div", {
-          className: "picture-overlay",
+          className: "picture-overlay ".concat(pictureMoveLayoutDiv),
           style: {
             transform: "scale(".concat(state.scale, ") rotate(").concat(state.rotate, "deg)")
           },
           children: [/*#__PURE__*/_jsx("img", {
             ref: domImgRef,
+            className: pictureMoveLayoutImg,
             draggable: false,
             src: state.localUrl,
             style: {

package/es/Picture/useDraw.js

@@ -1,10 +1,10 @@
-import _useEventListener from "ahooks/es/useEventListener";
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEventListener } from 'ahooks';
 import { useCallback, useRef, useState } from 'react';
 export default function useDraw(dom, open) {
   var _useState = useState({
@@ -74,7 +74,7 @@ export default function useDraw(dom, open) {
       });
     }
   }, [dom]);
-  _useEventListener('mousedown', function (event) {
+  useEventListener('mousedown', function (event) {
     if (open) {
       selectOptionsRef.current.startSelect = true;
       selectOptionsRef.current.start = [event.clientX, event.clientY];
@@ -82,7 +82,7 @@ export default function useDraw(dom, open) {
   }, {
     target: dom
   });
-  _useEventListener('mousemove', function (event) {
+  useEventListener('mousemove', function (event) {
     if (selectOptionsRef.current.startSelect) {
       selectOptionsRef.current.end = [event.clientX, event.clientY];
       drawSelectRact(false);
@@ -90,7 +90,7 @@ export default function useDraw(dom, open) {
   }, {
     target: dom
   });
-  _useEventListener('mouseup', function (event) {
+  useEventListener('mouseup', function (event) {
     if (selectOptionsRef.current.startSelect) {
       selectOptionsRef.current.startSelect = false;
       selectOptionsRef.current.end = [event.clientX, event.clientY];

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

@@ -58,7 +58,7 @@ declare class Api {
     closeFpsPlay: () => void;
     destroy: () => void;
 }
-export declare type TypeAndPlay = {
+export type TypeAndPlay = {
     type?: string;
     flv?: Flvjs.Player;
     hls?: Hls;

package/es/Player/api/index.js

@@ -1,4 +1,3 @@
-import _useMemoizedFn from "ahooks/es/useMemoizedFn";
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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; }
@@ -17,6 +16,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { useMemoizedFn } from 'ahooks';
 import { useEffect, useMemo, useState } from 'react';
 import nextTick from "../../nextTick";
 import { likeGo } from "../../utils";
@@ -44,6 +44,10 @@ var Api = /*#__PURE__*/function () {
       var _this$video2;
       (_this$video2 = _this.video) === null || _this$video2 === void 0 ? void 0 : _this$video2.pause();
     });
+    /**
+     * 设置currentTime实现seek
+     * @param {*} seconds
+     */
     _defineProperty(this, "seekTo", function (seconds) {
       if (_this.video) {
         _this.video.currentTime = seconds;
@@ -68,20 +72,33 @@ var Api = /*#__PURE__*/function () {
         _this.video.muted = false;
       }
     });
+    /**
+     * 开启画中画功能
+     */
     _defineProperty(this, "requestPictureInPicture", function () {
       var _this$video4;
       (_this$video4 = _this.video) === null || _this$video4 === void 0 ? void 0 : _this$video4.requestPictureInPicture();
     });
+    /**
+     * 关闭画中画功能
+     */
     _defineProperty(this, "exitPictureInPicture", function () {
       if (document.exitPictureInPicture && document.pictureInPictureElement === _this.video) {
         document.exitPictureInPicture();
       }
     });
+    /**
+     * 设置播放速率
+     * @param {*} rate
+     */
     _defineProperty(this, "setPlaybackRate", function (rate) {
       if (_this.video) {
         _this.video.playbackRate = rate;
       }
     });
+    /**
+     * 获取视频总时长
+     */
     _defineProperty(this, "getDuration", function () {
       var _ref2 = _this.video || {},
         duration = _ref2.duration,
@@ -91,14 +108,23 @@ var Api = /*#__PURE__*/function () {
       }
       return duration !== null && duration !== void 0 ? duration : 0;
     });
+    /**
+     * 获取当前播放时间
+     */
     _defineProperty(this, "getCurrentTime", function () {
       var _this$video$currentTi, _this$video5;
       return (_this$video$currentTi = (_this$video5 = _this.video) === null || _this$video5 === void 0 ? void 0 : _this$video5.currentTime) !== null && _this$video$currentTi !== void 0 ? _this$video$currentTi : 0;
     });
+    /**
+     * 获取缓存时间
+     */
     _defineProperty(this, "getSecondsLoaded", function () {
       var _this$getBufferedTime;
       return (_this$getBufferedTime = _this.getBufferedTime()[1]) !== null && _this$getBufferedTime !== void 0 ? _this$getBufferedTime : 0;
     });
+    /**
+     * 获取当前视频缓存的起止时间
+     */
     _defineProperty(this, "getBufferedTime", function () {
       var _buffered$end, _buffered$start, _this$getDuration;
       var _ref3 = _this.video || {},
@@ -114,6 +140,9 @@ var Api = /*#__PURE__*/function () {
       }
       return [start, end];
     });
+    /**
+     * 视频截屏方法
+     */
     _defineProperty(this, "snapshot", function () {
       var _this$video$videoWidt, _this$video6, _this$video$videoHeig, _this$video7, _ctx;
       var canvas = document.createElement('canvas');
@@ -155,11 +184,6 @@ var Api = /*#__PURE__*/function () {
       var _this$video9;
       return (_this$video9 = this.video) === null || _this$video9 === void 0 ? void 0 : _this$video9.muted;
     }
-
-    /**
-     * 设置currentTime实现seek
-     * @param {*} seconds
-     */
   }]);
   return Api;
 }();
@@ -194,17 +218,19 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
         video === null || video === void 0 ? void 0 : video.setAttribute('src', url !== null && url !== void 0 ? url : '');
         break;
     }
-    (video === null || video === void 0 ? void 0 : video.paused) && likeGo( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            return _context2.abrupt("return", video === null || video === void 0 ? void 0 : video.play());
-          case 1:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    })));
+    if (video !== null && video !== void 0 && video.paused) {
+      likeGo( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", video === null || video === void 0 ? void 0 : video.play());
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      })));
+    }
     setState(options);
     return function () {
       if (options.flv) {
@@ -262,7 +288,7 @@ export function usePlayerApi(url, type, isLive, container, segments, flvConfig,
     };
   }, [forceKey]);
   var typePlay = useTypeAndPlay(url, type, isLive, container, segments, config.flvConfig, config.hlsConfig);
-  var rePlay = _useMemoizedFn(function () {
+  var rePlay = useMemoizedFn(function () {
     return setForceKey(Date.now());
   });
   useEffect(function () {

package/es/Player/context.d.ts

@@ -13,7 +13,7 @@ export interface IPlayerContextProps {
     children: React.ReactNode;
 }
 export declare const Context: React.Context<Omit<IPlayerContextProps, "children">>;
-export declare function Provider({ children, ...props }: IPlayerContextProps): JSX.Element;
+export declare function Provider({ children, ...props }: IPlayerContextProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Provider {
     var defaultProps: {
         getContainer: () => HTMLElement;

package/es/Player/contraller_bar/bar.d.ts

@@ -4,5 +4,5 @@ interface IBarProps extends React.HTMLAttributes<HTMLSpanElement> {
     className?: string;
     children?: React.ReactNode;
 }
-declare function Bar({ visibel, className, children, ...props }: IBarProps): JSX.Element | null;
+declare function Bar({ visibel, className, children, ...props }: IBarProps): import("react/jsx-runtime").JSX.Element | null;
 export default Bar;

package/es/Player/contraller_bar/bar.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["visibel", "className", "children"];
+var _templateObject;
 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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7,8 +8,11 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
+var contrallerBarItem = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  float: left;\n  width: 28px;\n  height: 28px;\n  justify-content: center;\n  align-items: center;\n  .anticon {\n    cursor: pointer;\n    &:hover {\n      color: var(--primary);\n    }\n  }\n"])));
 function Bar(_ref) {
   var _ref$visibel = _ref.visibel,
     visibel = _ref$visibel === void 0 ? true : _ref$visibel,
@@ -20,7 +24,7 @@ function Bar(_ref) {
     return null;
   }
   return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
-    className: "contraller-bar-item ".concat(className)
+    className: "".concat(contrallerBarItem, " ").concat(className)
   }, props), {}, {
     children: children
   }));

package/es/Player/contraller_bar/contraller_event.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface IContrallerEventProps {
     children?: React.ReactNode;
 }
-declare function ContrallerEvent({ children }: IContrallerEventProps): JSX.Element;
+declare function ContrallerEvent({ children }: IContrallerEventProps): import("react/jsx-runtime").JSX.Element;
 export default ContrallerEvent;

package/es/Player/contraller_bar/contraller_event.js

@@ -1,11 +1,10 @@
-import _useEventListener from "ahooks/es/useEventListener";
-import _useMount from "ahooks/es/useMount";
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEventListener, useMount } from 'ahooks';
 import React, { useContext, useRef, useState } from 'react';
 import { Context } from "../context";
 import EventName from "../event/eventName";
@@ -33,13 +32,13 @@ function ContrallerEvent(_ref) {
       event === null || event === void 0 ? void 0 : event.emit(EventName.HIDE_CONTRALLER);
     }, 3 * 1000);
   };
-  _useMount(function () {
+  useMount(function () {
     return hideContraller();
   });
-  _useEventListener('mouseenter', showContraller, {
+  useEventListener('mouseenter', showContraller, {
     target: container
   });
-  _useEventListener('mouseleave', hideContraller, {
+  useEventListener('mouseleave', hideContraller, {
     target: container
   });
   return /*#__PURE__*/_jsx(_Fragment, {