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 #3443 from dmitrylyzo/fix-focus-jump

Browse source 
Fix Play/Resume focus jump
This commit is contained in:
Bill Thornton 2022-02-21 12:26:27 -05:00 • committed by GitHub
commit 489613f934
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/autoFocuser.js
View file

@ -59,15 +59,11 @@ import layoutManager from './layoutManager';
candidates.push(container.querySelector('.btnPreviousPage')); candidates.push(container.querySelector('.btnPreviousPage'));
} else if (activeElement.classList.contains('btnSelectView')) { } else if (activeElement.classList.contains('btnSelectView')) {
candidates.push(container.querySelector('.btnSelectView')); candidates.push(container.querySelector('.btnSelectView'));
} else if (activeElement.classList.contains('btnPlay')) {
// Resume has priority over Play
candidates = candidates.concat(Array.from(container.querySelectorAll('.btnResume')));
} }
candidates.push(activeElement); candidates.push(activeElement);
} }
candidates = candidates.concat(Array.from(container.querySelectorAll('.btnResume')));
candidates = candidates.concat(Array.from(container.querySelectorAll('.btnPlay'))); candidates = candidates.concat(Array.from(container.querySelectorAll('.btnPlay')));
let focusedElement; let focusedElement;

6
src/controllers/itemDetails/index.html
View file

@ -13,15 +13,15 @@
</div> </div>
<div class="mainDetailButtons focuscontainer-x"> <div class="mainDetailButtons focuscontainer-x">
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" title="${ButtonResume}" data-mode="resume"> <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton raised" title="${ButtonResume}" data-action="resume">
<div class="detailButton-content"> <div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span> <span class="material-icons detailButton-icon play_arrow"></span>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" title="${Play}" data-mode="play"> <button is="emby-button" type="button" class="button-flat btnReplay hide detailButton" title="${Play}" data-action="play">
<div class="detailButton-content"> <div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span> <span class="material-icons detailButton-icon replay"></span>
</div> </div>
</button> </button>

45
src/controllers/itemDetails/index.js
View file

