Permalink
Browse files

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.
  • Loading branch information...
BrandonOCasey authored and gkatsev committed Oct 31, 2017
1 parent bebca9c commit a3c254eeb8b1373b30bafd5119fb072eea0ba1dd
@@ -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
@@ -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 {
@@ -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`.
*
@@ -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
*
View
@@ -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(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.on(player, this.playerEvent, this.update);
this.off(this.player_, this.playerEvent, this.update);
}
this.enabled_ = false;
}
/**

0 comments on commit a3c254e

Please sign in to comment.