fix(FEC-9521): countdown is stuck open after next video started (#461)

kaltura · Dec 5, 2019 · 4e34983 · 4e34983
1 parent 469329a
commit 4e34983
Showing 1 changed file with 30 additions and 9 deletions.
diff --git a/src/components/playlist-countdown/playlist-countdown.js b/src/components/playlist-countdown/playlist-countdown.js
@@ -42,7 +42,6 @@ const COMPONENT_NAME = 'PlaylistCountdown';
  */
 class PlaylistCountdown extends Component {
   focusElement: HTMLElement;
-
   /**
    * should render component
    * @param {*} props - component props
@@ -109,6 +108,29 @@ class PlaylistCountdown extends Component {
     }
   }
 
+  /**
+   * checks if the component is hidden
+   * @returns {boolean} - is component hidden
+   */
+  get isHidden(): boolean {
+    return !this.state.timeToShow || this.props.player.playlist.countdown.duration >= this.props.duration;
+  }
+
+  /**
+   * checks if the component is canceled
+   * @returns {boolean} - is component canceled
+   */
+  get isCanceled(): boolean {
+    return this.props.countdownCanceled;
+  }
+
+  /**
+   * checks if the component is shown
+   * @returns {boolean} - is component shown
+   */
+  get isShown(): boolean {
+    return !this.isHidden && !this.isCanceled;
+  }
   /**
    * component did update handler
    *
@@ -129,9 +151,11 @@ class PlaylistCountdown extends Component {
       }
     }
 
-    if (!prevState.show && this.state.show && this.focusElement) {
+    if (!prevState.shown && this.state.shown && this.focusElement) {
       this.focusElement.focus();
     }
+
+    if (this.isShown !== this.state.shown) this.setState({shown: this.isShown});
   }
 
   /**
@@ -165,13 +189,10 @@ class PlaylistCountdown extends Component {
     const progressDuration = Math.min(countdown.duration, props.duration - timeToShow);
     const progressWidth = `${progressTime > 0 ? (progressTime / progressDuration) * 104 : 0}%`;
     const className = [style.playlistCountdown];
-    const isHidden = !this.state.timeToShow || countdown.duration >= props.duration;
-    const isCanceled = this.props.countdownCanceled;
-    this.setState({show: !isHidden && !isCanceled});
 
-    if (isHidden) {
+    if (this.isHidden) {
       className.push(style.hidden);
-    } else if (isCanceled) {
+    } else if (this.isCanceled) {
       className.push(style.canceled);
     }
 
@@ -180,7 +201,7 @@ class PlaylistCountdown extends Component {
         role="button"
         aria-labelledby="playlistCountdownTextId"
         ref={el => (this.focusElement = el)}
-        tabIndex={isHidden || isCanceled ? -1 : 0}
+        tabIndex={this.isShown ? 0 : -1}
         className={className.join(' ')}
         onKeyDown={e => {
           switch (e.keyCode) {
@@ -208,7 +229,7 @@ class PlaylistCountdown extends Component {
               <div className={[style.controlButtonContainer, style.playlistCountdownCancel].join(' ')}>
                 <Localizer>
                   <button
-                    tabIndex={isHidden || isCanceled ? -1 : 0}
+                    tabIndex={this.isShown ? 0 : -1}
                     aria-label={<Text id="playlist.cancel" />}
                     className={[style.controlButton, style.playlistCountdownCancelButton].join(' ')}
                     onClick={e => this.cancelNext(e)}