wargerm 0.4.11 → 0.4.12

package/dist/index.css

@@ -1409,6 +1409,15 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .btnbox:hover {
   background: #0f6ab7;
 }
+[data-prefers-color='dark'] .videoContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1px 1px;
+  background: #0f6ab7;
+}
 
 /* Color
 ----------------------- */
@@ -2781,6 +2790,15 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .btnbox:hover {
   background: #0f6ab7;
 }
+[data-prefers-color='light'] .videoContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1px 1px;
+  background: #0f6ab7;
+}
 
 .frame {
   width: 40px;

package/dist/index.esm.css

@@ -1409,6 +1409,15 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .btnbox:hover {
   background: #0f6ab7;
 }
+[data-prefers-color='dark'] .videoContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1px 1px;
+  background: #0f6ab7;
+}
 
 /* Color
 ----------------------- */
@@ -2781,6 +2790,15 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .btnbox:hover {
   background: #0f6ab7;
 }
+[data-prefers-color='light'] .videoContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1px 1px;
+  background: #0f6ab7;
+}
 
 .frame {
   width: 40px;

package/dist/index.esm.js

@@ -8535,7 +8535,7 @@ Table.defaultProps = {
 var _excluded$8 = ["height", "width", "count", "style", "numberStyle"],
     _excluded2$2 = ["count", "numberCount", "width", "height", "marginRight"];
 
-var Number$1 = function Number(_ref) {
+var Number = function Number(_ref) {
   var height = _ref.height,
       width = _ref.width,
       _ref$count = _ref.count,
@@ -8657,7 +8657,7 @@ var Number$1 = function Number(_ref) {
   })))));
 };
 
-Number$1.defaultProps = {
+Number.defaultProps = {
   width: 28,
   height: 40
 };
@@ -8694,7 +8694,7 @@ var Index$7 = function Index(props) {
       display: 'flex'
     }
   }, numberList.map(function (res, index) {
-    return /*#__PURE__*/React.createElement(Number$1, _objectSpread2({
+    return /*#__PURE__*/React.createElement(Number, _objectSpread2({
       key: index,
       width: width,
       height: height,
@@ -10986,15 +10986,6 @@ function Xgplay(_ref) {
       type = _ref.type;
   var ref = useRef(null);
   useEffect(function () {
-    player = new HlsJsPlayer(_objectSpread2({
-      el: ref.current,
-      width: '100%',
-      height: '100%',
-      autoplay: true,
-      isLive: true,
-      autoplayMuted: true
-    }, config));
-
     if (type.indexOf('hls') !== -1) {
       player = new HlsJsPlayer(_objectSpread2({
         el: ref.current,
@@ -11067,30 +11058,52 @@ function VideoPlayer(_ref) {
       config = _ref$config === void 0 ? {} : _ref$config,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url;
+  var layouts = [{
+    title: '1x1布局',
+    style: {
+      gridTemplateColumns: '1fr',
+      gridTemplateRows: '1fr'
+    },
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "icon-dantupailie"
+    }),
+    span: 1
+  }, {
+    title: '2x2布局',
+    style: {
+      gridTemplateColumns: '1fr 1fr',
+      gridTemplateRows: '1fr 1fr'
+    },
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "icon-split-screen-compare-full"
+    }),
+    span: 4
+  }, {
+    title: '3x3布局',
+    style: {
+      gridTemplateColumns: '1fr 1fr 1fr',
+      gridTemplateRows: '1fr 1fr 1fr'
+    },
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "icon-all-full",
+      className: "f21"
+    }),
+    span: 9
+  }];
 
-  var _useState = useState(1),
+  var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      colCountKey = _useState2[0],
-      setColCountKey = _useState2[1];
-
-  var _useState3 = useState(1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      colNumber = _useState4[0],
-      setColNumber = _useState4[1];
+      currentLayoutIndex = _useState2[0],
+      setCurrentLayoutIndex = _useState2[1];
 
   var domRef = useRef(null);
   var contentRef = useRef(null);
-
-  var renderDom = function renderDom() {
-    var arr = new Array(colCountKey * colNumber);
-    return arr.fill('').map(function (item, index) {
-      return /*#__PURE__*/React.createElement(_Col, {
-        span: 24 / colCountKey,
+  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",
-        style: {
-          height: (Number(style.height) - 30) / colNumber
-        }
+        className: "camera"
       }, url[index] ? /*#__PURE__*/React.createElement(Xgplay, {
         type: url[index],
         config: _objectSpread2({
@@ -11106,7 +11119,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  };
+  }, [currentLayoutIndex]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11132,47 +11145,24 @@ function VideoPlayer(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: style,
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(_Row, {
-    ref: domRef
-  }, renderDom()), footer ? /*#__PURE__*/React.createElement("div", {
-    className: "tools"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "btnbox",
-    onClick: function onClick() {
-      setColNumber(1);
-      setColCountKey(1);
-    }
-  }, /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "top",
-    title: '1x1布局'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "icon-dantupailie"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "btnbox",
-    onClick: function onClick() {
-      setColNumber(2);
-      setColCountKey(2);
-    }
-  }, /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "top",
-    title: '2x2布局'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "icon-split-screen-compare-full"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "btnbox",
-    onClick: function onClick() {
-      setColNumber(3);
-      setColCountKey(3);
-    }
-  }, /*#__PURE__*/React.createElement(_Tooltip, {
-    placement: "top",
-    title: '3x3布局'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "icon-all-full",
-    style: {
-      fontSize: 21
-    }
-  })))) : null));
+    ref: domRef,
+    className: "videoContainer",
+    style: layouts[currentLayoutIndex].style
+  }, renderDom), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "tools"
+  }, layouts.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "btnbox",
+      onClick: function onClick() {
+        return setCurrentLayoutIndex(index);
+      }
+    }, /*#__PURE__*/React.createElement(_Tooltip, {
+      placement: "top",
+      title: item.title
+    }, item.icon));
+  })) : 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 };

package/dist/index.js

@@ -8573,7 +8573,7 @@ Table.defaultProps = {
 var _excluded$8 = ["height", "width", "count", "style", "numberStyle"],
     _excluded2$2 = ["count", "numberCount", "width", "height", "marginRight"];
 
-var Number$1 = function Number(_ref) {
+var Number = function Number(_ref) {
   var height = _ref.height,
       width = _ref.width,
       _ref$count = _ref.count,
@@ -8695,7 +8695,7 @@ var Number$1 = function Number(_ref) {
   })))));
 };
 
