feat: allow progress controls to be disabled #4649

brandonocasey · 2017-10-05T18:45:00Z

Description

Sometimes you do not want the user to be able to use the progress controls, such as during an ad. It would be quite difficult to do this outside of video.js due to the complexity of it. I think that we should allow this within video.js.

Specific Changes proposed

Add functions to disable/enable progress controls

Requirements Checklist

Feature implemented / Bug fixed
If necessary, more likely in a feature request than a bug fix
- Change has been verified in an actual browser (Chome, Firefox, IE)
- Unit Tests updated or fixed

thijstriemstra · 2017-10-13T00:29:48Z

It would be quite difficult to do this outside of video.js due to the complexity of it.

Here's what I used:

if (this.player.options_.controls) {
    // progress control isn't used by this plugin
    this.player.controlBar.progressControl.hide();
}

gkatsev · 2017-10-19T16:06:03Z

Hm... I'm not sure we want this. Disabling built-ins like this seems really weird to me. Since I can see cases where you'd want the progress control but just disable seeking but right now this disables it completely, if I understand it correctly.
One thing that I was thinking off middleware is the ability to cancel a chain, this is something that's currently missing and I think might fit better for the specific usecase.

brandonocasey · 2017-10-20T18:56:16Z

Well the real issue here is @gkatsev there isn't a good way to disable dragging on the progress bar when you want to. Disabling clicks is easy enough. All that this PR does is disable interacting with the progress bar. It is still there and works as intended, you just cant use it to seek.

gkatsev · 2017-10-24T20:18:27Z

Yeah, maybe this isn't that bad. We should either keep listening to mousemove or we should hide the mouse time display when disabled. Also, we probably want to change the cursor to regular when the control bar is disabled.

Also, probably should just be called disable and enable.

gkatsev · 2017-10-24T20:19:43Z

Maybe just hiding the mouse time display is best as another indicator that this is a "read-only" control would be better.

brandonocasey · 2017-10-24T20:21:25Z

All good ideas, I will implement them when I get some time.

brandonocasey · 2017-10-25T19:13:17Z

src/css/components/_progress.scss

@@ -8,6 +8,10 @@
  min-width: 4em;
 }

+.video-js .vjs-progress-control.disabled {
+  cursor: default;


we don't really want a pointer when its disabled

brandonocasey · 2017-10-25T19:13:46Z

src/css/components/_progress.scss

@@ -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;


we only want to increase the size on hover when enabled

brandonocasey · 2017-10-25T19:14:17Z

src/js/slider/slider.js

+    this.off(doc, 'mouseup', this.handleMouseUp);
+    this.off(doc, 'touchmove', this.handleMouseMove);
+    this.off(doc, 'touchend', this.handleMouseUp);
+    this.removeAttribute('tabindex');


Don't allow tabbing to the slider when it is disabled

gkatsev · 2017-10-25T19:21:26Z

src/css/components/_progress.scss

@@ -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 {


do we need an enabled class? Can that just be the default and also have a disabled class?

sure we can do that

gkatsev · 2017-10-25T19:23:39Z

src/js/slider/slider.js

+    }
+
+    this.removeClass('disabled');
+    this.addClass('enabled');


I don't think we need an enabled class, like mentioned earlier

gkatsev · 2017-10-25T19:23:59Z

src/js/slider/slider.js

+    this.off(doc, 'mouseup', this.handleMouseUp);
+    this.off(doc, 'touchmove', this.handleMouseMove);
+    this.off(doc, 'touchend', this.handleMouseUp);
+    this.removeAttribute('tabindex');


gkatsev · 2017-10-26T15:31:23Z

src/css/components/_progress.scss

@@ -40,6 +44,10 @@
  font-size: 1.666666666666666666em;
 }

+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {


I don't think this block is necessary and it causes the time display not to look right

First is the "broken" one, second is the "correct" one.

Though, now that I think about it, this is probably on purpose so that the progress holder/seek handle isn't as large?

gkatsev

LGTM

nicu-chiciuc · 2018-12-06T14:20:18Z

Didn't want to open a new issue since this one seems to be quite close. Basically based on Slider.js:78 I should be able to call player.controlBar.progressControl.seekBar.disable() and the user should not be able to seek anywhere.

Although the method is called and all the events are set off, the events still persist.

I'm currently trying to adapt danielcebrian/rangeslider-videojs to my needs so it will take some time to come up with some jsfiddle that shows this in action.

feat: allow progress controls to be disabled

0d5cd13

suggested changes

ffc87f9

brandonocasey commented Oct 25, 2017

View reviewed changes

gkatsev reviewed Oct 25, 2017

View reviewed changes

brandonocasey and others added 3 commits October 26, 2017 11:14

remove the enabled class

d67069f

remove extra css whitespace

d3b3e4f

remove extra css whitespace

570d339

gkatsev reviewed Oct 26, 2017

View reviewed changes

fix current time tooltip size

180e857

brandonocasey added the needs: LGTM Needs one or more additional approvals label Oct 26, 2017

gkatsev approved these changes Oct 31, 2017

View reviewed changes

gkatsev added confirmed and removed needs: LGTM Needs one or more additional approvals labels Oct 31, 2017

gkatsev merged commit a3c254e into master Oct 31, 2017

gkatsev deleted the feat/disable-progress-controls branch October 31, 2017 18:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow progress controls to be disabled #4649

feat: allow progress controls to be disabled #4649

brandonocasey commented Oct 5, 2017

thijstriemstra commented Oct 13, 2017

gkatsev commented Oct 19, 2017

brandonocasey commented Oct 20, 2017

gkatsev commented Oct 24, 2017

gkatsev commented Oct 24, 2017

brandonocasey commented Oct 24, 2017

brandonocasey Oct 25, 2017

brandonocasey Oct 25, 2017

brandonocasey Oct 25, 2017

gkatsev Oct 25, 2017

gkatsev Oct 25, 2017

brandonocasey Oct 26, 2017

gkatsev Oct 25, 2017

gkatsev Oct 25, 2017

gkatsev Oct 26, 2017 •

edited

Loading

gkatsev left a comment

nicu-chiciuc commented Dec 6, 2018

feat: allow progress controls to be disabled #4649

feat: allow progress controls to be disabled #4649

Conversation

brandonocasey commented Oct 5, 2017

Description

Specific Changes proposed

Requirements Checklist

thijstriemstra commented Oct 13, 2017

gkatsev commented Oct 19, 2017

brandonocasey commented Oct 20, 2017

gkatsev commented Oct 24, 2017

gkatsev commented Oct 24, 2017

brandonocasey commented Oct 24, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkatsev Oct 26, 2017 • edited Loading

Choose a reason for hiding this comment

gkatsev left a comment

Choose a reason for hiding this comment

nicu-chiciuc commented Dec 6, 2018

gkatsev Oct 26, 2017 •

edited

Loading