wargerm 0.4.12 → 0.4.15

package/dist/components/Modal/dialog.d.ts

@@ -10,11 +10,13 @@ declare type Props = {
     okText?: string;
     cancelText?: string;
     destroyOnClose?: boolean;
+    hiddenMask?: boolean;
     visible?: boolean;
     width?: number;
     className?: string;
     style?: React.CSSProperties;
     children?: ReactNode;
+    ref?: any;
 };
-export default function DialogModel(props: Props): React.ReactPortal;
-export {};
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "width" | "visible" | "destroyOnClose" | "closeCb" | "onClose" | "hiddenMask" | "className" | "style" | "title" | "onOk" | "onCancel" | "footer" | "content" | "okText" | "cancelText" | "children"> & React.RefAttributes<unknown>>;
+export default _default;

package/dist/components/Modal/index.d.ts

@@ -11,8 +11,11 @@ declare type Props = {
     cancelText?: string;
     visible?: boolean;
     destroyOnClose?: boolean;
+    hiddenMask?: boolean;
+    isDrag?: boolean;
     width?: number;
     className?: string;
+    ref?: any;
     style?: React.CSSProperties;
 };
 declare class Modal extends React.PureComponent<Props> {
@@ -24,7 +27,10 @@ declare class Modal extends React.PureComponent<Props> {
     } | undefined;
     static hidden: () => void;
     renderFooter: () => JSX.Element | null;
+    containerRef: React.RefObject<any>;
+    titleRef: React.RefObject<any>;
     renderTop: () => JSX.Element;
+    componentDidMount(): void;
     renderContent: () => {} | null;
     render(): JSX.Element;
 }

package/dist/components/VideoPlayer/index.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 declare type propsType = {
     footer?: boolean;
     style?: {
         height: number | string;
         width: number | string;
     };
+    layoutIndex?: number;
     config?: Object;
     url?: string[];
 };
-export default function VideoPlayer({ footer, style, config, url, }: propsType): JSX.Element;
-export {};
+declare const _default: React.ForwardRefExoticComponent<propsType & React.RefAttributes<unknown>>;
+export default _default;

package/dist/components/VideoPlayer/xgplayer.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function Xgplay({ config, type }: any): JSX.Element;
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;

package/dist/index.css

@@ -1162,11 +1162,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .model_container {
   position: absolute;
   z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 0;
+  top: 20%;
   border-width: 57px 166px 62px 166px;
   border-style: solid;
   -o-border-image: url('data:image/png;base64,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') round;
@@ -1175,7 +1171,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   border-image-width: 57px 166px 62px 166px;
   border-image-repeat: stretch stretch;
   min-height: 500px;
-  min-width: 1500px;
+  min-width: 600px;
 }
 [data-prefers-color='dark'] .model_container .model_wrap {
   position: absolute;
@@ -1212,6 +1208,9 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   -webkit-background-clip: text;
   color: transparent;
 }
+[data-prefers-color='dark'] .model_container .model_wrap .model-header .model-title.move {
+  cursor: move;
+}
 [data-prefers-color='dark'] .model_container .model_wrap .model-header .model-closeIcon {
   font-size: 26px;
   position: absolute;
@@ -1372,11 +1371,13 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
       -ms-user-select: none;
           user-select: none;
 }
-[data-prefers-color='dark'] .row {
-  height: calc(100% -30px);
-}
 [data-prefers-color='dark'] .camera {
   border: 1px solid #216fa3;
+  width: 100%;
+  height: 100%;
+}
+[data-prefers-color='dark'] .activeCamera {
+  border: 1px solid red;
 }
 [data-prefers-color='dark'] .camera:hover {
   border: 1px solid red;
@@ -1418,6 +1419,9 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   grid-gap: 1px 1px;
   background: #0f6ab7;
 }
