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

The electron wrap of MaxME.

import React, {Component} from 'react';
import {Modal, Spin, Divider} from 'antd';
import "../../../css/thumbnail.css";
import PropTypes from "prop-types";
import {remote, nativeImage} from "electron";

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

    this.onOk = this.onOk.bind(this);
    this.source = undefined;

    const window = remote.getGlobal('mainWin');
    maxme.desktop.excludeWin(window);
    maxme.desktop.onThumbnail = (buf, id, w, h) => {
      this.onThumbnail(buf, id, w, h);
    }
    
    this.state = {
      screens: [],
      windows: []
    }
  }

  componentDidMount() {
    this.sources();
  }

  sources() {
    let screenSources = [];
    let windowSources = [];
    const rlt = maxme.desktop.sources();
    if (0 === rlt.errno) {
      for(var i in rlt.sources) {
        const source = rlt.sources[i];
        if (source.type === 'screen') {
          screenSources.push(source);
        } else {
          windowSources.push(source);
        }
      }

      this.setState({screens:screenSources, windows:windowSources});      
    }

    setTimeout(() => {
      rlt.sources.forEach((src)=>{
        maxme.desktop.snapshot();
      });
    }, 100);
  }

  onThumbnail(buf, id, w, h) {
    if (buf) {
      let image = nativeImage.createFromBuffer(buf, {width:w, height:h});
      let screenSources = this.state.screens;
      let windowSources = this.state.windows;

      screenSources.forEach((src)  =>{
        if (src.id === id) {
          src.thumbnail = image;
        }
      });

      windowSources.forEach((src)  =>{
        if (src.id === id) {
          src.thumbnail = image;
        }
      });

      this.setState({screens:screenSources, windows:windowSources});
    }
  }

  onOk() {
    maxme.desktop.stopSnapshot();
    maxme.desktop.selectSource(this.source);
    this.props.onOk.call(this);
  }

  render() {
    return (
      <Modal
        title="选择要共享的窗口"
        closable={false}
        visible={true}
        width={800}
        centered
        onCancel={this.props.onCancel}
        onOk={this.onOk}
        destroyOnClose={true}
        onClick={(e) => {e.stopPropagation();}}
      >
      <div className='thumbnail-list'>
        <div className="row">
          {this.state.screens.length === 0 
            ? <Spin size="large" spinning={true} />
            : this.state.screens.map(screen => {
              return (
                <div key={screen.id} className='col-3 thumbnail-wrap' onClick={()=>{this.source=screen.id;}}>
                  <img className='thumbnail-img' src={screen.thumbnail ? screen.thumbnail.resize({widht:180, height:90}).toDataURL() : ""} />
                  <label>{screen.title}</label>
                </div>
              );
              })
          }
        </div>
        <Divider />
        <div className="row">
          {this.state.windows.length === 0 
            ? <Spin size="large" spinning={true} />
            : this.state.windows.map(win => {
              return (
                <div key={win.id} className='col-3 thumbnail-wrap' onClick={()=>{this.source=win.id;}}>
                  <img className='thumbnail-img' src={win.thumbnail ? win.thumbnail.resize({widht:180, height:90}).toDataURL() : ""} />
                  <label>{win.title}</label>
                </div>
              );
              })
          }
        </div>       
      </div>
      </Modal>
    );
  }
};

DesktopSourceSelector.protoTypes = {
  onOk:PropTypes.func.isrequired,
  onCancel:PropTypes.func.isrequired
};

export default DesktopSourceSelector;