/*
 * @Author: 634665781 634665781@qq.com
 * @Date: 2023-04-11 13:40:18
 * @LastEditors: 634665781 634665781@qq.com
 * @LastEditTime: 2023-05-22 10:06:05
 * @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 } from 'react';
import Video from '../index';

const Demo1 = (props) => {
  const jessibuca = useRef(null);
  let JessibucaObj = {
    operateBtns: {
      // fullscreen: false,
      screenshot: false,
    },
    loadingText: '演示视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
  };
  // 若是在子应用中，则需加上子应用名称，且兼容基座
  // 如下：
  // let _url = '/civ_energy/JessibucaVideo/decoder.js'
  // let JessibucaObj = {
  //   decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url
  // }
  // let VideoInfo = {
  // key: '123638446', //'1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  // dataRate: `/2`,
  // fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  //  useFullUrl: true,
  // cameraName: `摄像头s8`,
  //  appKey: '6c44c8e92d1c4d75a9818756025df550',
  //  appSecret: '78b7dc88f9f4bf19c2b1aabfdd995244',
  // protocol: '萤石EZOPEN',
  //};

  let VideoParam = {
    id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: '琼海电信小区', // 设备名称
    protocol: '萤石EZOPEN', // 萤石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',
    //   width: 952,
    //   height: 500,
  };

  /* {
    id: '398993BB-A795-4237-BE75-B6A7EC9D675', // 398993BB-A795-4237-BE75-B6A7EC9D675
    name: '设备1', // 设备名称
    protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
    username: '6c44c8e92d1c4d75a9818756025df550',
    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
    dataRate: 'Sub', // Main 主码流  Sub 子码流
    pandavmsHost: 'ws://172.16.19.19:8080/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
    address: '123638446',
  }; */

  useEffect(() => {
    // 事件 ，返回视频信息
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('videoInfo', function (data) {
        console.log('width:', data.width, 'height:', data.width);
      });

    // 事件 ，播放视频之后的回调
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('play', function (data) {
        console.log('play:', jessibuca);
      });

    // 事件 ，暂停视频之后的回调
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('pause', function (data) {
        console.log('pause:', data);
      });

    // ******
    // 其他事件需查看在线文档
    // ******
  }, []);

  const stopVideo = () => {
    jessibuca.current.pause && jessibuca.current.pause();
  };

  const startVideo = () => {
    if (jessibuca && jessibuca.current) {
      jessibuca.current.play();
      // console.log(jessibuca.current.isPlaying());
    }
  };
  const testVideo = () => {
    // console.log(jessibuca.current.isPlaying());
  };

  const destroyVideo = () => {
    if (VideoParam.protocol != '萤石EZOPEN')
      jessibuca && jessibuca.current && jessibuca.current.destroy();
  };
  return (
    <div>
      <button onClick={stopVideo}>暂停</button>
      <button onClick={startVideo}>开始</button>
      <button onClick={testVideo}>测试</button>
      <button onClick={destroyVideo}>销毁</button>
      <div style={{ height: '700px' }}>
        <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
      </div>
    </div>
  );
};

export default Demo1;
