fix(FEC-7907): No play button when preload=auto and ima plugin enable…

…d (#173)

show pre playback play button as soon as possible and load spinner once clicked
this change is possible since kaltura/playkit-js#193

src/components/loading/loading.js

@@ -26,7 +26,6 @@ const mapStateToProps = state => ({
    * @extends {BaseComponent}
    */
 class Loading extends BaseComponent {
-  isPreloading: boolean;
   autoplay: boolean;
   mobileAutoplay: boolean;
 
@@ -38,20 +37,6 @@ class Loading extends BaseComponent {
   constructor(obj: Object) {
     super({name: 'Loading', player: obj.player});
     this.setState({afterPlayingEvent: 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) {
-        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;
-    }
   }
 
   /**
@@ -135,7 +120,7 @@ class Loading extends BaseComponent {
    * @memberof Loading
    */
   render(props: any): React$Element<any> | void {
-    if (!props.show || this.isPreloading) return undefined;
+    if (!props.show) return undefined;
 
     return (
       <div className={[style.loadingBackdrop, style.show].join(' ')}>

src/components/pre-playback-play-overlay/pre-playback-play-overlay.js

@@ -7,6 +7,7 @@ import {actions} from '../../reducers/shell';
 import BaseComponent from '../base';
 import {default as Icon, IconType} from '../icon';
 import {KeyMap} from "../../utils/key-map";
+import {actions as loadingActions} from '../../reducers/loading';
 
 /**
  * mapping state to props
@@ -21,7 +22,7 @@ const mapStateToProps = state => ({
   isEnded: state.engine.isEnded
 });
 
-@connect(mapStateToProps, bindActions(actions))
+@connect(mapStateToProps, bindActions(Object.assign(actions, loadingActions)))
   /**
    * PrePlaybackPlayOverlay component
    *
@@ -50,9 +51,6 @@ class PrePlaybackPlayOverlay extends BaseComponent {
    * @memberof PrePlaybackPlayOverlay
    */
   componentWillMount() {
-    this.player.ready().then(() => {
-      this.setState({isPlayerReady: true});
-    });
     this.props.addPlayerClass(style.prePlayback);
     try {
       this.autoplay = this.player.config.playback.autoplay;
@@ -100,6 +98,7 @@ class PrePlaybackPlayOverlay extends BaseComponent {
     this.player.play();
     if (this.props.prePlayback) {
       this._hidePrePlayback();
+      this.props.updateLoadingSpinnerState(true);
     }
   }
 
@@ -114,7 +113,6 @@ class PrePlaybackPlayOverlay extends BaseComponent {
     if ((!props.isEnded && !props.prePlayback) || (!props.isEnded && this.autoplay)) {
       return undefined;
     }
-    const isPlayerReady = this.player.config.playback.preload === "auto" ? this.state.isPlayerReady : true;
     let rootStyle = {},
       rootClass = [style.prePlaybackPlayOverlay];
 
@@ -127,18 +125,16 @@ class PrePlaybackPlayOverlay extends BaseComponent {
       <div
         className={rootClass.join(' ')}
         style={rootStyle}
-        onClick={() => isPlayerReady ? this.handleClick() : undefined}>
-        {isPlayerReady ?
-          <a className={style.prePlaybackPlayButton}
+        onClick={() => this.handleClick()}>
+        {<a className={style.prePlaybackPlayButton}
              tabIndex="0"
              onKeyDown={(e) => {
                if (e.keyCode === KeyMap.ENTER) {
                  this.handleClick();
                }
              }}>
             {props.isEnded ? <Icon type={IconType.StartOver}/> : <Icon type={IconType.Play}/>}
-          </a>
-          : undefined}
+          </a>}
       </div>
     )
   }