Move tvlatest tab to suggestions section

src/controllers/shows/tvlatest.js

@@ -1,64 +0,0 @@
-define(['loading', 'components/groupedcards', 'cardBuilder', 'apphost', 'imageLoader'], function (loading, groupedcards, cardBuilder, appHost, imageLoader) {
-    'use strict';
-
-    function getLatestPromise(context, params) {
-        loading.show();
-        var userId = ApiClient.getCurrentUserId();
-        var parentId = params.topParentId;
-        var options = {
-            IncludeItemTypes: 'Episode',
-            Limit: 30,
-            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
-            ParentId: parentId,
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Thumb'
-        };
-        return ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options));
-    }
-
-    function loadLatest(context, params, promise) {
-        promise.then(function (items) {
-            var html = '';
-            appHost.supports('imageanalysis');
-            html += cardBuilder.getCardsHtml({
-                items: items,
-                shape: 'backdrop',
-                preferThumb: true,
-                showTitle: true,
-                showSeriesYear: true,
-                showParentTitle: true,
-                overlayText: false,
-                cardLayout: false,
-                showUnplayedIndicator: false,
-                showChildCountIndicator: true,
-                centerText: true,
-                lazy: true,
-                overlayPlayButton: true,
-                lines: 2
-            });
-            var elem = context.querySelector('#latestEpisodes');
-            elem.innerHTML = html;
-            imageLoader.lazyChildren(elem);
-            loading.hide();
-
-            require(['autoFocuser'], function (autoFocuser) {
-                autoFocuser.autoFocus(context);
-            });
-        });
-    }
-
-    return function (view, params, tabContent) {
-        var self = this;
-        var latestPromise;
-
-        self.preRender = function () {
-            latestPromise = getLatestPromise(view, params);
-        };
-
-        self.renderTab = function () {
-            loadLatest(tabContent, params, latestPromise);
-        };
-
-        tabContent.querySelector('#latestEpisodes').addEventListener('click', groupedcards.onItemsContainerClick);
-    };
-});

src/controllers/shows/tvrecommended.js

@@ -6,8 +6,6 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
             name: globalize.translate('TabShows')
         }, {
             name: globalize.translate('TabSuggestions')
-        }, {
-            name: globalize.translate('TabLatest')
         }, {
             name: globalize.translate('TabUpcoming')
         }, {
@@ -27,14 +25,11 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
             case 'suggestions':
                 return 1;
 
-            case 'latest':
-                return 2;
-
             case 'favorites':
                 return 1;
 
             case 'genres':
-                return 4;
+                return 3;
 
             default:
                 return 0;
@@ -59,18 +54,115 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
         }
     }
 
