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

improvement: PlayProgressBar Smooth Transition #4591

Merged
merged 2 commits into from Nov 7, 2017

Conversation

Projects
None yet
8 participants
@vhmth
Contributor

vhmth commented Aug 28, 2017

Instead of tying the play progress update lifecycle to the timeupdate
event, the update happens every 15ms. This makes it so the play progress
transitions smoothly.

Fixes #4526

Description

Here's a video!

https://www.useloom.com/share/d578023adf3545e8b97a065d22d2ea92

Specific Changes proposed

Instead of relying on the timeupdate event exclusively to update the play progress bar, we set an interval on play and clear this interval on pause and ended.

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
    • Docs/guides updated
    • Example created (starter template on JSBin)
  • Reviewed by Two Core Contributors
@misteroneill

Thanks for the PR!

I'd like other core contributors to weigh in, but I have some concerns.

Intervals tend not to be a great way to do animation because they aren't very precise (anything that blocks the UI thread blocks/offsets execution of timers). If we were to stop using timeupdate to trigger progress bar updates, I think it'd be better to make use of requestAnimationFrame.

Also, the loss of throttling concerns me. The update() function is not fast and causes reflow/repaint. Calling it on a 15ms interval might cause performance problems on slower/mobile devices.

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Aug 28, 2017

Contributor

@misteroneill agreed on throttling. I can add back throttling the update function to ensure it only gets fired at most once every 15ms. However, we can't throttle it more than that if we want the play progress bar to appear as though it's progressing smoothly (at least if we do it in JS).

Another option here (that I'm not opposed to) is to make use of CSS transitions. It would require a bit more work, and I noticed janky issues when clicking around (we have to do logic where we remove the transition when someone clicks around the ProgressBar). I'd like to hear from a couple core contributors on this matter. I can write the code no problem, but there seem to be a few gotchas.

Contributor

vhmth commented Aug 28, 2017

@misteroneill agreed on throttling. I can add back throttling the update function to ensure it only gets fired at most once every 15ms. However, we can't throttle it more than that if we want the play progress bar to appear as though it's progressing smoothly (at least if we do it in JS).

Another option here (that I'm not opposed to) is to make use of CSS transitions. It would require a bit more work, and I noticed janky issues when clicking around (we have to do logic where we remove the transition when someone clicks around the ProgressBar). I'd like to hear from a couple core contributors on this matter. I can write the code no problem, but there seem to be a few gotchas.

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Aug 28, 2017

Contributor

Also, tell the Brightcove peeps Loom says hi @misteroneill! 👋 :-)

Contributor

vhmth commented Aug 28, 2017

Also, tell the Brightcove peeps Loom says hi @misteroneill! 👋 :-)

@mawenmaywin

This comment has been minimized.

Show comment
Hide comment
@mawenmaywin

mawenmaywin Aug 28, 2017

My version of VideoJS doesn't seem to have seperate .js files. How can I implement this with video.dev.js file? Are you sure we are talking about the same plugin here?

mawenmaywin commented Aug 28, 2017

My version of VideoJS doesn't seem to have seperate .js files. How can I implement this with video.dev.js file? Are you sure we are talking about the same plugin here?

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Aug 28, 2017

Contributor

@mawenmaywin this PR modifies the source code of video.js, which is only present when you clone the repo, not when you install via npm. You can clone my repo here, checkout the vinay/smooth_play_progress branch, and then build the dist files. Then copy the dist files to your node_modules directory in the application you're testing out locally to see this work.

Alternatively, these changes are pretty small. You can also just modify the dist files directly to add this interval and check it yourself.

Contributor

vhmth commented Aug 28, 2017

@mawenmaywin this PR modifies the source code of video.js, which is only present when you clone the repo, not when you install via npm. You can clone my repo here, checkout the vinay/smooth_play_progress branch, and then build the dist files. Then copy the dist files to your node_modules directory in the application you're testing out locally to see this work.

