Two React compontents for playing HLS streams or RTMP

StreamPlayer.jsx

import React from 'react';
import * as Redux from 'react-redux';
import VideojsPlayer from 'VideojsPlayer';
import videojs from 'video.js';
import 'videojs-contrib-hls';

require('!style-loader!css-loader!video.js/dist/video-js.css');

var StreamPlayer = React.createClass({
  // If the props change (via state), then change the player source
  componentWillReceiveProps(nextProps) {
    if(JSON.stringify(this.props.stream) !== JSON.stringify(nextProps.stream)) {
      var streamVideo = videojs('vjs_video_3');
      if (this.props.stream === 0) {
        streamVideo.src({type: "application/x-mpegURL", src:"http://<domain_and_route>/playlist.m3u8"});
      } else if (this.props.stream === 1) {
        streamVideo.src({type: "application/x-mpegURL", src:"http://<domain_and_route>/playlist.m3u8"});
      } else if (this.props.stream === 2) {
        streamVideo.src({type: "application/x-mpegURL", src:"http://<domain_and_route>/playlist.m3u8"});
      }
    }
  },
  render() {
    var {stream} = this.props;

    // specify the default first stream to load
    const videoJSOptions = {
      autoplay: true,
      controls: true,
      sources: [{
        src: "http://<domain_and_route>/playlist.m3u8",
        type: "application/x-mpegURL"
      }]
    };

    return(
      <div>
        <VideojsPlayer {...videoJSOptions} />
      </div>
    );
  }
});

// Connect Redux state to local component Props and export
export default Redux.connect(
  (state) => {
    return {
      stream: state.stream
    }
  }
)(StreamPlayer);

VideojsPlayer.jsx

import React from 'react';
import videojs from 'video.js';

var VideojsPlayer = React.createClass({
  componentDidMount() {
    //instantiate video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady(){
      console.log('onPlayerReady', this);
    });
  },
  //destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  },
  //wrap the player in a div with a 'data-vjs-player' attribute
  //so videojs won't create additional wrapper in the DOM
  //see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div>
        <video ref={ node => this.videoNode = node } className="video-js"></video>
      </div>
    );
  }
});

module.exports = VideojsPlayer;