-    return function (view, params) {
+    function initSuggestedTab(page, tabContent) {
-        function reload() {
+        var containers = tabContent.querySelectorAll('.itemsContainer');
-            loading.show();
+
-            loadResume();
+        for (var i = 0, length = containers.length; i < length; i++) {
-            loadNextUp();
+            setScrollClasses(containers[i], enableScrollX());
+        }
     }
 
-        function loadNextUp() {
+    function loadSuggestionsTab(view, params, tabContent) {
+        var parentId = params.topParentId;
+        var userId = ApiClient.getCurrentUserId();
+        console.debug('loadSuggestionsTab');
+        loadResume(tabContent, userId, parentId);
+        loadLatest(tabContent, userId, parentId);
+        loadNextUp(tabContent, userId, parentId);
+    }
+
+    function loadResume(view, userId, parentId) {
+        var screenWidth = dom.getWindowSize().innerWidth;
+        var options = {
+            SortBy: 'DatePlayed',
+            SortOrder: 'Descending',
+            IncludeItemTypes: 'Episode',
+            Filters: 'IsResumable',
+            Limit: screenWidth >= 1920 ? 5 : screenWidth >= 1600 ? 5 : 3,
+            Recursive: true,
+            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
+            CollapseBoxSetItems: false,
+            ParentId: parentId,
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
+            EnableTotalRecordCount: false
+        };
+        ApiClient.getItems(userId, options).then(function (result) {
+            if (result.Items.length) {
+                view.querySelector('#resumableSection').classList.remove('hide');
+            } else {
+                view.querySelector('#resumableSection').classList.add('hide');
+            }
+
+            var allowBottomPadding = !enableScrollX();
+            var container = view.querySelector('#resumableItems');
+            cardBuilder.buildCards(result.Items, {
+                itemsContainer: container,
+                preferThumb: true,
+                shape: getThumbShape(),
+                scalable: true,
+                overlayPlayButton: true,
+                allowBottomPadding: allowBottomPadding,
+                cardLayout: false,
+                showTitle: true,
+                showYear: true,
+                centerText: true
+            });
+            loading.hide();
+
+            require(['autoFocuser'], function (autoFocuser) {
+                autoFocuser.autoFocus(view);
+            });
+        });
+    }
+
+    function loadLatest(view, userId, parentId) {
+        var options = {
+            userId: userId,
+            IncludeItemTypes: 'Episode',
+            Limit: 30,
+            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+            ParentId: parentId,
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Thumb'
+        };
+        ApiClient.getLatestItems(options).then(function (items) {
+            var section = view.querySelector('#latestItemsSection');
+            var allowBottomPadding = !enableScrollX();
+            var container = section.querySelector('#latestEpisodesItems');
+            cardBuilder.buildCards(items, {
+                parentContainer: section,
+                itemsContainer: container,
+                items: items,
+                shape: 'backdrop',
+                preferThumb: true,
+                showTitle: true,
+                showSeriesYear: true,
+                showParentTitle: true,
+                overlayText: false,
+                cardLayout: false,
+                allowBottomPadding: allowBottomPadding,
+                showUnplayedIndicator: false,
+                showChildCountIndicator: true,
+                centerText: true,
+                lazy: true,
+                overlayPlayButton: true,
+                lines: 2
+            });
+            loading.hide();
+
+            require(['autoFocuser'], function (autoFocuser) {
+                autoFocuser.autoFocus(view);
+            });
+        });
+    }
+
+    function loadNextUp(view, userId, parentId) {
         var query = {
+            userId: userId,
             Limit: 24,
             Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo',
-                UserId: ApiClient.getCurrentUserId(),
+            ParentId: parentId,
             ImageTypeLimit: 1,
             EnableImageTypes: 'Primary,Backdrop,Thumb',
             EnableTotalRecordCount: false
@@ -83,8 +175,10 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
                 view.querySelector('.noNextUpItems').classList.remove('hide');
             }
 
-                var container = view.querySelector('#nextUpItems');
+            var section = view.querySelector('#nextUpItemsSection');
+            var container = section.querySelector('#nextUpItems');
             cardBuilder.buildCards(result.Items, {
+                parentContainer: section,
                 itemsContainer: container,
                 preferThumb: true,
                 shape: 'backdrop',
@@ -112,48 +206,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
         return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
     }
 
-        function loadResume() {
+    return function (view, params) {
-            var parentId = libraryMenu.getTopParentId();
-            var screenWidth = dom.getWindowSize().innerWidth;
-            var limit = screenWidth >= 1600 ? 5 : 6;
-            var options = {
-                SortBy: 'DatePlayed',
-                SortOrder: 'Descending',
-                IncludeItemTypes: 'Episode',
-                Filters: 'IsResumable',
-                Limit: limit,
-                Recursive: true,
-                Fields: 'PrimaryImageAspectRatio,SeriesInfo,UserData,BasicSyncInfo',
-                ExcludeLocationTypes: 'Virtual',
-                ParentId: parentId,
-                ImageTypeLimit: 1,
-                EnableImageTypes: 'Primary,Backdrop,Thumb',
-                EnableTotalRecordCount: false
-            };
-            ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) {
-                if (result.Items.length) {
-                    view.querySelector('#resumableSection').classList.remove('hide');
-                } else {
-                    view.querySelector('#resumableSection').classList.add('hide');
-                }
-
-                var allowBottomPadding = !enableScrollX();
-                var container = view.querySelector('#resumableItems');
-                cardBuilder.buildCards(result.Items, {
-                    itemsContainer: container,
-                    preferThumb: true,
-                    shape: getThumbShape(),
-                    scalable: true,
-                    showTitle: true,
-                    showParentTitle: true,
-                    overlayText: false,
-                    centerText: true,
-                    overlayPlayButton: true,
-                    allowBottomPadding: allowBottomPadding,
-                    cardLayout: false
-                });
-            });
-        }
 
         function onBeforeTabChange(e) {
             preLoadTab(view, parseInt(e.detail.selectedTabIndex));
@@ -184,26 +237,22 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
                     break;
 
                 case 2:
-                    depends.push('controllers/shows/tvlatest');
-                    break;
-
-                case 3:
                     depends.push('controllers/shows/tvupcoming');
                     break;
 
-                case 4:
+                case 3:
                     depends.push('controllers/shows/tvgenres');
                     break;
 
-                case 5:
+                case 4:
                     depends.push('controllers/shows/tvstudios');
                     break;
 
-                case 6:
+                case 5:
                     depends.push('controllers/shows/episodes');
                     break;
 
-                case 7:
+                case 6:
                     depends.push('scripts/searchtab');
             }
 
@@ -222,7 +271,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
 
                     if (index === 1) {
                         controller = self;
-                    } else if (index === 7) {
+                    } else if (index === 6) {
                         controller = new controllerFactory(view, tabContent, {
                             collectionType: 'tvshows',
                             parentId: params.topParentId
@@ -289,19 +338,20 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do
         var self = this;
         var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
         var initialTabIndex = currentTabIndex;
+        var suggestionsTabIndex = 1;
 
         self.initTab = function () {
-            var tabContent = self.tabContent;
+            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
-            setScrollClasses(tabContent.querySelector('#resumableItems'), enableScrollX());
+            initSuggestedTab(view, tabContent);
         };
 
         self.renderTab = function () {
-            reload();
+            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            loadSuggestionsTab(view, params, tabContent);
         };
 
         var tabControllers = [];
         var renderedTabs = [];
-        setScrollClasses(view.querySelector('#resumableItems'), enableScrollX());
         view.addEventListener('viewshow', function (e) {
             isViewRestored = e.detail.isRestored;
             initTabs();

src/tv.html

@@ -23,8 +23,15 @@
 
             <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right"></div>
         </div>
+        <div id="latestItemsSection" class="hide verticalSection">
+            <div class="sectionTitleContainer sectionTitleContainer-cards">
+                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestEpisodes}</h2>
+            </div>
 
-        <div class="verticalSection">
+            <div is="emby-itemscontainer" id="latestEpisodesItems" class="itemsContainer padded-left padded-right"></div>
+        </div>
+
+        <div id="nextUpItemsSection" class="hide verticalSection">
             <div class="sectionTitleContainer sectionTitleContainer-cards">
                 <h2 class="sectionTitle sectionTitle-cards padded-left nextUpHeader">${HeaderNextUp}</h2>
             </div>
@@ -33,16 +40,7 @@
         </div>
         <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
     </div>
-    <div class="pageTabContent" id="latestTab" data-index="2">
+    <div class="pageTabContent" id="upcomingTab" data-index="2">
-        <div class="verticalSection">
-            <div class="sectionTitleContainer sectionTitleContainer-cards">
-                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestEpisodes}</h2>
-            </div>
-            <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer vertical-wrap padded-left padded-right">
-            </div>
-        </div>
-    </div>
-    <div class="pageTabContent" id="upcomingTab" data-index="3">
         <div id="upcomingItems">
         </div>
         <div class="noItemsMessage centerMessage" style="display: none;">
@@ -50,13 +48,13 @@
             <p>${MessagePleaseEnsureInternetMetadata}</p>
         </div>
     </div>
-    <div class="pageTabContent" id="genresTab" data-index="4">
+    <div class="pageTabContent" id="genresTab" data-index="3">
         <div id="items"></div>
     </div>
-    <div class="pageTabContent" id="studiosTab" data-index="5">
+    <div class="pageTabContent" id="studiosTab" data-index="4">
         <div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right padded-top vertical-wrap" style="text-align: center;"></div>
     </div>
-    <div class="pageTabContent" data-index="6">
+    <div class="pageTabContent" data-index="5">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
@@ -69,6 +67,6 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="7">
+    <div class="pageTabContent" data-index="6">
     </div>
 </div>