fix(FEC-7991): when changing captions language, the captions and bott…

…om bar stay visible all the time (#199)

Discard volume & seekbar controls mouse events on mobiles (causes wrong state in Shell)
Fix Shell touch handler logic

src/components/seekbar/seekbar.js

@@ -13,7 +13,8 @@ import {actions} from "../../reducers/shell";
  * @returns {Object} - mapped state to this component
  */
 const mapStateToProps = state => ({
-  config: state.config.components.seekbar
+  config: state.config.components.seekbar,
+  isMobile: state.shell.isMobile
 });
 
 @connect(mapStateToProps, bindActions(actions))
@@ -215,6 +216,28 @@ class SeekBarControl extends Component {
     this.props.updateSeekbarDraggingStatus(false);
   }
 
+  /**
+   * seekbar mouse over handler
+   *
+   * @returns {void}
+   * @memberof SeekBarControl
+   */
+  onSeekbarMouseOver(): void {
+    if (this.props.isMobile) return;
+    this.props.updateSeekbarHoverActive(true);
+  }
+
+  /**
+   * seekbar mouse leave handler
+   *
+   * @returns {void}
+   * @memberof SeekBarControl
+   */
+  onSeekbarMouseLeave(): void {
+    if (this.props.isMobile) return;
+    this.props.updateSeekbarHoverActive(false);
+  }
+
   /**
    * abstract function to update virtual progress ui using component state or report to upper component of time change
    *
@@ -428,8 +451,8 @@ class SeekBarControl extends Component {
         aria-valuenow={Math.round(this.props.currentTime)}
         aria-valuetext={`${toHHMMSS(this.props.currentTime)} of ${toHHMMSS(this.props.duration)}`}
         onClick={e => this.onTap(e)}
-        onMouseOver={() => this.props.updateSeekbarHoverActive(true)}
-        onMouseLeave={() => this.props.updateSeekbarHoverActive(false)}
+        onMouseOver={() => this.onSeekbarMouseOver()}
+        onMouseLeave={() => this.onSeekbarMouseLeave()}
         onMouseMove={e => this.onSeekbarMouseMove(e)}
         onMouseDown={e => this.onSeekbarMouseDown(e)}
         onTouchStart={e => this.onSeekbarTouchStart(e)}

src/components/shell/shell.js

@@ -141,14 +141,8 @@ class Shell extends BaseComponent {
     }
     if (!this.state.hover) {
       e.stopPropagation();
-      this._updatePlayerHoverState();
-    } else {
-      if (this.hoverTimeout) {
-        this._clearHoverTimeout();
-      } else {
-        this._startHoverTimeout();
-      }
     }
+    this._updatePlayerHoverState();
   }
 
   /**
@@ -205,7 +199,6 @@ class Shell extends BaseComponent {
       this.props.updatePlayerHoverState(true);
       this.setState({hover: true});
     }
-    this._clearHoverTimeout();
     this._startHoverTimeout();
   }
 
@@ -220,6 +213,7 @@ class Shell extends BaseComponent {
       && !this.props.seekbarHoverActive
       && !this.props.volumeHoverActive
       && !this.props.smartContainerOpen
+      && !this.player.paused;
   }
 
   /**
@@ -229,6 +223,7 @@ class Shell extends BaseComponent {
    * @memberof Shell
    */
   _startHoverTimeout(): void {
+    this._clearHoverTimeout();
     this.hoverTimeout = setTimeout(() => {
       if (this._canEndHoverState()) {
         this.props.updatePlayerHoverState(false);

src/components/volume/volume.js

@@ -101,6 +101,30 @@ class VolumeControl extends BaseComponent {
     }
   }
 
+  /**
+   * volume mouse over handler
+   *
+   * @returns {void}
+   * @memberof VolumeControl
+   */
+  onVolumeMouseOver(): void {
+    if (this.props.isMobile) return;
+    this.props.updateVolumeHover(true);
+    this.setState({hover: true});
+  }
+
+  /**
+   * volume mouse over handler
+   *
+   * @returns {void}
+   * @memberof VolumeControl
+   */
+  onVolumeMouseOut(): void {
+    if (this.props.isMobile) return;
+    this.props.updateVolumeHover(false);
+    this.setState({hover: false});
+  }
+
   /**
    * on volume control key down, update the volume in case of up/down keys
    *
@@ -217,14 +241,8 @@ class VolumeControl extends BaseComponent {
       <div
         ref={c => this._volumeControlElement = c}
         className={controlButtonClass.join(' ')}
-        onMouseOver={() => {
-          this.props.updateVolumeHover(true);
-          this.setState({hover: true});
-        }}
-        onMouseOut={() => {
-          this.props.updateVolumeHover(false);
-          this.setState({hover: false});
-        }}>
+        onMouseOver={() => this.onVolumeMouseOver()}
+        onMouseOut={() => this.onVolumeMouseOut()}>
         <button tabIndex="0"
                 aria-label='Volume'
                 className={style.controlButton}