succo ace

src/VideoPlayer.js

@@ -1,12 +1,11 @@
-import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react'; // eslint-disable-line no-unused-vars
 import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
 import axios from 'axios';
+import { withRouter } from 'react-router-dom';
 /* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */
 
-class VideoPlayer extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
+class VideoPlayer extends React.Component {
+	state = {
 			opt: {
 				height: '390',
 				width: '640',
@@ -16,44 +15,17 @@ class VideoPlayer extends Component {
 					modestbranding: 1
 				}
 			},
-			videoId: '0J2QdDbelmY',
 			promise1: null,
 			promise2: null,
 			outsideReject1: null,
-			outsideReject2: null
+			outsideReject2: null	
 		};
-		this._onPlay = this._onPlay.bind(this);
-		this._onStateChange = this._onStateChange.bind(this);
-		this._onReady = this._onReady.bind(this);
-	}
-	componentWillUpdate(nextProps, nextState) {
-		if (nextProps.match.params.id === this.props.match.params.id) {
-		} else if (nextProps.match.params.id) {
-			this.setState((state, props) => {
-				return { videoId: props.match.params.id };
-			});
-		}
-	}
-
-	componentWillReceiveProps(nextProps) {
-		// if (nextProps.location !== this.props.location) {}
-	}
-
-	componentWillMount() {
-		if (this.props.match.params.id)
-			this.setState((state, props) => {
-				return { videoId: props.match.params.id };
-			});
-	}
-
-	componentWillUnmount() {}
-
+		
 	render() {
 		return (
-			<React.Fragment>
 				<YouTube
 					opts={this.state.opt}
-					videoId={this.state.videoId}
+					videoId={this.props.videoId}
 					onReady={this._onReady}
 					onPlay={this._onPlay}
 					onError={this._onError}
@@ -61,13 +33,12 @@ class VideoPlayer extends Component {
 					className="embed-responsive-item"
 					containerClassName="embed-responsive embed-responsive-16by9"
 				/>
-			</React.Fragment>
 		);
 	}
 	
 	// access to player in all event handlers via event.target
 	_onError(event) {
-		console.error('Error: ', event);
+		console.error('Player error: ', event);
 	}
 
 	_onPlay(event) {}
@@ -136,6 +107,7 @@ class VideoPlayer extends Component {
 			});
 		}
 	}
+	_onStateChange = this._onStateChange.bind(this);
 }
 
-export default VideoPlayer;
+export default withRouter(VideoPlayer);