Merge pull request #1499 from grafixeyehero/move-tvlatest

Move tvlatest tab to suggestions section

src/components/homeScreenSettings/homeScreenSettings.js

@@ -75,26 +75,30 @@ import 'emby-checkbox';
                 value: 'suggestions'
             });
             list.push({
-                name: globalize.translate('Latest'),
+                name: globalize.translate('Upcoming'),
-                value: 'latest'
+                value: 'upcoming'
             });
             list.push({
                 name: globalize.translate('Genres'),
                 value: 'genres'
             });
             list.push({
-                name: globalize.translate('Favorites'),
+                name: globalize.translate('Networks'),
-                value: 'favorites'
+                value: 'networks'
+            });
+            list.push({
+                name: globalize.translate('Episodes'),
+                value: 'episodes'
             });
         } else if (type === 'music') {
             list.push({
-                name: globalize.translate('Suggestions'),
+                name: globalize.translate('Albums'),
-                value: 'suggestions',
+                value: 'albums',
                 isDefault: true
             });
             list.push({
-                name: globalize.translate('Albums'),
+                name: globalize.translate('Suggestions'),
-                value: 'albums'
+                value: 'suggestions'
             });
             list.push({
                 name: globalize.translate('HeaderAlbumArtists'),

src/controllers/movies/movies.html

@@ -1,6 +1,6 @@
 <div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie">
 
-    <div class="pageTabContent" data-index="0">
+    <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">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
@@ -17,7 +17,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="1">
+    <div class="pageTabContent" id="suggestionsTab" data-index="1">
         <div id="resumableSection" class="verticalSection hide">
             <div class="sectionTitleContainer sectionTitleContainer-cards">
                 <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
@@ -43,7 +43,7 @@
             <p>${MessageNoMovieSuggestionsAvailable}</p>
         </div>
     </div>
-    <div class="pageTabContent" data-index="2">
+    <div class="pageTabContent" id="trailersTab" data-index="2">
         <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="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
@@ -59,7 +59,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="3">
+    <div class="pageTabContent" id="favoritesTab" data-index="3">
         <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>
@@ -71,7 +71,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="4">
+    <div class="pageTabContent" id="collectionsTab" data-index="4">
         <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>
@@ -85,9 +85,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="5">
+    <div class="pageTabContent" id="genresTab" data-index="5">
         <div id="items"></div>
     </div>
-    <div class="pageTabContent" data-index="6">
-    </div>
 </div>

src/controllers/movies/moviesrecommended.js

@@ -320,11 +320,6 @@ import 'emby-button';
 
                     if (index === suggestionsTabIndex) {
                         controller = this;
-                    } else if (index === 6) {
-                        controller = new controllerFactory(view, tabContent, {
-                            collectionType: 'movies',
-                            parentId: params.topParentId
-                        });
                     } else if (index == 0 || index == 3) {
                         controller = new controllerFactory(view, params, tabContent, {
                             mode: index ? 'favorites' : 'movies'

src/controllers/music/music.html

@@ -8,7 +8,26 @@
             }
         }
     </style>
-    <div class="pageTabContent pageTabContent" id="suggestionsTab" data-index="0">
+    <div class="pageTabContent pageTabContent" id="albumsTab" data-index="0">
+        <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="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><span class="material-icons play_arrow"></span></button>
+            <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle"></span></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
+        </div>
+
+        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
+        </div>
+
+        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
+        </div>
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+        </div>
+    </div>
+    <div class="pageTabContent pageTabContent" id="suggestionsTab" data-index="1">
 
         <div class="verticalSection">
 
@@ -34,25 +53,6 @@
 
         <div class="favoriteSections verticalSection"></div>
     </div>
-    <div class="pageTabContent pageTabContent" id="albumsTab" data-index="1">
-        <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="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><span class="material-icons play_arrow"></span></button>
-            <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle"></span></button>
-            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
-        </div>
-
-        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
-        </div>
-
-        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
-        </div>
-        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
-            <div class="paging"></div>
-        </div>
-    </div>
     <div class="pageTabContent" id="albumArtistsTab" data-index="2">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
@@ -85,7 +85,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="4">
+    <div class="pageTabContent" id="playlistsTab" data-index="4">
 
         <div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right padded-top vertical-wrap centered"></div>
     </div>
@@ -105,6 +105,4 @@
     <div class="pageTabContent" id="genresTab" data-index="6">
         <div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right padded-top vertical-wrap"></div>
     </div>
-    <div class="pageTabContent" data-index="7">
-    </div>
 </div>

src/controllers/music/musicrecommended.js

@@ -177,9 +177,9 @@ import 'flexStyles';
 
     function getTabs() {
         return [{
-            name: globalize.translate('Suggestions')
-        }, {
             name: globalize.translate('Albums')
+        }, {
+            name: globalize.translate('Suggestions')
         }, {
             name: globalize.translate('HeaderAlbumArtists')
         }, {
@@ -195,7 +195,7 @@ import 'flexStyles';
 
     function getDefaultTabIndex(folderId) {
         switch (userSettings.get('landing-' + folderId)) {
-            case 'albums':
+            case 'suggestions':
                 return 1;
 
             case 'albumartists':
@@ -221,7 +221,7 @@ import 'flexStyles';
     export default function (view, params) {
         function reload() {
             loading.show();
-            const tabContent = view.querySelector(".pageTabContent[data-index='0']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             loadSuggestionsTab(view, tabContent, params.topParentId);
         }
 
@@ -268,11 +268,11 @@ import 'flexStyles';
 
             switch (index) {
                 case 0:
-                    depends = 'controllers/music/musicrecommended';
+                    depends = 'controllers/music/musicalbums';
                     break;
 
                 case 1:
-                    depends = 'controllers/music/musicalbums';
+                    depends = 'controllers/music/musicrecommended';
                     break;
 
                 case 2:
@@ -296,7 +296,7 @@ import 'flexStyles';
             import(depends).then(({default: controllerFactory}) => {
                 let tabContent;
 
-                if (index == 0) {
+                if (index == 1) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
                     this.tabContent = tabContent;
                 }
@@ -306,13 +306,8 @@ import 'flexStyles';
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
 
-                    if (index === 0) {
+                    if (index === 1) {
                         controller = this;
-                    } else if (index === 7) {
-                        controller = new controllerFactory(view, tabContent, {
-                            collectionType: 'music',
-                            parentId: params.topParentId
-                        });
                     } else {
                         controller = new controllerFactory(view, params, tabContent);
                     }
@@ -360,9 +355,10 @@ import 'flexStyles';
         }
 
         let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
+        const suggestionsTabIndex = 1;
 
         this.initTab = function () {
-            const tabContent = view.querySelector(".pageTabContent[data-index='0']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             const containers = tabContent.querySelectorAll('.itemsContainer');
 
             for (let i = 0, length = containers.length; i < length; i++) {

src/controllers/shows/tvlatest.js

@@ -1,68 +0,0 @@
-import loading from 'loading';
-import groupedcards from 'components/groupedcards';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-
-/* eslint-disable indent */
-
-    function getLatestPromise(context, params) {
-        loading.show();
-        const userId = ApiClient.getCurrentUserId();
-        const parentId = params.topParentId;
-        const 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) {
-            let html = '';
-            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
-            });
-            const elem = context.querySelector('#latestEpisodes');
-            elem.innerHTML = html;
-            imageLoader.lazyChildren(elem);
-            loading.hide();
-
-            import('autoFocuser').then(({default: autoFocuser}) => {
-                autoFocuser.autoFocus(context);
-            });
-        });
-    }
-
-    export default function (view, params, tabContent) {
-        const self = this;
-        let latestPromise;
-
-        self.preRender = function () {
-            latestPromise = getLatestPromise(view, params);
-        };
-
-        self.renderTab = function () {
-            loadLatest(tabContent, params, latestPromise);
-        };
-
-        tabContent.querySelector('#latestEpisodes').addEventListener('click', groupedcards);
-    }
-
-/* eslint-enable indent */

src/controllers/shows/tvrecommended.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">${NextUp}</h2>
             </div>
@@ -33,16 +40,7 @@
         </div>
         <p class="noNextUpItems" style="display: none;">${MessageNoNextUpItems}</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" id="episodesTab" 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,4 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent" data-index="7">
-    </div>
 </div>

src/controllers/shows/tvrecommended.js

@@ -20,8 +20,6 @@ import 'emby-button';
             name: globalize.translate('Shows')
         }, {
             name: globalize.translate('Suggestions')
-        }, {
-            name: globalize.translate('TabLatest')
         }, {
             name: globalize.translate('TabUpcoming')
         }, {
@@ -38,15 +36,18 @@ import 'emby-button';
             case 'suggestions':
                 return 1;
 
-            case 'latest':
+            case 'upcoming':
                 return 2;
 
-            case 'favorites':
-                return 1;
-
             case 'genres':
+                return 3;
+
+            case 'networks':
                 return 4;
 
+            case 'episodes':
+                return 5;
+
             default:
                 return 0;
         }
@@ -70,18 +71,115 @@ import 'emby-button';
         }
     }
 
-    export default function (view, params) {
+    function initSuggestedTab(page, tabContent) {
-        function reload() {
+        const containers = tabContent.querySelectorAll('.itemsContainer');
-            loading.show();
+
-            loadResume();
+        for (let i = 0, length = containers.length; i < length; i++) {
-            loadNextUp();
+            setScrollClasses(containers[i], enableScrollX());
+        }
     }
 
-        function loadNextUp() {
+    function loadSuggestionsTab(view, params, tabContent) {
+        const parentId = params.topParentId;
+        const userId = ApiClient.getCurrentUserId();
+        console.debug('loadSuggestionsTab');
+        loadResume(tabContent, userId, parentId);
+        loadLatest(tabContent, userId, parentId);
+        loadNextUp(tabContent, userId, parentId);
+    }
+
+    function loadResume(view, userId, parentId) {
+        const screenWidth = dom.getWindowSize().innerWidth;
+        const 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');
+            }
+
+            const allowBottomPadding = !enableScrollX();
+            const 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();
+
+            import('autoFocuser').then(({default: autoFocuser}) => {
+                autoFocuser.autoFocus(view);
+            });
+        });
+    }
+
+    function loadLatest(view, userId, parentId) {
+        const options = {
+            userId: userId,
+            IncludeItemTypes: 'Episode',
+            Limit: 30,
+            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
+            ParentId: parentId,
+            ImageTypeLimit: 1,
+            EnableImageTypes: 'Primary,Backdrop,Thumb'
+        };
+        ApiClient.getLatestItems(options).then(function (items) {
+            const section = view.querySelector('#latestItemsSection');
+            const allowBottomPadding = !enableScrollX();
+            const 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();
+
+            import('autoFocuser').then(({default: autoFocuser}) => {
+                autoFocuser.autoFocus(view);
+            });
+        });
+    }
+
+    function loadNextUp(view, userId, parentId) {
         const query = {
+            userId: userId,
             Limit: 24,
             Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo',
-                UserId: ApiClient.getCurrentUserId(),
+            ParentId: parentId,
             ImageTypeLimit: 1,
             EnableImageTypes: 'Primary,Backdrop,Thumb',
             EnableTotalRecordCount: false
@@ -94,8 +192,10 @@ import 'emby-button';
                 view.querySelector('.noNextUpItems').classList.remove('hide');
             }
 
-                const container = view.querySelector('#nextUpItems');
+            const section = view.querySelector('#nextUpItemsSection');
+            const container = section.querySelector('#nextUpItems');
             cardBuilder.buildCards(result.Items, {
+                parentContainer: section,
                 itemsContainer: container,
                 preferThumb: true,
                 shape: 'backdrop',
@@ -123,49 +223,7 @@ import 'emby-button';
         return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
     }
 
-        function loadResume() {
+    export default function (view, params) {
-            const parentId = libraryMenu.getTopParentId();
-            const screenWidth = dom.getWindowSize().innerWidth;
-            const limit = screenWidth >= 1600 ? 5 : 6;
-            const 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');
-                }
-
-                const allowBottomPadding = !enableScrollX();
-                const 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));
         }
@@ -196,22 +254,18 @@ import 'emby-button';
                     break;
 
                 case 2:
-                    depends = 'controllers/shows/tvlatest';
-                    break;
-
-                case 3:
                     depends = 'controllers/shows/tvupcoming';
                     break;
 
-                case 4:
+                case 3:
                     depends = 'controllers/shows/tvgenres';
                     break;
 
-                case 5:
+                case 4:
                     depends = 'controllers/shows/tvstudios';
                     break;
 
-                case 6:
+                case 5:
                     depends = 'controllers/shows/episodes';
                     break;
             }
@@ -231,11 +285,6 @@ import 'emby-button';
 
                     if (index === 1) {
                         controller = self;
-                    } else if (index === 7) {
-                        controller = new controllerFactory(view, tabContent, {
-                            collectionType: 'tvshows',
-                            parentId: params.topParentId
-                        });
                     } else {
                         controller = new controllerFactory(view, params, tabContent);
                     }
@@ -294,19 +343,20 @@ import 'emby-button';
 
         const self = this;
         let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
+        const suggestionsTabIndex = 1;
 
         self.initTab = function () {
-            const tabContent = self.tabContent;
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
-            setScrollClasses(tabContent.querySelector('#resumableItems'), enableScrollX());
+            initSuggestedTab(view, tabContent);
         };
 
         self.renderTab = function () {
-            reload();
+            const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+            loadSuggestionsTab(view, params, tabContent);
         };
 
         const tabControllers = [];
         let renderedTabs = [];
-        setScrollClasses(view.querySelector('#resumableItems'), enableScrollX());
         view.addEventListener('viewshow', function (e) {
             initTabs();
             if (!view.getAttribute('data-title')) {