Merge pull request #233 from video-react/control_bar_active_time

New feature: Customizable delay time for auto hide of ControlBar

.eslintrc

@@ -22,6 +22,7 @@
     "react/destructuring-assignment": "off",
     "react/forbid-prop-types": "off",
     "react/jsx-filename-extension": "off",
+    "react/jsx-one-expression-per-line": "literal",
     "react/no-find-dom-node": "off",
     "react/no-unused-prop-types": "off",
     "react/require-default-props": "off",

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "eslint.autoFixOnSave": true,
   "prettier.eslintIntegration": true,
   "javascript.validate.enable": false,
   "editor.rulers": [

docs/lib/Components/ControlBarPage.js

@@ -32,10 +32,16 @@ export default class ControlBarPage extends React.Component {
             {`ControlBar.propTypes = {
 
   // Hide the control bar automatically after the player is inactive
-  // default: 'true'
+  // default: true
   autoHide: PropTypes.bool,
+  // The waiting time for auto hide after player is inactive (in milliseconds)
+  // default: 3000
+  autoHideTime: PropType.number,
+  // Do not render default controls, only use custom ones provided as children of <ControlBar>
+  // default: false
+  disableDefaultControls: PropTypes.bool,
   // Do not render the control bar if set it to true
-  // default: 'false'
+  // default: false
   disableCompletely: PropTypes.bool,
 
 }`}

src/components/Player.js

@@ -336,11 +336,23 @@ export default class Player extends Component {
   }
 
   startControlsTimer() {
+    let controlBarActiveTime = 3000;
+    React.Children.forEach(this.props.children, element => {
+      if (!React.isValidElement(element) || element.type !== ControlBar) {
+        return;
+      }
+
+      const { autoHideTime } = element.props;
+      if (typeof autoHideTime === 'number') {
+        controlBarActiveTime = autoHideTime;
+      }
+    });
+
     this.actions.userActivate(true);
     clearTimeout(this.controlsHideTimer);
     this.controlsHideTimer = setTimeout(() => {
       this.actions.userActivate(false);
-    }, 3000);
+    }, controlBarActiveTime);
   }
 
   handleStateChange(state, prevState) {

src/components/control-bar/ControlBar.js

@@ -18,6 +18,7 @@ import { mergeAndSortChildren } from '../../utils';
 const propTypes = {
   children: PropTypes.any,
   autoHide: PropTypes.bool,
+  autoHideTime: PropTypes.number, // used in Player
   disableDefaultControls: PropTypes.bool,
   disableCompletely: PropTypes.bool,
   className: PropTypes.string