Autohide controls after mouseleave

[ivanvermeyen]

Hi,

When I open a YouTube or Vimeo video in fullscreen, the controls hide as intended. When I move the mouse over the progress bar at the bottom, the controls slide up, but when I move the mouse back up, they don't hide again. I'm having this issue with the latest Chrome and Firefox on OSX.

After doing some console.logs, it seems that "mousemove" on the ".plyr" container isn't triggered when you move over the video itself. So "_showControls()" is never called unless you are actually moving over the controls. Therefor "isMouseOver" is always true when "_showControls()" is fired.

https://github.com/Selz/plyr/blob/master/src/js/plyr.js#L1755-L1768

It seems to be fixed when I change line 1783:

_toggleListener(plyr.container, 'mousemove', _showControls, plyr.isFullscreen);

into

_toggleListener(plyr.controls, 'mouseenter mouseleave', _showControls, plyr.isFullscreen);

But I'm not entirely sure if this would impact other parts of the code.

[sampotts]

I ended up re-writing this as the new source stuff meant after source change, the events weren't bound properly. Could you give the latest version a check?

It should wait 2 seconds (I could make that timeout an option) before hiding the controls if you've not moved the mouse. When mouse is over the controls, they should never hide.

Feel free to close if you think it's fixed now.

[ivanvermeyen]

Thanks for the fast response! With the dist/css it works like a charm! :)

When I use the compiled SCSS the controls never hide though. Probably still a typo somewhere in the SCSS.

[ivanvermeyen]

I think I found it, on line 643 in the SCSS file I changed:

&.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing

into:

&.plyr--fullscreen-enabled.plyr--fullscreen--hide-controls.plyr--playing

(added "-enabled" to the first selector).

Seems to compile and work now.

EDIT:

That whole block is nested within:

// Full screen mode
&--fullscreen,
&--fullscreen-active  {
}

So it should be one level up, or exclude "&--fullscreen" and "&--fullscreen-active":

        // Hide controls when playing in full screen
        &.plyr--fullscreen--hide-controls.plyr--playing {
            .plyr__controls {
                transform: translateY(100%) translateY($plyr-control-spacing / 2);
                transition: transform .3s .2s ease;
            }
            .plyr__captions {
                bottom: ($plyr-control-spacing / 2);
                transition: bottom .3s .2s ease;
            }
            &.plyr--hover .plyr__controls {
                transform: translateY(0);
            }
        }

The next block for the Captions also has these duplicate references.

[sampotts]

You're right - it needed to be outside that block (which it is in the LESS, hence that working). All sorted 👍