diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 5669fa24fc..d51148d3d3 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 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,7 +314,9 @@ export default function (view) { }); } - function showMainOsdControls() { + const _focus = debounce((focusElement) => focusManager.focus(focusElement), 50); + + function showMainOsdControls(focusElement) { if (!currentVisibleMenu) { const elem = osdBottomElement; currentVisibleMenu = 'osd'; @@ -321,12 +324,14 @@ export default function (view) { 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,15 +1179,19 @@ 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; } @@ -1205,7 +1214,7 @@ export default function (view) { break; case 'k': playbackManager.playPause(currentPlayer); - showOsd(); + showOsd(btnPlayPause); break; case 'ArrowUp': case 'Up': @@ -1219,13 +1228,13 @@ 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) { @@ -1253,7 +1262,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': @@ -1262,7 +1271,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':