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 += ''; + // FIXME: Move skip button to the video OSD + buttonHtml += '
'; document.body.insertAdjacentHTML('beforeend', buttonHtml); 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); } }