Archived
142 lines
3.4 KiB
JavaScript
142 lines
3.4 KiB
JavaScript
import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
|
|
import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
|
|
import axios from 'axios';
|
|
/* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */
|
|
|
|
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',
|
|
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 };
|
|
});
|
|
}
|
|
}
|
|
|
|
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}
|
|
onReady={this._onReady}
|
|
onPlay={this._onPlay}
|
|
onError={this._onError}
|
|
onStateChange={this._onStateChange}
|
|
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);
|
|
}
|
|
|
|
_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://localhost:8000/videotrack', {
|
|
id: videoIdWatched.toString()
|
|
})
|
|
.then(
|
|
response => console.info(response.data),
|
|
error => console.info(error)
|
|
);
|
|
// 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;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
export default VideoPlayer;
|