fix(FEC-9333): when playing a playlist and closing the countdown wind…

…ow, the next entry starts automatically (#429)

move the `canceled` to own reduced since `this.state` is reset when switching to ad

src/components/playlist-countdown/playlist-countdown.js

@@ -7,6 +7,8 @@ import {KeyMap} from '../../utils/key-map';
 import {connect} from 'preact-redux';
 import {withPlayer} from '../player';
 import {withLogger} from 'components/logger';
+import {bindActions} from '../../utils/bind-actions';
+import {actions} from 'reducers/playlist';
 
 /**
  * mapping state to props
@@ -19,12 +21,16 @@ const mapStateToProps = state => ({
   duration: state.engine.duration,
   lastSeekPoint: state.engine.lastSeekPoint,
   isSeeking: state.engine.isSeeking,
-  isPlaybackEnded: state.engine.isPlaybackEnded
+  isPlaybackEnded: state.engine.isPlaybackEnded,
+  countdownCanceled: state.playlist.countdownCanceled
 });
 
 const COMPONENT_NAME = 'PlaylistCountdown';
 
-@connect(mapStateToProps)
+@connect(
+  mapStateToProps,
+  bindActions(actions)
+)
 @withPlayer
 @withLogger(COMPONENT_NAME)
 /**
@@ -70,7 +76,7 @@ class PlaylistCountdown extends Component {
   cancelNext(e: any): void {
     this.props.logger.debug('Cancel auto play next item');
     e.stopPropagation();
-    this.setState({canceled: true});
+    this.props.updatePlaylistCountdownCanceled(true);
   }
 
   /**
@@ -86,16 +92,6 @@ class PlaylistCountdown extends Component {
     return Math.max(0, Math.min(timeToShow, this.props.duration));
   }
 
-  /**
-   * component will update handler
-
-   * @param {Object} nextProps - the props that will replace the current props
-   * @returns {void}
-   */
-  componentDidMount() {
-    this.setState({canceled: false});
-  }
-
   /**
    * component will update handler
 
@@ -107,7 +103,8 @@ class PlaylistCountdown extends Component {
     if (nextProps.currentTime > timeToShow) {
       this.setState({timeToShow: true});
     } else {
-      this.setState({timeToShow: false, canceled: false});
+      this.setState({timeToShow: false});
+      this.props.updatePlaylistCountdownCanceled(false);
     }
   }
 
@@ -122,7 +119,7 @@ class PlaylistCountdown extends Component {
       const timeToShow = this._getTimeToShow();
       const countdown = this.props.player.playlist.countdown;
       if (
-        !this.state.canceled &&
+        !this.props.countdownCanceled &&
         (this.props.isPlaybackEnded || (this.props.currentTime >= timeToShow + countdown.duration && this.props.currentTime < this.props.duration))
       ) {
         this.props.player.playlist.playNext();
@@ -162,7 +159,7 @@ class PlaylistCountdown extends Component {
     const progressWidth = `${progressTime > 0 ? (progressTime / progressDuration) * 104 : 0}%`;
     const className = [style.playlistCountdown];
     const isHidden = !this.state.timeToShow || countdown.duration >= props.duration;
-    const isCanceled = this.state.canceled;
+    const isCanceled = this.props.countdownCanceled;
 
     if (isHidden) {
       className.push(style.hidden);

src/reducers/index.js

@@ -1,8 +1,11 @@
+export * as backdrop from './backdrop';
 export * as config from './config';
 export * as cvaa from './cvaa';
 export * as engine from './engine';
+export * as getters from './getters';
 export * as loading from './loading';
 export * as overlayAction from './overlay-action';
+export * as playlist from './playlist';
 export * as seekbar from './seekbar';
 export * as setting from './settings';
 export * as share from './share';

src/reducers/playlist.js

@@ -0,0 +1,28 @@
+//@flow
+export const types = {
+  UPDATE_PLAYLIST_COUNTDOWN_CANCELED: 'playlist-countdown/UPDATE_PLAYLIST_COUNTDOWN_CANCELED'
+};
+
+export const initialState = {
+  countdownCanceled: false
+};
+
+export default (state: Object = initialState, action: Object) => {
+  switch (action.type) {
+    case types.UPDATE_PLAYLIST_COUNTDOWN_CANCELED:
+      return {
+        ...state,
+        countdownCanceled: action.countdownCanceled
+      };
+
+    default:
+      return state;
+  }
+};
+
+export const actions = {
+  updatePlaylistCountdownCanceled: (countdownCanceled: boolean) => ({
+    type: types.UPDATE_PLAYLIST_COUNTDOWN_CANCELED,
+    countdownCanceled
+  })
+};

src/store.js

@@ -11,6 +11,7 @@ import cvaa from './reducers/cvaa';
 import settings from './reducers/settings';
 import overlayAction from './reducers/overlay-action';
 import backdrop from './reducers/backdrop';
+import playlist from 'reducers/playlist';
 
 const reducer = combineReducers({
   config,
@@ -23,7 +24,8 @@ const reducer = combineReducers({
   cvaa,
   settings,
   overlayAction,
-  backdrop
+  backdrop,
+  playlist
 });
 
 export default reducer;