From 2ab61b6d7bc20e80fc03280f1997c36674abbb40 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 2 Feb 2025 22:32:54 +0300
Subject: [PATCH 1/2] Add container for skip button to make it focusable

FocusManager.isCurrentlyFocusableInternal doesn't work with
fixed elements.
---
 src/components/playback/skipbutton.scss | 16 ++++++++++++----
 src/components/playback/skipsegment.ts  |  3 ++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/playback/skipbutton.scss b/src/components/playback/skipbutton.scss
index e3a9e0dc0b..63eb13b9ce 100644
--- a/src/components/playback/skipbutton.scss
+++ b/src/components/playback/skipbutton.scss
@@ -1,10 +1,17 @@
+.skip-button-container {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 18%;
+    pointer-events: none;
+    z-index: 10000;
+}
+
 .skip-button {
     display: flex;
     align-items: center;
-    position: fixed;
-    bottom: 18%;
-    right: 16%;
-    z-index: 10000;
+    margin-left: auto;
+    margin-right: 16%;
     padding: 12px 20px;
     color: black;
     border: none;
@@ -15,6 +22,7 @@
     gap: 3px;
     box-shadow: 7px 6px 15px -14px rgba(0, 0, 0, 0.65);
     cursor: pointer;
+    pointer-events: auto;
 }
 
 @media (orientation: landscape) and (max-height: 500px) {
diff --git a/src/components/playback/skipsegment.ts b/src/components/playback/skipsegment.ts
index b73576c721..50b04628d7 100644
--- a/src/components/playback/skipsegment.ts
+++ b/src/components/playback/skipsegment.ts
@@ -49,7 +49,8 @@ class SkipSegment extends PlaybackSubscriber {
         if (!this.skipElement && this.currentSegment) {
             let buttonHtml = '';
 
-            buttonHtml += '<button is="emby-button" class="skip-button hide skip-button-hidden"></button>';
+            // FIXME: Move skip button to the video OSD
+            buttonHtml += '<div class="skip-button-container"><button is="emby-button" class="skip-button hide skip-button-hidden"></button></div>';
 
             document.body.insertAdjacentHTML('beforeend', buttonHtml);
 

From fb47403b7297e11b5e6a450bb8cf23a99c71f37f Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 2 Feb 2025 20:49:48 +0300
Subject: [PATCH 2/2] Fix re-focusing on pause button when displaying OSD

When focus is debounced, `document.activeElement` is not updated
immediately, and someone (skipsegment.ts) might read it too early.

Remove focus debounce to immediately update `document.activeElement`.

This (undebounced focus) seems to work in webOS 1.2, webOS 5,
Firefox 134, Chrome 132. So the timeout was probably for
Internet Explorer.
---
 src/controllers/playback/video/index.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index fe38f43858..f919a58fc2 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -1,5 +1,4 @@
 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';
@@ -326,7 +325,16 @@ export default function (view) {
         elem.removeEventListener(transitionEndEventName, onHideAnimationComplete);
     }
 
-    const _focus = debounce((focusElement) => focusManager.focus(focusElement), 50);
+    const _focus = function (focusElement) {
+        // If no focus element is provided, try to keep current focus if it's valid,
+        // otherwise default to pause button
+        const currentFocus = focusElement || document.activeElement;
+        if (!currentFocus || !focusManager.isCurrentlyFocusable(currentFocus)) {
+            focusElement = osdBottomElement.querySelector('.btnPause');
+        }
+
+        if (focusElement) focusManager.focus(focusElement);
+    };
 
     function showMainOsdControls(focusElement) {
         if (!currentVisibleMenu) {
@@ -336,23 +344,12 @@ export default function (view) {
             elem.classList.remove('hide');
             elem.classList.remove('videoOsdBottom-hidden');
 
-            focusElement ||= elem.querySelector('.btnPause');
-
             if (!layoutManager.mobile) {
                 _focus(focusElement);
             }
             toggleSubtitleSync();
         } 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);
+            _focus(focusElement);
         }
     }