fix(pre-playback-state): hide loading spinner on preloading (#59)

kaltura · Sep 26, 2017 · 072cc65 · 072cc65
1 parent d2c1612
commit 072cc65
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 41 deletions.
diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js
@@ -1,8 +1,8 @@
 //@flow
-import { h } from 'preact';
-import { connect } from 'preact-redux';
-import { bindActions } from '../../utils/bind-actions';
-import { actions } from '../../reducers/loading';
+import {h} from 'preact';
+import {connect} from 'preact-redux';
+import {bindActions} from '../../utils/bind-actions';
+import {actions} from '../../reducers/loading';
 import BaseComponent from '../base';
 
 /**
@@ -17,14 +17,15 @@ const mapStateToProps = state => ({
 });
 
 @connect(mapStateToProps, bindActions(actions))
-/**
- * Loading component
- *
- * @class Loading
- * @example <Loading />
- * @extends {BaseComponent}
- */
+  /**
+   * Loading component
+   *
+   * @class Loading
+   * @example <Loading />
+   * @extends {BaseComponent}
+   */
 class Loading extends BaseComponent {
+  isPreloading: boolean;
   autoplay: boolean;
   mobileAutoplay: boolean;
 
@@ -35,6 +36,20 @@ class Loading extends BaseComponent {
    */
   constructor(obj: Object) {
     super({name: 'Loading', player: obj.player});
+    try {
+      // TODO: Change the dependency on ima to our ads plugin when it will be developed.
+      if (this.player.config.playback.preload === "auto" && !this.player.config.plugins.ima) {
+        this.isPreloading = true;
+        this.player.addEventListener(this.player.Event.PLAYER_STATE_CHANGED, (e) => {
+          if (e.payload.oldState.type === this.player.State.LOADING) {
+            this.isPreloading = false;
+          }
+        });
+      }
+    } catch (e) {
+      this.logger.error(e.message);
+      this.isPreloading = false;
+    }
   }
 
   /**
@@ -44,11 +59,19 @@ class Loading extends BaseComponent {
    * @memberof Loading
    */
   componentWillMount() {
-    try { this.autoplay = this.player.config.playback.autoplay; }
-    catch (e) { this.autoplay = false; } // eslint-disable-line no-unused-vars
+    try {
+      this.autoplay = this.player.config.playback.autoplay;
+    }
+    catch (e) { // eslint-disable-line no-unused-vars
+      this.autoplay = false;
+    }
 
-    try { this.mobileAutoplay = this.player.config.playback.mobileAutoplay; }
-    catch (e) { this.mobileAutoplay = false; } // eslint-disable-line no-unused-vars
+    try {
+      this.mobileAutoplay = this.player.config.playback.mobileAutoplay;
+    }
+    catch (e) { // eslint-disable-line no-unused-vars
+      this.mobileAutoplay = false;
+    }
   }
 
   /**
@@ -82,13 +105,13 @@ class Loading extends BaseComponent {
    * @memberof Loading
    */
   render(props: any): React$Element<any> | void {
-    if (!props.show || props.adBreak) return undefined;
+    if (!props.show || props.adBreak || this.isPreloading) return undefined;
 
     return (
       <div className='loading-backdrop show'>
         <div className='spinner-container'>
           <div className='spinner'>
-            {[...Array(8)].map((i) => <span key={i} />)}
+            {[...Array(8)].map((i) => <span key={i}/>)}
           </div>
         </div>
       </div>

diff --git a/src/components/pre-playback-play-overlay/pre-playback-play-overlay.js b/src/components/pre-playback-play-overlay/pre-playback-play-overlay.js
@@ -1,10 +1,10 @@
 //@flow
-import { h } from 'preact';
-import { connect } from 'preact-redux';
-import { bindActions } from '../../utils/bind-actions';
-import { actions } from '../../reducers/shell';
+import {h} from 'preact';
+import {connect} from 'preact-redux';
+import {bindActions} from '../../utils/bind-actions';
+import {actions} from '../../reducers/shell';
 import BaseComponent from '../base';
-import { default as Icon, IconType } from '../icon';
+import {default as Icon, IconType} from '../icon';
 
 /**
  * mapping state to props
@@ -20,13 +20,13 @@ const mapStateToProps = state => ({
 });
 
 @connect(mapStateToProps, bindActions(actions))
-/**
- * PrePlaybackPlayOverlay component
- *
- * @class PrePlaybackPlayOverlay
- * @example <PrePlaybackPlayOverlay player={this.player} />
- * @extends {BaseComponent}
- */
+  /**
+   * PrePlaybackPlayOverlay component
+   *
+   * @class PrePlaybackPlayOverlay
+   * @example <PrePlaybackPlayOverlay player={this.player} />
+   * @extends {BaseComponent}
+   */
 class PrePlaybackPlayOverlay extends BaseComponent {
   autoplay: boolean;
   mobileAutoplay: boolean;
@@ -50,11 +50,19 @@ class PrePlaybackPlayOverlay extends BaseComponent {
   componentWillMount() {
     this.props.addPlayerClass('pre-playback');
 
-    try { this.autoplay = this.player.config.playback.autoplay; }
-    catch (e) { this.autoplay = false; } // eslint-disable-line no-unused-vars
+    try {
+      this.autoplay = this.player.config.playback.autoplay;
+    }
+    catch (e) { // eslint-disable-line no-unused-vars
+      this.autoplay = false;
+    }
 
-    try { this.mobileAutoplay = this.player.config.playback.mobileAutoplay; }
-    catch (e) { this.mobileAutoplay = false; } // eslint-disable-line no-unused-vars
+    try {
+      this.mobileAutoplay = this.player.config.playback.mobileAutoplay;
+    }
+    catch (e) { // eslint-disable-line no-unused-vars
+      this.mobileAutoplay = false;
+    }
   }
 
   /**
@@ -93,12 +101,26 @@ class PrePlaybackPlayOverlay extends BaseComponent {
    * @memberof PrePlaybackPlayOverlay
    */
   handleClick(): void {
-    this.player.play();
-
-    if (this.props.prePlayback) {
-      this.props.updatePrePlayback(false);
-      this.props.removePlayerClass('pre-playback');
-    }
+    // TODO: The promise handling should be in the play API of the player.
+    new Promise((resolve, reject) => {
+      try {
+        if (this.player.config.playback.preload === "auto" && !this.player.config.plugins.ima) {
+          this.player.ready().then(resolve);
+        } else {
+          resolve();
+        }
+      } catch (e) {
+        reject(e);
+      }
+    }).then(() => {
+      this.player.play();
+      if (this.props.prePlayback) {
+        this.props.updatePrePlayback(false);
+        this.props.removePlayerClass('pre-playback');
+      }
+    }).catch((e) => {
+      this.logger.error(e.message);
+    });
   }
 
   /**
@@ -116,9 +138,10 @@ class PrePlaybackPlayOverlay extends BaseComponent {
     ) return undefined;
 
     return (
-      <div className='pre-playback-play-overlay' style={{backgroundImage: `url(${props.poster})`}} onClick={() => this.handleClick()}>
+      <div className='pre-playback-play-overlay' style={{backgroundImage: `url(${props.poster})`}}
+           onClick={() => this.handleClick()}>
         <a className='pre-playback-play-button'>
-          {props.isEnded ? <Icon type={IconType.Startover} /> : <Icon type={IconType.Play} />}
+          {props.isEnded ? <Icon type={IconType.Startover}/> : <Icon type={IconType.Play}/>}
         </a>
       </div>
     )