Archived
139 lines
3.7 KiB
JavaScript
139 lines
3.7 KiB
JavaScript
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 React.Component {
|
|
state = {
|
|
opt: {
|
|
// height: '390',
|
|
// width: '640',
|
|
playerVars: {
|
|
// https://developers.google.com/youtube/player_parameters
|
|
autoplay: 0,
|
|
modestbranding: 1,
|
|
fs: 0,
|
|
iv_load_policy:3,
|
|
rel: 0,
|
|
origin//: 'http://site1854.tw.cs.unibo.it'
|
|
}
|
|
},
|
|
promise1: null,
|
|
promise2: null,
|
|
outsideReject1: null,
|
|
outsideReject2: null
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<YouTube
|
|
opts={this.state.opt}
|
|
videoId={this.props.videoId}
|
|
onReady={this._onReady}
|
|
onPlay={this._onPlay}
|
|
onError={this._onError}
|
|
onStateChange={this._onStateChange}
|
|
className="embed-responsive-item"
|
|
containerClassName="embed-responsive embed-responsive-16by9"
|
|
/>
|
|
);
|
|
}
|
|
|
|
// access to player in all event handlers via event.target
|
|
_onError(event) {
|
|
console.error('Player error: ', event);
|
|
}
|
|
|
|
_onPlay(event) {}
|
|
|
|
_onReady(event) {}
|
|
|
|
_onStateChange(event) {
|
|
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(
|
|
videoIdWatched => {
|
|
// post request to local db
|
|
axios
|
|
.post('http://site1854.tw.cs.unibo.it/videotrack', {
|
|
id: videoIdWatched.toString()
|
|
})
|
|
.then(
|
|
response => console.info(response.data),
|
|
error => this.setState({error})//console.error(error, videoIdWatched.toString())
|
|
);
|
|
// local storage logic for recent reccomender//tmp è il video che devo inserire sulla lista
|
|
let tmp = JSON.parse(localStorage.getItem('lastWatched'))
|
|
let j=tmp.findIndex(el=>el.id.toString()===videoIdWatched.toString())
|
|
if (j<0){
|
|
tmp.push({
|
|
'id': videoIdWatched.toString(),
|
|
'lastWatched' : new Date(),
|
|
'timesWatched' : 1
|
|
});}
|
|
else {
|
|
tmp[j].timesWatched++;
|
|
tmp[j].lastWatched= new Date();
|
|
}
|
|
|
|
tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime());
|
|
|
|
|
|
|
|
localStorage.setItem('lastWatched', JSON.stringify(tmp));
|
|
//.finally(()=>{})
|
|
clearInterval(timerId1);
|
|
},
|
|
error => console.error(error)
|
|
)
|
|
|
|
.finally(() => this.setState({ promise1: null, outsideReject1: null }));
|
|
break;
|
|
case 5:
|
|
if (this.state.promise1)
|
|
this.state.outsideReject1('Video changed');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
})
|
|
.finally(()=>{this.setState({promise2: null, outsideReject2: null})});
|
|
}
|
|
}
|
|
_onStateChange = this._onStateChange.bind(this);
|
|
}
|
|
|
|
export default withRouter(VideoPlayer);
|