-
Notifications
You must be signed in to change notification settings - Fork 7.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: allow progress controls to be disabled #4649
Changes from all commits
0d5cd13
ffc87f9
d67069f
d3b3e4f
570d339
180e857
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
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 | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't allow tabbing to the slider when it is disabled There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good call. |
||
|
||
this.addClass('disabled'); | ||
|
||
if (this.playerEvent) { | ||
this.on(player, this.playerEvent, this.update); | ||
this.off(this.player_, this.playerEvent, this.update); | ||
} | ||
this.enabled_ = false; | ||
} | ||
|
||
/** | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we don't really want a pointer when its disabled