From a55cc2d41440eb1c3dc85827fe3d1af83e72199f Mon Sep 17 00:00:00 2001 From: matteo Date: Sat, 1 Dec 2018 02:44:31 +0100 Subject: [PATCH] gestione visualizzazione dopo 15 secondi --- src/App.js | 8 +--- src/VideoInfo.js | 7 ++- src/VideoPlayer.js | 114 ++++++++++++++++++++++++++++++++++----------- src/index.js | 2 +- 4 files changed, 92 insertions(+), 39 deletions(-) diff --git a/src/App.js b/src/App.js index 1b83f76..c6bb2af 100644 --- a/src/App.js +++ b/src/App.js @@ -17,16 +17,12 @@ class App extends React.Component { - - - {/* */} - {/* */} - + - +
URL not found
}/> diff --git a/src/VideoInfo.js b/src/VideoInfo.js index d2434b7..1dc6f4a 100644 --- a/src/VideoInfo.js +++ b/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('prevState',prevState); + // console.info('prevProps',prevProps); + // console.info('prevState',prevState); } // componentWillUnmount() { diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js index 8c5eb00..33ba5ad 100644 --- a/src/VideoPlayer.js +++ b/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"] }] */ +/* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */ class VideoPlayer extends Component { constructor(props) { @@ -16,30 +15,44 @@ 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{ - this.setState((state, props) => { return { videoId: props.match.params.id }}); + 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 }; + }); } - } - componentWillMount(){ - if(this.props.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 ( ); } + _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; + } + }); + } } } diff --git a/src/index.js b/src/index.js index 806b6b2..63e5d00 100644 --- a/src/index.js +++ b/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(, document.getElementById('root')); registerServiceWorker(); \ No newline at end of file