/*
 * @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;
