Fix the video continue player when user drag in timeline #4918
Conversation
|
Hey, thanks for making the PR. We haven't done anything to change this behavior, though, I definitely can reproduce this locally with 6.7.0 and cannot reproduce it with 6.6.0. However, I cannot reproduce this with 6.7.1. Were you using 6.7.0? If so, can you retest with 6.7.1? I think I may want to deprecate version 6.7.0 itself and just stick with 6.7.1. |
199911
force-pushed
the
fix/pause-when-seek
branch
from
cd66da9
to
06c5ffb
Compare
|
I can reproduce the problem on 6.7.1 git checkout master
git pull upstream master
rm -rf dist
cp sandbox/index.html.example sandbox/index.html
npm run build
npm run start
# open http://localhost:9999/sandbox/PS: the bug only happen when dragging the thin area between the white timeline and control bar, but not the white timeline |
|
Oh, I see. The PS is the important part here :) |
|
Just tried it here (https://deploy-preview-4918--videojs-docs.netlify.com/test-example/) and looks like this is causing an issue when dragging on the seekbar itself now. Seeking in the progress control area will pause and play correctly but now when seeking in the seekbar, it will stay paused when stopped scrubbing. |
Use event.stopPropagation() to prevent the mouse down and mouse up events being handled in both progress control and seek bar.
199911
force-pushed
the
fix/pause-when-seek
branch
from
06c5ffb
to
e5c8c8c
Compare
|
@gkatsev When we drag the seek bar, the My fix is to stop the event propagate from seek bar to progress control panel, if it is handled by seek bar already. |
| @@ -157,6 +157,9 @@ class ProgressControl extends Component { | |||
| */ | |||
| handleMouseDown(event) { | |||
| const doc = this.el_.ownerDocument; | |||
| const seekBar = this.getChild('seekBar'); | |||
There was a problem hiding this comment.
Just in case the seekBar was removed from the player through the player options, you'll want to double check the seekBar component was found before calling seekBar.handleMouseDown()
There was a problem hiding this comment.
That's true, I have also checked other function in this component to make sure seekBar exist.
|
definitely doesn't hurt to do the check, though, disabling the seekbar as makes the component useless :) |
Description
When user seek by dragging the area below the timeline, the video continue playing.
Video should stop when user is seeking
Specific Changes proposed
Reuse the mouse up and mouse down event handler of seekBar. So the video is paused during seek
Requirements Checklist