maxme-electron/react-sample/src/js/components/presentational/Toolbar.jsx

The electron wrap of MaxME.

import React, { Component } from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faMicrophoneAlt, faMicrophoneAltSlash, faVideo, faVideoSlash, faPhoneSlash, faDesktop, faPlay, faCogs, faUsers} from '@fortawesome/free-solid-svg-icons';

class Toolbar extends Component
{
  constructor(props) {
    super(props);
    this.state = {
      audioMuted : maxme.audio.localMuted ,
      videoMuted : maxme.video.muted
    }
  }

  muteAudio() {
    maxme.audio.muteLocal();
    this.setState({audioMuted:maxme.audio.localMuted })
  }

  demuteAudio() {
    maxme.audio.demuteLocal();
    this.setState({audioMuted:maxme.audio.localMuted })
  }

  muteVideo() {
    maxme.video.mute();
    this.setState({videoMuted:maxme.video.muted })
  }

  demuteVideo() {
    maxme.video.demute();
    this.setState({videoMuted:maxme.video.muted })
  }

  render() {
    const styles = {
      height:this.props.height,
      position: 'absolute',
      left:'1px',
      right:'1px',
      bottom:'1px',
      background: 'rgba(0, 0, 0, 0.7)',
      color:'white',
      paddingTop:'15px',
      zIndex:1000
    };
    return (
      <div style={styles}>
        <div className='float-left btn-group' role='group' style={{paddingLeft:'10px'}}>
          {this.props.view == 'video' &&
            <button onClick={this.props.changeView.bind(this, 'desktop')} className='btn btn-link text-white' style={{marginLeft:'15px'}}><FontAwesomeIcon icon={faDesktop} size='2x' fixedWidth /><br/>共享桌面</button>
          }
          {this.props.view == 'desktop' &&
            <button onClick={this.props.changeView.bind(this, 'video')} className='btn btn-link text-white' style={{marginLeft:'15px'}}><FontAwesomeIcon icon={faVideo} size='2x' fixedWidth /><br/>视 频</button>
          }
          <button onClick={() => {this.props.showMembers();}} className='btn btn-link text-white' style={{marginLeft:'15px'}}><FontAwesomeIcon icon={faUsers}  size='2x' fixedWidth /><br/>与会者</button>
          <button onClick={() => {this.props.config.call();}} className='btn btn-link text-white' style={{marginLeft:'15px'}}><FontAwesomeIcon icon={faCogs} size='2x' fixedWidth /><br/>设 置</button>
        </div>
        <div className='float-right btn-group' role='group' style={{paddingRight:'10px'}}>
          {this.state.audioMuted 
            ?<button onClick={() => {this.demuteAudio();}} className='btn btn-link text-white' style={{marginRight:'15px'}}><FontAwesomeIcon icon={faMicrophoneAltSlash} size='2x' fixedWidth /><br/>取消静音</button>
            :<button onClick={() => {this.muteAudio();}} className='btn btn-link text-white' style={{marginRight:'15px'}}><FontAwesomeIcon icon={faMicrophoneAlt} size='2x' fixedWidth /><br/>静 音</button>
          }
          {this.state.videoMuted 
            ?<button onClick={()=>{this.demuteVideo();}} className='btn btn-link text-white' style={{marginRight:'15px'}}><FontAwesomeIcon icon={faVideoSlash}  size='2x' fixedWidth /><br/>开启视频</button>
            :<button onClick={()=>{this.muteVideo();}} className='btn btn-link text-white' style={{marginRight:'15px'}}><FontAwesomeIcon icon={faVideo} size='2x' fixedWidth /><br/>关闭视频</button>
          }
          <button onClick={()=>{this.props.hangup.call();}} className='btn btn-link text-danger' style={{marginRight:'15px'}}>
            <FontAwesomeIcon icon={faPhoneSlash} size='2x' rotate={270} fixedWidth />
            <br/>退出会议
          </button>
        </div>
      </div>
    );
  }
}


Toolbar.propTypes = {
  height: PropTypes.number.isRequired,
  view: PropTypes.string.isRequired,
  changeView : PropTypes.func.isRequired,
  hangup : PropTypes.func.isRequired,
  showMembers : PropTypes.func.isRequired,
  config : PropTypes.func.isRequired
}

export default Toolbar;