update tv view

dashboard-ui/scripts/moviesrecommended.js

@@ -75,7 +75,7 @@
 
     function loadResume(page, userId, parentId) {
 
-        var screenWidth = $(window).width();
+        var screenWidth = window.innerWidth;
 
         var options = {
 
@@ -83,7 +83,7 @@
             SortOrder: "Descending",
             IncludeItemTypes: "Movie",
             Filters: "IsResumable",
-            Limit: screenWidth >= 1920 ? 6 : (screenWidth >= 1600 ? 4 : 3),
+            Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1600 ? 4 : 3),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,MediaSourceCount,SyncInfo",
             CollapseBoxSetItems: false,

dashboard-ui/scripts/tvlatest.js

@@ -1,81 +0,0 @@
-define([], function () {
-
-    function getView() {
-
-        return 'Thumb';
-    }
-
-    function loadLatest(context, params) {
-
-        Dashboard.showLoadingMsg();
-
-        var userId = Dashboard.getCurrentUserId();
-
-        var parentId = params.topParentId;
-
-        var options = {
-
-            IncludeItemTypes: "Episode",
-            Limit: 30,
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
-            ParentId: parentId,
-            ImageTypeLimit: 1,
-            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
-        };
-
-        ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
-
-            var view = getView();
-            var html = '';
-
-            if (view == 'ThumbCard') {
-
-                html += LibraryBrowser.getPosterViewHtml({
-                    items: items,
-                    shape: "backdrop",
-                    preferThumb: true,
-                    inheritThumb: false,
-                    showUnplayedIndicator: false,
-                    showChildCountIndicator: true,
-                    overlayText: false,
-                    showParentTitle: true,
-                    lazy: true,
-                    showTitle: true,
-                    cardLayout: true
-                });
-
-            } else if (view == 'Thumb') {
-
-                html += LibraryBrowser.getPosterViewHtml({
-                    items: items,
-                    shape: "backdrop",
-                    preferThumb: true,
-                    inheritThumb: false,
-                    showParentTitle: false,
-                    showUnplayedIndicator: false,
-                    showChildCountIndicator: true,
-                    overlayText: false,
-                    centerText: true,
-                    lazy: true,
-                    showTitle: false,
-                    overlayPlayButton: AppInfo.enableAppLayouts
-                });
-            }
-
-            var elem = context.querySelector('#latestEpisodes');
-            elem.innerHTML = html;
-            ImageLoader.lazyChildren(elem);
-
-            Dashboard.hideLoadingMsg();
-        });
-    }
-
    return function (view, params, tabContent) {
-
-        var self = this;
-
-        self.renderTab = function() {
-
-            loadLatest(tabContent, params);
-        };
-    };
-});

dashboard-ui/scripts/tvrecommended.js

@@ -20,13 +20,79 @@
 
             loadResume();
             loadNextUp();
