diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 52 | ||||
| -rw-r--r-- | src/less/plyr.less | 8 |
2 files changed, 39 insertions, 21 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index abec626d..350c1899 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.11 +// plyr.js v1.1.13 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -902,11 +902,10 @@ _showCaptions(player); // Disable unsupported browsers than report false positive - if ((player.browser.name === "IE" && player.browser.version === 10) || - (player.browser.name === "IE" && player.browser.version === 11) || - (player.browser.name === "Firefox" && player.browser.version >= 31) || - (player.browser.name === "Chrome" && player.browser.version >= 43) || - (player.browser.name === "Safari" && player.browser.version >= 7)) { + if ((player.browser.name === "IE" && player.browser.version >= 10) || + (player.browser.name === "Firefox" && player.browser.version >= 31) || + (player.browser.name === "Chrome" && player.browser.version >= 43) || + (player.browser.name === "Safari" && player.browser.version >= 7)) { // Debugging _log("Detected unsupported browser for HTML5 captions. Using fallback."); @@ -1147,9 +1146,39 @@ // Set class hook _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen); - // Remove hover class because mouseleave doesn't occur - if (player.isFullscreen) { + // Toggle controls visibility based on mouse movement and location + var hoverTimer, isMouseOver = false; + + // Show the player controls + function _showControls() { + // Set shown class + _toggleClass(player.controls, config.classes.hover, true); + + // Clear timer every movement + window.clearTimeout(hoverTimer); + + // If the mouse is not over the controls, set a timeout to hide them + if(!isMouseOver) { + hoverTimer = window.setTimeout(function() { + _toggleClass(player.controls, config.classes.hover, false); + }, 2000); + } + } + + // Check mouse is over the controls + function _setMouseOver (event) { + isMouseOver = (event.type === "mouseenter"); + } + + if(config.fullscreen.hideControls) { + // Hide on entering full screen _toggleClass(player.controls, config.classes.hover, false); + + // Keep an eye on the mouse location in relation to controls + _toggleHandler(player.controls, "mouseenter mouseleave", _setMouseOver, player.isFullscreen); + + // Show the controls on mouse move + _toggleHandler(player.container, "mousemove", _showControls, player.isFullscreen); } } @@ -1541,13 +1570,6 @@ } }); } - - // Bind to mouse hover - if(config.fullscreen.hideControls) { - _on(player.controls, "mouseenter mouseleave", function(event) { - _toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter")); - }); - } } // Destroy an instance diff --git a/src/less/plyr.less b/src/less/plyr.less index bd10d69f..3f572c3e 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -564,12 +564,9 @@ top: auto; bottom: 90px; - @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) { + @media (min-width: @bp-control-split) { bottom: 60px; } - @media (min-width: @bp-captions-large) { - bottom: 80px; - } } } .player-controls { @@ -582,11 +579,10 @@ // Hide controls when playing in full screen &.fullscreen-hide-controls.playing .player-controls { transform: translateY(100%) translateY(@control-spacing / 2); - transition: transform .3s 1s ease; + transition: transform .3s .2s ease; &.hover { transform: translateY(0); - transition-delay: 0; } } } |