wargerm 0.4.12 → 0.4.13

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;
@@ -1418,6 +1420,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
 ----------------------- */
@@ -2753,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;
@@ -2799,6 +2806,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

@@ -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;
@@ -1418,6 +1420,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
 ----------------------- */
@@ -2753,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;
@@ -2799,6 +2806,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

@@ -10980,45 +10980,64 @@ 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);
+    }
+  });
+  useImperativeHandle(fRef, function () {
+    return {
+      player: playerRef.current
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
@@ -11027,6 +11046,8 @@ function Xgplay(_ref) {
   });
 }
 
+var Xgplay$1 = /*#__PURE__*/forwardRef(Xgplay);
+
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
@@ -11046,7 +11067,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 +11077,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 +11113,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 +11164,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  }, [currentLayoutIndex]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11142,9 +11187,25 @@ function VideoPlayer(_ref) {
     }
   }
 
+  var loadCamera = function loadCamera(url) {
+    var currentPlayer = players[currentPlayerIndex];
+
+    if (currentPlayer) {
+      debugger;
+      currentPlayer.src = 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 +11217,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 +11228,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

@@ -11018,45 +11018,64 @@ 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);
+    }
+  });
+  React.useImperativeHandle(fRef, function () {
+    return {
+      player: playerRef.current
+    };
+  });
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: ref,
     style: {
@@ -11065,6 +11084,8 @@ function Xgplay(_ref) {
   });
 }
 
+var Xgplay$1 = /*#__PURE__*/React.forwardRef(Xgplay);
+
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
@@ -11084,7 +11105,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 +11115,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 +11151,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 +11202,7 @@ function VideoPlayer(_ref) {
         }
       }));
     });
-  }, [currentLayoutIndex]);
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
 
   function exitFullscreen() {
     if (document.exitFullscreen) {
@@ -11180,9 +11225,25 @@ function VideoPlayer(_ref) {
     }
   }
 
+  var loadCamera = function loadCamera(url) {
+    var currentPlayer = players[currentPlayerIndex];
+
+    if (currentPlayer) {
+      debugger;
+      currentPlayer.src = 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 +11255,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 +11266,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 +11291,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.13",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",