+            loadLatest();
+        }
+
+        function loadLatest() {
+
+            Dashboard.showLoadingMsg();
+
+            var userId = Dashboard.getCurrentUserId();
+
+            var parentId = params.topParentId;
+
+            var options = {
+
+                IncludeItemTypes: "Episode",
+                Limit: 30,
+                Fields: "PrimaryImageAspectRatio,SyncInfo",
+                ParentId: parentId,
+                ImageTypeLimit: 1,
+                EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+            };
+
+            ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
+
+                var viewStyle = getView();
+                var html = '';
+
+                if (viewStyle == 'ThumbCard') {
+
+                    html += LibraryBrowser.getPosterViewHtml({
+                        items: items,
+                        shape: getThumbShape(),
+                        preferThumb: true,
+                        inheritThumb: false,
+                        showUnplayedIndicator: false,
+                        showChildCountIndicator: true,
+                        overlayText: false,
+                        showParentTitle: true,
+                        lazy: true,
+                        showTitle: true,
+                        cardLayout: true
+                    });
+
+                } else if (viewStyle == 'Thumb') {
+
+                    html += LibraryBrowser.getPosterViewHtml({
+                        items: items,
+                        shape: getThumbShape(),
+                        preferThumb: true,
+                        inheritThumb: false,
+                        showParentTitle: false,
+                        showUnplayedIndicator: false,
+                        showChildCountIndicator: true,
+                        overlayText: false,
+                        centerText: true,
+                        lazy: true,
+                        showTitle: false,
+                        overlayPlayButton: AppInfo.enableAppLayouts
+                    });
+                }
+
+                var elem = view.querySelector('#latestEpisodes');
+                elem.innerHTML = html;
+                ImageLoader.lazyChildren(elem);
+
+                Dashboard.hideLoadingMsg();
+            });
         }
 
         function loadNextUp() {
 
             var query = {
 
-                Limit: 24,
+                Limit: enableScrollX() ? 24 : 15,
                 Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,SyncInfo",
                 UserId: Dashboard.getCurrentUserId(),
                 ImageTypeLimit: 1,
@@ -50,7 +116,7 @@
 
                     html += libraryBrowser.getPosterViewHtml({
                         items: result.Items,
-                        shape: "backdrop",
+                        shape: getThumbShape(),
                         showTitle: true,
                         preferThumb: true,
                         showParentTitle: true,
@@ -63,7 +129,7 @@
 
                     html += libraryBrowser.getPosterViewHtml({
                         items: result.Items,
-                        shape: "backdrop",
+                        shape: getThumbShape(),
                         showTitle: true,
                         showParentTitle: true,
                         overlayText: false,
@@ -94,7 +160,7 @@
 
             var parentId = LibraryMenu.getTopParentId();
 
-            var limit = 6;
+            var screenWidth = window.innerWidth;
 
             var options = {
 
@@ -102,7 +168,7 @@
                 SortOrder: "Descending",
                 IncludeItemTypes: "Episode",
                 Filters: "IsResumable",
-                Limit: limit,
+                Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1600 ? 4 : 3),
                 Recursive: true,
                 Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData,SyncInfo",
                 ExcludeLocationTypes: "Virtual",
@@ -160,12 +226,23 @@
         self.initTab = function () {
 
             var tabContent = self.tabContent;
+
+            var resumableItems = tabContent.querySelector('#resumableItems');
+            var nextUpItems = tabContent.querySelector('#nextUpItems');
+            var latestEpisodes = tabContent.querySelector('#latestEpisodes');
+
             if (enableScrollX()) {
-                tabContent.querySelector('#resumableItems').classList.add('hiddenScrollX');
+                resumableItems.classList.add('hiddenScrollX');
+                nextUpItems.classList.add('hiddenScrollX');
+                latestEpisodes.classList.add('hiddenScrollX');
             } else {
-                tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
+                resumableItems.classList.remove('hiddenScrollX');
+                nextUpItems.classList.remove('hiddenScrollX');
+                latestEpisodes.classList.remove('hiddenScrollX');
             }
-            libraryBrowser.createCardMenus(tabContent.querySelector('#resumableItems'));
+            libraryBrowser.createCardMenus(resumableItems);
+            libraryBrowser.createCardMenus(nextUpItems);
+            libraryBrowser.createCardMenus(latestEpisodes);
         };
 
         self.renderTab = function () {
@@ -185,21 +262,18 @@
                 case 0:
                     break;
                 case 1:
-                    depends.push('scripts/tvlatest');
-                    break;
-                case 2:
                     depends.push('scripts/tvupcoming');
                     break;
-                case 3:
+                case 2:
                     depends.push('scripts/tvshows');
                     break;
-                case 4:
+                case 3:
                     depends.push('scripts/episodes');
                     break;
-                case 5:
+                case 4:
                     depends.push('scripts/tvgenres');
                     break;
-                case 6:
+                case 5:
                     depends.push('scripts/tvstudios');
                     break;
                 default:
@@ -248,11 +322,6 @@
             baseUrl += '?topParentId=' + topParentId;
         }
 
-        if (enableScrollX()) {
-            view.querySelector('#resumableItems').classList.add('hiddenScrollX');
-        } else {
-            view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
-        }
         libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
         libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'), [0, 1, 2, 4, 5, 6]);
 

dashboard-ui/thirdparty/paper-button-style.css

@@ -39,7 +39,7 @@
         color: #52B54B;
     }
 
-    paper-button[raised].submit {
+    paper-button[raised].submit, paper-button[raised] {
         background: #52B54B;
         color: #fff;
     }

dashboard-ui/tv.html

@@ -2,12 +2,11 @@
 
     <div class="libraryViewNav">
         <button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
-        <button class="pageTabButton" data-index="1">${TabLatest}</button>
+        <button class="pageTabButton" data-index="1">${TabUpcoming}</button>
-        <button class="pageTabButton" data-index="2">${TabUpcoming}</button>
+        <button class="pageTabButton" data-index="2">${TabShows}</button>
-        <button class="pageTabButton" data-index="3">${TabShows}</button>
+        <button class="pageTabButton tvEpisodesTab" data-index="3">${TabEpisodes}</button>
-        <button class="pageTabButton tvEpisodesTab" data-index="4">${TabEpisodes}</button>
+        <button class="pageTabButton" data-index="4">${TabGenres}</button>
-        <button class="pageTabButton" data-index="5">${TabGenres}</button>
+        <button class="pageTabButton" data-index="5">${TabNetworks}</button>
-        <button class="pageTabButton" data-index="6">${TabNetworks}</button>
     </div>
     <div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
         <div id="resumableSection" class="homePageSection">
@@ -25,22 +24,20 @@
                 <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
                 <paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
             </div>
-            <div id="nextUpItems" class="itemsContainer">
+            <div id="nextUpItems" class="itemsContainer noautoinit">
             </div>
         </div>
         <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
-    </div>
-    <div class="pageTabContent ehsContent" id="latestTab" data-index="1">
         <div class="homePageSection">
             <div>
                 <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
                 <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
             </div>
-            <div id="latestEpisodes" class="itemsContainer">
+            <div id="latestEpisodes" class="itemsContainer noautoinit">
             </div>
         </div>
     </div>
-    <div class="pageTabContent ehsContent" id="upcomingTab" data-index="2">
+    <div class="pageTabContent ehsContent" id="upcomingTab" data-index="1">
         <div id="upcomingItems">
         </div>
         <div class="noItemsMessage" style="display: none;">
@@ -50,7 +47,7 @@
             </p>
         </div>
     </div>
-    <div class="pageTabContent ehsContent" id="seriesTab" data-index="3">
+    <div class="pageTabContent ehsContent" id="seriesTab" data-index="2">
         <div style="text-align: center;padding:.7em 0;">
             <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
                 <div class="paging"></div>
@@ -69,7 +66,7 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent ehsContent" id="episodesTab" data-index="4">
+    <div class="pageTabContent ehsContent" id="episodesTab" data-index="3">
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
@@ -82,13 +79,13 @@
             <div class="paging"></div>
         </div>
     </div>
-    <div class="pageTabContent ehsContent" id="genresTab" data-index="5">
+    <div class="pageTabContent ehsContent" id="genresTab" data-index="4">
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer"></div>
     </div>
-    <div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
+    <div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>