gestione visualizzazione dopo 15 secondi

src/App.js

@@ -17,16 +17,12 @@ class App extends React.Component {
 				</Row>
 				<Row className="justify-content-center bg-black">
 					<Col xs="12" sm="6">
-						<Switch>
+							<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
-							<Route path={["/video/:id",'']} component={VideoPlayer} />
-							{/* <Route component={VideoPlayer} /> */}
-							{/* <Route path='/search/:q/:token?' component={Search} />  */}
-						</Switch>
 					</Col>
 				</Row>
 				<Row className='scrollable'>
 					<Switch>				
-					<Route path={["/video/:id","/search/:query"]} component={VideoInfo} />
+					<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
 					<Route exact path='/' component={VideoList} />
 					<Route render={() => <div>URL not found</div>}/>
 					</Switch>

src/VideoInfo.js

@@ -57,15 +57,14 @@
       // console.info('nextProps',nextProps);
       // console.info('nextState',nextState);
       if(nextProps.match.params.id === this.state.videoId){}
-      else{
+      else if( nextProps.match.params.id){
         this.setState({videoId: nextProps.match.params.id});
-        
       }
     }
 
     componentDidUpdate(prevProps, prevState) {
-      console.info('prevProps',prevProps);
+      // console.info('prevProps',prevProps);
-      console.info('prevState',prevState);
+      // console.info('prevState',prevState);
     }
 
     // componentWillUnmount() {

src/VideoPlayer.js

@@ -1,7 +1,6 @@
 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", "warn"] }] */
-/* eslint no-console: ["error", { allow: ["info", "error"] }] */
 
 class VideoPlayer extends Component {
 	constructor(props) {
@@ -16,29 +15,43 @@ class VideoPlayer extends Component {
 					modestbranding: 1
 				}
 			},
-			videoId: '0J2QdDbelmY'
+			videoId: '0J2QdDbelmY',
+			promise1: null,
+			promise2: null,
+			outsideReject1: 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 };
+			});
 		}
-	componentWillUpdate(nextProps, nextState){
-		if(nextProps.match.params.id === this.props.match.params.id){}
-		else{
-			this.setState((state, props) => { return { videoId: props.match.params.id  }});
 	}
 
+	componentWillReceiveProps(nextProps) {
+		// if (nextProps.location !== this.props.location) {}
 	}
 
-	componentWillMount(){
+	componentWillMount() {
-		if(this.props.match.params.id)
+		if (this.props.match.params.id)
-			this.setState((state, props) => { return { videoId: props.match.params.id  }});
+			this.setState((state, props) => {
-			
+				return { videoId: props.match.params.id };
+			});
 	}
 
+	componentWillUnmount() {}
+
 	render() {
 		return (
 			<React.Fragment>
 				<YouTube
 					opts={this.state.opt}
-					// this.props.match.params.id 
 					videoId={this.state.videoId}
 					onReady={this._onReady}
 					onPlay={this._onPlay}
@@ -50,27 +63,72 @@ class VideoPlayer extends Component {
 			</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());
 	}
+
+	_onPlay(event) {}
+
 	_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.data)
+		let timerId1, timerId2;
+		if (parseInt(event.data) === -1) {
+			this.setState({
+				promise2: new Promise((resolve, reject) => {
+					timerId2 = window.setInterval(() => {
+						switch (parseInt(event.target.getPlayerState())) {
+							case 1:
+								resolve(1);
+								break;
+							case 5:
+								resolve(5);
+								break;
+							default:
+								break;
+						}
+					}, 500);
+					this.setState({outsideReject2: reject });
+					
+				})
+			});
+			this.state.promise2.then(msg => {
+				window.clearInterval(timerId2);
+				switch (parseInt(msg)) {
+					case 1:
+						this.setState({
+							promise1: new Promise((resolve, reject) => {
+								timerId1 = window.setInterval(() => {
+									if (event.target.getCurrentTime() > 15)
+										resolve(event.target.j.videoData.video_id);
+								}, 1000);
+								this.setState({ outsideReject1: reject });
+							})
+						});
+						this.state.promise1
+							.then(
+								risultato => {
+									console.info(risultato);
+									// post request to local db
+									// local storage logic for recent reccomender
+									clearInterval(timerId1);
+								},
+								error => console.info(error)
+							)
+							.finally(() => this.setState({ promise1: null }));
+						break;
+					case 5:
+						if (this.state.promise1) 
+							this.state.outsideReject1('Video changed');
+						break;
+					default:
+						break;
+				}
+			});
+		}
 	}
 }
 

src/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter, BrowserRouter } from 'react-router-dom';
 
 ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));
 registerServiceWorker();