feat: allow progress controls to be disabled

CHANGELOG.md

@@ -1,25 +1,3 @@
-<a name="6.3.3"></a>
-## [6.3.3](https://github.com/videojs/video.js/compare/v6.3.2...v6.3.3) (2017-10-10)
-
-### Bug Fixes
-
-* a possible breaking change caused by the use of remainingTimeDisplay ([#4655](https://github.com/videojs/video.js/issues/4655)) ([b1de506](https://github.com/videojs/video.js/commit/b1de506))
-
-### Documentation
-
-* **hooks:** Fix Typo ([#4652](https://github.com/videojs/video.js/issues/4652)) ([6738f76](https://github.com/videojs/video.js/commit/6738f76))
-
-<a name="6.3.2"></a>
-## [6.3.2](https://github.com/videojs/video.js/compare/v6.3.1...v6.3.2) (2017-10-04)
-
-### Bug Fixes
-
-* Fix a typo in current time display component. ([#4647](https://github.com/videojs/video.js/issues/4647)) ([4658c7b](https://github.com/videojs/video.js/commit/4658c7b))
-
-### Documentation
-
-* Document how to add a version number to a plugin ([#4642](https://github.com/videojs/video.js/issues/4642)) ([85a34d1](https://github.com/videojs/video.js/commit/85a34d1))
-
 <a name="6.3.1"></a>
 ## [6.3.1](https://github.com/videojs/video.js/compare/v6.3.0...v6.3.1) (2017-10-03)
 

build/gh-release.js

@@ -35,10 +35,10 @@ if (args.prerelease || npmargs.some(function(arg) { return /next/.test(arg); }))
 
 ghrelease(options, function(err, result) {
   if (err) {
-    console.error('Unable to publish release to github');
-    console.error('err:', err);
-    console.error('result:', result);
+    console.log('Unable to publish release to github');
+    console.log(err);
   } else {
     console.log('Publish release to github!');
+    console.log(result);
   }
 });

docs/guides/hooks.md

@@ -14,7 +14,7 @@ Hooks exist so that users can "hook" on to certain Video.js player lifecycle
 
 ## Current Hooks
 
-Currently, the following hooks are available:
+Currently, the following hooks are avialable:
 
 ### beforesetup
 

docs/guides/plugins.md

@@ -225,25 +225,6 @@ The `dispose` method has several effects:
 
 In addition, if the player is disposed, the disposal of all its advanced plugin instances will be triggered as well.
 
-#### Version
-
-Adding a version number to a plugin is done by defining a `VERSION` property on the plugin before registering it:
-
-```js
-ExamplePlugin.VERSION = '1.0.1';
-
-videojs.registerPlugin('examplePlugin', ExamplePlugin);
-```
-
-Retrieve it using `videojs.getPluginVersion`:
-
-```js
-var version = videojs.getPluginVersion('examplePlugin');
-console.log(version);  // 1.0.1
-```
-
-Note that the [plugin generator](https://github.com/videojs/generator-videojs-plugin) already takes care of adding a version number for you.
-
 ### Advanced Example Advanced Plugin
 
 What follows is a complete ES6 advanced plugin that logs a custom message when the player's state changes between playing and paused. It uses all the described advanced features:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "6.3.3",
+  "version": "6.3.1",
   "main": "./dist/video.cjs.js",
   "style": "./dist/video-js.css",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",

src/js/control-bar/play-toggle.js

@@ -67,6 +67,7 @@ class PlayToggle extends Button {
    * @listens Player#seeked
    */
   handleSeeked(event) {
+    // remove the ended class
     this.removeClass('vjs-ended');
 
     if (this.player_.paused()) {
@@ -85,7 +86,6 @@ class PlayToggle extends Button {
    * @listens Player#play
    */
   handlePlay(event) {
-    this.removeClass('vjs-ended');
     this.removeClass('vjs-paused');
     this.addClass('vjs-playing');
     // change the button text to "Pause"

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/control-bar/time-controls/current-time-display.js

@@ -64,7 +64,7 @@ class CurrentTimeDisplay extends TimeDisplay {
     if (!this.player_.duration()) {
       return;
     }
-    this.updateFormattedTime_(this.player_.duration());
+    this.updateFormattedTime_(this.player.duration());
   }
 
 }

src/js/control-bar/time-controls/remaining-time-display.js

@@ -64,13 +64,7 @@ class RemainingTimeDisplay extends TimeDisplay {
       return;
     }
 
-    // @deprecated We should only use remainingTimeDisplay
-    // as of video.js 7
-    if (this.player_.remainingTimeDisplay) {
-      this.updateFormattedTime_(this.player_.remainingTimeDisplay());
-    } else {
-      this.updateFormattedTime_(this.player_.remainingTime());
-    }
+    this.updateFormattedTime_(this.player_.remainingTimeDisplay());
   }
 
   /**

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;
   }
 
   /**