Backport #4632 (Improve keyboard control)

src/controllers/playback/video/index.js

@@ -1,4 +1,5 @@
 import escapeHtml from 'escape-html';
+import debounce from 'lodash-es/debounce';
 import { playbackManager } from '../../../components/playback/playbackmanager';
 import browser from '../../../scripts/browser';
 import dom from '../../../scripts/dom';
@@ -258,9 +259,9 @@ export default function (view) {
 
     let mouseIsDown = false;
 
-    function showOsd() {
+    function showOsd(focusElement) {
         slideDownToShow(headerElement);
-        showMainOsdControls();
+        showMainOsdControls(focusElement);
         resetIdle();
     }
 
@@ -313,20 +314,24 @@ export default function (view) {
         });
     }
 
-    function showMainOsdControls() {
+    const _focus = debounce((focusElement) => focusManager.focus(focusElement), 50);
+
+    function showMainOsdControls(focusElement) {
         if (!currentVisibleMenu) {
             const elem = osdBottomElement;
             currentVisibleMenu = 'osd';
             clearHideAnimationEventListeners(elem);
             elem.classList.remove('hide');
             elem.classList.remove('videoOsdBottom-hidden');
 
+            focusElement ||= elem.querySelector('.btnPause');
+
             if (!layoutManager.mobile) {
-                setTimeout(function () {
-                    focusManager.focus(elem.querySelector('.btnPause'));
-                }, 50);
+                _focus(focusElement);
             }
             toggleSubtitleSync();
+        } else if (currentVisibleMenu === 'osd' && focusElement && !layoutManager.mobile) {
+            _focus(focusElement);
         }
     }
 
@@ -1174,18 +1179,37 @@ export default function (view) {
         const key = keyboardnavigation.getKeyName(e);
         const isKeyModified = e.ctrlKey || e.altKey || e.metaKey;
 
+        const btnPlayPause = osdBottomElement.querySelector('.btnPause');
+
         if (e.keyCode === 32) {
             if (e.target.tagName !== 'BUTTON' || !layoutManager.tv) {
                 playbackManager.playPause(currentPlayer);
+                showOsd(btnPlayPause);
                 e.preventDefault();
                 e.stopPropagation();
                 // Trick Firefox with a null element to skip next click
                 clickedElement = null;
+            } else {
+                showOsd();
             }
-            showOsd();
             return;
         }
 
+        if (layoutManager.tv && !currentVisibleMenu) {
+            // Change the behavior of some keys when the OSD is hidden
+            switch (key) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    showOsd(nowPlayingPositionSlider);
+                    nowPlayingPositionSlider.dispatchEvent(new KeyboardEvent(e.type, e));
+                    return;
+                case 'Enter':
+                    playbackManager.playPause(currentPlayer);
+                    showOsd(btnPlayPause);
+                    return;
+            }
+        }
+
         if (layoutManager.tv && keyboardnavigation.isNavigationKey(key)) {
             showOsd();
             return;
@@ -1205,7 +1229,7 @@ export default function (view) {
                 break;
             case 'k':
                 playbackManager.playPause(currentPlayer);
-                showOsd();
+                showOsd(btnPlayPause);
                 break;
             case 'ArrowUp':
             case 'Up':
@@ -1219,23 +1243,21 @@ export default function (view) {
             case 'ArrowRight':
             case 'Right':
                 playbackManager.fastForward(currentPlayer);
-                showOsd();
+                showOsd(btnFastForward);
                 break;
             case 'j':
             case 'ArrowLeft':
             case 'Left':
                 playbackManager.rewind(currentPlayer);
-                showOsd();
+                showOsd(btnRewind);
                 break;
             case 'f':
                 if (!e.ctrlKey && !e.metaKey) {
                     playbackManager.toggleFullscreen(currentPlayer);
-                    showOsd();
                 }
                 break;
             case 'm':
                 playbackManager.toggleMute(currentPlayer);
-                showOsd();
                 break;
             case 'p':
             case 'P':
@@ -1255,7 +1277,7 @@ export default function (view) {
                 // Ignores gamepad events that are always triggered, even when not focused.
                 if (document.hasFocus()) { /* eslint-disable-line compat/compat */
                     playbackManager.rewind(currentPlayer);
-                    showOsd();
+                    showOsd(btnRewind);
                 }
                 break;
             case 'NavigationRight':
@@ -1264,7 +1286,7 @@ export default function (view) {
                 // Ignores gamepad events that are always triggered, even when not focused.
                 if (document.hasFocus()) { /* eslint-disable-line compat/compat */
                     playbackManager.fastForward(currentPlayer);
-                    showOsd();
+                    showOsd(btnFastForward);
                 }
                 break;
             case 'Home':

src/index.jsx

@@ -32,6 +32,7 @@ import './components/playback/playerSelectionMenu';
 import './legacy/domParserTextHtml';
 import './legacy/focusPreventScroll';
 import './legacy/htmlMediaElement';
+import './legacy/keyboardEvent';
 import './legacy/vendorStyles';
 import { currentSettings } from './scripts/settings/userSettings';
 import taskButton from './scripts/taskbutton';

src/legacy/keyboardEvent.js

@@ -0,0 +1,48 @@
+/**
+ * Polyfill for KeyboardEvent
+ * - Constructor.
+ */
+
+(function (window) {
+    'use strict';
+
+    try {
+        new window.KeyboardEvent('event', { bubbles: true, cancelable: true });
+    } catch (e) {
+        // We can't use `KeyboardEvent` in old WebKit because `initKeyboardEvent`
+        // doesn't seem to populate some properties (`keyCode`, `which`) that
+        // are read-only.
+        const KeyboardEventOriginal = window.Event;
+
+        const KeyboardEvent = function (eventName, options) {
+            options = options || {};
+
+            const event = document.createEvent('Event');
+
+            event.initEvent(eventName, !!options.bubbles, !!options.cancelable);
+
+            event.view = options.view || document.defaultView;
+
+            event.key = options.key || options.keyIdentifier || '';
+            event.keyCode = options.keyCode || 0;
+            event.code = options.code || '';
+            event.charCode = options.charCode || 0;
+            event.char = options.char || '';
+            event.which = options.which || 0;
+
+            event.location = options.location || options.keyLocation || 0;
+
+            event.ctrlKey = !!options.ctrlKey;
+            event.altKey = !!options.altKey;
+            event.shiftKey = !!options.shiftKey;
+            event.metaKey = !!options.metaKey;
+
+            event.repeat = !!options.repeat;
+
+            return event;
+        };
+
+        KeyboardEvent.prototype = KeyboardEventOriginal.prototype;
+        window.KeyboardEvent = KeyboardEvent;
+    }
+}(window));