-
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
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. |
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.
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. |
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.
Awesome, works great now. Thanks!
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 :) |
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.
Great addition, thanks for making the fix!
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.
LGTM
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