web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-08 07:00:10 +02:00
Code Releases Activity

fix(progress control): Fix the video continuing to play when the user scrubs outside of seekbar (#4918)

Browse Source 
Scrubbing inside the seekbar paused the player properly but scrubbing inside the progress control outside the seekbar, the player never paused. This meant that when you scrubbed, if you kept the mouse down but lingered for a moment, the player would continue playing until the mouse moved again.

This fixes it so that the seekbar mousedown and mouseup handlers are called when the progress control mousedown and mouseup handlers are triggered.
This commit is contained in:
Ku Lok Sun 2018-02-13 06:34:44 +08:00 committed by Gary Katsevman
parent 29a8ee1d60
commit a1cef809b3
2 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/js/control-bar/progress-control/progress-control.js
View File

@ -55,22 +55,25 @@ class ProgressControl extends Component {
*/
handleMouseMove(event) {
const seekBar = this.getChild('seekBar');
const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
const seekBarEl = seekBar.el();
const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
// The default skin has a gap on either side of the `SeekBar`. This means
// that it's possible to trigger this behavior outside the boundaries of
// the `SeekBar`. This ensures we stay within it at all times.
if (seekBarPoint > 1) {
seekBarPoint = 1;
} else if (seekBarPoint < 0) {
seekBarPoint = 0;
}
if (seekBar) {
const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
const seekBarEl = seekBar.el();
const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
if (mouseTimeDisplay) {
mouseTimeDisplay.update(seekBarRect, seekBarPoint);
// The default skin has a gap on either side of the `SeekBar`. This means
// that it's possible to trigger this behavior outside the boundaries of
// the `SeekBar`. This ensures we stay within it at all times.
if (seekBarPoint > 1) {
seekBarPoint = 1;
} else if (seekBarPoint < 0) {
seekBarPoint = 0;
}
if (mouseTimeDisplay) {
mouseTimeDisplay.update(seekBarRect, seekBarPoint);
}
}
}
@ -97,7 +100,9 @@ class ProgressControl extends Component {
handleMouseSeek(event) {
const seekBar = this.getChild('seekBar');
seekBar.handleMouseMove(event);
if (seekBar) {
seekBar.handleMouseMove(event);
}
}
/**
@ -157,6 +162,11 @@ class ProgressControl extends Component {
*/
handleMouseDown(event) {
const doc = this.el_.ownerDocument;
const seekBar = this.getChild('seekBar');
if (seekBar) {
seekBar.handleMouseDown(event);
}
this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
@ -175,6 +185,11 @@ class ProgressControl extends Component {
*/
handleMouseUp(event) {
const doc = this.el_.ownerDocument;
const seekBar = this.getChild('seekBar');
if (seekBar) {
seekBar.handleMouseUp(event);
}
this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
this.off(doc, 'touchmove', this.throttledHandleMouseSeek);

4
src/js/control-bar/progress-control/seek-bar.js
View File

@ -179,6 +179,8 @@ class SeekBar extends Slider {
return;
}
// Stop event propagation to prevent double fire in progress-control.js
event.stopPropagation();
this.player_.scrubbing(true);
this.videoWasPlaying = !this.player_.paused();
@ -244,6 +246,8 @@ class SeekBar extends Slider {
handleMouseUp(event) {
super.handleMouseUp(event);
// Stop event propagation to prevent double fire in progress-control.js
event.stopPropagation();
this.player_.scrubbing(false);
/**