maxme-electron/react-sample/src/js/components/container/Launch.jsx

The electron wrap of MaxME.

import React, { Component } from "react";
import { remote } from 'electron';
import ReactDOM from "react-dom";
import { Spin, Modal, InputNumber, message, Button, Avatar } from 'antd';
import Meeting from '../container/Meeting.jsx';
import '../../../css/Launch.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faVideo, faUsers} from '@fortawesome/free-solid-svg-icons';

class Launch extends Component {
  constructor(props) {
    super(props);

    this.roomNo = undefined;
    this.duration = undefined;
    this.uuid = undefined;

    this.fastCallin = this.fastCallin.bind(this);
    this.onDismissed = this.onDismissed.bind(this);
    this.hangup = this.hangup.bind(this);
    this.leave = this.leave.bind(this);
    this.dismiss = this.dismiss.bind(this);

    this.state = {
      loading:true,
      joining:false,
      leaving:false,
      dismissing:false,
      joined:false,
      dialPlate:false,
      leaveConfirm:false,
      master:false,
      avatar:""
    };
  }

  componentDidMount() {
    const token = remote.getGlobal('token');
    const nick = remote.getGlobal('userName');
    this.setState({avatar:remote.getGlobal('avatar')});
    setTimeout(() => {
      const rlt = maxme.auth(token, nick);
      if( 0 === rlt.errno) {
        this.setState({loading:false});
      } else {
        message.error(rlt.msg);
      }
    }, 1000);
  }

  formatRoomNo() {
    if (this.roomNo.length === 8) {
      let tmp = this.roomNo.substring(0, 4);
      tmp += '-';
      tmp += this.roomNo.substring(4, 8);
      return tmp;
    } else if (this.roomNo.length == 9) {
      return this.roomNo;
    }
  }

  fastCallin() {
    this.setState({loading:true, joining:true});
    setTimeout(()=>{
      const rlt = maxme.fastCallin();
      if (0 === rlt.errno) {
        this.uuid = rlt.uuid;
        this.roomNo = rlt.no;
        this.setState({joined:true});
        document.title = 'RoomNo: '+ this.formatRoomNo();
      } else {
        message.error(rlt.msg);
      }

      this.setState({loading:false, joining:false});
    }, 1000);
  }

  join() {
    this.setState({loading:true, joining:true});
    setTimeout(()=>{
      const rlt = maxme.join(this.roomNo);
      if (0 === rlt.errno) {
        this.uuid = rlt.uuid;
        this.duration = rlt.duration;
        this.setState({joined:true});
        document.title = 'RoomNo: '+ this.formatRoomNo();
      } else {
        message.error(rlt.msg + this.roomNo);
      }
      this.setState({loading:false, joining:false});
    }, 1000);
  }

  hangup(master) {
    this.setState({master:master,leaveConfirm:true});
  }

  dismiss() {
    this.setState({dismissing:true});
    setTimeout(()=>{
      maxme.dismiss();
      this.setState({joined:false, leaveConfirm:false, dismissing:false});
      document.title = "RemoteMeeting";
    }, 1000);
  }

  leave() {
    this.setState({leaving:true});
    setTimeout(()=>{
      maxme.leave();
      this.setState({joined:false, leaveConfirm:false, leaving:false});
      document.title = "RemoteMeeting";
    }, 1000);
  }

  onDismissed() {
    maxme.leave();
    this.setState({joined:false});
    document.title = "RemoteMeeting";
  }

  render() {
    return (
      <div style={{width:document.documentElement.clientWidth, height:document.documentElement.clientHeight, textAlign:'center'}}>
        <Spin size={'large'} spinning={this.state.loading} >
          {!(this.state.loading || this.state.joined || this.state.joining) &&
            <div>
              <div className="float-left" style={{paddingLeft:15, paddingTop:15}}> <Avatar src={this.state.avatar} size='large' /> </div>
              <div style={{position:'fixed', left:'50%', top:'50%', transform:'translate(-50%, -50%)'}}>
                <div className='nav-btn-wrap' style={{marginRight:'80px'}}>
                  <button className='nav-btn' onClick={this.fastCallin}>
                    <FontAwesomeIcon icon={faVideo} size='5x' />
                    <h2>新的会议</h2>
                  </button>
                </div>
                <div className='nav-btn-wrap' style={{marginLeft:'80px'}}>
                  <button className='nav-btn' onClick={()=>{this.setState({dialPlate:true})}}>
                    <FontAwesomeIcon icon={faUsers} size='5x' />
                    <h2>加入会议</h2>
                  </button>
                </div>
              </div>
            </div>
          }
          {(this.state.joining || this.state.joined) &&
            <Meeting {...{nick:remote.getGlobal('userName'), onDismissed:this.onDismissed, hangup:this.hangup}} />
          }
          {this.state.loading && !this.state.joining && !this.state.joined &&
            <div style={{left:0, top:0, width:document.documentElement.clientWidth - 2, height:document.documentElement.clientHeight -2, backgroundColor:'black'}} />
          }
        </Spin>

        <Modal
          title='退出会议'
          centered
          visible={this.state.leaveConfirm}
          closable={false}
          footer={
            <div style={{height:50}}>
              <Button type='default' className='float-right btn-confirm' onClick={()=>{this.setState({leaveConfirm:false})}}>取消</Button>
              <Button type='primary' className='float-right btn-confirm' loading={this.state.leaving} onClick={this.leave}>退出会议</Button>
              {this.state.master && <Button type='danger' className='float-right btn-confirm' loading={this.state.dismissing} onClick={this.dismiss}>解散会议</Button>}
            </div>
          }
        >
          <div>{this.state.master?'请确认退出或者结束会议':'请确认是否退出会议'}</div>
        </Modal>

        <Modal
          title='输入会议号以加入'
          centered
          visible={this.state.dialPlate}
          closable={false}
          cancelText='取 消'
          okText='确 定'
          onOk={()=>{this.setState({dialPlate:false});this.join();}}
          onCancel={() => {this.setState({dialPlate:false})}}
        >
          <InputNumber
            formatter={value =>`${value}`.replace(/\B(?=(\d{4})+(?!\d))/g, '-')}
            parser={value => value.replace(/\$\s?|(-*)/g, '')}
            autoFocus={true}
            size='large'
            max={99999999}
            onChange={(val) =>{this.roomNo = val.toString();}}
            style={{position:'relative', width:460, margin:'auto'}}
          />
        </Modal>
      </div>
    );
  }
}

export default Launch;
const wrapper = document.getElementById("app_root");
wrapper ? ReactDOM.render(<Launch />, wrapper) : false;