feat: 新增视频弹窗组件

config/config.js

@@ -107,6 +107,7 @@ export default {
           'AlarmScrollAssembly',
           'DataCarousel',
           'VmsVideo',
+          'VideoPopUp',
         ],
       },
       {

packages/base-components/VideoPopup/README.md

+# `@wisdom-components/VideoPopup`
+
+> TODO: description
+
+## Usage
+
+```
+const videopopup = require('@wisdom-components/VideoPopup');
+
+// TODO: DEMONSTRATE API
+```

packages/base-components/VideoPopup/package.json

+{
+  "name": "@wisdom-components/videopopup",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "Liumh <liumh564@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "module": "es/index.js",
+  "main": "lib/index.js",
+  "sideEffects": [
+    "*.less"
+  ],
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "es",
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "node ./__tests__/@wisdom-components/VideoPopup.test.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.17.9"
+  }
+}

packages/base-components/VideoPopup/src/VideoPopUp.md

+---
+title: VideoModal - 视频弹窗组件
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# VmsVideo 视频弹窗组件
+
+## 组件使用
+
+<code src="./demos/demo.tsx">
+
+## API
+
+
+
+
+### Column 新增参数
+
+| 参数     | 说明                                         | 类型    | 默认值 |
+| -------- | -------------------------------------------- | ------- | ------ |
+| ModalInfo| api 参考 Antd Modal 组件 https://ant.design/components/modal-cn#api |  |   |
+| VideoInfo | api参考视频组件VmsVideo的VideoParam      |   | -      |
+| JessibucaObj |     api参考视频组件VmsVideo的JessibucaObj             |   | -      |
+
+

packages/base-components/VideoPopup/src/demos/demo.tsx

+/*
+ * @Author: 634665781 634665781@qq.com
+ * @Date: 2023-04-11 13:40:18
+ * @LastEditors: 634665781 634665781@qq.com
+ * @LastEditTime: 2023-04-17 11:05:27
+ * @FilePath: \wisdom-components\packages\base-components\TestVideo\src\demos\dmeo1.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// @ts-ignore
+import React, { useRef, useEffect, useState } from 'react';
+import { Button } from 'antd';
+import VideoPopUp from '../index';
+
+const Demo = () => {
+  const [showModal, setShowModal] = useState(false);
+  const modalProps = {
+    ModalInfo: {
+      open: showModal,
+      onCancel: () => setShowModal(false),
+      title: '视频通道预览',
+    },
+    VideoInfo: {
+      id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
+      name: '琼海电信小区', // 设备名称
+      protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
+      username: '6c44c8e92d1c4d75a9818756025df550',
+      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
+      dataRate: 'Sub', // Main 主码流  Sub 子码流
+      pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
+      address: '236644034',
+    },
+    JessibucaObj: {},
+  };
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>打开弹窗</Button>
+      <VideoPopUp {...modalProps} />
+    </>
+  );
+};
+
+export default Demo;

packages/base-components/VideoPopup/src/index.js

+import TestVideo from '../../VmsVideo/src/index';
+import { Modal } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+
+const VideoPopUp = (props) => {
+  const { ModalInfo, VideoInfo, JessibucaObj } = props;
+  const _JessibucaObj = {
+    operateBtns: {
+      screenshot: false,
+    },
+    loadingText: '演示视频加载中',
+    decoder: '/JessibucaVideo/decoder.js',
+    ...JessibucaObj,
+  };
+
+
+  return (
+    <Modal
+      title='视频预览'
+      width="60vw"
+      wrapClassName={styles.channelModal}
+      maskClosable={false}
+      footer={null}
+      {...ModalInfo}
+    >
+      <div className={styles.videobox}>
+        <TestVideo VideoInfo={VideoInfo} JessibucaObj={_JessibucaObj} />
+      </div>
+    </Modal>
+  );
+};
+export default VideoPopUp;

packages/base-components/VideoPopup/src/index.less

+.channelModal {
+  .videobox {
+    height: 100%;
+
+    >div {
+      height: 100% !important;
+    }
+  }
+
+  :global {
+    .ant-modal-body {
+      height: 70vh;
+      padding: 0;
+    }
+  }
+}
\ No newline at end of file