Added ‘global’ keyboard shortcut option

1 files changed, 100 insertions, 73 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 9e26c2c8..4ea6631b 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.1
+// plyr.js v2.0.2
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -43,12 +43,15 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.1/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.2/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
         disableContextMenu:     true,
-        keyboardShorcuts:       true,
+        keyboardShorcuts:       {
+            focused:            true,
+            global:             true
+        },
         tooltips: {
             controls:           false,
             seek:               true
@@ -56,6 +59,7 @@
         selectors: {
             html5:              'video, audio',
             embed:              '[data-type]',
+            editable:           'input, select, [contenteditable]',
             container:          '.plyr',
             controls: {
                 container:      null,
@@ -2896,88 +2900,111 @@
             }
 
             // Keyboard shortcuts
-            if (config.keyboardShorcuts) {
-                var first = true;
+            if (config.keyboardShorcuts.focused) {
+                var last = null;
+
+                // Handle global presses
+                if (config.keyboardShorcuts.global) {
+                    _on(window, 'keydown keyup', function(event) {
+                        var code = getKeyCode(event),
+                        focused = getFocusElement(),
+                        allowed = [48,49,50,51,52,53,54,56,57,75,77,70,67],
+                        count   = get().length;
+
+                        // Only handle global key press if there's only one player
+                        // and the 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 (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
+                            handleKey(event);
+                        }
+                    });
+                }
 
-                _on(plyr.container, 'keydown keyup', function(event) {
-                    var code = getKeyCode(event),
-                        pressed = event.type === 'keydown';
+                // Handle presses on focused
+                _on(plyr.container, 'keydown keyup', handleKey);
+            }
 
-                    // If the event is bubbled from the media element
-                    // Firefox doesn't get the keycode for whatever reason
-                    if (!_is.number(code)) {
-                        return;
-                    }
+            function handleKey(event) {
+                var code = getKeyCode(event),
+                    pressed = event.type === 'keydown',
+                    held = pressed && code === last;
 
-                    // Seek by the number keys
-                    function seekByKey() {
-                        // Get current duration
-                        var duration = plyr.media.duration;
+                // If the event is bubbled from the media element
+                // Firefox doesn't get the keycode for whatever reason
+                if (!_is.number(code)) {
+                    return;
+                }
 
-                        // Bail if we have no duration set
-                        if (!_is.number(duration)) {
-                            return;
-                        }
+                // Seek by the number keys
+                function seekByKey() {
+                    // Get current duration
+                    var duration = plyr.media.duration;
 
-                        // Divide the max duration into 10th's and times by the number value 
-                        _seek((duration / 10) * (code - 48));
+                    // Bail if we have no duration set
+                    if (!_is.number(duration)) {
+                        return;
                     }
 
-                    // Handle the key on keydown
-                    // Reset on keyup
-                    if (pressed) {
-                        // Which keycodes should we prevent default
-                        var preventDefault = [48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67];
-
-                        // If the code is found prevent default (e.g. prevent scrolling for arrows)
-                        if (_inArray(preventDefault, code)) {
-                            event.preventDefault();
-                        }
+                    // Divide the max duration into 10th's and times by the number value 
+                    _seek((duration / 10) * (code - 48));
+                }
 
-                        switch(code) {
-                            // 0-9
-                            case 48: 
-                            case 49: 
-                            case 50: 
-                            case 51: 
-                            case 52: 
-                            case 53: 
-                            case 54: 
-                            case 55: 
-                            case 56:
-                            case 57: if (first) { seekByKey() } break;
-                            // Space and K key
-                            case 32: 
-                            case 75: if (first) { _togglePlay(); } break;
-                            // Arrow up
-                            case 38: _increaseVolume(); break;
-                            // Arrow down
-                            case 40: _decreaseVolume(); break;
-                            // M key
-                            case 77: if (first) { _toggleMute() } break;
-                            // Arrow forward
-                            case 39: _forward(); break;
-                            // Arrow back
-                            case 37: _rewind(); break;
-                            // F key
-                            case 70: if (first) { _toggleFullscreen() } break;
-                            // C key
-                            case 67: if (first) { _toggleCaptions() } break;
-                        }
+                // Handle the key on keydown
+                // Reset on keyup
+                if (pressed) {
+                    // Which keycodes should we prevent default
+                    var preventDefault = [48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67];
 
-                        // Escape is handle natively when in full screen 
-                        // So we only need to worry about non native
-                        if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) {
-                            _toggleFullscreen();
-                        }
+                    // If the code is found prevent default (e.g. prevent scrolling for arrows)
+                    if (_inArray(preventDefault, code)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
 
-                        // First run completed
-                        first = false;
+                    switch(code) {
+                        // 0-9
+                        case 48: 
+                        case 49: 
+                        case 50: 
+                        case 51: 
+                        case 52: 
+                        case 53: 
+                        case 54: 
+                        case 55: 
+                        case 56:
+                        case 57: if (!held) { seekByKey(); } break;
+                        // Space and K key
+                        case 32: 
+                        case 75: if (!held) { _togglePlay(); } break;
+                        // Arrow up
+                        case 38: _increaseVolume(); break;
+                        // Arrow down
+                        case 40: _decreaseVolume(); break;
+                        // M key
+                        case 77: if (!held) { _toggleMute() } break;
+                        // Arrow forward
+                        case 39: _forward(); break;
+                        // Arrow back
+                        case 37: _rewind(); break;
+                        // F key
+                        case 70: _toggleFullscreen(); break;
+                        // C key
+                        case 67: if (!held) { _toggleCaptions(); } break;
                     }
-                    else {
-                        first = true;
+
+                    // Escape is handle natively when in full screen 
+                    // So we only need to worry about non native
+                    if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) {
+                        _toggleFullscreen();
                     }
-                });
+
+                    // Store last code for next cycle
+                    last = code;
+                }
+                else {
+                    last = null;
+                }
             }
 
             // Focus/tab management