Add captureDocumentHotkeys support (#68)

README.md

@@ -82,6 +82,8 @@ videojs('vidId').ready(function() {
 The **Enter**/**Return** key may be used instead to activate the control elements. (default: `false`) (**Note:** This feature may break accessibility, and cause unexpected behavior)
 - `enableInactiveFocus` (boolean): This reassigns focus to the player when the control bar fades out after a user has clicked a button on the control bar (default: `true`)
 - `skipInitialFocus` (boolean): This stops focusing the player on initial Play under unique autoplay situations. More information in [Issue #44](https://github.com/ctd1500/videojs-hotkeys/issues/44) (default: `false`)
+- `captureDocumentHotkeys` (boolean): Capture document keydown events to also use hotkeys even if the player does not have focus. If you enable this option, **you must** configure `documentHotkeysFocusElementFilter` (default: `false`)
+- `documentHotkeysFocusElementFilter` (function): Filter function to capture document hotkeys (if `captureDocumentHotkeys` is enabled) depending on the current focused element. For example, if you want to capture hotkeys when the player is not focused and avoid conflicts when the user is focusing a particular link: `documentHotkeysFocusElementFilter: e => e.tagName.toLowerCase() === 'body'` (default: `() => false`)
 - `enableJogStyle` (boolean): Enables seeking the video in a broadcast-style jog by pressing the Up and Down Arrow keys.
 `seekStep` will also need to be changed to get a proper broadcast-style jog.
 This feature and the changes for seekStep are explained a bit more in [PR #12](https://github.com/ctd1500/videojs-hotkeys/pull/12) (default `false`)

videojs.hotkeys.js

@@ -36,6 +36,8 @@
       enableNumbers: true,
       enableJogStyle: false,
       alwaysCaptureHotkeys: false,
+      captureDocumentHotkeys: false,
+      documentHotkeysFocusElementFilter: function () { return false },
       enableModifiersForNumbers: true,
       enableInactiveFocus: true,
       skipInitialFocus: false,
@@ -70,6 +72,8 @@
       enableNumbers = options.enableNumbers,
       enableJogStyle = options.enableJogStyle,
       alwaysCaptureHotkeys = options.alwaysCaptureHotkeys,
+      captureDocumentHotkeys = options.captureDocumentHotkeys,
+      documentHotkeysFocusElementFilter = options.documentHotkeysFocusElementFilter,
       enableModifiersForNumbers = options.enableModifiersForNumbers,
       enableInactiveFocus = options.enableInactiveFocus,
       skipInitialFocus = options.skipInitialFocus;
@@ -122,18 +126,22 @@
 
     var keyDown = function keyDown(event) {
       var ewhich = event.which, wasPlaying, seekTime;
-      var ePreventDefault = event.preventDefault;
+      var ePreventDefault = event.preventDefault.bind(event);
       var duration = player.duration();
       // When controls are disabled, hotkeys will be disabled as well
       if (player.controls()) {
 
         // Don't catch keys if any control buttons are focused, unless alwaysCaptureHotkeys is true
         var activeEl = doc.activeElement;
-        if (alwaysCaptureHotkeys ||
-            activeEl == pEl ||
-            activeEl == pEl.querySelector('.vjs-tech') ||
-            activeEl == pEl.querySelector('.vjs-control-bar') ||
-            activeEl == pEl.querySelector('.iframeblocker')) {
+        if (
+          alwaysCaptureHotkeys ||
+          (captureDocumentHotkeys && documentHotkeysFocusElementFilter(activeEl)) ||
+
+          activeEl == pEl ||
+          activeEl == pEl.querySelector('.vjs-tech') ||
+          activeEl == pEl.querySelector('.vjs-control-bar') ||
+          activeEl == pEl.querySelector('.iframeblocker')
+        ) {
 
           switch (checkKeys(event, player)) {
             // Spacebar toggles play/pause
@@ -418,6 +426,10 @@
     player.on('mousewheel', mouseScroll);
     player.on("DOMMouseScroll", mouseScroll);
 
+    if (captureDocumentHotkeys) {
+      document.addEventListener('keydown', function (event) { keyDown(event) });
+    }
+
     return this;
   };