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

The electron wrap of MaxME.

import {Drawer, List, Button, Tooltip} from 'antd';
import React, {Component} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faVideoSlash, faMicrophoneAltSlash, faVideo, faMicrophoneAlt, faUserTimes} from '@fortawesome/free-solid-svg-icons';
import PropTypes from "prop-types";
import 'bootstrap/dist/css/bootstrap.min.css';

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

    this.state = {
      members : this.props.members,
      master: this.props.master
    }
  }

  mute(uuid) {
    maxme.audio.mute(uuid);
  }

  demute(uuid) {
    maxme.audio.demute(uuid);
  }

  muteVideo(uuid) {
    maxme.video.mute(uuid);
  }

  demuteVideo(uuid) {
    maxme.video.demute(uuid);
  }

  kickout(uuid) {
    maxme.kickout(uuid);
  }

  muteAll() {
    maxme.audio.muteAll();
  }

  demuteAll() {
    maxme.audio.demuteAll();
  }

  muteAllVideo() {
    maxme.video.muteAll();
  }

  demuteAllVideo() {
    maxme.video.demuteAll();
  }

  render() {
    const style = {
      action: {
        marginRight: 5
      },
      label: {
        pointerEvents:'none',
        marginRight:5
      },
      actionWrap:{
        paddingTop:15
      },
      button:{
        marginLeft:5,
        marginRight:5
      }
    };
    return (
      <div onClick={(e) => {e.stopPropagation();}}>
        <Drawer
          title={"与会者"}
          placement={'left'}
          closable={false}
          onClose={this.props.onClose}
          visible={true}
        >
          <List
            size="small"
            dataSource={this.state.members}
            renderItem={member => (
              <List.Item
                actions={[
                  <div style={style.actionWrap} >
                    {(!member.audio || (member.self && maxme.audio.localMuted)) ? 
                      <a onClick={() =>{this.state.master ? this.demute(member.uuid) : null}}style={this.state.master ? style.action : style.label} ><FontAwesomeIcon icon={faMicrophoneAltSlash} fixedWidth/></a>
                      :<a onClick={() =>{this.state.master ? this.mute(member.uuid) : null}} style={this.state.master ? style.action : style.label} ><FontAwesomeIcon icon={faMicrophoneAlt}  fixedWidth/></a> 
                    }
                    {(!member.video || (member.self && maxme.video.muted))  ?
                      <a onClick={() =>{this.state.master ? this.demuteVideo(member.uuid) : null}} style={this.state.master ? style.action : style.label} ><FontAwesomeIcon icon={faVideoSlash} fixedWidth/></a>
                      :<a onClick={() =>{this.state.master ? this.muteVideo(member.uuid) : null}} style={this.state.master ? style.action : style.label} ><FontAwesomeIcon icon={faVideo} fixedWidth/></a> 
                    }
                    {
                      (this.state.master && member.self === false) &&
                      <a onClick={() =>{this.kickout(member.uuid);}} style={style.action}><FontAwesomeIcon icon={faUserTimes} fixedWidth/></a>
                    }
                  </div>
                ]}
              >
                {member.nickname}
              </List.Item>)
            }
          />
          <div style={{position:'absolute', bottom:'15px', paddingLeft:'20px'}}>
            <Tooltip placement='topLeft' title='静音所有' arrowPointAtCenter>
              <Button type='default' shape='circle' style={style.button} onClick={()=>{this.muteAll();}}><FontAwesomeIcon icon={faMicrophoneAltSlash} fixedWidth/></Button>
            </Tooltip>
            <Tooltip placement='top' title='取消静音所有' arrowPointAtCenter>
              <Button type='default' shape='circle' style={style.button} onClick={()=>{this.demuteAll();}}><FontAwesomeIcon icon={faMicrophoneAlt} fixedWidth/></Button>
            </Tooltip>
            <Tooltip placement='top' title='静画所有' arrowPointAtCenter>
              <Button type='default' shape='circle' style={style.button} onClick={()=>{this.muteAllVideo();}}><FontAwesomeIcon icon={faVideoSlash} fixedWidth/></Button>
            </Tooltip>
            <Tooltip placement='topRight' title='取消静画所有' arrowPointAtCenter>
              <Button type='default' shape='circle' style={style.button} onClick={()=>{this.demuteAllVideo();}}><FontAwesomeIcon icon={faVideo} fixedWidth/></Button>
            </Tooltip>
          </div>
        </Drawer>
      </div>
    );
  }
}

MemberList.propTypes ={
  members: PropTypes.array.isRequired,
  master: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired
};

export default MemberList;