wargerm 0.4.10 → 0.4.13

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type propsType = {
+    footer?: boolean;
+    style?: {
+        height: number | string;
+        width: number | string;
+    };
+    layoutIndex?: number;
+    config?: Object;
+    url?: string[];
+};
+declare const _default: React.ForwardRefExoticComponent<propsType & React.RefAttributes<unknown>>;
+export default _default;

package/dist/components/VideoPlayer/xgplayer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;

package/dist/index.css

@@ -653,7 +653,7 @@
 }
 [data-prefers-color='dark'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -1354,6 +1354,75 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='dark'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='dark'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[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;
+}
+[data-prefers-color='dark'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='dark'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='dark'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='dark'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[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
 ----------------------- */
@@ -1821,7 +1890,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 }
 [data-prefers-color='light'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -2671,6 +2740,75 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .ant-input-number-handler-down-inner {
   color: #708191;
 }
+[data-prefers-color='light'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='light'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[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;
+}
+[data-prefers-color='light'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='light'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='light'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='light'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[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.d.ts

@@ -26,3 +26,4 @@ export { default as ModalForm } from './components/ModalForm';
 export { default as TabelCard } from './components/TabelCard';
 export { default as Cascader } from './components/Cascader';
 export { default as WebsocketHeart } from './components/WebsocketHeart';
+export { default as VideoPlayer } from './components/VideoPlayer';

package/dist/index.esm.css

@@ -653,7 +653,7 @@
 }
 [data-prefers-color='dark'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -1354,6 +1354,75 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='dark'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='dark'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[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;
+}
+[data-prefers-color='dark'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='dark'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='dark'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='dark'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[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
 ----------------------- */
@@ -1821,7 +1890,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 }
 [data-prefers-color='light'] .autoScroll-outer {
   overflow: auto;
-  height: 100px;
+  min-height: 100px;
 }
 @font-face {
   font-family: 'swiper-icons';
@@ -2671,6 +2740,75 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .ant-input-number-handler-down-inner {
   color: #708191;
 }
+[data-prefers-color='light'] .empty {
+  background: #16191e;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-prefers-color='light'] .empty .none {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+[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;
+}
+[data-prefers-color='light'] .xgplayer-live {
+  display: none !important;
+}
+[data-prefers-color='light'] .xgplayer-fullscreen {
+  display: none !important;
+}
+[data-prefers-color='light'] .tools {
+  background: #484d53;
+  height: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+[data-prefers-color='light'] .btnbox {
+  background: #333333;
+  border-radius: 5px;
+  color: #fff;
+  margin: 1px 5px;
+  width: 26px;
+  height: 26px;
+  font-size: 18px;
+  line-height: 26px;
+  cursor: pointer;
+  text-align: center;
+}
+[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

@@ -41,13 +41,16 @@ import _Cascader from 'antd/es/cascader';
 import cloneDeep from 'lodash/cloneDeep';
 import CountUp from 'react-countup';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import SwiperCore, { Pagination, Navigation, Autoplay } from 'swiper';
+import SwiperCore, { Pagination, Navigation, Autoplay, Virtual } from 'swiper';
 import 'antd/es/breadcrumb/style';
 import _Breadcrumb from 'antd/es/breadcrumb';
 import ReactDOM from 'react-dom';
 import 'antd/es/modal/style';
 import _Modal from 'antd/es/modal';
 import ProTable from '@ant-design/pro-table';
+import Player from 'xgplayer';
+import FlvPlayer from 'xgplayer-flv.js';
+import HlsJsPlayer from 'xgplayer-hls.js';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -460,8 +463,8 @@ WButton.defaultProps = {};
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
- * @LastEditTime: 2021-09-09 15:57:23
- * @LastEditors: lijin
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
  * @Description:
  * @FilePath: \wargerm\src\IconFont\index.tsx
  * 可以输入预定的版权声明、个性签名、空行等
@@ -473,7 +476,7 @@ WButton.defaultProps = {};
 // <IconFont type='icon-demo' className='xxx-xxx' />
 
 var index = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2720974_ec0fzxnc7ul.js'
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
 });
 
 var WInput = function WInput(props) {
@@ -8886,7 +8889,7 @@ var Index$9 = function Index(_ref) {
 
 var _excluded$b = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
 
-SwiperCore.use([Pagination, Navigation, Autoplay]);
+SwiperCore.use([Pagination, Navigation, Autoplay, Virtual]);
 
 var Index$a = function Index(props) {
   var data = props.data,
@@ -10659,6 +10662,21 @@ var TabelCard = function TabelCard(props, ref) {
     actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : _actionRef$current7.reload();
   };
 
+  useEffect(function () {
+    var _searchFormRef$curren, _searchFormRef$curren2;
+
+    if ((_searchFormRef$curren = searchFormRef.current) === null || _searchFormRef$curren === void 0 ? void 0 : (_searchFormRef$curren2 = _searchFormRef$curren.form) === null || _searchFormRef$curren2 === void 0 ? void 0 : _searchFormRef$curren2.getFieldsValue) {
+      var _searchFormRef$curren3, _searchFormRef$curren4;
+
+      var obj = filterObj((_searchFormRef$curren3 = searchFormRef.current) === null || _searchFormRef$curren3 === void 0 ? void 0 : (_searchFormRef$curren4 = _searchFormRef$curren3.form) === null || _searchFormRef$curren4 === void 0 ? void 0 : _searchFormRef$curren4.getFieldsValue()) || {};
+      (columns || []).filter(function (c) {
+        return c.notInitialValueInSearch;
+      }).forEach(function (item) {
+        delete obj[item.dataIndex];
+      });
+      setFormSearch(obj);
+    }
+  }, [columns]);
   var formSearchColumn = columns || [];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalForm$1, _objectSpread2(_objectSpread2({
     ref: modalFormRef,
@@ -10792,7 +10810,7 @@ var TabelCard = function TabelCard(props, ref) {
       return obj;
     }),
     search: false,
-    pagination: pagination != undefined ? pagination : {
+    pagination: pagination !== null && pagination !== void 0 ? pagination : {
       pageSize: 20
     }
   }, extraProps)));
@@ -10962,4 +10980,254 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = 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, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
+function Xgplay(_ref, fRef) {
+  var config = _ref.config,
+      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 (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 () {
+      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: {
+      overflow: 'hidden'
+    }
+  });
+}
+
+var Xgplay$1 = /*#__PURE__*/forwardRef(Xgplay);
+
+/*
+ * @Author: lijin
+ * @Date: 2021-08-04 16:24:47
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
+ * @Description:
+ * @FilePath: \wargerm\src\IconFont\index.tsx
+ * 可以输入预定的版权声明、个性签名、空行等
+ */
+// iconFontScriptUrl 修改成自己的iconfont图标项目地址
+// 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
+// 使用：
+// import IconFont from '@/components/IconFont';
+// <IconFont type='icon-demo' className='xxx-xxx' />
+
+var IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
+});
+
+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,
+      _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(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 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 ".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],
+          fluid: true
+        }, config)
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: "empty",
+        onDoubleClick: function onDoubleClick() {
+          var _domRef$current;
+
+          var fullscreenElement = document.fullscreenElement;
+          fullscreenElement ? exitFullscreen() : requestFullScreen(domRef === null || domRef === void 0 ? void 0 : (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.childNodes[index]);
+        }
+      }));
+    });
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+
+  function exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+
+  function requestFullScreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } //FireFox
+    else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } //Chrome等
+    else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } //IE11
+    else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    }
+  }
+
+  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
+  }, /*#__PURE__*/React.createElement("div", {
+    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));
+}
+
+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

