Keyboard shortcut tweaks

src/js/listeners.js

@@ -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)) {
+                // Check focused element
-                    const focused = utils.getFocusElement();
+                // and if the focused element is not editable (e.g. text input)
-
+                // and any that accept key input http://webaim.org/techniques/keyboard/
-                    if (utils.is.htmlElement(focused) && utils.getFocusElement().type === 'radio') {
+                const focused = utils.getFocusElement();
-                        return;
+                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));
 

src/js/plyr.js

@@ -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 = this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
-            this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime),
-            0
-        );
         return this;
     }
 
     // Fast forward
     forward(seekTime) {
-        this.currentTime = Math.max(
+        this.currentTime = this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
-            this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime),
-            this.duration
-        );
         return this;
     }