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: Control-bar autohide when cursor placed over it #5258 #5692

Merged
merged 7 commits into from Dec 26, 2018

Conversation

Projects
None yet
3 participants
@xjoaoalvesx
Copy link
Contributor

xjoaoalvesx commented Dec 17, 2018

Description

Solves #5258

Specific Changes proposed

Adds two event handlers for 'mouseenter' and 'mouseleave' events on the control-bar.
When the 'mouseenter' is triggered the inactivityTimeout is set to 0 and on 'mouseleave' is set to the default value (2s).

Expected behavior:

  • cursor stops inside control bar -> sets timeout 0s so nothing happens
  • cursor leaves player bounds -> sets timeout 2s before going inactive

Requirements Checklist

  • Feature implemented / Bug fixed
  • Change has been verified in an actual browser (Chrome, Firefox)
  • Tests cases passed
  • Reviewed by Two Core Contributors

xjoaoalvesx added some commits Dec 17, 2018

fix(player): add mouse event handlers ('mouseenter' and 'mouseleave)
Handles the 'mouseenter' and 'mouseleave' events when triggered in the control-bar
Closes #5258
test(player): testing mouseenter and mouseleave events
Added test for expected behaviour of the player/control-bar when the events are triggered
@welcome

This comment has been minimized.

Copy link

welcome bot commented Dec 17, 2018

💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

  • Run npm run lint -- --errors locally to catch formatting errors earlier.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@gkatsev
Copy link
Member

gkatsev left a comment

Thanks for the PR!
I wonder if a better way of doing this would be to save the interval id and the handler and then clear the interval on mouseenter and then recreate it on mouseleave? Though, storing the previous inactivity timeout would be easiest.

});

this.on(this.getChild('controlBar'), 'mouseleave', function(event) {
this.options_.inactivityTimeout = 2000;

This comment has been minimized.

@gkatsev

gkatsev Dec 17, 2018

Member

if someone set a custom inactivity timeout, this will reset that value.

This comment has been minimized.

@gkatsev

gkatsev Dec 17, 2018

Member

We could store the inactivityTimeout in this.cache_ and then reset to that value.

This comment has been minimized.

@xjoaoalvesx

xjoaoalvesx Dec 18, 2018

Author Contributor

Good point, I now save the value in the cache object on mouseenter and retrieve it on mouseleave

xjoaoalvesx added some commits Dec 18, 2018

fix: no hardcode in mouseleave handler
Save previous timeout value in cache_ and retrieves it on mouseleave
test: testing mouseenter and mouseleave events
now using the player's cache_ object to store inactivityTimeout value
test: test mouseenter and mouseleave events
now with the changes using the player's cache object
@@ -3444,6 +3444,18 @@ class Player extends Component {
this.on('mousemove', handleMouseMove);
this.on('mouseup', handleMouseUp);

this.on(this.getChild('controlBar'), 'mouseenter', function(event) {

This comment has been minimized.

@gkatsev

gkatsev Dec 18, 2018

Member

we should store the control bar object in a variable (to also re-use below) and do a null-check on it.

Additionally, it would be better to call .on directly on the contrlBar itself as the handler will automatically be removed when the control bar is disposed. I don't think the current event handler gets cleared up automatically, currently.

This comment has been minimized.

@xjoaoalvesx

xjoaoalvesx Dec 18, 2018

Author Contributor

Edit: Actually, I think I understand what you mean: Besides creating a local variable to reuse and test for null on the player, we should create separate methods on the controlBar class to add the handlers and call them from the player.

This comment has been minimized.

@gkatsev

gkatsev Dec 18, 2018

Member

Basically, this.on(anotherComponent, 'mouseenter', () => {}) vs anotherComponent.on('mouseenter', () => {}). I am unsure that the first one will have the mouseenter event removed when the component is disposed where-as I'm certain the second one will be done properly.

Ultimately, the code should end up something like:

const controlBar = this.getChild('controlBar');

if (controlBar) {
  controlBar.on('mouseenter', (event) => /* ... */);
  controlBar.on('mouseleave', (event) => /* ... */);
}

This comment has been minimized.

@xjoaoalvesx

xjoaoalvesx Dec 19, 2018

Author Contributor

I completely understand what you say so now we can see that on the code.

@gkatsev gkatsev added the patch label Dec 18, 2018

fix : controlbar autohide
event handlers for mouseenter and mouseleave are now added to the controlBar itself

@gkatsev gkatsev added the needs: LGTM label Dec 19, 2018

@gkatsev gkatsev added confirmed and removed needs: LGTM labels Dec 19, 2018

@gkatsev gkatsev merged commit 6ebc772 into videojs:master Dec 26, 2018

2 checks passed

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

This comment has been minimized.

Copy link

welcome bot commented Dec 26, 2018

Congrats on merging your first pull request! 🎉🎉🎉

@xjoaoalvesx xjoaoalvesx deleted the xjoaoalvesx:my-branch branch Dec 28, 2018

@xjoaoalvesx xjoaoalvesx restored the xjoaoalvesx:my-branch branch Dec 28, 2018

@xjoaoalvesx xjoaoalvesx deleted the xjoaoalvesx:my-branch branch Dec 28, 2018

@xjoaoalvesx xjoaoalvesx restored the xjoaoalvesx:my-branch branch Dec 28, 2018

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