diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js index 09ca05043..6a08d83c5 100644 --- a/src/routes/Player/Video/Video.js +++ b/src/routes/Player/Video/Video.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import hat from 'hat'; import HTMLVideo from './stremio-video/HTMLVideo'; import YouTubeVideo from './stremio-video/YouTubeVideo'; @@ -7,54 +8,38 @@ class Video extends Component { constructor(props) { super(props); - this.video = null; this.containerRef = React.createRef(); + this.id = `video-${hat()}`; + this.video = null; + } + + componentDidMount() { + const Video = this.selectVideoImplementation(); + this.video = new Video(this.containerRef.current); + this.video.on('ended', this.props.onEnded); + this.video.on('error', this.props.onError); + this.video.on('propValue', this.props.onPropValue); + this.video.on('propChanged', this.props.onPropChanged); + this.video.constructor.manifest.props.forEach((propName) => { + this.dispatch('observeProp', propName); + }); + this.dispatch('command', 'load', this.props.stream, this.props.extra); } shouldComponentUpdate() { return false; } - componentDidMount() { - const extra = { - time: 40000 - }; - const stream = { - ytId: 'E4A0bcCQke0', - // url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' - }; - this.chooseImplementation(stream) - .then((implementation) => { - this.video = new implementation(this.containerRef.current); - this.video.on('ended', this.props.onEnded); - this.video.on('error', this.props.onError); - this.video.on('propValue', this.props.onPropValue); - this.video.on('propChanged', this.props.onPropChanged); - this.video.constructor.manifest.props.forEach((propName) => { - this.dispatch('observeProp', propName); - }); - this.dispatch('command', 'load', stream, extra); - }) - .catch((error) => { - this.props.onError(error); - }); - } - componentWillUnmount() { this.dispatch('stop'); } - chooseImplementation = (stream) => { - return new Promise((resolve, reject) => { - if (stream.ytId) { - YT.ready(() => { - resolve(YouTubeVideo); - }); - return; - } - - resolve(HTMLVideo); - }); + selectVideoImplementation = () => { + if (this.props.stream.ytId) { + return YouTubeVideo; + } else { + return HTMLVideo; + } } dispatch = (...args) => { @@ -67,17 +52,22 @@ class Video extends Component { render() { return ( -
+ ); } } Video.propTypes = { className: PropTypes.string, + stream: PropTypes.object.isRequired, + extra: PropTypes.object.isRequired, onEnded: PropTypes.func.isRequired, onError: PropTypes.func.isRequired, onPropValue: PropTypes.func.isRequired, onPropChanged: PropTypes.func.isRequired }; +Video.defaultProps = { + extra: {} +}; export default Video;