feat: allow progress controls to be disabled

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;
 }
@@ -36,7 +40,7 @@
 
 // This increases the size of the progress holder so there is an increased
 // hit area for clicks/touches.
-.video-js .vjs-progress-control:hover .vjs-progress-holder {
+.video-js .vjs-progress-control:hover .vjs-progress-holder.enabled {
   font-size: 1.666666666666666666em;
 }
 

src/css/components/_slider.scss

@@ -7,8 +7,14 @@
   @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 {
   text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);
 

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,54 @@ 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.removeClass('enabled');
+    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.addClass('enabled');
+
+    this.enabled_ = true;
+  }
+
   /**
    * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
    *

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

@@ -141,6 +141,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,74 @@ 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(this.player_, this.playerEvent, this.update);
+    }
+
+    this.removeClass('disabled');
+    this.addClass('enabled');
+    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.removeClass('enabled');
+    this.addClass('disabled');
 
     if (this.playerEvent) {
-      this.on(player, this.playerEvent, this.update);
+      this.off(this.player_, this.playerEvent, this.update);
     }
+    this.enabled_ = false;
   }
 
   /**