Merge pull request #7028 from theguymadmax/add-play-button-movies

Add Play All button to movies

src/apps/experimental/routes/movies/index.tsx

@@ -11,6 +11,7 @@ import { MovieSuggestionsSectionsView } from 'types/sections';
 const moviesTabContent: LibraryTabContent = {
     viewType: LibraryTab.Movies,
     collectionType: CollectionType.Movies,
+    isBtnPlayAllEnabled: true,
     isBtnShuffleEnabled: true,
     itemType: [BaseItemKind.Movie]
 };

src/controllers/movies/movies.html

@@ -3,6 +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="btnPlayAll autoSize hide" title="${HeaderPlayAll}"><span class="material-icons play_arrow" 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>

src/controllers/movies/movies.js

@@ -30,6 +30,14 @@ export default function (view, params, tabContent, options) {
         return ApiClient.getItems(ApiClient.getCurrentUserId(), query);
     }
 
+    function playAll() {
+        ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {
+            playbackManager.play({
+                items: [item]
+            });
+        });
+    }
+
     function shuffle() {
         isLoading = true;
         loading.show();
@@ -94,6 +102,7 @@ export default function (view, params, tabContent, options) {
             elem.addEventListener('click', onPreviousPageClick);
         }
 
+        tabContent.querySelector('.btnPlayAll')?.classList.toggle('hide', result.TotalRecordCount < 1);
         tabContent.querySelector('.btnShuffle')?.classList.toggle('hide', result.TotalRecordCount < 1);
 
         isLoading = false;
@@ -266,6 +275,7 @@ export default function (view, params, tabContent, options) {
             itemsContainer.refreshItems();
         });
 
+        tabElement.querySelector('.btnPlayAll').addEventListener('click', playAll);
         tabElement.querySelector('.btnShuffle')?.addEventListener('click', shuffle);
     };