import React from 'react';

import style from './App.less';

// import pubsub from 'pubsub-js'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.jessibuca = null;
    this.showOperateBtns = true;
    this.$container = null;
    this.forceNoOffscreen = false;

    this.state = {
      isPlaying: false,
    };
  }
  createAll() {
    let { VideoInfo, JessibucaObj } = this.props;
    this.destroy();
    if (VideoInfo.url) {
      this.create(this.refs[`myVideo` + VideoInfo.id], `key`, JessibucaObj);
      setTimeout(() => {
        let code = window.independence ? window.siteCode : window.globalConfig?.userInfo?.site;
        let siteInfo = !code ? '' : `?_site=${code}`;
        this.play(VideoInfo.url + `/${VideoInfo.dataRate == 'Sub' ? 2 : 1}${siteInfo}`, `key`);
      }, 10);
    }
  }
  componentDidMount() {
    this.createAll();

    this.jessibuca.on('pause', function (data) {
      // console.log('timeUpdate', ts);
      console.log('pause:', data);
    });
  }
  componentWillUnmount() {
    this.destroy();
  }
  create(dom, key, obj) {
    if (this.jessibuca) this.jessibuca.destroy();

    let jsc = {
      videoBuffer: 0.2, // 缓存时长
      isResize: false,
      text: '',
      isFlv: false,
      debug: false,
      recordType: 'mp4',
      loadingTimeout: 10,
      loadingText: '视频加载中',
      loadingTimeoutReplay: true,
      timeout: 10,
      controlAutoHide: true,
      heartTimeout: 10,
      heartTimeoutReplay: true,
      showBandwidth: true, // 显示网速
      operateBtns: {
        fullscreen: true,
        screenshot: true,
        play: true,
        record: true,
        audio: true,
      },
      isNotMute: false,
    };
    jsc = {
      ...jsc,
      ...obj,
      container: dom,
    };
    if (dom) {
      this.jessibuca = new window.Jessibuca(jsc);
    }
  }

  play(url, key) {
    if (this.jessibuca) {
      this.jessibuca.play(url);
      this.setState({
        isPlaying: true,
      });
    }
  }

  pause() {
    if (this.jessibucaArr) {
      debugger;
      for (let key in this.jessibucaArr) {
        this.jessibucaArr[key].pause();
      }
      this.setState({
        isPlaying: false,
      });
    }
  }

  destroy() {
    if (this.jessibuca) {
      this.jessibuca.destroy();
      this.setState({
        isPlaying: false,
      });
    }
  }
  renderCheckedArr() {
    let { VideoInfo } = this.props;
    return (
      <div className={style.containerOut}>
        {<div className={style.container} key={VideoInfo.id} ref={`myVideo` + VideoInfo.id}></div>}
      </div>
    );
  }
  render() {
    return <div className={style.root}>{this.renderCheckedArr()}</div>;
  }
}

export default App;
