feat: allow progress controls to be disabled

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.enableControls();
   }
 
   /**
@@ -101,6 +100,47 @@ 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
+   */
+  controlsEnabled() {
+    return this.controlsEnabled_;
+  }
+
+  /**
+   * Disable all controls on the progress control and its children
+   */
+  disableControls() {
+    this.children().forEach((child) => child.disableControls && child.disableControls());
+
+    if (!this.controlsEnabled()) {
+      return;
+    }
+
+    this.off(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.off(this.el_, 'mousemove', this.handleMouseMove);
+    this.handleMouseUp();
+    this.controlsEnabled_ = false;
+  }
+
+  /**
+   * Enable all controls on the progress control and its children
+   */
+  enableControls() {
+    this.children().forEach((child) => child.enableControls && child.enableControls());
+
+    if (this.controlsEnabled()) {
+      return;
+    }
+
+    this.on(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.on(this.el_, 'mousemove', this.handleMouseMove);
+    this.controlsEnabled_ = true;
+  }
+
   /**
    * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
    *

src/js/slider/slider.js

@@ -31,17 +31,65 @@ class Slider extends Component {
     // Set a horizontal or vertical class on the slider depending on the slider type
     this.vertical(!!this.options_.vertical);
 
+    this.enableControls();
+  }
+
+  /**
+   * Are controls are currently enabled for this slider or not.
+   *
+   * @return {boolean}
+   *         true if controls are enabled, false otherwise
+   */
+  controlsEnabled() {
+    return this.controlsEnabled_;
+  }
+
+  /**
+   * Enable controls for this slider if they are disabled
+   */
+  enableControls() {
+    if (this.controlsEnabled()) {
+      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.controlsEnabled_ = true;
+  }
+
+  /**
+   * Disable controls for this slider if they are enabled
+   */
+  disableControls() {
+    if (!this.controlsEnabled()) {
+      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);
+
+    if (this.playerEvent) {
+      this.off(this.player_, this.playerEvent, this.update);
+    }
+    this.controlsEnabled_ = false;
   }
 
   /**