fix(FEC-8079): hide UI on player RESET event (#207)

Add isStopped state in the engine reducer and do not render the PlayerGUI component when player is stopped! (we still want to render the other components, like VideoPlayer for example, since the video element placed there)

src/components/engine-connector/engine-connector.js

@@ -33,6 +33,10 @@ class EngineConnector extends BaseComponent {
   componentDidMount() {
     const TrackType = this.player.Track;
 
+    this.player.addEventListener(this.player.Event.PLAYER_RESET_ENDED, () => {
+      this.props.updateIsStopped(true);
+    });
+
     this.player.addEventListener(this.player.Event.SOURCE_SELECTED, () => {
       this.props.updateHasError(false);
     });
@@ -45,6 +49,7 @@ class EngineConnector extends BaseComponent {
 
     this.player.addEventListener(this.player.Event.CHANGE_SOURCE_ENDED, () => {
       this.props.updatePlayerPoster(this.player.poster);
+      this.props.updateIsStopped(false);
     });
 
     this.player.addEventListener(this.player.Event.PLAYER_STATE_CHANGED, (e) => {

src/player-gui.js

@@ -13,7 +13,8 @@ const mapStateToProps = state => ({
     engine: {
       adBreak: state.engine.adBreak,
       isLive: state.engine.isLive,
-      hasError: state.engine.hasError
+      hasError: state.engine.hasError,
+      isStopped: state.engine.isStopped
     }
   },
   config: state.config
@@ -56,12 +57,10 @@ class PlayerGUI extends Component {
    */
   render(props: any): React$Element<any> | void {
     let uiToRender;
-
-    if (this.props.uis.length > 0) {
+    if (this.props.uis.length > 0 && !props.state.engine.isStopped) {
       uiToRender = this.getMatchedUI(props.uis, props.state);
       return uiToRender ? uiToRender.template(props) : this.props.uis[0].template(props);
-    }
-    else {
+    } else {
       return undefined;
     }
   }

src/reducers/engine.js

@@ -21,10 +21,12 @@ export const types = {
   UPDATE_PLAYER_POSTER: 'engine/UPDATE_PLATER_POSTER',
   UPDATE_IS_LIVE: 'engine/UPDATE_IS_LIVE',
   UPDATE_IS_DVR: 'engine/UPDATE_IS_DVR',
-  UPDATE_ERROR: 'engine/ERROR'
+  UPDATE_ERROR: 'engine/ERROR',
+  UPDATE_IS_STOPPED: 'engine/UPDATE_IS_STOPPED'
 };
 
 export const initialState = {
+  isStopped: false,
   isPlaying: false,
   isEnded: false,
   metadataLoaded: false,
@@ -191,13 +193,20 @@ export default (state: Object = initialState, action: Object) => {
         isDvr: action.isDvr
       };
 
+    case types.UPDATE_IS_STOPPED:
+      return {
+        ...state,
+        isStopped: action.stopped
+      };
+
+
     default:
       return state;
   }
 }
 
 export const actions = {
-  updateHasError: (hasError: boolean)=> ({type: types.UPDATE_ERROR, hasError: hasError}),
+  updateHasError: (hasError: boolean) => ({type: types.UPDATE_ERROR, hasError: hasError}),
   updatePlayerState: (prevoiusState: string, currentState: string) => ({
     type: types.UPDATE_PLAYER_STATE,
     playerState: {prevoiusState, currentState}
@@ -227,5 +236,6 @@ export const actions = {
   updateAdClickUrl: (adUrl: string) => ({type: types.UPDATE_AD_URL, adUrl}),
   updatePlayerPoster: (poster: string) => ({type: types.UPDATE_PLAYER_POSTER, poster}),
   updateIsLive: (isLive: boolean) => ({type: types.UPDATE_IS_LIVE, isLive}),
-  updateIsDvr: (isDvr: boolean) => ({type: types.UPDATE_IS_DVR, isDvr})
+  updateIsDvr: (isDvr: boolean) => ({type: types.UPDATE_IS_DVR, isDvr}),
+  updateIsStopped: (stopped: boolean) => ({type: types.UPDATE_IS_STOPPED, stopped})
 };