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

Don't hide controls on focusout event

Browse Source 
It was immediately hiding controls on some touch-enabled devices. It will now also wait 4s to close after tabbing out, instead of immediately.
This commit is contained in:
James 2018-09-26 14:48:10 +10:00
parent 5536e97482
commit 8bdd90a2a8
1 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/js/listeners.js
View File

@ -697,33 +697,29 @@ class Listeners {
elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type); elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
}); });
// Focus in/out on controls // Show controls when they receive focus (e.g., when using keyboard tab key)
this.bind(elements.controls, 'focusin focusout', event => { this.bind(elements.controls, 'focusin', event => {
const { config, elements, timers } = player; const { config, elements, timers } = player;
const isFocusIn = event.type === 'focusin';
// Skip transition to prevent focus from scrolling the parent element // Skip transition to prevent focus from scrolling the parent element
toggleClass(elements.controls, config.classNames.noTransition, isFocusIn); toggleClass(elements.controls, config.classNames.noTransition, true);
// Toggle // Toggle
ui.toggleControls.call(player, isFocusIn); ui.toggleControls.call(player, true);
// If focusin, hide again after delay // Restore transition
if (isFocusIn) { setTimeout(() => {
// Restore transition toggleClass(elements.controls, config.classNames.noTransition, false);
setTimeout(() => { }, 0);
toggleClass(elements.controls, config.classNames.noTransition, false);
}, 0);
// Delay a little more for keyboard users // Delay a little more for keyboard users
const delay = this.touch ? 3000 : 4000; const delay = this.touch ? 3000 : 4000;
// Clear timer // Clear timer
clearTimeout(timers.controls); clearTimeout(timers.controls);
// Hide // Hide again after delay
timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay); timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
}
}); });
// Mouse wheel for volume // Mouse wheel for volume