feat(FEC-10667): control-bar auto-hide timeout configuration (#579)

Issue: unable to change our default for hiding the control bar. Solution: add a new config called controlBarHoverTimeout which will pass the duration of the timeout the user wants for this action.
kaltura · Feb 16, 2021 · 8293d7b · 8293d7b
1 parent 2a240fd
commit 8293d7b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -16,6 +16,7 @@ var uiManager = new playkit.ui.UIManager(player, config);
   targetId: string,
   debugActions?: boolean, // optional
   forceTouchUI?: boolean, // optional
+  hoverTimeout?: number, // optional
   logger?: loggerType, // optional
   components?: Object, // optional
   uiComponents: Array<Object>, //optional
@@ -60,6 +61,18 @@ var uiManager = new playkit.ui.UIManager(player, config);
 
 ##
 
+> ### config.hoverTimeout
+>
+> ##### Type: `number`
+>
+> ##### Default: `3000`
+>
+> ##### Description: Defines the timeout for control bar hover, 0 - always show.
+>
+> Useful for applications that wants to set different hover timeout duration for player controls.
+
+##
+
 > ### config.logLevel
 >
 > ##### Type: `string`

diff --git a/flow-typed/types/ui-options.js b/flow-typed/types/ui-options.js
@@ -5,6 +5,7 @@ declare type UIOptionsObject = {
   targetId: string,
   debugActions?: boolean,
   forceTouchUI?: boolean,
+  hoverTimeout?: number,
   logger?: loggerType,
   components?: ComponentsConfig,
   uiComponents?: Array<KPUIComponent>,

diff --git a/src/components/shell/shell.js b/src/components/shell/shell.js
@@ -22,6 +22,7 @@ import {FakeEvent} from 'event/fake-event';
 const mapStateToProps = state => ({
   targetId: state.config.targetId,
   forceTouchUI: state.config.forceTouchUI,
+  hoverTimeout: state.config.hoverTimeout,
   metadataLoaded: state.engine.metadataLoaded,
   currentState: state.engine.playerState.currentState,
   playerClasses: state.shell.playerClasses,
@@ -42,12 +43,6 @@ const mapStateToProps = state => ({
   playlist: state.engine.playlist
 });
 
-/**
- * The default control bar hover time rendering timeout value
- * @type {number}
- * @const
- */
-const CONTROL_BAR_HOVER_DEFAULT_TIMEOUT: number = 3000;
 const ON_WINDOW_RESIZE_DEBOUNCE_DELAY: number = 100;
 
 const PLAYER_SIZE: {[size: string]: string} = {
@@ -325,11 +320,13 @@ class Shell extends Component {
    */
   _startHoverTimeout(): void {
     this._clearHoverTimeout();
-    this.hoverTimeout = setTimeout(() => {
-      if (this._canEndHoverState()) {
-        this._updatePlayerHover(false);
-      }
-    }, this.props.hoverTimeout || CONTROL_BAR_HOVER_DEFAULT_TIMEOUT);
+    if (this.props.hoverTimeout) {
+      this.hoverTimeout = setTimeout(() => {
+        if (this._canEndHoverState()) {
+          this._updatePlayerHover(false);
+        }
+      }, this.props.hoverTimeout);
+    }
   }
 
   /**
@@ -440,4 +437,4 @@ class Shell extends Component {
   }
 }
 
-export {Shell, CONTROL_BAR_HOVER_DEFAULT_TIMEOUT, PLAYER_SIZE};
+export {Shell, PLAYER_SIZE};
diff --git a/src/reducers/config.js b/src/reducers/config.js
@@ -9,6 +9,7 @@ export const types = {
 
 export const initialState = {
   forceTouchUI: false,
+  hoverTimeout: 3000,
   components: {
     watermark: {},
     seekbar: {},