wargerm 0.4.18 → 0.4.21

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

@@ -27,6 +27,7 @@ declare class Modal extends React.PureComponent<Props> {
         destory(): void;
     } | undefined;
     static hidden: () => void;
+    static destory: () => void;
     renderFooter: () => JSX.Element | null;
     containerRef: React.RefObject<any>;
     titleRef: React.RefObject<any>;

package/dist/index.css

@@ -1441,6 +1441,15 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='dark'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='dark'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;
@@ -2856,6 +2865,15 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='light'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='light'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;

package/dist/index.esm.css

@@ -1441,6 +1441,15 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='dark'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='dark'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;
@@ -2856,6 +2865,15 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='light'] .videoContainer {
+  min-width: 10px;
+  min-height: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+[data-prefers-color='light'] .videoContainer .videoContainer-grid {
+  flex: 1;
   width: 100%;
   height: 100%;
   display: grid;

package/dist/index.esm.js

@@ -9639,8 +9639,7 @@ var controlShow = function controlShow(f1, f2, value, timer) {
 };
 
 function DialogModel(props, ref) {
-  var _props$width = props.width,
-      width = _props$width === void 0 ? 600 : _props$width,
+  var width = props.width,
       visible = props.visible,
       destroyOnClose = props.destroyOnClose,
       closeCb = props.closeCb,
@@ -9702,8 +9701,7 @@ function DialogModel(props, ref) {
       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,
-        left: "calc(50% - ".concat(typeof width == 'number' ? width / 2 : width / 2, "px)")
+        width: typeof width == 'number' ? width + 'px' : width
       }, style)
     }, /*#__PURE__*/React.createElement("div", {
       className: 'model_wrap'
@@ -9732,6 +9730,13 @@ function DialogModel(props, ref) {
       }
     })), document.body);
   }, [modelShowAync, modelShow, props, isDesChild]);