@ -13,7 +13,6 @@ import listView from '../../components/listview/listview';
import itemContextMenu from '../../components/itemContextMenu'; import itemContextMenu from '../../components/itemContextMenu';
import itemHelper from '../../components/itemHelper'; import itemHelper from '../../components/itemHelper';
import dom from '../../scripts/dom'; import dom from '../../scripts/dom';
import indicators from '../../components/indicators/indicators';
import imageLoader from '../../components/images/imageLoader'; import imageLoader from '../../components/images/imageLoader';
import libraryMenu from '../../scripts/libraryMenu'; import libraryMenu from '../../scripts/libraryMenu';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
@ -344,7 +343,7 @@ function reloadPlayButtons(page, item) {
hideAll(page, 'btnPlay'); hideAll(page, 'btnPlay');
} }
hideAll(page, 'btnResume'); hideAll(page, 'btnReplay');
hideAll(page, 'btnInstantMix'); hideAll(page, 'btnInstantMix');
hideAll(page, 'btnShuffle'); hideAll(page, 'btnShuffle');
} else if (playbackManager.canPlay(item)) { } else if (playbackManager.canPlay(item)) {
@ -356,32 +355,22 @@ function reloadPlayButtons(page, item) {
canPlay = true; canPlay = true;
const isResumable = item.UserData && item.UserData.PlaybackPositionTicks > 0; const isResumable = item.UserData && item.UserData.PlaybackPositionTicks > 0;
hideAll(page, 'btnResume', isResumable); hideAll(page, 'btnReplay', isResumable);
for (const elem of page.querySelectorAll('.btnPlay')) {
const btnPlay = elem.querySelector('.detailButton-icon');
for (const btnPlay of page.querySelectorAll('.btnPlay')) {
if (isResumable) { if (isResumable) {
btnPlay.classList.replace('play_arrow', 'replay'); btnPlay.title = globalize.translate('ButtonResume');
} else { } else {
btnPlay.classList.replace('replay', 'play_arrow'); btnPlay.title = globalize.translate('Play');
} }
} }
} else { } else {
hideAll(page, 'btnPlay'); hideAll(page, 'btnPlay');
hideAll(page, 'btnResume'); hideAll(page, 'btnReplay');
hideAll(page, 'btnInstantMix'); hideAll(page, 'btnInstantMix');
hideAll(page, 'btnShuffle'); hideAll(page, 'btnShuffle');
} }
if (layoutManager.tv) {
const btnResume = page.querySelector('.mainDetailButtons .btnResume');
const btnPlay = page.querySelector('.mainDetailButtons .btnPlay');
const resumeHidden = btnResume.classList.contains('hide');
btnResume.classList.toggle('raised', !resumeHidden);
btnPlay.classList.toggle('raised', resumeHidden);
}
return canPlay; return canPlay;
} }
@ -819,8 +808,8 @@ function renderDetailImage(elem, item, imageLoader) {
overlayText: false, overlayText: false,
transition: false, transition: false,
disableIndicators: true, disableIndicators: true,
overlayPlayButton: layoutManager.mobile ? false : true, overlayPlayButton: layoutManager.desktop,
action: layoutManager.mobile ? 'none' : 'play', action: layoutManager.desktop ? 'resume' : 'none',
width: dom.getWindowSize().innerWidth * 0.25 width: dom.getWindowSize().innerWidth * 0.25
}); });
@ -839,18 +828,6 @@ function renderImage(page, item) {
); );
} }
function refreshDetailImageUserData(elem, item) {
const container = elem.querySelector('.detailImageProgressContainer');
if (container) {
container.innerHTML = indicators.getProgressBarHtml(item);
}
}
function refreshImage(page, item) {
refreshDetailImageUserData(page.querySelector('.detailImageContainer'), item);
}
function setPeopleHeader(page, item) { function setPeopleHeader(page, item) {
if (item.MediaType == 'Audio' || item.Type == 'MusicAlbum' || item.MediaType == 'Book' || item.MediaType == 'Photo') { if (item.MediaType == 'Audio' || item.Type == 'MusicAlbum' || item.MediaType == 'Book' || item.MediaType == 'Photo') {
page.querySelector('#peopleHeader').innerHTML = globalize.translate('People'); page.querySelector('#peopleHeader').innerHTML = globalize.translate('People');
@ -1973,7 +1950,7 @@ export default function (view, params) {
} }
function onPlayClick() { function onPlayClick() {
playCurrentItem(this, this.getAttribute('data-mode')); playCurrentItem(this, this.getAttribute('data-action'));
} }
function onPosterClick(e) { function onPosterClick(e) {
@ -2056,7 +2033,6 @@ export default function (view, params) {
if (userData) { if (userData) {
currentItem.UserData = userData; currentItem.UserData = userData;
reloadPlayButtons(view, currentItem); reloadPlayButtons(view, currentItem);
refreshImage(view, currentItem);
autoFocus(view); autoFocus(view);
} }
} }
@ -2068,9 +2044,8 @@ export default function (view, params) {
function init() { function init() {
const apiClient = getApiClient(); const apiClient = getApiClient();
view.querySelectorAll('.btnPlay');
bindAll(view, '.btnPlay', 'click', onPlayClick); bindAll(view, '.btnPlay', 'click', onPlayClick);
bindAll(view, '.btnResume', 'click', onPlayClick); bindAll(view, '.btnReplay', 'click', onPlayClick);
bindAll(view, '.btnInstantMix', 'click', onInstantMixClick); bindAll(view, '.btnInstantMix', 'click', onInstantMixClick);
bindAll(view, '.btnShuffle', 'click', onShuffleClick); bindAll(view, '.btnShuffle', 'click', onShuffleClick);
bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick); bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick);