Merge pull request #4632 from dmitrylyzo/multi-purpose-keys

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 SyncPlay from '../../../components/syncPlay/core';
 import browser from '../../../scripts/browser';
@@ -217,9 +218,9 @@ import { appRouter } from '../../../components/appRouter';
 
         let mouseIsDown = false;
 
-        function showOsd() {
+        function showOsd(focusElement) {
             slideDownToShow(headerElement);
-            showMainOsdControls();
+            showMainOsdControls(focusElement);
             resetIdle();
         }
 
@@ -273,7 +274,9 @@ import { appRouter } from '../../../components/appRouter';
             });
         }
 
-        function showMainOsdControls() {
+        const _focus = debounce((focusElement) => focusManager.focus(focusElement), 50);
+
+        function showMainOsdControls(focusElement) {
             if (!currentVisibleMenu) {
                 const elem = osdBottomElement;
                 currentVisibleMenu = 'osd';
@@ -281,12 +284,14 @@ import { appRouter } from '../../../components/appRouter';
                 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);
             }
         }
 
@@ -1035,18 +1040,37 @@ import { appRouter } from '../../../components/appRouter';
             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;
@@ -1066,7 +1090,7 @@ import { appRouter } from '../../../components/appRouter';
                     break;
                 case 'k':
                     playbackManager.playPause(currentPlayer);
-                    showOsd();
+                    showOsd(btnPlayPause);
                     break;
                 case 'ArrowUp':
                 case 'Up':
@@ -1080,23 +1104,21 @@ import { appRouter } from '../../../components/appRouter';
                 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':
@@ -1116,7 +1138,7 @@ import { appRouter } from '../../../components/appRouter';
                     // 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':
@@ -1125,7 +1147,7 @@ import { appRouter } from '../../../components/appRouter';
                     // 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/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));

src/scripts/site.js

@@ -32,6 +32,7 @@ import '../components/playback/playerSelectionMenu';
 import '../legacy/domParserTextHtml';
 import '../legacy/focusPreventScroll';
 import '../legacy/htmlMediaElement';
+import '../legacy/keyboardEvent';
 import '../legacy/vendorStyles';
 import SyncPlay from '../components/syncPlay/core';
 import { playbackManager } from '../components/playback/playbackmanager';