ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor tweak to hiding controls in fullscreen

Browse Source
This commit is contained in:
Sam Potts
2015-06-08 21:43:49 +10:00
parent f398266206
commit f41854ebe7
8 changed files with 52 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/js/plyr.js
View File

@ -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

8
src/less/plyr.less
View File

@ -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;
}
}
}