React Awesome Video Player

index.html

<main id="app"></main>

react-awesome-video-player.markdown

React Awesome Video Player

A Pen by Harmandeep Singh on CodePen.

License.

script.babel

const VIDEOS = {
  deer: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4',
  snail: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4',
  cat: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4',
  spider: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-eek.mp4'
};



//--------------------------------------------
const App = React.createClass({
  getInitialState() {
    return { src: VIDEOS.deer};
  },
  
  chooseVideo(newVideo) {
    this.setState({
      src: VIDEOS[newVideo]
    });
  },

  render() {
    return (
      <div>
        <h1>React Video Player</h1>
        <Menu chooseVideo={this.chooseVideo} />
        <Video src={this.state.src} />
      </div>
    );
  }
});



//--------------------------------------------
const Video = React.createClass({
  render() {
    return (
      <div>
        <video 
          controls 
          autoPlay
          src={this.props.src} />
      </div>
    );
  }
});



//--------------------------------------------
const Menu = React.createClass({
  handleClick(e) {
    const text = e.target.value;
    this.props.chooseVideo(text);
  },
  
  render() {
    return (
      <form onClick={this.handleClick}>
        <input type="radio" name="src" value="deer"/> Deer
        <input type="radio" name="src" value="snail" /> Snail
        <input type="radio" name="src" value="cat" /> Cat
        <input type="radio" name="src" value="spider" /> Spider
      </form>
    );
  }
});



//--------------------------------------------
ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>

style.css

html, body {
  margin: 0;
  background: #152A39;
  color: #FEFFFE;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  transition: all 0.7s ease-out;
}

#app div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-transform: uppercase;
}

input {
	padding: 5px;
	font-size: 16px;
}

input:not(:first-of-type) {
	margin-left: 20px;
}

video {
	margin: 30px;
	width: 800px;
	max-width: 90%;
  border-radius: 10px;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />