From 9e6ee42fd935563bedb11f93a18221fd5bea7236 Mon Sep 17 00:00:00 2001 From: rlauu <46294892+rlauu@users.noreply.github.com> Date: Sun, 29 Dec 2024 20:34:33 +0100 Subject: [PATCH 1/5] Prevent Focus Loss When Skip Button is Pressed --- src/controllers/playback/video/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 09af84fc53f..933142c405a 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -354,7 +354,7 @@ export default function (view) { toggleSubtitleSync('hide'); // Firefox does not blur by itself - if (document.activeElement) { + if (osdBottomElement.contains(document.activeElement)) { document.activeElement.blur(); } } @@ -1252,7 +1252,7 @@ export default function (view) { switch (key) { case 'Enter': - showOsd(); + showOsd(e.target.classList.contains('skip-button') ? btnPlayPause : undefined); break; case 'Escape': case 'Back': From c9f6ac58b696daf32be6240e9c54f33e55ea4fa9 Mon Sep 17 00:00:00 2001 From: rlauu <46294892+rlauu@users.noreply.github.com> Date: Mon, 30 Dec 2024 09:31:21 +0100 Subject: [PATCH 2/5] Implement the suggested changes --- src/components/focusManager.js | 3 --- src/controllers/playback/video/index.js | 15 ++++++++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/focusManager.js b/src/components/focusManager.js index 48ccd6b92c0..66f6688d072 100644 --- a/src/components/focusManager.js +++ b/src/components/focusManager.js @@ -103,9 +103,6 @@ function isCurrentlyFocusable(elem) { if (elem.tagName === 'INPUT') { const type = elem.type; - if (type === 'range') { - return false; - } if (type === 'file') { return false; } diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 933142c405a..7f97ccfab5c 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -338,8 +338,17 @@ export default function (view) { _focus(focusElement); } toggleSubtitleSync(); - } else if (currentVisibleMenu === 'osd' && focusElement && !layoutManager.mobile) { - _focus(focusElement); + } else if (currentVisibleMenu === 'osd' && !layoutManager.mobile) { + // If no focus element is provided, try to keep current focus if it's valid, + // otherwise default to pause button + if (!focusElement) { + const currentFocus = document.activeElement; + if (!currentFocus || !focusManager.isCurrentlyFocusable(currentFocus)) { + focusElement = osdBottomElement.querySelector('.btnPause'); + } + } + + if (focusElement) _focus(focusElement); } } @@ -1252,7 +1261,7 @@ export default function (view) { switch (key) { case 'Enter': - showOsd(e.target.classList.contains('skip-button') ? btnPlayPause : undefined); + showOsd(); break; case 'Escape': case 'Back': From b7974c2c8509992025c48d199816dbcfa27e704f Mon Sep 17 00:00:00 2001 From: rlauu <46294892+rlauu@users.noreply.github.com> Date: Tue, 31 Dec 2024 08:59:02 +0100 Subject: [PATCH 3/5] Update index.js --- src/controllers/playback/video/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 7f97ccfab5c..0edb92c070c 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -363,7 +363,7 @@ export default function (view) { toggleSubtitleSync('hide'); // Firefox does not blur by itself - if (osdBottomElement.contains(document.activeElement)) { + if (document.activeElement) { document.activeElement.blur(); } } From 2a6c7eb9ad0744b4861828f8652f39b15686e223 Mon Sep 17 00:00:00 2001 From: rlauu <46294892+rlauu@users.noreply.github.com> Date: Wed, 1 Jan 2025 14:14:24 +0100 Subject: [PATCH 4/5] Ensures focus shifts to the pause button --- src/components/playback/skipsegment.ts | 9 +++++++++ src/controllers/playback/video/index.js | 6 ++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/playback/skipsegment.ts b/src/components/playback/skipsegment.ts index 523a16c49e3..b73576c721f 100644 --- a/src/components/playback/skipsegment.ts +++ b/src/components/playback/skipsegment.ts @@ -20,6 +20,15 @@ interface ShowOptions { function onHideComplete(this: HTMLButtonElement) { if (this) { + // Handle focus after the hide transition completes + if (document.activeElement === this) { + this.blur(); + const pauseButton = document.querySelector('.btnPause'); + if (pauseButton && focusManager.isCurrentlyFocusable(pauseButton)) { + focusManager.focus(pauseButton); + } + } + this.classList.add('hide'); } } diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 0edb92c070c..f00a7c95b51 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -304,11 +304,13 @@ export default function (view) { } function slideDownToShow(elem) { + elem.classList.remove('hide'); elem.classList.remove('osdHeader-hidden'); } function slideUpToHide(elem) { elem.classList.add('osdHeader-hidden'); + elem.addEventListener(transitionEndEventName, onHideAnimationComplete); } function clearHideAnimationEventListeners(elem) { @@ -317,7 +319,7 @@ export default function (view) { function onHideAnimationComplete(e) { const elem = e.target; - if (elem != osdBottomElement) return; + if (elem !== osdBottomElement && elem !== headerElement) return; elem.classList.add('hide'); elem.removeEventListener(transitionEndEventName, onHideAnimationComplete); } @@ -363,7 +365,7 @@ export default function (view) { toggleSubtitleSync('hide'); // Firefox does not blur by itself - if (document.activeElement) { + if (document.activeElement && !focusManager.isCurrentlyFocusable(document.activeElement)) { document.activeElement.blur(); } } From 754d14f3250210a711ab5ad333097c8bdf7ec14f Mon Sep 17 00:00:00 2001 From: rlauu <46294892+rlauu@users.noreply.github.com> Date: Sun, 5 Jan 2025 08:51:31 +0100 Subject: [PATCH 5/5] Apply suggested changes --- src/components/focusManager.js | 25 +++++++++++++++---------- src/controllers/playback/video/index.js | 5 ++++- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/focusManager.js b/src/components/focusManager.js index 66f6688d072..8dd0f6dd518 100644 --- a/src/components/focusManager.js +++ b/src/components/focusManager.js @@ -93,19 +93,24 @@ function isCurrentlyFocusableInternal(elem) { // Determines if a focusable element can be focused at a given point in time function isCurrentlyFocusable(elem) { - if (elem.disabled) { - return false; - } - - if (elem.getAttribute('tabindex') === '-1') { - return false; - } + if (!elem.classList?.contains('focusable')) { + if (elem.disabled) { + return false; + } - if (elem.tagName === 'INPUT') { - const type = elem.type; - if (type === 'file') { + if (elem.getAttribute('tabindex') === '-1') { return false; } + + if (elem.tagName === 'INPUT') { + const type = elem.type; + if (type === 'range') { + return false; + } + if (type === 'file') { + return false; + } + } } return isCurrentlyFocusableInternal(elem); diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index f00a7c95b51..b95183deaea 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -304,11 +304,13 @@ export default function (view) { } function slideDownToShow(elem) { + clearHideAnimationEventListeners(elem); elem.classList.remove('hide'); elem.classList.remove('osdHeader-hidden'); } function slideUpToHide(elem) { + clearHideAnimationEventListeners(elem); elem.classList.add('osdHeader-hidden'); elem.addEventListener(transitionEndEventName, onHideAnimationComplete); } @@ -365,7 +367,8 @@ export default function (view) { toggleSubtitleSync('hide'); // Firefox does not blur by itself - if (document.activeElement && !focusManager.isCurrentlyFocusable(document.activeElement)) { + if (osdBottomElement.contains(document.activeElement) + || headerElement.contains(document.activeElement)) { document.activeElement.blur(); } }