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:
@@ -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) {
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user