tecnologiabanana/src/VideoPlayer.js

import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
import { stringify } from 'querystring';
/* eslint no-console: ["error", { allow: ["info", "error"] }] */

class VideoPlayer extends Component {
	constructor(props) {
		super(props);
		this.state = {
			opt: {
				// height: '390',
				// width: '640',
				playerVars: {
					// https://developers.google.com/youtube/player_parameters
					autoplay: 0,
					modestbranding: 1
				}
			},
			videoId: '0J2QdDbelmY'
		};
	}
	componentWillUpdate(nextProps, nextState){
		if(nextProps.match.params.id === this.props.match.params.id){}
		else{
			this.setState((state, props) => { return { videoId: props.match.params.id  }});
		}

	}

	componentDidMount(){
		if(this.props.match.params.id)
			this.setState((state, props) => { return { videoId: props.match.params.id  }});
			
	}

	render() {
		return (
			<React.Fragment>
				<YouTube
					opts={this.state.opt}
					// this.props.match.params.id 
					videoId={this.state.videoId} 
					onReady={this._onReady}
					onPlay={this._onPlay}
					onError={this._onError}
					onStateChange={this._onStateChange}
					className="embed-responsive-item"
					containerClassName="embed-responsive embed-responsive-16by9"
				/>
			</React.Fragment>
		);
	}
	_onError(event) {
		console.error('on error', event);
		// console.error(event);
	}
	_onPlay(event) {
		// console.info('on play',event.target.getCurrentTime(), event);
		// console.info(event.target.getApiInterface());
		// console.warn(event.target.getDuration());
		// console.info('go');
		// while(event.target.getCurrentTime() < 15){}
		// console.info(event.target.getCurrentTime());
	}
	_onReady(event) {
		// access to player in all event handlers via event.target
		// event.target.pauseVideo();
		// console.info('on ready', event);
		// console.warn(event);
		// console.warn(event.target.getDuration());
	}
	_onStateChange(event) {
		// console.info('statechange: ', event)
	}
}

export default VideoPlayer;