selectVideoImplementation implemented synchronously

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 (
-            <div ref={this.containerRef} className={this.props.className} />
+            <div ref={this.containerRef} id={this.id} className={this.props.className} />
         );
     }
 }
 
 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;