mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #6510 from dmitrylyzo/fix-focus

Browse source 
Fix re-focusing on pause button when displaying OSD
This commit is contained in:
Bill Thornton 2025-03-25 16:04:53 -04:00 • committed by GitHub
commit c3c598e1f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 25 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/playback/skipbutton.scss
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 { .skip-button {
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; margin-left: auto;
bottom: 18%; margin-right: 16%;
right: 16%;
z-index: 10000;
padding: 12px 20px; padding: 12px 20px;
color: black; color: black;
border: none; border: none;
@ -15,6 +22,7 @@
gap: 3px; gap: 3px;
box-shadow: 7px 6px 15px -14px rgba(0, 0, 0, 0.65); box-shadow: 7px 6px 15px -14px rgba(0, 0, 0, 0.65);
cursor: pointer; cursor: pointer;
pointer-events: auto;
} }
@media (orientation: landscape) and (max-height: 500px) { @media (orientation: landscape) and (max-height: 500px) {

3
src/components/playback/skipsegment.ts
View file

@ -49,7 +49,8 @@ class SkipSegment extends PlaybackSubscriber {
if (!this.skipElement && this.currentSegment) { if (!this.skipElement && this.currentSegment) {
let buttonHtml = ''; 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); document.body.insertAdjacentHTML('beforeend', buttonHtml);

25
src/controllers/playback/video/index.js
View file

@ -1,5 +1,4 @@
import escapeHtml from 'escape-html'; import escapeHtml from 'escape-html';
import debounce from 'lodash-es/debounce';
import { playbackManager } from '../../../components/playback/playbackmanager'; import { playbackManager } from '../../../components/playback/playbackmanager';
import browser from '../../../scripts/browser'; import browser from '../../../scripts/browser';
import dom from '../../../scripts/dom'; import dom from '../../../scripts/dom';
@ -326,7 +325,16 @@ export default function (view) {
elem.removeEventListener(transitionEndEventName, onHideAnimationComplete); 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) { function showMainOsdControls(focusElement) {
if (!currentVisibleMenu) { if (!currentVisibleMenu) {
@ -336,23 +344,12 @@ export default function (view) {
elem.classList.remove('hide'); elem.classList.remove('hide');
elem.classList.remove('videoOsdBottom-hidden'); elem.classList.remove('videoOsdBottom-hidden');
focusElement ||= elem.querySelector('.btnPause');
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
_focus(focusElement); _focus(focusElement);
} }
toggleSubtitleSync(); toggleSubtitleSync();
} else if (currentVisibleMenu === 'osd' && !layoutManager.mobile) { } else if (currentVisibleMenu === 'osd' && !layoutManager.mobile) {
// If no focus element is provided, try to keep current focus if it's valid, _focus(focusElement);
// otherwise default to pause button
if (!focusElement) {
const currentFocus = document.activeElement;
if (!currentFocus || !focusManager.isCurrentlyFocusable(currentFocus)) {
focusElement = osdBottomElement.querySelector('.btnPause');
}
}
if (focusElement) _focus(focusElement);
} }
} }