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

The electron wrap of MaxME.

import React, { Component } from "react";
import VideoRender from '../presentational/VideoRender.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import PropTypes from "prop-types";

class VideoView extends Component {
  constructor(props) {
    super(props);
    this.mainRender = null;
    this.state = {
      subscribed: [],
      onlySelf: true,
      toolbar: false,
      selfName:this.props.nick
    };
  }

  componentDidMount() {
    
  }

  updateMembers(members) {
    if (!members) return;

    if (members.length > 1) {
      this.setState({onlySelf:false});
    } else {
      this.setState({onlySelf:true});
    }
    
    let subs = this.state.subscribed;
    let found = false;
    subs.forEach((item, index)=>{
      found = false;
      members.forEach((member)=> {
        if (item.uuid == member.uuid) {
          found = true;
        }
      });

      if (!found) {
        subs.splice(index);
      }
    });

    if (subs.length < 3 && members.length > subs.length && members.length > 2) {
      members.forEach((member) =>{
        found = false;
        subs.forEach((item) => {
          if(member.uuid == item.uuid) {
            found = true;
          }
        });
        if (!found && member.video && member.self == false) {
          subs.push(member);
        }
      });
    }

    if (subs.length > 3) {
      const rmLength = subs.length - 3;
      subs.splice(3, rmLength);
    }

    this.setState({subscribe:subs});

    if (this.mainRender) {
      if (this.state.onlySelf === true) {
        this.mainRender.unsubscribeActive();
        this.mainRender.preview();
      } else {
        this.mainRender.stopPreview();
        this.mainRender.subscribeActive();
      }
    }

  }

  render() {
    const smallRenderProps = {
      width:208,
      height:117,
      zIndex:100,
      stateBar:true
    };
    const smallRenderStyle = {
      marginLeft: 3
    };
    
    const wrapStyle = {
      onlySelf : {
        margin:'auto',
        height:630
      },
      towRow : {
        margin:'auto',
        height:630, 
        paddingTop:'15px', 
        textAlign:'center'
      }
    }

    return (
      <div className="position-relative" style={this.state.onlySelf ? wrapStyle.onlySelf : wrapStyle.towRow}>
        <div style={{display:'inline-block'}}>
          {(this.state.onlySelf === false) &&
            <div className="float-left">
              <VideoRender {...smallRenderProps} ref={
                (render)=>{
                  if (render && render != this.previewRender) {
                    this.previewRender = render;
                    this.previewRender.preview();
                    this.previewRender.setState({displayName:this.state.selfName});
                    if (this.mainRender) {
                      this.mainRender.stopPreview();
                      this.mainRender.subscribeActive(720);
                    }
                  }
                }
              }/>
            </div>
          }
          {
            this.state.subscribed.map((member)=>{
              return (
                <div className="float-left" key={member.uuid} style={smallRenderStyle}>
                  <VideoRender {...smallRenderProps} ref={
                    (render) => {
                      if (render) {
                        render.setState({displayName:member.nickname, audioMuted:!member.audio, muted:!member.video});
                        render.subscribe(member.uuid, 180);
                      }
                    }
                  }/>
                </div>
              );
            })
          }
        </div>
        <VideoRender width={this.state.onlySelf === true ? 1100 : 848} height={this.state.onlySelf === true ? 600 : 477} zIndex={100} stateBar={true}
          ref={(render)=>{
            if (render && render !== this.mainRender) {
              this.mainRender = render;
            }
          }
        } />
      </div>
    );
  }
}

export default VideoView;