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.key], `key`, JessibucaObj);
      setTimeout(() => {
        this.play(VideoInfo.url, `key`);
      }, 10);
    }
  }
  componentDidMount() {
    this.createAll();
  }
  componentWillUnmount() {
    this.destroy();
  }
  create(dom, key, obj) {
    if (this.jessibuca) this.jessibuca.destroy();

    let jsc = {
      videoBuffer: 0.2, // 缓存时长
      isResize: false,
      text: '',
      isFlv: false,
      loadingText: '加载中',
      debug: false,
      recordType: 'mp4',
      loadingTimeout: 60,
      loadingText: '视频加载中',
      loadingTimeoutReplay: true,
      timeout: 60,
      controlAutoHide: true,
      heartTimeout: 60,
      heartTimeoutReplay: true,
      showBandwidth: true, // 显示网速
      operateBtns: {
        fullscreen: true,
        screenshot: true,
        play: true,
        record: true,
        audio: true,
      },
      isNotMute: false,
    };
    jsc = {
      ...jsc,
      ...obj,
      container: dom,
      decoder: '/JessibucaVideo/decoder.js',
    };
    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.key}
            ref={`myVideo` + VideoInfo.key}
          ></div>
        }
      </div>
    );
  }
  render() {
    return <div className={style.root}>{this.renderCheckedArr()}</div>;
  }
}

export default App;
