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

toggleControls() rewrite

Browse Source
This commit is contained in:
Albin Larsson 2018-05-16 04:52:04 +02:00
parent d7356726a1
commit 37c5fbfe16
4 changed files with 100 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
readme.md
View File

@ -357,7 +357,7 @@ player.fullscreen.enter(); // Enter fullscreen
| `fullscreen.exit()` | - | Exit fullscreen. | | `fullscreen.exit()` | - | Exit fullscreen. |
| `fullscreen.toggle()` | - | Toggle fullscreen. | | `fullscreen.toggle()` | - | Toggle fullscreen. |
| `airplay()` | - | Trigger the airplay dialog on supported devices. | | `airplay()` | - | Trigger the airplay dialog on supported devices. |
| `toggleControls(toggle)` | Boolean | Toggle the controls based on the specified boolean (video only). | | `toggleControls(toggle)` | Boolean | Toggle the controls (video only). Takes optional truthy value to force it on/off. |
| `on(event, function)` | String, Function | Add an event listener for the specified event. | | `on(event, function)` | String, Function | Add an event listener for the specified event. |
| `off(event, function)` | String, Function | Remove an event listener for the specified event. | | `off(event, function)` | String, Function | Remove an event listener for the specified event. |
| `supports(type)` | String | Check support for a mime type. | | `supports(type)` | String | Check support for a mime type. |

92
src/js/listeners.js
View File

