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

The electron wrap of MaxME.

import React, { Component } from "react";
import {message } from 'antd';
import {remote, BrowserWindow, Rectangle} from 'electron';
import VideoView from './VideoView.jsx';
import Toolbar from '../presentational/Toolbar.jsx';
import MemberList from '../presentational/MemberList.jsx';
import Settings from '../presentational/Settings.jsx';
import DesktopSourceSelector from "../presentational/DesktopSourceSelector.jsx";
import PropTypes from "prop-types";
import MiniVideoView from "../presentational/MiniVideoView.jsx";

class Meeting extends Component {
  constructor(props) {
    super(props);
    this.videoView = undefined;               // 视频视图
    this.desktopView = undefined;             // 桌面共享视图
    this.wbView = undefined;                  // 白板视图
    this.memberList = null;
    this.uuid = '';

    this.changeView = this.changeView.bind(this);
    this.showConfig = this.showConfig.bind(this);
    this.hideConfig = this.hideConfig.bind(this);
    this.showMembers = this.showMembers.bind(this);
    this.hideMembers = this.hideMembers.bind(this);
    this.hideDesktopSelector = this.hideDesktopSelector.bind(this);
    this.startDesktopSharing = this.startDesktopSharing.bind(this);
    this.hangup = this.hangup.bind(this);

    this.registerCallbacks();

    this.state = {
      duration: 0,
      master:false,
      showToolbar: false,
      view:'video',
      showMembers:false,
      showConfig:false,
      showDesktopSelector:false,
      members:[]
    }
  }

  registerCallbacks() {
    maxme.onMembers = (members) => {
      this.setState({members:members})
      if (this.videoView) {
        this.videoView.updateMembers(this.state.members);
      }

      this.state.members.forEach((member)=>{
        if (member.self) {
          this.uuid = member.uuid;
          this.setState({master:member.master});
          if (this.memberList) {
            this.memberList.setState({master:member.master});
          }
        }
      });

      if (this.memberList) {
        this.memberList.setState({members:this.state.members});
      }
    }

    maxme.onRoomStatus = (status) => {
      switch(status.view) {
      case 0:
        this.setState({view:'video'});
        break;
      case 1:
        this.setState({view:'desktop'});
      break;
      case 2:
        this.setState({view:'whiteboard'});
      break;
      }

      this.setState({duration:status.duration});
    }

    maxme.onJoined = (nick) => {
      message.info(nick + '加入会议');
    }

    maxme.onKickouted = (nick) => {
      message.info(nick +'被主持人踢出会议');
    }

    maxme.onLeaved = (nick) => {
      message.info(nick +'离开会议');
    }

    maxme.onDismissed = () => {
      this.props.onDismissed.call();
    }

    maxme.onTransfer = (uuid) => {
      if (uuid === this.uuid) {
        this.setState({master:true});
      }
    }

    maxme.desktop.onStarted = (uuid, self) => {
      if (self) {
        maxme.turn(1);
        remote.getCurrentWindow().setContentBounds();
      }
    }
  }

  componentWillUnmount() {
  }

  showDesktopSelector() {
    // this.setState({showDesktopSelector:true});
    maxme.desktop.snapshot();
  }

  hideDesktopSelector() {
    maxme.desktop.stopSnapshot();
    this.setState({showDesktopSelector:false});
  }

  startDesktopSharing() {
    hideDesktopSelector();
    setTimeout(()=>{
      maxme.desktop.startShare();
      maxme.turn(1);
    }, 1000);
  }

  changeView(to) {
    if (to === 'desktop') {
      this.showDesktopSelector();
    } else if (to === 'video') {
      this.setState({view:to});
    }
  }

  showMembers() {
    this.setState({showMembers:true});
  }

  hideMembers() {
    this.setState({showMembers:false});
  }

  showConfig() {
    this.setState({showConfig:true});
  }

  hideConfig() {
    this.setState({showConfig:false});
  }

  hangup() {
    this.props.hangup.call(this, this.state.master);
  }

  render() {
    const toolbarProps = {
      height: 90,
      view:this.state.view,
      changeView: this.changeView,
      hangup: this.hangup,
      config: this.showConfig,
      showMembers: this.showMembers
    };
    const memberListProps = {
      members:this.state.members, 
      master:this.state.master, 
      onClose:this.hideMembers
    };

    const configProps = {
      onClose:this.hideConfig
    };
    return (
      <div onClick={()=>{this.setState({showToolbar:!this.state.showToolbar})}} className='d-flex center' style={{height:document.documentElement.clientHeight}}>
        {this.state.showToolbar &&
          <Toolbar {...toolbarProps}/>
        }
        {this.state.showMembers &&
          <MemberList {...memberListProps}
            ref={(list) => {this.memberList = list;}}
          />
        }
        {this.state.showConfig &&
          <Settings {...configProps}/>
        }
        {this.state.showDesktopSelector &&
          <DesktopSourceSelector {...{onOk:this.startDesktopSharing, onCancel:this.hideDesktopSelector}} />
        }
        { this.state.view == 'video' &&
          <VideoView {...{nick:this.props.nick}}
          ref={
            (view)=>{
              if (view && this.videoView !== view) {
                this.videoView = view;
                if (this.state.members.length) {
                  this.videoView.updateMembers(this.state.members);
                }
              }
            }
          } />
        }
        { this.state.view == 'desktopSharing' &&

        }
      </div>
    );
  }
}

Meeting.propTypes = {
  onDismissed: PropTypes.func.isRequired,
  hangup: PropTypes.func.isRequired
};
export default Meeting;