Alternatively, these changes are pretty small. You can also just modify the dist files directly to add this interval and check it yourself.

@mawenmaywin

This comment has been minimized.

Show comment
Hide comment
@mawenmaywin

mawenmaywin Aug 28, 2017

I'm sorry I am sort of a newb when it comes to plugins and Javascript. I don't understand what you're talking about but I think I will read up on node_modules and npm's.

mawenmaywin commented Aug 28, 2017

I'm sorry I am sort of a newb when it comes to plugins and Javascript. I don't understand what you're talking about but I think I will read up on node_modules and npm's.

@heff

Nice use of Video.js (via Loom) to help build Video.js! Pretty cool. :)

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Sep 18, 2017

Contributor

Given @gkatsev's update on not needing to test contrib-ads and my updates to the events that this timer binds to, what am I missing here? Looking at the unit tests, it doesn't seem like this really fits into any of them. Happy to add any unit tests y'all think are appropriate though.

On another note, doesn't seem like this should result in any updates to the docs.

I'll be here and dedicated to getting this over the finish line as soon as I get replies. :-)

Contributor

vhmth commented Sep 18, 2017

Given @gkatsev's update on not needing to test contrib-ads and my updates to the events that this timer binds to, what am I missing here? Looking at the unit tests, it doesn't seem like this really fits into any of them. Happy to add any unit tests y'all think are appropriate though.

On another note, doesn't seem like this should result in any updates to the docs.

I'll be here and dedicated to getting this over the finish line as soon as I get replies. :-)

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Sep 19, 2017

Member

I'm still a bit worried about having a setInterval that runs every 15ms. Though, I do agree with you it'll be nice to get this fixed. Maybe a larger interval would be ok? like 50ms or 100ms?
I know some projects use linear interpolation to calculate where the line should be but that's tricky too.

Member

gkatsev commented Sep 19, 2017

I'm still a bit worried about having a setInterval that runs every 15ms. Though, I do agree with you it'll be nice to get this fixed. Maybe a larger interval would be ok? like 50ms or 100ms?
I know some projects use linear interpolation to calculate where the line should be but that's tricky too.

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Sep 19, 2017

Member

Yup, I don't think we need any docs updated for this change, thanks for thinking of that :)

Member

gkatsev commented Sep 19, 2017

Yup, I don't think we need any docs updated for this change, thanks for thinking of that :)

@gkatsev gkatsev added the patch label Sep 19, 2017

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Sep 23, 2017

Contributor

@gkatsev just lmk what you wanna go with. I'm cool with bumping it down to 50.

Contributor

vhmth commented Sep 23, 2017

@gkatsev just lmk what you wanna go with. I'm cool with bumping it down to 50.

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Oct 5, 2017

Contributor

Hey y'all bump here?

Contributor

vhmth commented Oct 5, 2017

Hey y'all bump here?

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Oct 8, 2017

Contributor

It seems like the main concern might be that the interval is left sitting around when it shouldn't be. Are there any tests you'd like me to write to put everyone's mind at ease? I'd be happy to do that if it helps get this landed faster.

Contributor

vhmth commented Oct 8, 2017

It seems like the main concern might be that the interval is left sitting around when it shouldn't be. Are there any tests you'd like me to write to put everyone's mind at ease? I'd be happy to do that if it helps get this landed faster.

@paulius005

This comment has been minimized.

Show comment
Hide comment
@paulius005

paulius005 Oct 19, 2017

Any updates here?

paulius005 commented Oct 19, 2017

Any updates here?

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Oct 24, 2017

Member

Hey, thanks for your patience, we went to demuxed (and I even spoke there) and FOMS in early october and that took a lot of energy.

@vhmth thanks for the looms, they were great. Maybe 30ms would be a good compromise? it being 2x of 15 and 30fps is a decent goal :). Thoughts @misteroneill and @heff?

