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

fix: Fix focus jump when focusing Resume

Browse source 
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
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-action="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-action="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>

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

@ -343,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)) {
@ -355,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;
} }
@ -2056,7 +2046,7 @@ export default function (view, params) {
view.querySelectorAll('.btnPlay'); 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);