From c86793d7d7982dbbb859bc3385a2afd475f91fe8 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 21 Nov 2018 17:45:47 +0200 Subject: [PATCH] Video component refactored / HTMLVideo and YouTubeVideo combined --- src/routes/Player/Player.js | 29 +++++----- .../ReactHTMLVideo.js => Video/Video.js} | 43 +++++++++++--- src/routes/Player/Video/index.js | 3 + .../{ => Video}/stremio-video/HTMLVideo.js | 0 .../{ => Video}/stremio-video/README.MD | 0 .../{ => Video}/stremio-video/YouTubeVideo.js | 0 src/routes/Player/Video/styles.less | 4 ++ .../Player/stremio-video/ReactYouTubeVideo.js | 57 ------------------- src/routes/Player/styles.less | 5 -- 9 files changed, 57 insertions(+), 84 deletions(-) rename src/routes/Player/{stremio-video/ReactHTMLVideo.js => Video/Video.js} (50%) create mode 100644 src/routes/Player/Video/index.js rename src/routes/Player/{ => Video}/stremio-video/HTMLVideo.js (100%) rename src/routes/Player/{ => Video}/stremio-video/README.MD (100%) rename src/routes/Player/{ => Video}/stremio-video/YouTubeVideo.js (100%) create mode 100644 src/routes/Player/Video/styles.less delete mode 100644 src/routes/Player/stremio-video/ReactYouTubeVideo.js diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 0f59c3874..9681aec27 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -1,7 +1,5 @@ import React, { Component, Fragment } from 'react'; -import classnames from 'classnames'; -import ReactHTMLVideo from './stremio-video/ReactHTMLVideo'; -import ReactYouTubeVideo from './stremio-video/ReactYouTubeVideo'; +import Video from './Video'; import ControlBar from './ControlBar'; import styles from './styles'; @@ -12,7 +10,7 @@ class Player extends Component { this.videoRef = React.createRef(); this.state = { - videoComponent: null, + videoImplementation: null, paused: null, time: null, duration: null, @@ -22,8 +20,8 @@ class Player extends Component { componentDidMount() { this.prepareStream() - .then(({ source, videoComponent }) => { - this.setState({ videoComponent }, () => { + .then(({ source, videoImplementation }) => { + this.setState({ videoImplementation }, () => { this.videoRef.current.dispatch('command', 'load', { source: source }); @@ -35,7 +33,7 @@ class Player extends Component { } shouldComponentUpdate(nextProps, nextState) { - return nextState.videoComponent !== this.state.videoComponent || + return nextState.videoImplementation !== this.state.videoImplementation || nextState.paused !== this.state.paused || nextState.time !== this.state.time || nextState.duration !== this.state.duration || @@ -45,11 +43,15 @@ class Player extends Component { prepareStream = () => { return new Promise((resolve, reject) => { // YT.ready(() => { - resolve({ - source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', - videoComponent: ReactHTMLVideo - }); + // resolve({ + // source: 'J2z5uzqxJNU', + // videoImplementation: 'YouTube' + // }); // }); + resolve({ + source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', + videoImplementation: 'HTML' + }); }); } @@ -96,14 +98,15 @@ class Player extends Component { } renderVideo() { - if (this.state.videoComponent === null) { + if (this.state.videoImplementation === null) { return null; } return ( - +
+
); } + + renderYouTubeVideo() { + return ( +
+
+
+ ); + } + + render() { + switch (this.props.implementation) { + case 'HTML': + return this.renderHTMLVideo(); + case 'YouTube': + return this.renderYouTubeVideo(); + } + } } -ReactHTMLVideo.manifest = HTMLVideo.manifest; +Video.implementations = { + 'HTML': HTMLVideo, + 'YouTube': YouTubeVideo +}; -ReactHTMLVideo.propTypes = { +Video.propTypes = { className: PropTypes.string, + implementation: PropTypes.oneOf(Object.keys(Video.implementations)).isRequired, onEnded: PropTypes.func.isRequired, onError: PropTypes.func.isRequired, onPropValue: PropTypes.func.isRequired, @@ -54,4 +79,4 @@ ReactHTMLVideo.propTypes = { observedProps: PropTypes.arrayOf(PropTypes.string).isRequired }; -export default ReactHTMLVideo; +export default Video; diff --git a/src/routes/Player/Video/index.js b/src/routes/Player/Video/index.js new file mode 100644 index 000000000..940e156fe --- /dev/null +++ b/src/routes/Player/Video/index.js @@ -0,0 +1,3 @@ +import Video from './Video'; + +export default Video; diff --git a/src/routes/Player/stremio-video/HTMLVideo.js b/src/routes/Player/Video/stremio-video/HTMLVideo.js similarity index 100% rename from src/routes/Player/stremio-video/HTMLVideo.js rename to src/routes/Player/Video/stremio-video/HTMLVideo.js diff --git a/src/routes/Player/stremio-video/README.MD b/src/routes/Player/Video/stremio-video/README.MD similarity index 100% rename from src/routes/Player/stremio-video/README.MD rename to src/routes/Player/Video/stremio-video/README.MD diff --git a/src/routes/Player/stremio-video/YouTubeVideo.js b/src/routes/Player/Video/stremio-video/YouTubeVideo.js similarity index 100% rename from src/routes/Player/stremio-video/YouTubeVideo.js rename to src/routes/Player/Video/stremio-video/YouTubeVideo.js diff --git a/src/routes/Player/Video/styles.less b/src/routes/Player/Video/styles.less new file mode 100644 index 000000000..cf40d139f --- /dev/null +++ b/src/routes/Player/Video/styles.less @@ -0,0 +1,4 @@ +.html-video { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/routes/Player/stremio-video/ReactYouTubeVideo.js b/src/routes/Player/stremio-video/ReactYouTubeVideo.js deleted file mode 100644 index 9866ff315..000000000 --- a/src/routes/Player/stremio-video/ReactYouTubeVideo.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import YouTubeVideo from './YouTubeVideo'; - -class ReactYouTubeVideo extends Component { - constructor(props) { - super(props); - - this.videoContainerRef = React.createRef(); - } - - componentDidMount() { - this.video = new YouTubeVideo(this.videoContainerRef.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.props.observedProps.forEach((propName) => { - this.dispatch('observeProp', propName); - }); - } - - componentWillUnmount() { - this.dispatch('stop'); - } - - shouldComponentUpdate() { - return false; - } - - dispatch = (...args) => { - try { - this.video && this.video.dispatch(...args); - } catch (e) { - console.error('YouTubeVideo', e); - } - } - - render() { - return ( -
- ); - } -} - -ReactYouTubeVideo.manifest = YouTubeVideo.manifest; - -ReactYouTubeVideo.propTypes = { - className: PropTypes.string, - onEnded: PropTypes.func.isRequired, - onError: PropTypes.func.isRequired, - onPropValue: PropTypes.func.isRequired, - onPropChanged: PropTypes.func.isRequired, - observedProps: PropTypes.arrayOf(PropTypes.string).isRequired -}; - -export default ReactYouTubeVideo; diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less index aebb016ae..d5fcf6421 100644 --- a/src/routes/Player/styles.less +++ b/src/routes/Player/styles.less @@ -11,9 +11,4 @@ right: 0; bottom: 0; } - - video.layer { - width: 100%; - height: 100%; - } } \ No newline at end of file