Camera-render.js

render() {
  // flashes is an array of unique flash-IDs so we can render our flash-effect DOM elements
  // we do some small little CSS effects to make it feel more alive
  const { flashes, cameraSwitch } = this.state;
  const { isSaving } = this.props;
  return (<div className="camera" onTouchStart={this.evalDoubleTap}>
    <div className="flash-container">
      {flashes.map((flash) => <div className="imageWrap shutterClick" key={flash} />)}
    </div>
    <div className="camera-controls">
      <div className="camera-controls--left">
        <div className={`img-container ${cameraSwitch ? 'camera-spin' : '' }`}>
          <img src={flipCamera} alt="switch camera" onClick={this.switchCamera}/>
        </div>
      </div>
      <div className="camera-controls--center">
        <div className="camera-controls--take-photo" onClick={this.takePhoto} />
      </div>
      <div className={`camera-controls--right ${flashes.length ? 'photos-bounce' : ''}`}>
        <svg className={`${isSaving ? 'photos-spin' : ''}`} id="Capa_1" x="0px" y="0px" viewBox="0 0 58.013 58.013" onClick={this.switchPanel}>
        </svg>
      </div>
    </div>
  </div>);
}