wargerm 0.4.19 → 0.4.20

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

@@ -27,11 +27,13 @@ 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>;
     renderTop: () => JSX.Element;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     renderContent: () => {} | null;
     render(): JSX.Element;
 }

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: 400px;
+  min-height: 400px;
+  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: 400px;
+  min-height: 400px;
+  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: 400px;
+  min-height: 400px;
+  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: 400px;
+  min-height: 400px;
+  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

@@ -9733,8 +9733,9 @@ function DialogModel(props, ref) {
   useEffect(function () {
     var containerEl = containerRef.current;
     var containerElWidth = containerEl.offsetWidth;
-    console.log(containerElWidth);
+    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;
@@ -9937,6 +9938,11 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
         document.onmousemove = null;
       };
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      Modal.destory();
+    }
   }, {
     key: "render",
     value: function render() {
@@ -9970,18 +9976,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() {
@@ -9990,8 +9997,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];
     }
   };
 
@@ -10023,8 +10034,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) {
@@ -11112,15 +11135,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%',
@@ -11129,7 +11146,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%',
@@ -11138,7 +11155,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%',
@@ -11203,11 +11220,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,
@@ -11251,20 +11264,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);
@@ -11275,16 +11293,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", {
@@ -11297,7 +11315,7 @@ function VideoPlayer(_ref, ref) {
         }
       }));
     });
-  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, urls]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11324,10 +11342,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 () {
@@ -11335,14 +11356,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

@@ -9771,8 +9771,9 @@ function DialogModel(props, ref) {
   React.useEffect(function () {
     var containerEl = containerRef.current;
     var containerElWidth = containerEl.offsetWidth;
-    console.log(containerElWidth);
+    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;
@@ -9975,6 +9976,11 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
         document.onmousemove = null;
       };
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      Modal.destory();
+    }
   }, {
     key: "render",
     value: function render() {
@@ -10008,18 +10014,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() {
@@ -10028,8 +10035,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];
     }
   };
 
@@ -10061,8 +10072,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) {
@@ -11150,15 +11173,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%',
@@ -11167,7 +11184,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%',
@@ -11176,7 +11193,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%',
@@ -11241,11 +11258,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,
@@ -11289,20 +11302,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);
@@ -11313,16 +11331,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", {
@@ -11335,7 +11353,7 @@ function VideoPlayer(_ref, ref) {
         }
       }));
     });
-  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, urls]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11362,10 +11380,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 () {
@@ -11373,14 +11394,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.19",
+  "version": "0.4.20",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",