update tv page

dashboard-ui/scripts/librarybrowser.js

@@ -173,7 +173,6 @@
 
             enableFullPaperTabs: function () {
 
-                return true;
                 if (browserInfo.animate && !browserInfo.mobile) {
                     //return true;
                 }

dashboard-ui/scripts/tvshows.js

@@ -1,4 +1,4 @@
-define(['ironCardList', 'scrollThreshold', 'events', 'libraryBrowser', 'jQuery'], function (ironCardList, scrollThreshold, events, libraryBrowser, $) {
+define(['events', 'libraryBrowser', 'imageLoader', 'jQuery'], function (events, libraryBrowser, imageLoader, $) {
 
     return function (view, params, tabContent) {
 
@@ -46,26 +46,44 @@
             return context.savedQueryKey;
         }
 
-        function setCardOptions(result) {
+        function reloadItems(page) {
 
-            var cardOptions;
+            Dashboard.showLoadingMsg();
 
-            var view = self.getCurrentViewStyle();
+            var query = getQuery(page);
 
-            if (view == "Thumb") {
+            ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
 
-                cardOptions = {
+                updateFilterControls(page);
+
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    showLimit: false,
+                    updatePageSizeSetting: false,
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
+                });
+
+                var html;
+                var viewStyle = self.getCurrentViewStyle();
+
+                if (viewStyle == "Thumb") {
+
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
                         context: 'tv',
                         lazy: true,
                         overlayPlayButton: true
-                };
+                    });
                 }
-            else if (view == "ThumbCard") {
+                else if (viewStyle == "ThumbCard") {
 
-                cardOptions = {
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
@@ -74,19 +92,19 @@
                         cardLayout: true,
                         showTitle: true,
                         showSeriesYear: true
-                };
+                    });
                 }
-            else if (view == "Banner") {
+                else if (viewStyle == "Banner") {
 
-                cardOptions = {
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "banner",
                         preferBanner: true,
                         context: 'tv',
                         lazy: true
-                };
+                    });
                 }
-            else if (view == "List") {
+                else if (viewStyle == "List") {
 
                     html = libraryBrowser.getListViewHtml({
                         items: result.Items,
@@ -94,8 +112,9 @@
                         sortBy: query.SortBy
                     });
                 }
-            else if (view == "PosterCard") {
+                else if (viewStyle == "PosterCard") {
-                cardOptions = {
+
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'tv',
@@ -103,65 +122,40 @@
                         showYear: true,
                         lazy: true,
                         cardLayout: true
-                };
+                    });
                 }
                 else {
 
                     // Poster
-                cardOptions = {
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
                         context: 'tv',
                         centerText: true,
                         lazy: true,
                         overlayPlayButton: true
-                };
+                    });
                 }
 
-            self.cardOptions = cardOptions;
+                $('.paging', tabContent).html(pagingHtml);
-        }
 
-        function reloadItems(page) {
+                $('.btnNextPage', tabContent).on('click', function () {
+                    query.StartIndex += query.Limit;
+                    reloadItems(tabContent);
+                });
 
-            self.isLoading = true;
+                $('.btnPreviousPage', tabContent).on('click', function () {
-            Dashboard.showLoadingMsg();
+                    query.StartIndex -= query.Limit;
+                    reloadItems(tabContent);
+                });
 
-            var query = getQuery(page);
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
-            var startIndex = query.StartIndex;
+                itemsContainer.innerHTML = html;
-            var reloadList = !self.cardOptions || startIndex == 0;
+                imageLoader.lazyChildren(itemsContainer);
-
-            ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
-
-                updateFilterControls(page);
-
-                var pushItems = true;
-                if (reloadList) {
-                    setCardOptions(result);
-                    pushItems = false;
-                }
-                libraryBrowser.setPosterViewData(self.cardOptions);
-                libraryBrowser.setPosterViewDataOnItems(self.cardOptions, result.Items);
-
-                var ironList = page.querySelector('#ironList');
-                if (pushItems) {
-                    for (var i = 0, length = result.Items.length; i < length; i++) {
-                        ironList.push('items', result.Items[i]);
-                    }
-                } else {
-                    ironList.items = result.Items;
-                }
-
-                // Hack: notifyResize needs to be done after the items have been rendered
-                setTimeout(function () {
-                    ironList.notifyResize();
-                    self.scrollThreshold.resetSize();
-                }, 300);
 
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
 
                 Dashboard.hideLoadingMsg();
-                self.hasMoreItems = result.TotalRecordCount > (startIndex + result.Items.length);
-                self.isLoading = false;
             });
         }
 
@@ -277,49 +271,13 @@
 
         initPage(tabContent);
 
-        function createList() {
-
-            if (self.listCreated) {
-                return Promise.resolve();
-            }
-
-            return ironCardList.getTemplate('seriesTab').then(function (html) {
-
-                tabContent.querySelector('.itemsContainer').innerHTML = html;
-                self.listCreated = true;
-
-                return new Promise(function (resolve, reject) {
-
-                    setTimeout(resolve, 2000);
-                });
-            });
-        }
-
-        function loadMoreItems() {
-
-            if (!self.isLoading && self.hasMoreItems) {
-
-                getQuery(tabContent).StartIndex += pageSize;
-                reloadItems(tabContent);
-            }
-        }
-
-        self.scrollThreshold = new scrollThreshold(tabContent, false);
-        events.on(self.scrollThreshold, 'lower-threshold', loadMoreItems);
-
         self.renderTab = function () {
 
-            createList().then(function () {
             reloadItems(tabContent);
             updateFilterControls(tabContent);
-            });
         };
 
         self.destroy = function () {
-            events.off(self.scrollThreshold, 'lower-threshold', loadMoreItems);
-            if (self.scrollThreshold) {
-                self.scrollThreshold.destroy();
-            }
         };
     };
 });

dashboard-ui/tv.html

@@ -64,18 +64,24 @@
                 </p>
             </div>
         </div>
-        <div id="seriesTab" class="pageTabContent absolutePageTabContent hide smoothScrollY" data-index="3">
+        <div id="seriesTab" class="pageTabContent hide" data-index="3">
 
             <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>
                     <paper-icon-button class="btnSelectView" icon="view-comfy" title="${ButtonSelectView}"></paper-icon-button>
                     <paper-icon-button class="btnSort" title="${ButtonSort}" icon="sort-by-alpha"></paper-icon-button>
                     <paper-icon-button class="btnFilter" title="${ButtonFilter}" icon="filter-list"></paper-icon-button>
                 </div>
+            </div>
 
             <div class="alphabetPicker">
             </div>
 
-            <div class="itemsContainer" style="margin-left:-10px;">
+            <div class="itemsContainer">
+            </div>
+            <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
+                <div class="paging"></div>
             </div>
         </div>
         <div id="episodesTab" class="pageTabContent hide" data-index="4">