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

The electron wrap of MaxME.

import React, { Component } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faMicrophoneAlt} from '@fortawesome/free-solid-svg-icons';

class MicrophoneIndicator extends Component{
  constructor(props) {
    super(props);
    this.state = {
      volume: 0
    };
  }

  componentWillUnmount() {
    this.setState = (state,callback)=>{
      return;
    };
  }

  render() {
    return (
      <div style={{position:'relative', height:this.props.height, paddingTop:0, paddingBottom:0}}>
        <span style={{position:'absolute', overflow: 'hidden', height:((32767 - this.state.volume)*this.props.height/32767)}}><FontAwesomeIcon icon={faMicrophoneAlt} color={this.props.defaultColor} /></span>
        <FontAwesomeIcon icon={faMicrophoneAlt} color={this.props.frontColor} />
      </div>
    );
  }
};

MicrophoneIndicator.defaultProps = {
  height: 20,
  frontColor: 'green',
  defaultColor: 'white'
};

export default MicrophoneIndicator;