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

fix: Fix focus jump when focusing Resume

Make the Play button the Resume and replace Resume with Replay.
This commit is contained in:
Dmitry Lyzo 2022-02-20 22:28:19 +03:00
parent ca8cc653d9
commit 6ae03974f9
3 changed files with 10 additions and 24 deletions

View file

@ -59,15 +59,11 @@ import layoutManager from './layoutManager';
candidates.push(container.querySelector('.btnPreviousPage'));
} else if (activeElement.classList.contains('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 = candidates.concat(Array.from(container.querySelectorAll('.btnResume')));
candidates = candidates.concat(Array.from(container.querySelectorAll('.btnPlay')));
let focusedElement;

View file

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

View file

@ -343,7 +343,7 @@ function reloadPlayButtons(page, item) {
hideAll(page, 'btnPlay');
}
hideAll(page, 'btnResume');
hideAll(page, 'btnReplay');
hideAll(page, 'btnInstantMix');
hideAll(page, 'btnShuffle');
} else if (playbackManager.canPlay(item)) {
@ -355,32 +355,22 @@ function reloadPlayButtons(page, item) {
canPlay = true;
const isResumable = item.UserData && item.UserData.PlaybackPositionTicks > 0;
hideAll(page, 'btnResume', isResumable);
for (const elem of page.querySelectorAll('.btnPlay')) {
const btnPlay = elem.querySelector('.detailButton-icon');
hideAll(page, 'btnReplay', isResumable);
for (const btnPlay of page.querySelectorAll('.btnPlay')) {
if (isResumable) {
btnPlay.classList.replace('play_arrow', 'replay');
btnPlay.title = globalize.translate('ButtonResume');
} else {
btnPlay.classList.replace('replay', 'play_arrow');
btnPlay.title = globalize.translate('Play');
}
}
} else {
hideAll(page, 'btnPlay');
hideAll(page, 'btnResume');
hideAll(page, 'btnReplay');
hideAll(page, 'btnInstantMix');
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;
}
@ -2056,7 +2046,7 @@ export default function (view, params) {
view.querySelectorAll('.btnPlay');
bindAll(view, '.btnPlay', 'click', onPlayClick);
bindAll(view, '.btnResume', 'click', onPlayClick);
bindAll(view, '.btnReplay', 'click', onPlayClick);
bindAll(view, '.btnInstantMix', 'click', onInstantMixClick);
bindAll(view, '.btnShuffle', 'click', onShuffleClick);
bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick);