Backport pull request #6510 from jellyfin-web/release-10.10.z

Fix re-focusing on pause button when displaying OSD

Original-merge: c3c598e1f4

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: thornbill <thornbill@users.noreply.github.com>
This commit is contained in:
dmitrylyzo
2025-04-02 01:13:23 -04:00
committed by thornbill
parent bf30d76ac0
commit ea8636433d
3 changed files with 25 additions and 19 deletions

View File

@@ -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) {

View File

@@ -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);

View File

@@ -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);
}
}