-Number$1.defaultProps = {
+Number.defaultProps = {
   width: 28,
   height: 40
 };
@@ -8732,7 +8732,7 @@ var Index$7 = function Index(props) {
       display: 'flex'
     }
   }, numberList.map(function (res, index) {
-    return /*#__PURE__*/React__default['default'].createElement(Number$1, _objectSpread2({
+    return /*#__PURE__*/React__default['default'].createElement(Number, _objectSpread2({
       key: index,
       width: width,
       height: height,
@@ -11024,15 +11024,6 @@ function Xgplay(_ref) {
       type = _ref.type;
   var ref = React.useRef(null);
   React.useEffect(function () {
-    player = new HlsJsPlayer__default['default'](_objectSpread2({
-      el: ref.current,
-      width: '100%',
-      height: '100%',
-      autoplay: true,
-      isLive: true,
-      autoplayMuted: true
-    }, config));
-
     if (type.indexOf('hls') !== -1) {
       player = new HlsJsPlayer__default['default'](_objectSpread2({
         el: ref.current,
@@ -11105,30 +11096,52 @@ function VideoPlayer(_ref) {
       config = _ref$config === void 0 ? {} : _ref$config,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? [] : _ref$url;
+  var layouts = [{
+    title: '1x1布局',
+    style: {
+      gridTemplateColumns: '1fr',
+      gridTemplateRows: '1fr'
+    },
+    icon: /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: "icon-dantupailie"
+    }),
+    span: 1
+  }, {
+    title: '2x2布局',
+    style: {
+      gridTemplateColumns: '1fr 1fr',
+      gridTemplateRows: '1fr 1fr'
+    },
+    icon: /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: "icon-split-screen-compare-full"
+    }),
+    span: 4
+  }, {
+    title: '3x3布局',
+    style: {
+      gridTemplateColumns: '1fr 1fr 1fr',
+      gridTemplateRows: '1fr 1fr 1fr'
+    },
+    icon: /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: "icon-all-full",
+      className: "f21"
+    }),
+    span: 9
+  }];
 
-  var _useState = React.useState(1),
+  var _useState = React.useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      colCountKey = _useState2[0],
-      setColCountKey = _useState2[1];
-
-  var _useState3 = React.useState(1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      colNumber = _useState4[0],
-      setColNumber = _useState4[1];
+      currentLayoutIndex = _useState2[0],
+      setCurrentLayoutIndex = _useState2[1];
 
   var domRef = React.useRef(null);
   var contentRef = React.useRef(null);
-
-  var renderDom = function renderDom() {
-    var arr = new Array(colCountKey * colNumber);
-    return arr.fill('').map(function (item, index) {
-      return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], {
-        span: 24 / colCountKey,
+  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",
-        style: {
-          height: (Number(style.height) - 30) / colNumber
-        }
+        className: "camera"
       }, url[index] ? /*#__PURE__*/React__default['default'].createElement(Xgplay, {
         type: url[index],
         config: _objectSpread2({
@@ -11144,7 +11157,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  };
+  }, [currentLayoutIndex]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11170,47 +11183,24 @@ function VideoPlayer(_ref) {
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     style: style,
     ref: contentRef
-  }, /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], {
-    ref: domRef
-  }, renderDom()), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "tools"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "btnbox",
-    onClick: function onClick() {
-      setColNumber(1);
-      setColCountKey(1);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
-    placement: "top",
-    title: '1x1布局'
-  }, /*#__PURE__*/React__default['default'].createElement(IconFont, {
-    type: "icon-dantupailie"
-  }))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "btnbox",
-    onClick: function onClick() {
-      setColNumber(2);
-      setColCountKey(2);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
-    placement: "top",
-    title: '2x2布局'
-  }, /*#__PURE__*/React__default['default'].createElement(IconFont, {
-    type: "icon-split-screen-compare-full"
-  }))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "btnbox",
-    onClick: function onClick() {
-      setColNumber(3);
-      setColCountKey(3);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
-    placement: "top",
-    title: '3x3布局'
-  }, /*#__PURE__*/React__default['default'].createElement(IconFont, {
-    type: "icon-all-full",
-    style: {
-      fontSize: 21
-    }
-  })))) : null));
+    ref: domRef,
+    className: "videoContainer",
+    style: layouts[currentLayoutIndex].style
+  }, renderDom), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "tools"
+  }, layouts.map(function (item, index) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: index,
+      className: "btnbox",
+      onClick: function onClick() {
+        return setCurrentLayoutIndex(index);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
+      placement: "top",
+      title: item.title
+    }, item.icon));
+  })) : null));
 }
 
 exports.AutoScroll = Index$9;

package/package.json

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