wargerm 0.4.11 → 0.4.14

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

@@ -1372,11 +1372,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;
@@ -1409,6 +1411,18 @@ 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;
+}
+[data-prefers-color='dark'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 /* Color
 ----------------------- */
@@ -2744,11 +2758,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;
@@ -2781,6 +2797,18 @@ 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;
+}
+[data-prefers-color='light'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 .frame {
   width: 40px;

package/dist/index.esm.css

@@ -1372,11 +1372,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;
@@ -1409,6 +1411,18 @@ 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;
+}
+[data-prefers-color='dark'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 /* Color
 ----------------------- */
@@ -2744,11 +2758,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;
@@ -2781,6 +2797,18 @@ 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;
+}
+[data-prefers-color='light'] .xgplayer-skin-default {
+  height: 100% !important;
+}
 
 .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,
@@ -10980,54 +10980,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 () {
-    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,
-        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: {
@@ -11036,6 +11053,8 @@ function Xgplay(_ref) {
   });
 }
 
+var Xgplay$1 = /*#__PURE__*/forwardRef(Xgplay);
+
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
@@ -11055,7 +11074,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,
@@ -11065,36 +11084,82 @@ 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 = [{
+    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(layoutIndex || 0),
       _useState2 = _slicedToArray(_useState, 2),
-      colCountKey = _useState2[0],
-      setColCountKey = _useState2[1];
+      currentLayoutIndex = _useState2[0],
+      setCurrentLayoutIndex = _useState2[1];
 
-  var _useState3 = useState(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),
-      colNumber = _useState4[0],
-      setColNumber = _useState4[1];
+      currentPlayerIndex = _useState4[0],
+      setCurrentPlayerIndex = _useState4[1];
 
   var domRef = useRef(null);
-  var contentRef = useRef(null);
+  var playerRef = useRef({});
 
-  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 _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",
-        style: {
-          height: (Number(style.height) - 30) / colNumber
-        }
-      }, 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",
@@ -11106,7 +11171,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  };
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11129,50 +11194,48 @@ 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
-  }, /*#__PURE__*/React.createElement(_Row, {
-    ref: domRef
-  }, renderDom()), footer ? /*#__PURE__*/React.createElement("div", {
-    className: "tools"
+    style: style
   }, /*#__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() {
+        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",
+      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 };
+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

@@ -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,
@@ -11018,54 +11018,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 () {
-    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,
-        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: {
@@ -11074,6 +11091,8 @@ function Xgplay(_ref) {
   });
 }
 
+var Xgplay$1 = /*#__PURE__*/React.forwardRef(Xgplay);
+
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
@@ -11093,7 +11112,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,
@@ -11103,36 +11122,82 @@ 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 = [{
+    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(layoutIndex || 0),
       _useState2 = _slicedToArray(_useState, 2),
-      colCountKey = _useState2[0],
-      setColCountKey = _useState2[1];
+      currentLayoutIndex = _useState2[0],
+      setCurrentLayoutIndex = _useState2[1];
 
-  var _useState3 = React.useState(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),
-      colNumber = _useState4[0],
-      setColNumber = _useState4[1];
+      currentPlayerIndex = _useState4[0],
+      setCurrentPlayerIndex = _useState4[1];
 
   var domRef = React.useRef(null);
-  var contentRef = React.useRef(null);
+  var playerRef = React.useRef({});
 
-  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 _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",
-        style: {
-          height: (Number(style.height) - 30) / colNumber
-        }
-      }, 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",
@@ -11144,7 +11209,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  };
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11167,52 +11232,50 @@ 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
-  }, /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], {
-    ref: domRef
-  }, renderDom()), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "tools"
+    style: style
   }, /*#__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() {
+        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",
+      title: item.title
+    }, item.icon));
+  })) : null));
 }
 
+var index$3 = /*#__PURE__*/React.forwardRef(VideoPlayer);
+
 exports.AutoScroll = Index$9;
 exports.Breadcrumb = Index$b;
 exports.Button = WButton;
@@ -11236,7 +11299,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.11",
+  "version": "0.4.14",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",