From 6ae03974f9c684be0822ad700cb47ef81067c505 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 20 Feb 2022 22:28:19 +0300
Subject: [PATCH] fix: Fix focus jump when focusing Resume

Make the Play button the Resume and replace Resume with Replay.
---
 src/components/autoFocuser.js          |  4 ----
 src/controllers/itemDetails/index.html |  6 +++---
 src/controllers/itemDetails/index.js   | 24 +++++++-----------------
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/autoFocuser.js b/src/components/autoFocuser.js
index 6afb38d40d..59b6bca809 100644
--- a/src/components/autoFocuser.js
+++ b/src/components/autoFocuser.js
@@ -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;
diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html
index ea750f15d0..180f65cb8f 100644
--- a/src/controllers/itemDetails/index.html
+++ b/src/controllers/itemDetails/index.html
@@ -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>
 
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 0feed31d1e..33a3af79ee 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -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);