diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 1e8303675a..40fbd61bb7 100644 --- a/src/controllers/playback/video/index.js +++ b/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': diff --git a/src/legacy/keyboardEvent.js b/src/legacy/keyboardEvent.js new file mode 100644 index 0000000000..8b40e617d0 --- /dev/null +++ b/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)); diff --git a/src/scripts/site.js b/src/scripts/site.js index 2a74969c81..5046a61f82 100644 --- a/src/scripts/site.js +++ b/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';