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

Keyboard shortcut tweaks

Browse Source
This commit is contained in:
Sam Potts
2017-11-05 23:09:33 +11:00
parent 6bebbe4153
commit 45df319823
4 changed files with 32 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/js/listeners.js
View File

@ -137,6 +137,21 @@ const listeners = {
const inputEvent = this.browser.isIE ? 'change' : 'input';
let last = null;
// Trigger custom and default handlers
const proxy = (event, handlerKey, defaultHandler) => {
const customHandler = this.config.listeners[handlerKey];
// Execute custom handler
if (utils.is.function(customHandler)) {
customHandler.call(this, event);
}
// Only call default handler if not prevented in custom handler
if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
defaultHandler.call(this, event);
}
};
// Click play/pause helper
const togglePlay = () => {
const play = this.togglePlay();
@ -153,6 +168,7 @@ const listeners = {
// Get the key code for an event
const getKeyCode = event => (event.keyCode ? event.keyCode : event.which);
// Handle key press
const handleKey = event => {
const code = getKeyCode(event);
const pressed = event.type === 'keydown';
@ -197,14 +213,13 @@ const listeners = {
76,
79,
];
const checkFocus = [38, 40];
if (checkFocus.includes(code)) {
const focused = utils.getFocusElement();
if (utils.is.htmlElement(focused) && utils.getFocusElement().type === 'radio') {
return;
}
// Check focused element
// and if the focused element is not editable (e.g. text input)
// and any that accept key input http://webaim.org/techniques/keyboard/
const focused = utils.getFocusElement();
if (utils.is.htmlElement(focused) && utils.matches(focused, this.config.selectors.editable)) {
return;
}
// If the code is found prevent default (e.g. prevent scrolling for arrows)
@ -234,7 +249,7 @@ const listeners = {
case 75:
// Space and K key
if (!held) {
togglePlay();
this.togglePlay();
}
break;
@ -308,32 +323,9 @@ const listeners = {
// Keyboard shortcuts
if (this.config.keyboard.focused) {
// Handle global presses
if (this.config.keyboard.global) {
utils.on(
window,
'keydown keyup',
event => {
const code = getKeyCode(event);
const focused = utils.getFocusElement();
const allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];
// Only handle global key press if key is in the allowed keys
// and if the focused element is not editable (e.g. text input)
// and any that accept key input http://webaim.org/techniques/keyboard/
if (
allowed.includes(code) &&
(!utils.is.htmlElement(focused) || !utils.matches(focused, this.config.selectors.editable))
) {
handleKey(event);
}
},
false
);
}
// Handle presses on focused
utils.on(this.elements.container, 'keydown keyup', handleKey, false);
} else if (this.config.keyboard.global) {
utils.on(window, 'keydown keyup', handleKey, false);
}
// Detect tab focus
@ -355,21 +347,6 @@ const listeners = {
}, 0);
});
// Trigger custom and default handlers
const proxy = (event, handlerKey, defaultHandler) => {
const customHandler = this.config.listeners[handleKey];
// Execute custom handler
if (utils.is.function(customHandler)) {
customHandler.call(this, event);
}
// Only call default handler if not prevented in custom handler
if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
defaultHandler.call(this, event);
}
};
// Play
utils.on(this.elements.buttons.play, 'click', event => proxy(event, 'play', togglePlay));

13
src/js/plyr.js
View File

@ -214,6 +214,9 @@ class Plyr {
this.elements.container = utils.createElement('div');
utils.wrap(this.media, this.elements.container);
// Allow focus to be captured
this.elements.container.setAttribute('tabindex', 0);
// Add style hook
ui.addStyleHook.call(this);
@ -287,19 +290,13 @@ class Plyr {
// Rewind
rewind(seekTime) {
this.currentTime = Math.min(
this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime),
0
);
this.currentTime = this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
return this;
}
// Fast forward
forward(seekTime) {
this.currentTime = Math.max(
this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime),
this.duration
);
this.currentTime = this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
return this;
}