+[data-prefers-color='dark'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 /* Color
 ----------------------- */
@@ -2355,11 +2359,7 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .model_container {
   position: absolute;
   z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 0;
+  top: 20%;
   border-width: 57px 166px 62px 166px;
   border-style: solid;
   -o-border-image: url('data:image/png;base64,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') round;
@@ -2368,7 +2368,7 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   border-image-width: 57px 166px 62px 166px;
   border-image-repeat: stretch stretch;
   min-height: 500px;
-  min-width: 1500px;
+  min-width: 600px;
 }
 [data-prefers-color='light'] .model_container .model_wrap {
   position: absolute;
@@ -2405,6 +2405,9 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   -webkit-background-clip: text;
   color: transparent;
 }
+[data-prefers-color='light'] .model_container .model_wrap .model-header .model-title.move {
+  cursor: move;
+}
 [data-prefers-color='light'] .model_container .model_wrap .model-header .model-closeIcon {
   font-size: 26px;
   position: absolute;
@@ -2753,11 +2756,13 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
       -ms-user-select: none;
           user-select: none;
 }
-[data-prefers-color='light'] .row {
-  height: calc(100% -30px);
-}
 [data-prefers-color='light'] .camera {
   border: 1px solid #216fa3;
+  width: 100%;
+  height: 100%;
+}
+[data-prefers-color='light'] .activeCamera {
+  border: 1px solid red;
 }
 [data-prefers-color='light'] .camera:hover {
   border: 1px solid red;
@@ -2799,6 +2804,9 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   grid-gap: 1px 1px;
   background: #0f6ab7;
 }
+[data-prefers-color='light'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 .frame {
   width: 40px;

package/dist/index.esm.css

@@ -1162,11 +1162,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .model_container {
   position: absolute;
   z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 0;
+  top: 20%;
   border-width: 57px 166px 62px 166px;
   border-style: solid;
   -o-border-image: url('data:image/png;base64,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') round;
@@ -1175,7 +1171,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   border-image-width: 57px 166px 62px 166px;
   border-image-repeat: stretch stretch;
   min-height: 500px;
-  min-width: 1500px;
+  min-width: 600px;
 }
 [data-prefers-color='dark'] .model_container .model_wrap {
   position: absolute;
@@ -1212,6 +1208,9 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   -webkit-background-clip: text;
   color: transparent;
 }
+[data-prefers-color='dark'] .model_container .model_wrap .model-header .model-title.move {
+  cursor: move;
+}
 [data-prefers-color='dark'] .model_container .model_wrap .model-header .model-closeIcon {
   font-size: 26px;
   position: absolute;
@@ -1372,11 +1371,13 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
       -ms-user-select: none;
           user-select: none;
 }
-[data-prefers-color='dark'] .row {
-  height: calc(100% -30px);
-}
 [data-prefers-color='dark'] .camera {
   border: 1px solid #216fa3;
+  width: 100%;
+  height: 100%;
+}
+[data-prefers-color='dark'] .activeCamera {
+  border: 1px solid red;
 }
 [data-prefers-color='dark'] .camera:hover {
   border: 1px solid red;
@@ -1418,6 +1419,9 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   grid-gap: 1px 1px;
   background: #0f6ab7;
 }
+[data-prefers-color='dark'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 /* Color
 ----------------------- */
@@ -2355,11 +2359,7 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .model_container {
   position: absolute;
   z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 0;
+  top: 20%;
   border-width: 57px 166px 62px 166px;
   border-style: solid;
   -o-border-image: url('data:image/png;base64,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') round;
@@ -2368,7 +2368,7 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   border-image-width: 57px 166px 62px 166px;
   border-image-repeat: stretch stretch;
   min-height: 500px;
-  min-width: 1500px;
+  min-width: 600px;
 }
 [data-prefers-color='light'] .model_container .model_wrap {
   position: absolute;
@@ -2405,6 +2405,9 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   -webkit-background-clip: text;
   color: transparent;
 }
+[data-prefers-color='light'] .model_container .model_wrap .model-header .model-title.move {
+  cursor: move;
+}
 [data-prefers-color='light'] .model_container .model_wrap .model-header .model-closeIcon {
   font-size: 26px;
   position: absolute;
@@ -2753,11 +2756,13 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
       -ms-user-select: none;
           user-select: none;
 }
-[data-prefers-color='light'] .row {
-  height: calc(100% -30px);
-}
 [data-prefers-color='light'] .camera {
   border: 1px solid #216fa3;
+  width: 100%;
+  height: 100%;
+}
+[data-prefers-color='light'] .activeCamera {
+  border: 1px solid red;
 }
 [data-prefers-color='light'] .camera:hover {
   border: 1px solid red;
@@ -2799,6 +2804,9 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   grid-gap: 1px 1px;
   background: #0f6ab7;
 }
+[data-prefers-color='light'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 .frame {
   width: 40px;

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import 'antd/es/dropdown/style';
 import _Dropdown from 'antd/es/dropdown';
 import 'antd/es/menu/style';
 import _Menu from 'antd/es/menu';
-import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef } from 'react';
+import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef, createRef } from 'react';
 import { createFromIconfontCN, SearchOutlined, ReloadOutlined, CloseCircleOutlined, PlusOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
@@ -9638,12 +9638,14 @@ var controlShow = function controlShow(f1, f2, value, timer) {
   }, timer);
 };
 
-function DialogModel(props) {
-  var width = props.width,
+function DialogModel(props, ref) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 600 : _props$width,
       visible = props.visible,
       destroyOnClose = props.destroyOnClose,
       closeCb = props.closeCb,
       onClose = props.onClose,
+      hiddenMask = props.hiddenMask,
       _props$className = props.className,
       className = _props$className === void 0 ? 'default-dialog' : _props$className,
       style = props.style;
@@ -9673,6 +9675,12 @@ function DialogModel(props) {
       isDesChild = _useState10[0],
       setIsDesChild = _useState10[1];
 
+  var containerRef = useRef();
+  useImperativeHandle(ref, function () {
+    return {
+      containerRef: containerRef.current
+    };
+  });
   var renderChildren = useMemo(function () {
     var _classNames;
 
@@ -9685,10 +9693,12 @@ function DialogModel(props) {
         left: 0
       }
     }, /*#__PURE__*/React.createElement("div", {
+      ref: containerRef,
       className: classnames((_classNames = {}, _defineProperty(_classNames, className, true), _defineProperty(_classNames, 'model_container', true), _defineProperty(_classNames, "animate__animated", true), _defineProperty(_classNames, flag ? 'animate__bounceInDown' : 'animate__fadeOutRightBig', true), _classNames)),
       style: _objectSpread2({
         opacity: modelShowAync ? 1 : 0,
-        width: typeof width == 'number' ? width + 'px' : width
+        width: typeof width == 'number' ? width + 'px' : width,
+        left: "calc(50% - ".concat(typeof width == 'number' ? width / 2 : width / 2, "px)")
       }, style)
     }, /*#__PURE__*/React.createElement("div", {
       className: 'model_wrap'
@@ -9698,7 +9708,7 @@ function DialogModel(props) {
         height: '100%',
         position: 'relative'
       }
-    }, isDesChild ? null : props.children))), /*#__PURE__*/React.createElement("div", {
+    }, isDesChild ? null : props.children))), !hiddenMask && /*#__PURE__*/React.createElement("div", {
       className: 'mask',
       onClick: function onClick() {
         onClose && onClose();
@@ -9740,6 +9750,8 @@ function DialogModel(props) {
   return renderChildren;
 }
 
+var Dialog = /*#__PURE__*/React.forwardRef(DialogModel);
+
 var _excluded$e = ["visible", "width", "closeCb", "onClose", "className", "style"],
     _excluded2$3 = ["visible"];
 
@@ -9785,14 +9797,19 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
       }, cancelText || '取消')));
     };
 
+    _this.containerRef = /*#__PURE__*/createRef();
+    _this.titleRef = /*#__PURE__*/createRef();
+
     _this.renderTop = function () {
       var _this$props2 = _this.props,
           title = _this$props2.title,
-          onClose = _this$props2.onClose;
+          onClose = _this$props2.onClose,
+          isDrag = _this$props2.isDrag;
       return /*#__PURE__*/React.createElement("div", {
         className: "model-header"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "model-title"
+        ref: _this.titleRef,
+        className: "model-title ".concat(isDrag ? 'move' : '')
       }, title), /*#__PURE__*/React.createElement(CloseCircleOutlined, {
         className: "model-closeIcon",
         onClick: function onClick() {
@@ -9812,6 +9829,35 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   }
 
   _createClass(Modal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var isDrag = this.props.isDrag;
+      if (!isDrag) return;
+      var tltleEl = this.titleRef.current;
+      var containerEl = this.containerRef.current.containerRef;
+
+      tltleEl.onmousedown = function (eventDown) {
+        var left = containerEl.offsetLeft;
+        var top = containerEl.offsetTop;
+        console.log(left, top);
+        var downX = eventDown.clientX;
+        var downY = eventDown.clientY;
+
+        document.onmousemove = function (eventMove) {
+          eventMove.stopPropagation();
+          eventMove.preventDefault();
+          var moveX = eventMove.clientX - downX;
+          var moveY = eventMove.clientY - downY;
+          containerEl.style.left = "".concat(left + moveX, "px");
+          containerEl.style.top = "".concat(top + moveY, "px");
+        };
+      };
+
+      document.onmouseup = function (eventMove) {
+        document.onmousemove = null;
+      };
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props4 = this.props,
@@ -9823,7 +9869,8 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
           style = _this$props4.style,
           other = _objectWithoutProperties(_this$props4, _excluded$e);
 
-      return /*#__PURE__*/React.createElement(DialogModel, _objectSpread2({
+      return /*#__PURE__*/React.createElement(Dialog, _objectSpread2({
+        ref: this.containerRef,
         closeCb: closeCb,
         onClose: onClose,
         visible: visible,
@@ -10980,45 +11027,71 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
-var player = null;
-function Xgplay(_ref) {
+function Xgplay(_ref, fRef) {
   var config = _ref.config,
-      type = _ref.type;
+      type = _ref.type,
+      setRef = _ref.setRef;
   var ref = useRef(null);
+  var playerRef = useRef(null);
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      player = _useState2[0],
+      setPlayer = _useState2[1];
+
   useEffect(function () {
-    if (type.indexOf('hls') !== -1) {
-      player = new HlsJsPlayer(_objectSpread2({
-        el: ref.current,
-        width: '100%',
-        height: '100%',
-        autoplay: true,
-        isLive: true,
-        autoplayMuted: true
-      }, config));
-    } else if (type.indexOf('flv') !== -1) {
-      player = new FlvPlayer(_objectSpread2({
-        el: ref.current,
-        width: '100%',
-        height: '100%',
-        autoplay: true,
-        isLive: true,
-        autoplayMuted: true
-      }, config));
-    } else if (type.indexOf('mp4') !== -1) {
-      player = new Player(_objectSpread2({
-        el: ref.current,
-        width: '100%',
-        height: '100%',
-        autoplay: true,
-        isLive: true,
-        autoplayMuted: true
-      }, config));
+    if (ref.current) {
+      if (type.indexOf('hls') !== -1) {
+        playerRef.current = new HlsJsPlayer(_objectSpread2({
+          el: ref.current,
+          width: '100%',
+          height: '100%',
+          autoplay: true,
+          isLive: true,
+          autoplayMuted: true
+        }, config));
+      } else if (type.indexOf('flv') !== -1) {
+        playerRef.current = new FlvPlayer(_objectSpread2({
+          el: ref.current,
+          width: '100%',
+          height: '100%',
+          autoplay: true,
+          isLive: true,
+          autoplayMuted: true
+        }, config));
+      } else if (type.indexOf('mp4') !== -1) {
+        playerRef.current = new Player(_objectSpread2({
+          el: ref.current,
+          width: '100%',
+          height: '100%',
+          autoplay: true,
+          isLive: true,
+          autoplayMuted: true
+        }, config));
+      }
     }
 
     return function () {
-      player = null;
+      playerRef.current = null;
     };
   }, []);
+  useEffect(function () {
+    if (playerRef.current) {
+      setRef(playerRef.current);
+    }
+
+    return function () {
+      var _playerRef$current, _playerRef$current$pl;
+
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : (_playerRef$current$pl = _playerRef$current.player) === null || _playerRef$current$pl === void 0 ? void 0 : _playerRef$current$pl.destroy(true);
+      setRef(null);
+    };
+  });
+  useImperativeHandle(fRef, function () {
+    return {
+      player: playerRef.current
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
@@ -11027,6 +11100,8 @@ function Xgplay(_ref) {
   });
 }
 
+var Xgplay$1 = /*#__PURE__*/forwardRef(Xgplay);
+
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
@@ -11046,7 +11121,7 @@ var IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
 });
 
-function VideoPlayer(_ref) {
+function VideoPlayer(_ref, ref) {
   var _ref$footer = _ref.footer,
       footer = _ref$footer === void 0 ? true : _ref$footer,
       _ref$style = _ref.style,
@@ -11056,6 +11131,7 @@ function VideoPlayer(_ref) {
   } : _ref$style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
+      layoutIndex = _ref.layoutIndex,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url;
   var layouts = [{
@@ -11091,23 +11167,46 @@ function VideoPlayer(_ref) {
     span: 9
   }];
 
-  var _useState = useState(0),
+  var _useState = useState(layoutIndex || 0),
       _useState2 = _slicedToArray(_useState, 2),
       currentLayoutIndex = _useState2[0],
       setCurrentLayoutIndex = _useState2[1];
 
+  var initPlayerIndex = layouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : layouts[layoutIndex || 0].span - 1;
+
+  var _useState3 = useState(initPlayerIndex),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentPlayerIndex = _useState4[0],
+      setCurrentPlayerIndex = _useState4[1];
+
   var domRef = useRef(null);
-  var contentRef = useRef(null);
+  var playerRef = useRef({});
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      players = _useState6[0],
+      setPlayers = _useState6[1];
+
   var renderDom = useMemo(function () {
     var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
     return arr.map(function (item, index) {
       return /*#__PURE__*/React.createElement("div", {
         key: index,
-        className: "camera"
-      }, url[index] ? /*#__PURE__*/React.createElement(Xgplay, {
+        className: "camera ".concat(currentPlayerIndex == index ? 'activeCamera' : ''),
+        onClickCapture: function onClickCapture() {
+          setCurrentPlayerIndex(index);
+        }
+      }, url[index] ? /*#__PURE__*/React.createElement(Xgplay$1, {
+        setRef: function setRef(ref) {
+          return setPlayers(function (players) {
+            players[index] = ref;
+            return players;
+          });
+        },
         type: url[index],
         config: _objectSpread2({
-          url: url[index]
+          url: url[index],
+          fluid: true
         }, config)
       }) : /*#__PURE__*/React.createElement("div", {
         className: "empty",
@@ -11119,7 +11218,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  }, [currentLayoutIndex]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11142,9 +11241,26 @@ function VideoPlayer(_ref) {
     }
   }
 
+  var loadCamera = function loadCamera(url) {
+    var currentPlayer = players[currentPlayerIndex];
+
+    if (currentPlayer) {
+      console.log(currentPlayer, 'currentPlayer');
+      currentPlayer.src = url; // debugger
+      // currentPlayer.start(url)
+    }
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      players: players,
+      currentLayoutIndex: currentLayoutIndex,
+      currentPlayerIndex: currentPlayerIndex,
+      loadCamera: loadCamera
+    };
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: style,
-    ref: contentRef
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     className: "videoContainer",
@@ -11156,7 +11272,9 @@ function VideoPlayer(_ref) {
       key: index,
       className: "btnbox",
       onClick: function onClick() {
-        return setCurrentLayoutIndex(index);
+        var playerIndex = layouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : layouts[index || 0].span - 1;
+        setCurrentPlayerIndex(playerIndex);
+        setCurrentLayoutIndex(index);
       }
     }, /*#__PURE__*/React.createElement(_Tooltip, {
       placement: "top",
@@ -11165,4 +11283,6 @@ function VideoPlayer(_ref) {
   })) : null));
 }
 
-export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
+var index$3 = /*#__PURE__*/forwardRef(VideoPlayer);
+
+export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };

package/dist/index.js

@@ -9676,12 +9676,14 @@ var controlShow = function controlShow(f1, f2, value, timer) {
   }, timer);
 };
 
-function DialogModel(props) {
-  var width = props.width,
+function DialogModel(props, ref) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 600 : _props$width,
       visible = props.visible,
       destroyOnClose = props.destroyOnClose,
       closeCb = props.closeCb,
       onClose = props.onClose,
+      hiddenMask = props.hiddenMask,
       _props$className = props.className,
       className = _props$className === void 0 ? 'default-dialog' : _props$className,
       style = props.style;
@@ -9711,6 +9713,12 @@ function DialogModel(props) {
       isDesChild = _useState10[0],
       setIsDesChild = _useState10[1];
 
+  var containerRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      containerRef: containerRef.current
+    };
+  });
   var renderChildren = React.useMemo(function () {
     var _classNames;
 
@@ -9723,10 +9731,12 @@ function DialogModel(props) {
         left: 0
       }
     }, /*#__PURE__*/React__default['default'].createElement("div", {
+      ref: containerRef,
       className: classnames__default['default']((_classNames = {}, _defineProperty(_classNames, className, true), _defineProperty(_classNames, 'model_container', true), _defineProperty(_classNames, "animate__animated", true), _defineProperty(_classNames, flag ? 'animate__bounceInDown' : 'animate__fadeOutRightBig', true), _classNames)),
       style: _objectSpread2({
         opacity: modelShowAync ? 1 : 0,
-        width: typeof width == 'number' ? width + 'px' : width
+        width: typeof width == 'number' ? width + 'px' : width,
+        left: "calc(50% - ".concat(typeof width == 'number' ? width / 2 : width / 2, "px)")
       }, style)
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: 'model_wrap'
@@ -9736,7 +9746,7 @@ function DialogModel(props) {
         height: '100%',
         position: 'relative'
       }
-    }, isDesChild ? null : props.children))), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, isDesChild ? null : props.children))), !hiddenMask && /*#__PURE__*/React__default['default'].createElement("div", {
       className: 'mask',
       onClick: function onClick() {
         onClose && onClose();
@@ -9778,6 +9788,8 @@ function DialogModel(props) {
   return renderChildren;
 }
 
+var Dialog = /*#__PURE__*/React__default['default'].forwardRef(DialogModel);
+
 var _excluded$e = ["visible", "width", "closeCb", "onClose", "className", "style"],
     _excluded2$3 = ["visible"];
 
@@ -9823,14 +9835,19 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
       }, cancelText || '取消')));
     };
 
+    _this.containerRef = /*#__PURE__*/React.createRef();
+    _this.titleRef = /*#__PURE__*/React.createRef();
+
     _this.renderTop = function () {
       var _this$props2 = _this.props,
           title = _this$props2.title,
-          onClose = _this$props2.onClose;
+          onClose = _this$props2.onClose,
+          isDrag = _this$props2.isDrag;
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "model-header"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "model-title"
+        ref: _this.titleRef,
+        className: "model-title ".concat(isDrag ? 'move' : '')
       }, title), /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleOutlined, {
         className: "model-closeIcon",
         onClick: function onClick() {
@@ -9850,6 +9867,35 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   }
 
   _createClass(Modal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var isDrag = this.props.isDrag;
+      if (!isDrag) return;
+      var tltleEl = this.titleRef.current;
+      var containerEl = this.containerRef.current.containerRef;
+
+      tltleEl.onmousedown = function (eventDown) {
+        var left = containerEl.offsetLeft;
+        var top = containerEl.offsetTop;
+        console.log(left, top);
+        var downX = eventDown.clientX;
+        var downY = eventDown.clientY;
+
+        document.onmousemove = function (eventMove) {
+          eventMove.stopPropagation();
+          eventMove.preventDefault();
+          var moveX = eventMove.clientX - downX;
+          var moveY = eventMove.clientY - downY;
+          containerEl.style.left = "".concat(left + moveX, "px");
+          containerEl.style.top = "".concat(top + moveY, "px");
+        };
+      };
+
+      document.onmouseup = function (eventMove) {
+        document.onmousemove = null;
+      };
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props4 = this.props,
@@ -9861,7 +9907,8 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
           style = _this$props4.style,
           other = _objectWithoutProperties(_this$props4, _excluded$e);
 
-      return /*#__PURE__*/React__default['default'].createElement(DialogModel, _objectSpread2({
+      return /*#__PURE__*/React__default['default'].createElement(Dialog, _objectSpread2({
+        ref: this.containerRef,
         closeCb: closeCb,
         onClose: onClose,
         visible: visible,
@@ -11018,45 +11065,71 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
-var player = null;
-function Xgplay(_ref) {
+function Xgplay(_ref, fRef) {
   var config = _ref.config,
-      type = _ref.type;
+      type = _ref.type,
+      setRef = _ref.setRef;
   var ref = React.useRef(null);
+  var playerRef = React.useRef(null);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      player = _useState2[0],
+      setPlayer = _useState2[1];
+
   React.useEffect(function () {
-    if (type.indexOf('hls') !== -1) {
-      player = new HlsJsPlayer__default['default'](_objectSpread2({
-        el: ref.current,
-        width: '100%',
-        height: '100%',
-        autoplay: true,
-        isLive: true,
-        autoplayMuted: true
-      }, config));
-    } else if (type.indexOf('flv') !== -1) {
-      player = new FlvPlayer__default['default'](_objectSpread2({
-        el: ref.current,
-        width: '100%',
-        height: '100%',
-        autoplay: true,
-        isLive: true,
-        autoplayMuted: true
-      }, config));
-    } else if (type.indexOf('mp4') !== -1) {
-      player = new Player__default['default'](_objectSpread2({
-        el: ref.current,
-        width: '100%',
-        height: '100%',
-        autoplay: true,
-        isLive: true,
-        autoplayMuted: true
-      }, config));
+    if (ref.current) {
+      if (type.indexOf('hls') !== -1) {
+        playerRef.current = new HlsJsPlayer__default['default'](_objectSpread2({
+          el: ref.current,
+          width: '100%',
+          height: '100%',
+          autoplay: true,
+          isLive: true,
+          autoplayMuted: true
+        }, config));
+      } else if (type.indexOf('flv') !== -1) {
+        playerRef.current = new FlvPlayer__default['default'](_objectSpread2({
+          el: ref.current,
+          width: '100%',
+          height: '100%',
+          autoplay: true,
+          isLive: true,
+          autoplayMuted: true
+        }, config));
+      } else if (type.indexOf('mp4') !== -1) {
+        playerRef.current = new Player__default['default'](_objectSpread2({
+          el: ref.current,
+          width: '100%',
+          height: '100%',
+          autoplay: true,
+          isLive: true,
+          autoplayMuted: true
+        }, config));
+      }
     }
 
     return function () {
-      player = null;
+      playerRef.current = null;
     };
   }, []);
+  React.useEffect(function () {
+    if (playerRef.current) {
+      setRef(playerRef.current);
+    }
+
+    return function () {
+      var _playerRef$current, _playerRef$current$pl;
+
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : (_playerRef$current$pl = _playerRef$current.player) === null || _playerRef$current$pl === void 0 ? void 0 : _playerRef$current$pl.destroy(true);
+      setRef(null);
+    };
+  });
+  React.useImperativeHandle(fRef, function () {
+    return {
+      player: playerRef.current
+    };
+  });
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: ref,
     style: {
@@ -11065,6 +11138,8 @@ function Xgplay(_ref) {
   });
 }
 
+var Xgplay$1 = /*#__PURE__*/React.forwardRef(Xgplay);
+
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
@@ -11084,7 +11159,7 @@ var IconFont = icons.createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
 });
 
-function VideoPlayer(_ref) {
+function VideoPlayer(_ref, ref) {
   var _ref$footer = _ref.footer,
       footer = _ref$footer === void 0 ? true : _ref$footer,
       _ref$style = _ref.style,
@@ -11094,6 +11169,7 @@ function VideoPlayer(_ref) {
   } : _ref$style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
+      layoutIndex = _ref.layoutIndex,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url;
   var layouts = [{
@@ -11129,23 +11205,46 @@ function VideoPlayer(_ref) {
     span: 9
   }];
 
-  var _useState = React.useState(0),
+  var _useState = React.useState(layoutIndex || 0),
       _useState2 = _slicedToArray(_useState, 2),
       currentLayoutIndex = _useState2[0],
       setCurrentLayoutIndex = _useState2[1];
 
+  var initPlayerIndex = layouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : layouts[layoutIndex || 0].span - 1;
+
+  var _useState3 = React.useState(initPlayerIndex),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentPlayerIndex = _useState4[0],
+      setCurrentPlayerIndex = _useState4[1];
+
   var domRef = React.useRef(null);
-  var contentRef = React.useRef(null);
+  var playerRef = React.useRef({});
+
+  var _useState5 = React.useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      players = _useState6[0],
+      setPlayers = _useState6[1];
+
   var renderDom = React.useMemo(function () {
     var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
     return arr.map(function (item, index) {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: index,
-        className: "camera"
-      }, url[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay, {
+        className: "camera ".concat(currentPlayerIndex == index ? 'activeCamera' : ''),
+        onClickCapture: function onClickCapture() {
+          setCurrentPlayerIndex(index);
+        }
+      }, url[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay$1, {
+        setRef: function setRef(ref) {
+          return setPlayers(function (players) {
+            players[index] = ref;
+            return players;
+          });
+        },
         type: url[index],
         config: _objectSpread2({
-          url: url[index]
+          url: url[index],
+          fluid: true
         }, config)
       }) : /*#__PURE__*/React__default['default'].createElement("div", {
         className: "empty",
@@ -11157,7 +11256,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  }, [currentLayoutIndex]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11180,9 +11279,26 @@ function VideoPlayer(_ref) {
     }
   }
 
+  var loadCamera = function loadCamera(url) {
+    var currentPlayer = players[currentPlayerIndex];
+
+    if (currentPlayer) {
+      console.log(currentPlayer, 'currentPlayer');
+      currentPlayer.src = url; // debugger
+      // currentPlayer.start(url)
+    }
+  };
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      players: players,
+      currentLayoutIndex: currentLayoutIndex,
+      currentPlayerIndex: currentPlayerIndex,
+      loadCamera: loadCamera
+    };
+  });
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    style: style,
-    ref: contentRef
+    style: style
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
     className: "videoContainer",
@@ -11194,7 +11310,9 @@ function VideoPlayer(_ref) {
       key: index,
       className: "btnbox",
       onClick: function onClick() {
-        return setCurrentLayoutIndex(index);
+        var playerIndex = layouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : layouts[index || 0].span - 1;
+        setCurrentPlayerIndex(playerIndex);
+        setCurrentLayoutIndex(index);
       }
     }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
       placement: "top",
@@ -11203,6 +11321,8 @@ function VideoPlayer(_ref) {
   })) : null));
 }
 
+var index$3 = /*#__PURE__*/React.forwardRef(VideoPlayer);
+
 exports.AutoScroll = Index$9;
 exports.Breadcrumb = Index$b;
 exports.Button = WButton;
@@ -11226,7 +11346,7 @@ exports.Switch = WSwitch;
 exports.TabelCard = index$2;
 exports.Table = Table;
 exports.TreeSelect = Index$6;
-exports.VideoPlayer = VideoPlayer;
+exports.VideoPlayer = index$3;
 exports.WDatePicker = Index$5;
 exports.WForm = WForm$1;
 exports.WebsocketHeart = WebsocketHeart;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.4.12",
+  "version": "0.4.15",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",