@@ -52,6 +52,9 @@ var ReactDOM = require('react-dom');
 require('antd/es/modal/style');
 var _Modal = require('antd/es/modal');
 var ProTable = require('@ant-design/pro-table');
+var Player = require('xgplayer');
+var FlvPlayer = require('xgplayer-flv.js');
+var HlsJsPlayer = require('xgplayer-hls.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -83,6 +86,9 @@ var _Breadcrumb__default = /*#__PURE__*/_interopDefaultLegacy(_Breadcrumb);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var _Modal__default = /*#__PURE__*/_interopDefaultLegacy(_Modal);
 var ProTable__default = /*#__PURE__*/_interopDefaultLegacy(ProTable);
+var Player__default = /*#__PURE__*/_interopDefaultLegacy(Player);
+var FlvPlayer__default = /*#__PURE__*/_interopDefaultLegacy(FlvPlayer);
+var HlsJsPlayer__default = /*#__PURE__*/_interopDefaultLegacy(HlsJsPlayer);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -495,8 +501,8 @@ WButton.defaultProps = {};
 /*
  * @Author: lijin
  * @Date: 2021-08-04 16:24:47
- * @LastEditTime: 2021-09-09 15:57:23
- * @LastEditors: lijin
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
  * @Description:
  * @FilePath: \wargerm\src\IconFont\index.tsx
  * 可以输入预定的版权声明、个性签名、空行等
@@ -508,7 +514,7 @@ WButton.defaultProps = {};
 // <IconFont type='icon-demo' className='xxx-xxx' />
 
 var index = icons.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2720974_ec0fzxnc7ul.js'
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
 });
 
 var WInput = function WInput(props) {
@@ -8921,7 +8927,7 @@ var Index$9 = function Index(_ref) {
 
 var _excluded$b = ["data", "onClick", "slidesPerView", "rowKey", "onSwiperChange", "renderItem"];
 
-SwiperCore__default['default'].use([SwiperCore.Pagination, SwiperCore.Navigation, SwiperCore.Autoplay]);
+SwiperCore__default['default'].use([SwiperCore.Pagination, SwiperCore.Navigation, SwiperCore.Autoplay, SwiperCore.Virtual]);
 
 var Index$a = function Index(props) {
   var data = props.data,
@@ -10694,6 +10700,21 @@ var TabelCard = function TabelCard(props, ref) {
     actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : _actionRef$current7.reload();
   };
 
+  React.useEffect(function () {
+    var _searchFormRef$curren, _searchFormRef$curren2;
+
+    if ((_searchFormRef$curren = searchFormRef.current) === null || _searchFormRef$curren === void 0 ? void 0 : (_searchFormRef$curren2 = _searchFormRef$curren.form) === null || _searchFormRef$curren2 === void 0 ? void 0 : _searchFormRef$curren2.getFieldsValue) {
+      var _searchFormRef$curren3, _searchFormRef$curren4;
+
+      var obj = filterObj((_searchFormRef$curren3 = searchFormRef.current) === null || _searchFormRef$curren3 === void 0 ? void 0 : (_searchFormRef$curren4 = _searchFormRef$curren3.form) === null || _searchFormRef$curren4 === void 0 ? void 0 : _searchFormRef$curren4.getFieldsValue()) || {};
+      (columns || []).filter(function (c) {
+        return c.notInitialValueInSearch;
+      }).forEach(function (item) {
+        delete obj[item.dataIndex];
+      });
+      setFormSearch(obj);
+    }
+  }, [columns]);
   var formSearchColumn = columns || [];
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ModalForm$1, _objectSpread2(_objectSpread2({
     ref: modalFormRef,
@@ -10827,7 +10848,7 @@ var TabelCard = function TabelCard(props, ref) {
       return obj;
     }),
     search: false,
-    pagination: pagination != undefined ? pagination : {
+    pagination: pagination !== null && pagination !== void 0 ? pagination : {
       pageSize: 20
     }
   }, extraProps)));
@@ -10997,6 +11018,256 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
+function Xgplay(_ref, fRef) {
+  var config = _ref.config,
+      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 (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 () {
+      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: {
+      overflow: 'hidden'
+    }
+  });
+}
+
+var Xgplay$1 = /*#__PURE__*/React.forwardRef(Xgplay);
+
+/*
+ * @Author: lijin
+ * @Date: 2021-08-04 16:24:47
+ * @LastEditTime: 2022-06-08 11:02:39
+ * @LastEditors: cadelle 793238465@qq.com
+ * @Description:
+ * @FilePath: \wargerm\src\IconFont\index.tsx
+ * 可以输入预定的版权声明、个性签名、空行等
+ */
+// iconFontScriptUrl 修改成自己的iconfont图标项目地址
+// 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
+// 使用：
+// import IconFont from '@/components/IconFont';
+// <IconFont type='icon-demo' className='xxx-xxx' />
+
+var IconFont = icons.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_3425259_s93peuz62an.js'
+});
+
+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,
+      _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(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 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 ".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],
+          fluid: true
+        }, config)
+      }) : /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "empty",
+        onDoubleClick: function onDoubleClick() {
+          var _domRef$current;
+
+          var fullscreenElement = document.fullscreenElement;
+          fullscreenElement ? exitFullscreen() : requestFullScreen(domRef === null || domRef === void 0 ? void 0 : (_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.childNodes[index]);
+        }
+      }));
+    });
+  }, [currentLayoutIndex, currentPlayerIndex, playerRef, url]);
+
+  function exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+
+  function requestFullScreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } //FireFox
+    else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } //Chrome等
+    else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } //IE11
+    else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    }
+  }
+
+  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
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    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;
@@ -11020,6 +11291,7 @@ exports.Switch = WSwitch;
 exports.TabelCard = index$2;
 exports.Table = Table;
 exports.TreeSelect = Index$6;
+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.10",
+  "version": "0.4.13",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",
@@ -51,7 +51,12 @@
     "animate.css": "^4.1.1",
     "react-countup": "^6.0.0",
     "react-dom": "^17.0.2",
-    "swiper": "^6.7.0"
+    "swiper": "^6.7.0",
+    "xgplayer": "^2.31.6",
+    "xgplayer-flv": "^2.5.1",
+    "xgplayer-flv.js": "^2.3.0",
+    "xgplayer-hls": "^2.5.2",
+    "xgplayer-hls.js": "^2.6.1"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.2.0",