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,122 +46,116 @@
             return context.savedQueryKey;
         }
 
-        function setCardOptions(result) {
-
-            var cardOptions;
-
-            var view = self.getCurrentViewStyle();
-
-            if (view == "Thumb") {
-
-                cardOptions = {
-                    items: result.Items,
-                    shape: "backdrop",
-                    preferThumb: true,
-                    context: 'tv',
-                    lazy: true,
-                    overlayPlayButton: true
-                };
-            }
-            else if (view == "ThumbCard") {
-
-                cardOptions = {
-                    items: result.Items,
-                    shape: "backdrop",
-                    preferThumb: true,
-                    context: 'tv',
-                    lazy: true,
-                    cardLayout: true,
-                    showTitle: true,
-                    showSeriesYear: true
-                };
-            }
-            else if (view == "Banner") {
-
-                cardOptions = {
-                    items: result.Items,
-                    shape: "banner",
-                    preferBanner: true,
-                    context: 'tv',
-                    lazy: true
-                };
-            }
-            else if (view == "List") {
-
-                html = libraryBrowser.getListViewHtml({
-                    items: result.Items,
-                    context: 'tv',
-                    sortBy: query.SortBy
-                });
-            }
-            else if (view == "PosterCard") {
-                cardOptions = {
-                    items: result.Items,
-                    shape: "portrait",
-                    context: 'tv',
-                    showTitle: true,
-                    showYear: true,
-                    lazy: true,
-                    cardLayout: true
-                };
-            }
-            else {
-
-                // Poster
-                cardOptions = {
-                    items: result.Items,
-                    shape: "portrait",
-                    context: 'tv',
-                    centerText: true,
-                    lazy: true,
-                    overlayPlayButton: true
-                };
-            }
-
-            self.cardOptions = cardOptions;
-        }
-
         function reloadItems(page) {
 
-            self.isLoading = true;
             Dashboard.showLoadingMsg();
 
             var query = getQuery(page);
-            var startIndex = query.StartIndex;
-            var reloadList = !self.cardOptions || startIndex == 0;
 
             ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
 
                 updateFilterControls(page);
 
-                var pushItems = true;
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
-                if (reloadList) {
+                    startIndex: query.StartIndex,
-                    setCardOptions(result);
+                    limit: query.Limit,
-                    pushItems = false;
+                    totalRecordCount: result.TotalRecordCount,
-                }
+                    showLimit: false,
-                libraryBrowser.setPosterViewData(self.cardOptions);
+                    updatePageSizeSetting: false,
-                libraryBrowser.setPosterViewDataOnItems(self.cardOptions, result.Items);
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
+                });
 
-                var ironList = page.querySelector('#ironList');
+                var html;
-                if (pushItems) {
+                var viewStyle = self.getCurrentViewStyle();
-                    for (var i = 0, length = result.Items.length; i < length; i++) {
+
-                        ironList.push('items', result.Items[i]);
+                if (viewStyle == "Thumb") {
-                    }
+
-                } else {
+                    html = libraryBrowser.getPosterViewHtml({
-                    ironList.items = result.Items;
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'tv',
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
+                }
+                else if (viewStyle == "ThumbCard") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'tv',
+                        lazy: true,
+                        cardLayout: true,
+                        showTitle: true,
+                        showSeriesYear: true
+                    });
+                }
+                else if (viewStyle == "Banner") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "banner",
+                        preferBanner: true,
+                        context: 'tv',
+                        lazy: true
+                    });
+                }
+                else if (viewStyle == "List") {
+
+                    html = libraryBrowser.getListViewHtml({
+                        items: result.Items,
+                        context: 'tv',
+                        sortBy: query.SortBy
+                    });
+                }
+                else if (viewStyle == "PosterCard") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'tv',
+                        showTitle: true,
+                        showYear: true,
+                        lazy: true,
+                        cardLayout: true
+                    });
+                }
+                else {
+
+                    // Poster
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'tv',
+                        centerText: true,
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
                 }
 
-                // Hack: notifyResize needs to be done after the items have been rendered
+                $('.paging', tabContent).html(pagingHtml);
-                setTimeout(function () {
+
-                    ironList.notifyResize();
+                $('.btnNextPage', tabContent).on('click', function () {
-                    self.scrollThreshold.resetSize();
+                    query.StartIndex += query.Limit;
-                }, 300);
+                    reloadItems(tabContent);
+                });
+
+                $('.btnPreviousPage', tabContent).on('click', function () {
+                    query.StartIndex -= query.Limit;
+                    reloadItems(tabContent);
+                });
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
 
                 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);
-                reloadItems(tabContent);
+            updateFilterControls(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;">
-                <paper-icon-button class="btnSelectView" icon="view-comfy" title="${ButtonSelectView}"></paper-icon-button>
+                <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
-                <paper-icon-button class="btnSort" title="${ButtonSort}" icon="sort-by-alpha"></paper-icon-button>
+                    <div class="paging"></div>
-                <paper-icon-button class="btnFilter" title="${ButtonFilter}" icon="filter-list"></paper-icon-button>
+                    <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">