From fe05939ec3b46011be1d074456f119e1cf0201b1 Mon Sep 17 00:00:00 2001
From: Victor Usoltsev <bernarden@mail.ru>
Date: Mon, 9 May 2022 22:36:07 +1200
Subject: [PATCH 1/4] Adds shuffle button to movie collections.

---
 src/controllers/movies/movies.html |  1 +
 src/controllers/movies/movies.js   | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html
index 428b83de45..63fe332a8e 100644
--- a/src/controllers/movies/movies.html
+++ b/src/controllers/movies/movies.html
@@ -6,6 +6,7 @@
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index e8137fd764..22f0c18469 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -6,6 +6,7 @@ import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
 import listView from '../../components/listview/listview';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import globalize from '../../scripts/globalize';
+import { playbackManager } from '../../components/playback/playbackmanager';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
@@ -52,6 +53,19 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 itemsContainer.refreshItems();
             }
 
+            function onShuffleClick() {
+                if (isLoading) {
+                    return;
+                }
+
+                ApiClient.getItem(
+                    ApiClient.getCurrentUserId(),
+                    params.topParentId
+                ).then(item => {
+                    playbackManager.shuffle(item);
+                });
+            }
+
             window.scrollTo(0, 0);
             this.alphaPicker?.updateControls(query);
             const pagingHtml = libraryBrowser.getQueryPagingHtml({
@@ -77,6 +91,10 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 elem.addEventListener('click', onPreviousPageClick);
             }
 
+            for (const elem of tabContent.querySelectorAll('.btnShuffle')) {
+                elem.addEventListener('click', onShuffleClick);
+            }
+
             isLoading = false;
             loading.hide();
 

From 0e8990d781c01ece01467c23bdf56e6cfaf33b17 Mon Sep 17 00:00:00 2001
From: Victor Usoltsev <bernarden@mail.ru>
Date: Wed, 11 May 2022 09:27:23 +1200
Subject: [PATCH 2/4] Fix PR comments.

---
 src/controllers/movies/movies.html |  2 +-
 src/controllers/movies/movies.js   | 28 +++++++++++-----------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html
index 63fe332a8e..a101348f49 100644
--- a/src/controllers/movies/movies.html
+++ b/src/controllers/movies/movies.html
@@ -3,10 +3,10 @@
     <div class="pageTabContent" id="moviesTab" data-index="0">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index 22f0c18469..9446da1b95 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -30,6 +30,15 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
             return ApiClient.getItems(ApiClient.getCurrentUserId(), query);
         }
 
+        function shuffle() {
+            ApiClient.getItem(
+                ApiClient.getCurrentUserId(),
+                params.topParentId
+            ).then((item) => {
+                playbackManager.shuffle(item);
+            });
+        }
+
         const afterRefresh = (result) => {
             function onNextPageClick() {
                 if (isLoading) {
@@ -53,19 +62,6 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 itemsContainer.refreshItems();
             }
 
-            function onShuffleClick() {
-                if (isLoading) {
-                    return;
-                }
-
-                ApiClient.getItem(
-                    ApiClient.getCurrentUserId(),
-                    params.topParentId
-                ).then(item => {
-                    playbackManager.shuffle(item);
-                });
-            }
-
             window.scrollTo(0, 0);
             this.alphaPicker?.updateControls(query);
             const pagingHtml = libraryBrowser.getQueryPagingHtml({
@@ -91,10 +87,6 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 elem.addEventListener('click', onPreviousPageClick);
             }
 
-            for (const elem of tabContent.querySelectorAll('.btnShuffle')) {
-                elem.addEventListener('click', onShuffleClick);
-            }
-
             isLoading = false;
             loading.hide();
 
@@ -261,6 +253,8 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 onViewStyleChange();
                 itemsContainer.refreshItems();
             });
+
+            tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle);
         };
 
         let itemsContainer = tabContent.querySelector('.itemsContainer');

From de1cd2275f1ff3e08b00fe50e47f185bf78dd087 Mon Sep 17 00:00:00 2001
From: Victor Usoltsev <bernarden@mail.ru>
Date: Thu, 12 May 2022 10:16:09 +1200
Subject: [PATCH 3/4] Shows movie shuffle button only when items are present.

---
 src/controllers/movies/movies.html | 2 +-
 src/controllers/movies/movies.js   | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html
index a101348f49..7a08694b2a 100644
--- a/src/controllers/movies/movies.html
+++ b/src/controllers/movies/movies.html
@@ -3,7 +3,7 @@
     <div class="pageTabContent" id="moviesTab" data-index="0">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
+            <button is="paper-icon-button-light" class="btnShuffle autoSize hide" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index 9446da1b95..e08b506a58 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -87,6 +87,8 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 elem.addEventListener('click', onPreviousPageClick);
             }
 
+            tabContent.querySelector(".btnShuffle").classList.toggle("hide", result.TotalRecordCount < 1);
+
             isLoading = false;
             loading.hide();
 

From d89bcdca181e03c84ebe58d582c8fdceac2afd98 Mon Sep 17 00:00:00 2001
From: Victor Usoltsev <bernarden@mail.ru>
Date: Fri, 13 May 2022 10:02:40 +1200
Subject: [PATCH 4/4] Fixes PR comment.

---
 src/controllers/movies/movies.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index e08b506a58..40d81607bc 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -87,7 +87,7 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
                 elem.addEventListener('click', onPreviousPageClick);
             }
 
-            tabContent.querySelector(".btnShuffle").classList.toggle("hide", result.TotalRecordCount < 1);
+            tabContent.querySelector('.btnShuffle').classList.toggle('hide', result.TotalRecordCount < 1);
 
             isLoading = false;
             loading.hide();