spee.ch/react/containers/PublishThumbnailInput/view.jsx

import React from 'react';

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  let byteString = atob(dataURI.split(',')[1]);
  // separate out the mime component
  let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  // write the bytes of the string to a typed array
  let ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], {type: mimeString});
}

class PublishThumbnailInput extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      videoSource   : null,
      error         : null,
      sliderMinRange: 1,
      sliderMaxRange: null,
      sliderValue   : null,
    };
    this.handleSliderChange = this.handleSliderChange.bind(this);
    this.handleVideoLoadedData = this.handleVideoLoadedData.bind(this);
    this.setThumbnailWithSnapshot = this.setThumbnailWithSnapshot.bind(this);
  }
  componentDidMount () {
    console.log('thumbnail input did mount');
    const { claim, file, host, thumbnailChannel } = this.props;
    this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel);
    this.setVideoSource(file);
  }
  componentWillReceiveProps (nextProps) {
    // if file changes
    if (nextProps.file !== this.props.file) {
      const { file } = nextProps;
      this.setVideoSource(file);
    };
    // if claim changes
    if (nextProps.claim !== this.props.claim) {
      const { claim, host, thumbnailChannel } = nextProps;
      this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel);
    }
  }
  setThumbnailClaimAndUrl (claim, host, thumbnailChannel) {
    const url = `${host}/${thumbnailChannel}/${claim}-thumb.png`;
    this.props.onThumbnailChange(`${claim}-thumb`, url);
  }
  setVideoSource (file) {
    const previewReader = new FileReader();
    previewReader.readAsDataURL(file);
    previewReader.onloadend = () => {
      this.setState({videoSource: previewReader.result});
    };
  }
  handleVideoLoadedData (event) {
    const duration = event.target.duration;
    // set the slider
    this.setState({
      sliderMaxRange: duration * 100,
      sliderValue   : duration * 100 / 2,
    });
    // update the current time of the video
    let video = document.getElementById('video-thumb-player');
    video.currentTime = duration / 2;
  }
  handleSliderChange (event) {
    const value = parseInt(event.target.value);
    // update the slider value
    this.setState({
      sliderValue: value,
    });
    // update the current time of the video
    let video = document.getElementById('video-thumb-player');
    video.currentTime = value / 100;
  }
  setThumbnailWithSnapshot () {
    // take a snapshot
    const snapshot = this.takeSnapShot();
    // set the thumbnail in redux store
    if (snapshot) {
      this.props.onThumbnailFileSelect(snapshot);
    }
  }
  takeSnapShot () {
    let video = document.getElementById('video-thumb-player');
    let canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataUri = canvas.toDataURL();
    return dataURItoBlob(dataUri);
  }
  render () {
    const { error, videoSource, sliderMinRange, sliderMaxRange, sliderValue } = this.state;
    return (
      <div>
        <div>
          { error ? (
            <p className='info-message--failure'>{error}</p>
          ) : (
            <p className='info-message'>Use slider to set thumbnail:</p>
          )}
          <video
            id='video-thumb-player'
            preload='metadata'
            muted
            style={{display: 'none'}}
            playsInline
            onLoadedData={this.handleVideoLoadedData}
            src={videoSource}
            onTimeUpdate={this.setThumbnailWithSnapshot}
          />
          {
            sliderValue ? (
              <div className='slide-container'>
                <input
                  type='range'
                  min={sliderMinRange}
                  max={sliderMaxRange}
                  value={sliderValue}
                  className='slider'
                  onChange={this.handleSliderChange}
                />
              </div>
            ) : (
              <p>loading slider... </p>
            )
          }
        </div>
      </div>
    );
  }
}

export default PublishThumbnailInput;