From bde6e72e7cf258d483262a487ae331fb37ab9867 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 16 Jan 2019 15:00:37 +0200
Subject: [PATCH] Video component refactored to be used through dispatch method
 only

---
 src/routes/Player/Player.js      |  2 +-
 src/routes/Player/Video/Video.js | 37 +++++++++++++++-----------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index ef9998a43..185879c6a 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -46,6 +46,7 @@ class Player extends Component {
             label: 'English'
         }]);
         this.dispatch('setProp', 'selectedSubtitleTrackId', 'https://raw.githubusercontent.com/caitp/ng-media/master/example/assets/captions/bunny-en.vtt');
+        this.dispatch('command', 'load', this.props.stream);
     }
 
     onEnded = () => {
@@ -74,7 +75,6 @@ class Player extends Component {
                 <Video
                     ref={this.videoRef}
                     className={styles['layer']}
-                    stream={this.props.stream}
                     onEnded={this.onEnded}
                     onError={this.onError}
                     onPropValue={this.onPropValue}
diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js
index 51742c4af..af1ee9e26 100644
--- a/src/routes/Player/Video/Video.js
+++ b/src/routes/Player/Video/Video.js
@@ -13,19 +13,6 @@ class Video extends Component {
         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;
     }
@@ -34,8 +21,8 @@ class Video extends Component {
         this.dispatch('command', 'destroy');
     }
 
-    selectVideoImplementation = () => {
-        if (this.props.stream.ytId) {
+    selectVideoImplementation = (stream, extra) => {
+        if (stream.ytId) {
             return YouTubeVideo;
         } else {
             return HTMLVideo;
@@ -43,6 +30,21 @@ class Video extends Component {
     }
 
     dispatch = (...args) => {
+        if (args[0] === 'command' && args[1] === 'load') {
+            const Video = this.selectVideoImplementation(args[2], args[3]);
+            if (this.video === null || this.video.constructor !== Video) {
+                this.dispatch('command', 'destroy');
+                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);
+                });
+            }
+        }
+
         try {
             this.video && this.video.dispatch(...args);
         } catch (e) {
@@ -59,15 +61,10 @@ class Video extends Component {
 
 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: Object.freeze({})
-};
 
 export default Video;