fix(FEC-7086): show controls on mobile touch when controls are invisi…

…ble (#40)
kaltura · Sep 6, 2017 · 4b6d609 · 4b6d609
1 parent 03add6a
commit 4b6d609
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/src/components/overlay-play/overlay-play.js b/src/components/overlay-play/overlay-play.js
@@ -14,7 +14,9 @@ import { default as Icon, IconType } from '../icon';
 const mapStateToProps = state => ({
   isPlaying: state.engine.isPlaying,
   adBreak: state.engine.adBreak,
-  adIsPlaying: state.engine.adIsPlaying
+  adIsPlaying: state.engine.adIsPlaying,
+  playerHover: state.shell.playerHover,
+  isMobile: state.shell.isMobile
 });
 
 @connect(mapStateToProps, bindActions(actions))
@@ -63,6 +65,18 @@ class OverlayPlay extends BaseComponent {
     this.isPlayingAdOrPlayback() ? this.player.pause() : this.player.play();
   }
 
+  /**
+   * handler for overlay click
+   *
+   * @returns {void}
+   * @memberof OverlayPlay
+   */
+  onOverlayClick(): void {
+    if (!this.props.isMobile || this.props.isMobile && this.props.playerHover) {
+      this.togglePlayPause();
+    }
+  }
+
   /**
    * render component
    *
@@ -71,7 +85,7 @@ class OverlayPlay extends BaseComponent {
    */
   render(): React$Element<any> {
     return (
-      <div className={`overlay-play ${this.state.animation ? 'in' : ''}`} onClick={() => this.togglePlayPause()}>
+      <div className={`overlay-play ${this.state.animation ? 'in' : ''}`} onClick={() => this.onOverlayClick()}>
         { this.isPlayingAdOrPlayback() ? <Icon type={IconType.Play} /> : <Icon type={IconType.Pause} /> }
       </div>
     )

diff --git a/src/components/shell/shell.js b/src/components/shell/shell.js
@@ -17,7 +17,8 @@ const mapStateToProps = state => ({
   playerClasses: state.shell.playerClasses,
   isMobile: state.shell.isMobile,
   playerWidth: state.shell.playerWidth,
-  playerHeight: state.shell.playerHeight
+  playerHeight: state.shell.playerHeight,
+  playerHover: state.shell.playerHover
 });
 
 @connect(mapStateToProps, bindActions(actions))
@@ -49,14 +50,14 @@ class Shell extends BaseComponent {
    */
   onMouseOver(): void {
     if (!this.state.hover) {
-      this.props.addPlayerClass('hover');
+      this.props.updatePlayerHoverState(true);
       this.setState({hover: true});
     }
     if (this.hoverTimeout) {
       clearTimeout(this.hoverTimeout);
     }
     this.hoverTimeout = setTimeout(() => {
-      this.props.removePlayerClass('hover');
+      this.props.updatePlayerHoverState(false);
       this.setState({hover: false});
     }, this.props.hoverTimeout || 3000);
   }
@@ -70,7 +71,7 @@ class Shell extends BaseComponent {
   onMouseLeave(): void {
     if (this.state.hover) {
       this.setState({hover: false});
-      this.props.removePlayerClass('hover');
+      this.props.updatePlayerHoverState(false);
     }
   }
 
@@ -83,7 +84,7 @@ class Shell extends BaseComponent {
   onMouseMove(): void {
     if (!this.state.hover) {
       this.setState({hover: true});
-      this.props.addPlayerClass('hover');
+      this.props.updatePlayerHoverState(true);
     }
   }
 
@@ -111,7 +112,7 @@ class Shell extends BaseComponent {
         }
       });
     if (isMobile()) {
-      this.props.addPlayerClass('touch');
+      this.props.updatePlayerHoverState(true);
     }
   }
 
@@ -126,6 +127,7 @@ class Shell extends BaseComponent {
     var playerClasses = 'player skin-default';
     playerClasses += ` ${props.playerClasses.join(' ')}`;
 
+    if (this.props.playerHover) playerClasses += ` hover`;
     if (this.props.metadataLoaded) playerClasses += ` metadata-loaded`;
     if (this.props.metadataLoaded) playerClasses += ` state-${this.props.currentState}`;
 

diff --git a/src/reducers/shell.js b/src/reducers/shell.js
@@ -6,13 +6,15 @@ export const types = {
   UPDATE_IS_MOBILE: 'shell/UPDATE_IS_MOBILE',
   UPDATE_PRE_PLAYBACK: 'shell/UPDATE_PRE_PLAYBACK',
   UPDATE_PLAYER_WIDTH: 'shell/UPDATE_PLAYER_WIDTH',
-  UPDATE_DOCUMENT_WIDTH: 'shell/UPDATE_DOCUMENT_WIDTH'
+  UPDATE_DOCUMENT_WIDTH: 'shell/UPDATE_DOCUMENT_WIDTH',
+  UPDATE_PLAYER_HOVER_STATE: 'shell/UPDATE_PLAYER_HOVER_STATE'
 }
 
 export const initialState = {
   playerClasses: [],
   prePlayback: true,
-  is_ad: true
+  is_ad: true,
+  playerHover: false
 };
 
 export default (state: Object = initialState, action: Object) => {
@@ -54,6 +56,12 @@ export default (state: Object = initialState, action: Object) => {
         documentWidth: action.documentWidth
       }
 
+    case types.UPDATE_PLAYER_HOVER_STATE:
+      return {
+        ...state,
+        playerHover: action.hover
+      }
+
     default:
       return state;
   }
@@ -66,4 +74,5 @@ export const actions = {
   updatePrePlayback: (prePlayback: boolean) => ({ type: types.UPDATE_PRE_PLAYBACK, prePlayback }),
   updatePlayerWidth: (playerWidth: number) => ({ type: types.UPDATE_PLAYER_WIDTH, playerWidth }),
   updateDocumentWidth: (documentWidth: number) => ({ type: types.UPDATE_DOCUMENT_WIDTH, documentWidth }),
+  updatePlayerHoverState: (hover: boolean) => ({ type: types.UPDATE_PLAYER_HOVER_STATE, hover })
 }