Also, I think bring the throttling back would be good, and of course, it should match the internal we're using. Another thought is to wrap the update call in the interval a requestAnimationFrame. Do you think that makes sense?

Member

gkatsev commented Oct 24, 2017

Hey, thanks for your patience, we went to demuxed (and I even spoke there) and FOMS in early october and that took a lot of energy.

@vhmth thanks for the looms, they were great. Maybe 30ms would be a good compromise? it being 2x of 15 and 30fps is a decent goal :). Thoughts @misteroneill and @heff?

Also, I think bring the throttling back would be good, and of course, it should match the internal we're using. Another thought is to wrap the update call in the interval a requestAnimationFrame. Do you think that makes sense?

@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Oct 25, 2017

Contributor

@gkatsev no worries. Dope! Good to put a face to the avatar.

Just to be clear, action items:

  1. 30ms timeout
  2. Add a throttle back to the update func that's at 30ms as well
  3. Call requestAnimationFrame within the timeout (seems reasonable)
Contributor

vhmth commented Oct 25, 2017

@gkatsev no worries. Dope! Good to put a face to the avatar.

Just to be clear, action items:

  1. 30ms timeout
  2. Add a throttle back to the update func that's at 30ms as well
  3. Call requestAnimationFrame within the timeout (seems reasonable)
@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Oct 25, 2017

Contributor

I can do that very quickly, will wait to hear from others before I update though

Contributor

vhmth commented Oct 25, 2017

I can do that very quickly, will wait to hear from others before I update though

@misteroneill

This comment has been minimized.

Show comment
Hide comment
@misteroneill

misteroneill Oct 25, 2017

Member

Yeah, that sounds good.

I'm not 100% sure stalled is needed here - I'm not sure it means playback has stopped.

Member

misteroneill commented Oct 25, 2017

Yeah, that sounds good.

I'm not 100% sure stalled is needed here - I'm not sure it means playback has stopped.

@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Oct 25, 2017

Member

Yeah, stalled here is the network, not playback. Otherwise 👍

Member

heff commented Oct 25, 2017

Yeah, stalled here is the network, not playback. Otherwise 👍

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Oct 31, 2017

Member

@vhmth any updates? :) looks like there's some conflicts now due to this pr (#4648).

Member

gkatsev commented Oct 31, 2017

@vhmth any updates? :) looks like there's some conflicts now due to this pr (#4648).

improvement: PlayProgressBar Smooth Transition
Instead of tying the play progress update lifecycle to the timeupdate
event, the update happens every 15ms. This makes it so the play progress
transitions smoothly.

Fixes #4526
@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Nov 2, 2017

Contributor

@gkatsev updated and rebased! Still looking good locally and tests are passing still. :-)

Contributor

vhmth commented Nov 2, 2017

@gkatsev updated and rebased! Still looking good locally and tests are passing still. :-)

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Nov 2, 2017

Member

Awesome, thanks @vhmth!

Member

gkatsev commented Nov 2, 2017

Awesome, thanks @vhmth!

@gkatsev

gkatsev approved these changes Nov 7, 2017

I removed stalled from the events list. We can always add it back in if we find that we do in-fact want it.

Thanks for your work @vhmth just tried it out locally and it looks great!

@gkatsev gkatsev added confirmed and removed needs: LGTM labels Nov 7, 2017

@gkatsev gkatsev merged commit acc641a into videojs:master Nov 7, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
deploy/netlify Deploy preview ready!
Details
@vhmth

This comment has been minimized.

Show comment
Hide comment
@vhmth

vhmth Nov 7, 2017

Contributor

Sweet!

Contributor

vhmth commented Nov 7, 2017

Sweet!

@apurvgandhwani

This comment has been minimized.

Show comment
Hide comment
@apurvgandhwani

apurvgandhwani commented on 80500a0 Aug 24, 2018

What is Fn?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment