fix(FEC-7368): fix the pause of the spinner when loading an ad (#133)

Added a "afterFirstPlay" state to the loading component.
kaltura · Nov 28, 2017 · a5ea06a · a5ea06a
1 parent 8e6aa58
commit a5ea06a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/components/loading/_loading.scss b/src/components/loading/_loading.scss
@@ -32,6 +32,7 @@
   background-color: rgba(0, 0, 0, 0.3);
   transition: 100ms opacity;
   opacity: 0;
+  z-index: 5;
 
   &.show {
     opacity: 1;

diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js
@@ -37,6 +37,7 @@ class Loading extends BaseComponent {
    */
   constructor(obj: Object) {
     super({name: 'Loading', player: obj.player});
+    this.setState({afterFirstPlay: false});
     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) {
@@ -89,6 +90,9 @@ class Loading extends BaseComponent {
     }
 
     this.player.addEventListener(this.player.Event.PLAYER_STATE_CHANGED, e => {
+      if (!this.state.afterFirstPlay) {
+        return;
+      }
       if (e.payload.newState.type === 'idle' || e.payload.newState.type === 'playing' || e.payload.newState.type === 'paused') {
         this.props.updateLoadingSpinnerState(false);
       }
@@ -112,6 +116,14 @@ class Loading extends BaseComponent {
     this.player.addEventListener(this.player.Event.ALL_ADS_COMPLETED, () => {
       this.props.updateLoadingSpinnerState(false);
     });
+
+    this.player.addEventListener(this.player.Event.FIRST_PLAY, () => {
+      this.setState({afterFirstPlay: true});
+    });
+
+    this.player.addEventListener(this.player.Event.CHANGE_SOURCE_STARTED, () => {
+      this.setState({afterFirstPlay: false});
+    });
   }
 
   /**