feat: allow progress controls to be disabled (#4649)

Add `enable` and `disable` methods to the progress control. This disabled things like the mouse time display and the progress control continues updating for current time and loading but the user will not be able to interact with the control anymore.

src/css/components/_progress.scss

@@ -8,6 +8,10 @@
   min-width: 4em;
 }
 
+.video-js .vjs-progress-control.disabled {
+  cursor: default;
+}
+
 .vjs-live .vjs-progress-control {
   display: none;
 }
@@ -40,6 +44,10 @@
   font-size: 1.666666666666666666em;
 }
 
+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
+  font-size: 1em;
+}
+
 // .vjs-play-progress / PlayProgressBar and .vjs-load-progress / LoadProgressBar
 //
 // These are bars that appear within the progress control to communicate the
@@ -133,6 +141,10 @@
   visibility: visible;
 }
 
+.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
+  font-size: 1em;
+}
+
 // .vjs-mouse-display / MouseTimeDisplay
 //
 // This element tracks the mouse position along the progress control and

src/css/components/_slider.scss

@@ -7,6 +7,10 @@
   @include user-select(none);
 
   @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
+ }
+
+.video-js .vjs-slider.disabled {
+  cursor: default;
 }
 
 .video-js .vjs-slider:focus {

src/js/control-bar/progress-control/progress-control.js

@@ -27,10 +27,9 @@ class ProgressControl extends Component {
   constructor(player, options) {
     super(player, options);
     this.handleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
-    this.on(this.el_, 'mousemove', this.handleMouseMove);
-
     this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), 25);
-    this.on(['mousedown', 'touchstart'], this.handleMouseDown);
+
+    this.enable();
   }
 
   /**
@@ -101,6 +100,52 @@ class ProgressControl extends Component {
     seekBar.handleMouseMove(event);
   }
 
+  /**
+   * Are controls are currently enabled for this progress control.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  enabled() {
+    return this.enabled_;
+  }
+
+  /**
+   * Disable all controls on the progress control and its children
+   */
+  disable() {
+    this.children().forEach((child) => child.disable && child.disable());
+
+    if (!this.enabled()) {
+      return;
+    }
+
+    this.off(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.off(this.el_, 'mousemove', this.handleMouseMove);
+    this.handleMouseUp();
+
+    this.addClass('disabled');
+
+    this.enabled_ = false;
+  }
+
+  /**
+   * Enable all controls on the progress control and its children
+   */
+  enable() {
+    this.children().forEach((child) => child.enable && child.enable());
+
+    if (this.enabled()) {
+      return;
+    }
+
+    this.on(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.on(this.el_, 'mousemove', this.handleMouseMove);
+    this.removeClass('disabled');
+
+    this.enabled_ = true;
+  }
+
   /**
    * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
    *

src/js/control-bar/progress-control/seek-bar.js

@@ -179,6 +179,28 @@ class SeekBar extends Slider {
     this.player_.currentTime(newTime);
   }
 
+  enable() {
+    super.enable();
+    const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+
+    if (!mouseTimeDisplay) {
+      return;
+    }
+
+    mouseTimeDisplay.show();
+  }
+
+  disable() {
+    super.disable();
+    const mouseTimeDisplay = this.getChild('mouseTimeDisplay');
+
+    if (!mouseTimeDisplay) {
+      return;
+    }
+
+    mouseTimeDisplay.hide();
+  }
+
   /**
    * Handle mouse up on seek bar
    *

src/js/slider/slider.js

@@ -31,17 +31,72 @@ class Slider extends Component {
     // Set a horizontal or vertical class on the slider depending on the slider type
     this.vertical(!!this.options_.vertical);
 
+    this.enable();
+  }
+
+  /**
+   * Are controls are currently enabled for this slider or not.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  enabled() {
+    return this.enabled_;
+  }
+
+  /**
+   * Enable controls for this slider if they are disabled
+   */
+  enable() {
+    if (this.enabled()) {
+      return;
+    }
+
     this.on('mousedown', this.handleMouseDown);
     this.on('touchstart', this.handleMouseDown);
     this.on('focus', this.handleFocus);
     this.on('blur', this.handleBlur);
     this.on('click', this.handleClick);
 
-    this.on(player, 'controlsvisible', this.update);
+    this.on(this.player_, 'controlsvisible', this.update);
 
     if (this.playerEvent) {
-      this.on(player, this.playerEvent, this.update);
+      this.on(this.player_, this.playerEvent, this.update);
     }
+
+    this.removeClass('disabled');
+    this.setAttribute('tabindex', 0);
+
+    this.enabled_ = true;
+  }
+
+  /**
+   * Disable controls for this slider if they are enabled
+   */
+  disable() {
+    if (!this.enabled()) {
+      return;
+    }
+    const doc = this.bar.el_.ownerDocument;
+
+    this.off('mousedown', this.handleMouseDown);
+    this.off('touchstart', this.handleMouseDown);
+    this.off('focus', this.handleFocus);
+    this.off('blur', this.handleBlur);
+    this.off('click', this.handleClick);
+    this.off(this.player_, 'controlsvisible', this.update);
+    this.off(doc, 'mousemove', this.handleMouseMove);
+    this.off(doc, 'mouseup', this.handleMouseUp);
+    this.off(doc, 'touchmove', this.handleMouseMove);
+    this.off(doc, 'touchend', this.handleMouseUp);
+    this.removeAttribute('tabindex');
+
+    this.addClass('disabled');
+
+    if (this.playerEvent) {
+      this.off(this.player_, this.playerEvent, this.update);
+    }
+    this.enabled_ = false;
   }
 
   /**