+  useEffect(function () {
+    var containerEl = containerRef.current;
+    var containerElWidth = containerEl.offsetWidth;
+    var containerElHeight = containerEl.offsetHeight;
+    containerEl.style.left = "calc(50% - ".concat(containerElWidth / 2, "px)");
+    containerEl.style.top = "calc(50% - ".concat(containerElHeight / 2, "px)");
+  }, [modelShow]);
   useEffect(function () {
     var containerEl = containerRef.current;
     var rEl = rRef.current;
@@ -9966,18 +9971,19 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
 
 Modal.show = void 0;
 Modal.hidden = void 0;
+Modal.destory = void 0;
+var Modals = {};
 
 Modal.show = function (config) {
-  var ModalContainer = null;
-  var modelSysbol = Symbol('$$__model__Container_hidden');
-  if (ModalContainer) return;
+  var modelSysbol = Math.random().toString(36).slice(2, 36);
+  if (Modals[modelSysbol]) return;
 
   var props = _objectSpread2(_objectSpread2({}, config), {}, {
     visible: true
   });
 
-  var container = ModalContainer = document.createElement('div');
-  var manager = container[modelSysbol] = {
+  var container = document.createElement('div');
+  var manager = container[modelSysbol] = Modals[modelSysbol] = {
     setShow: null,
     mounted: false,
     hidden: function hidden() {
@@ -9986,8 +9992,12 @@ Modal.show = function (config) {
     },
     destory: function destory() {
       ReactDOM.unmountComponentAtNode(container);
-      document.body.removeChild(container);
-      ModalContainer = null;
+
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+
+      delete Modals[modelSysbol];
     }
   };
 
@@ -10019,8 +10029,20 @@ Modal.show = function (config) {
   return manager;
 };
 
-Modal.hidden = function () {// if (!ModalContainer) return;
-  // ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
+Modal.hidden = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].hidden();
+  }
+};
+
+Modal.destory = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].destory();
+  }
 };
 
 var controlShow$1 = function controlShow(f1, f2, value, timer) {
@@ -11108,15 +11130,9 @@ function Xgplay(_ref, fRef) {
       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 (ref.current) {
-      if (type.indexOf('hls') !== -1) {
+      if ((type === null || type === void 0 ? void 0 : type.indexOf('hls')) !== -1) {
         playerRef.current = new HlsJsPlayer(_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11125,7 +11141,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('flv') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('flv')) !== -1) {
         playerRef.current = new FlvPlayer(_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11134,7 +11150,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('mp4') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('mp4')) !== -1) {
         playerRef.current = new Player(_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11199,11 +11215,7 @@ var IconFont = createFromIconfontCN({
 function VideoPlayer(_ref, ref) {
   var _ref$footer = _ref.footer,
       footer = _ref$footer === void 0 ? true : _ref$footer,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {
-    width: 400,
-    height: 400
-  } : _ref$style,
+      style = _ref.style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
       layoutIndex = _ref.layoutIndex,
@@ -11247,20 +11259,25 @@ function VideoPlayer(_ref, ref) {
       currentLayoutIndex = _useState2[0],
       setCurrentLayoutIndex = _useState2[1];
 
+  var _useState3 = useState(url),
+      _useState4 = _slicedToArray(_useState3, 2),
+      urls = _useState4[0],
+      setUrls = _useState4[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 _useState5 = useState(initPlayerIndex),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentPlayerIndex = _useState6[0],
+      setCurrentPlayerIndex = _useState6[1];
 
   var domRef = useRef(null);
   var playerRef = useRef({});
 
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      players = _useState6[0],
-      setPlayers = _useState6[1];
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      players = _useState8[0],
+      setPlayers = _useState8[1];
 
   var renderDom = useMemo(function () {
     var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
@@ -11271,16 +11288,16 @@ function VideoPlayer(_ref, ref) {
         onClickCapture: function onClickCapture() {
           setCurrentPlayerIndex(index);
         }
-      }, url[index] ? /*#__PURE__*/React.createElement(Xgplay$1, {
+      }, urls[index] ? /*#__PURE__*/React.createElement(Xgplay$1, {
         setRef: function setRef(ref) {
           return setPlayers(function (players) {
             players[index] = ref;
             return players;
           });
         },
-        type: url[index],
+        type: urls[index],
         config: _objectSpread2({
-          url: url[index],
+          url: urls[index],
           fluid: true
         }, config)
       }) : /*#__PURE__*/React.createElement("div", {
@@ -11293,7 +11310,7 @@ function VideoPlayer(_ref, ref) {
         }
       }));
     });
-  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, urls]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11320,10 +11337,13 @@ function VideoPlayer(_ref, ref) {
     var currentPlayer = players[currentPlayerIndex];
 
     if (currentPlayer) {
-      console.log(currentPlayer, 'currentPlayer');
-      currentPlayer.src = url; // debugger
-      // currentPlayer.start(url)
+      currentPlayer.src = url;
     }
+
+    setUrls(function (urls) {
+      urls[currentPlayerIndex] = url;
+      return _toConsumableArray(urls);
+    });
   };
 
   useImperativeHandle(ref, function () {
@@ -11331,14 +11351,16 @@ function VideoPlayer(_ref, ref) {
       players: players,
       currentLayoutIndex: currentLayoutIndex,
       currentPlayerIndex: currentPlayerIndex,
+      urls: urls,
       loadCamera: loadCamera
     };
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "videoContainer",
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     ref: domRef,
-    className: "videoContainer",
+    className: "videoContainer-grid",
     style: layouts[currentLayoutIndex].style
   }, renderDom), footer ? /*#__PURE__*/React.createElement("div", {
     className: "tools"

package/dist/index.js

@@ -9677,8 +9677,7 @@ var controlShow = function controlShow(f1, f2, value, timer) {
 };
 
 function DialogModel(props, ref) {
-  var _props$width = props.width,
-      width = _props$width === void 0 ? 600 : _props$width,
+  var width = props.width,
       visible = props.visible,
       destroyOnClose = props.destroyOnClose,
       closeCb = props.closeCb,
@@ -9740,8 +9739,7 @@ function DialogModel(props, ref) {
       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,
-        left: "calc(50% - ".concat(typeof width == 'number' ? width / 2 : width / 2, "px)")
+        width: typeof width == 'number' ? width + 'px' : width
       }, style)
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: 'model_wrap'
@@ -9770,6 +9768,13 @@ function DialogModel(props, ref) {
       }
     })), document.body);
   }, [modelShowAync, modelShow, props, isDesChild]);
+  React.useEffect(function () {
+    var containerEl = containerRef.current;
+    var containerElWidth = containerEl.offsetWidth;
+    var containerElHeight = containerEl.offsetHeight;
+    containerEl.style.left = "calc(50% - ".concat(containerElWidth / 2, "px)");
+    containerEl.style.top = "calc(50% - ".concat(containerElHeight / 2, "px)");
+  }, [modelShow]);
   React.useEffect(function () {
     var containerEl = containerRef.current;
     var rEl = rRef.current;
@@ -10004,18 +10009,19 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
 
 Modal.show = void 0;
 Modal.hidden = void 0;
+Modal.destory = void 0;
+var Modals = {};
 
 Modal.show = function (config) {
-  var ModalContainer = null;
-  var modelSysbol = Symbol('$$__model__Container_hidden');
-  if (ModalContainer) return;
+  var modelSysbol = Math.random().toString(36).slice(2, 36);
+  if (Modals[modelSysbol]) return;
 
   var props = _objectSpread2(_objectSpread2({}, config), {}, {
     visible: true
   });
 
-  var container = ModalContainer = document.createElement('div');
-  var manager = container[modelSysbol] = {
+  var container = document.createElement('div');
+  var manager = container[modelSysbol] = Modals[modelSysbol] = {
     setShow: null,
     mounted: false,
     hidden: function hidden() {
@@ -10024,8 +10030,12 @@ Modal.show = function (config) {
     },
     destory: function destory() {
       ReactDOM__default['default'].unmountComponentAtNode(container);
-      document.body.removeChild(container);
-      ModalContainer = null;
+
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+
+      delete Modals[modelSysbol];
     }
   };
 
@@ -10057,8 +10067,20 @@ Modal.show = function (config) {
   return manager;
 };
 
-Modal.hidden = function () {// if (!ModalContainer) return;
-  // ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
+Modal.hidden = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].hidden();
+  }
+};
+
+Modal.destory = function () {
+  if (Object.keys(Modals).length == 0) return;
+
+  for (var key in Modals) {
+    Modals[key].destory();
+  }
 };
 
 var controlShow$1 = function controlShow(f1, f2, value, timer) {
@@ -11146,15 +11168,9 @@ function Xgplay(_ref, fRef) {
       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 (ref.current) {
-      if (type.indexOf('hls') !== -1) {
+      if ((type === null || type === void 0 ? void 0 : type.indexOf('hls')) !== -1) {
         playerRef.current = new HlsJsPlayer__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11163,7 +11179,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('flv') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('flv')) !== -1) {
         playerRef.current = new FlvPlayer__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11172,7 +11188,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
-      } else if (type.indexOf('mp4') !== -1) {
+      } else if ((type === null || type === void 0 ? void 0 : type.indexOf('mp4')) !== -1) {
         playerRef.current = new Player__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11237,11 +11253,7 @@ var IconFont = icons.createFromIconfontCN({
 function VideoPlayer(_ref, ref) {
   var _ref$footer = _ref.footer,
       footer = _ref$footer === void 0 ? true : _ref$footer,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {
-    width: 400,
-    height: 400
-  } : _ref$style,
+      style = _ref.style,
       _ref$config = _ref.config,
       config = _ref$config === void 0 ? {} : _ref$config,
       layoutIndex = _ref.layoutIndex,
@@ -11285,20 +11297,25 @@ function VideoPlayer(_ref, ref) {
       currentLayoutIndex = _useState2[0],
       setCurrentLayoutIndex = _useState2[1];
 
+  var _useState3 = React.useState(url),
+      _useState4 = _slicedToArray(_useState3, 2),
+      urls = _useState4[0],
+      setUrls = _useState4[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 _useState5 = React.useState(initPlayerIndex),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentPlayerIndex = _useState6[0],
+      setCurrentPlayerIndex = _useState6[1];
 
   var domRef = React.useRef(null);
   var playerRef = React.useRef({});
 
-  var _useState5 = React.useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      players = _useState6[0],
-      setPlayers = _useState6[1];
+  var _useState7 = React.useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      players = _useState8[0],
+      setPlayers = _useState8[1];
 
   var renderDom = React.useMemo(function () {
     var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
@@ -11309,16 +11326,16 @@ function VideoPlayer(_ref, ref) {
         onClickCapture: function onClickCapture() {
           setCurrentPlayerIndex(index);
         }
-      }, url[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay$1, {
+      }, urls[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay$1, {
         setRef: function setRef(ref) {
           return setPlayers(function (players) {
             players[index] = ref;
             return players;
           });
         },
-        type: url[index],
+        type: urls[index],
         config: _objectSpread2({
-          url: url[index],
+          url: urls[index],
           fluid: true
         }, config)
       }) : /*#__PURE__*/React__default['default'].createElement("div", {
@@ -11331,7 +11348,7 @@ function VideoPlayer(_ref, ref) {
         }
       }));
     });
-  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, urls]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11358,10 +11375,13 @@ function VideoPlayer(_ref, ref) {
     var currentPlayer = players[currentPlayerIndex];
 
     if (currentPlayer) {
-      console.log(currentPlayer, 'currentPlayer');
-      currentPlayer.src = url; // debugger
-      // currentPlayer.start(url)
+      currentPlayer.src = url;
     }
+
+    setUrls(function (urls) {
+      urls[currentPlayerIndex] = url;
+      return _toConsumableArray(urls);
+    });
   };
 
   React.useImperativeHandle(ref, function () {
@@ -11369,14 +11389,16 @@ function VideoPlayer(_ref, ref) {
       players: players,
       currentLayoutIndex: currentLayoutIndex,
       currentPlayerIndex: currentPlayerIndex,
+      urls: urls,
       loadCamera: loadCamera
     };
   });
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "videoContainer",
     style: style
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
-    className: "videoContainer",
+    className: "videoContainer-grid",
     style: layouts[currentLayoutIndex].style
   }, renderDom), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "tools"

package/package.json

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