@ -238,13 +238,36 @@ class Listeners {
}, 0); }, 0);
}); });
// Toggle controls visibility based on mouse movement // Toggle controls on mouse events and entering fullscreen
if (this.player.config.hideControls) { utils.on(this.player.elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', event => {
// Toggle controls on mouse events and entering fullscreen const { controls } = this.player.elements;
utils.on(this.player.elements.container, 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen', event => {
this.player.toggleControls(event); // Remove button states for fullscreen
}); if (event.type === 'enterfullscreen') {
} controls.pressed = false;
controls.hover = false;
}
// Show, then hide after a timeout unless another control event occurs
const show = [
'touchstart',
'touchmove',
'mousemove',
].includes(event.type);
let delay = 0;
if (show) {
ui.toggleControls.call(this.player, true);
// Use longer timeout for touch devices
delay = this.player.touch ? 3000 : 2000;
}
// Clear timer
clearTimeout(this.player.timers.controls);
// Timer to prevent flicker when seeking
this.player.timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay);
});
} }
// Listen for media events // Listen for media events
@ -570,26 +593,45 @@ class Listeners {
// Seek tooltip // Seek tooltip
on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event)); on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event));
// Toggle controls visibility based on mouse movement // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
if (this.player.config.hideControls) { on(this.player.elements.controls, 'mouseenter mouseleave', event => {
// Watch for cursor over controls so they don't hide when trying to interact this.player.elements.controls.hover = !this.player.touch && event.type === 'mouseenter';
on(this.player.elements.controls, 'mouseenter mouseleave', event => { });
this.player.elements.controls.hover = !this.player.touch && event.type === 'mouseenter';
});
// Watch for cursor over controls so they don't hide when trying to interact // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => { on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
this.player.elements.controls.pressed = [ this.player.elements.controls.pressed = [
'mousedown', 'mousedown',
'touchstart', 'touchstart',
].includes(event.type); ].includes(event.type);
}); });
// Focus in/out on controls // Focus in/out on controls
on(this.player.elements.controls, 'focusin focusout', event => { on(this.player.elements.controls, 'focusin focusout', event => {
this.player.toggleControls(event); const { config, elements, timers } = this.player;
});
} // Skip transition to prevent focus from scrolling the parent element
utils.toggleClass(elements.controls, config.classNames.noTransition, event.type === 'focusin');
// Toggle
ui.toggleControls.call(this.player, event.type === 'focusin');
// If focusin, hide again after delay
if (event.type === 'focusin') {
// Restore transition
setTimeout(() => {
utils.toggleClass(elements.controls, config.classNames.noTransition, false);
}, 0);
// Delay a little more for keyboard users
const delay = this.touch ? 3000 : 4000;
// Clear timer
clearTimeout(timers.controls);
// Hide
timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay);
}
});
// Mouse wheel for volume // Mouse wheel for volume
on( on(

123
src/js/plyr.js
View File

@ -971,119 +971,32 @@ class Plyr {
/** /**
* Toggle the player controls * Toggle the player controls
* @param {boolean} toggle - Whether to show the controls * @param {boolean} [toggle] - Whether to show the controls
*/ */
toggleControls(toggle) { toggleControls(toggle) {
// We need controls of course... // Don't toggle if missing UI support or if it's audio
if (!utils.is.element(this.elements.controls)) { if (this.supported.ui && !this.isAudio) {
return; // Get state before change
} const isHidden = utils.hasClass(this.elements.container, this.config.classNames.hideControls);
// Don't hide if no UI support or it's audio // Negate the argument if not undefined since adding the class to hides the controls
if (!this.supported.ui || this.isAudio) { const force = typeof toggle === 'undefined' ? undefined : !toggle;
return;
}
let delay = 0; // Apply and get updated state
let show = toggle; const hiding = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, force);
let isEnterFullscreen = false;
// Get toggle state if not set // Close menu
if (!utils.is.boolean(toggle)) { if (hiding && this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
if (utils.is.event(toggle)) { controls.toggleMenu.call(this, false);
// Is the enter fullscreen event
isEnterFullscreen = toggle.type === 'enterfullscreen';
// Events that show the controls
const showEvents = [
'touchstart',
'touchmove',
'mouseenter',
'mousemove',
'focusin',
];
// Events that delay hiding
const delayEvents = [
'touchmove',
'touchend',
'mousemove',
];
// Whether to show controls
show = showEvents.includes(toggle.type);
// Delay hiding on move events
if (delayEvents.includes(toggle.type)) {
delay = 2000;
}
// Delay a little more for keyboard users
if (!this.touch && toggle.type === 'focusin') {
delay = 3000;
utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true);
}
} else {
show = utils.hasClass(this.elements.container, this.config.classNames.hideControls);
} }
} // Trigger event on change
if (hiding !== isHidden) {
// Clear timer on every call const eventName = hiding ? 'controlshidden' : 'controlsshown';
clearTimeout(this.timers.controls); utils.dispatchEvent.call(this, this.media, eventName);
// If the mouse is not over the controls, set a timeout to hide them
if (show || this.paused || this.loading) {
// Check if controls toggled
const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false);
// Trigger event
if (toggled) {
utils.dispatchEvent.call(this, this.media, 'controlsshown');
}
// Always show controls when paused or if touch
if (this.paused || this.loading) {
return;
}
// Delay for hiding on touch
if (this.touch) {
delay = 3000;
} }
return !hiding;
} }
return false;
// If toggle is false or if we're playing (regardless of toggle),
// then set the timer to hide the controls
if (!show || this.playing) {
this.timers.controls = setTimeout(() => {
// We need controls of course...
if (!utils.is.element(this.elements.controls)) {
return;
}
// If the mouse is over the controls (and not entering fullscreen), bail
if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) {
return;
}
// Restore transition behaviour
if (!utils.hasClass(this.elements.container, this.config.classNames.hideControls)) {
utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, false);
}
// Set hideControls class
const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, this.config.hideControls);
// Trigger event and close menu
if (toggled) {
utils.dispatchEvent.call(this, this.media, 'controlshidden');
if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
controls.toggleMenu.call(this, false);
}
}
}, delay);
}
} }
/** /**

18
src/js/ui.js
View File

@ -173,7 +173,7 @@ const ui = {
} }
// Toggle controls // Toggle controls
this.toggleControls(!this.playing); ui.toggleControls.call(this);
}, },
// Check if media is loading // Check if media is loading
@ -188,14 +188,24 @@ const ui = {
// Timer to prevent flicker when seeking // Timer to prevent flicker when seeking
this.timers.loading = setTimeout(() => { this.timers.loading = setTimeout(() => {
// Toggle container class hook // Update progress bar loading class state
utils.toggleClass(this.elements.container, this.config.classNames.loading, this.loading); utils.toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
// Show controls if loading, hide if done // Update controls visibility
this.toggleControls(this.loading); ui.toggleControls.call(this);
}, this.loading ? 250 : 0); }, this.loading ? 250 : 0);
}, },
// Toggle controls based on state and `force` argument
toggleControls(force) {
const { controls } = this.elements;
if (controls && this.config.hideControls) {
// Show controls if force, loading, paused, or button interaction, otherwise hide
this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover));
}
},
// Update volume UI and storage // Update volume UI and storage
updateVolume() { updateVolume() {
if (!this.supported.ui) { if (!this.supported.ui) {