update episodes page

dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html

@@ -25,17 +25,17 @@
 
         //};
 
-        LazyloadImagePrototype.attachedCallback = function () {
+        //LazyloadImagePrototype.attachedCallback = function () {
 
-            var original = this.currentSrc || this.src;
+        //    var original = this.currentSrc || this.src;
 
-            if (original && window.ImageFetcherLazyloadImage) {
+        //    if (original && window.ImageFetcherLazyloadImage) {
-                //console.log(original);
+        //        //console.log(original);
-                this.src = FALLBACK_IMAGE;
+        //        this.src = FALLBACK_IMAGE;
-                console.log('loading ' + original);
+        //        console.log('loading ' + original);
-                ImageFetcherLazyloadImage.loadImage(this, original);
+        //        ImageFetcherLazyloadImage.loadImage(this, original);
-            }
+        //    }
-        };
+        //};
 
         return document.registerElement('lazyload-image', {
             prototype: LazyloadImagePrototype,

dashboard-ui/css/site.css

@@ -287,7 +287,7 @@ html {
     }
 
 body {
-    overflow-y: auto !important;
+    overflow-y: scroll !important;
     /* This is needed to prevent a horizontal scrollbar while neon-animated-pages are animating. */
     overflow-x: hidden;
     /*Can't use this with safari or it causes some content to disappear*/

dashboard-ui/scripts/episodes.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) {
 
@@ -48,21 +48,38 @@
             return context.savedQueryKey;
         }
 
-        function setCardOptions(result) {
+        function reloadItems(page) {
 
-            var cardOptions;
+            Dashboard.showLoadingMsg();
 
-            var view = self.getCurrentViewStyle();
+            var query = getQuery(page);
 
-            if (view == "List") {
+            ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
+
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    showLimit: false,
+                    updatePageSizeSetting: false,
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
+                });
+
+                var viewStyle = self.getCurrentViewStyle();
+
+                var html;
+
+                if (viewStyle == "List") {
 
                     html = libraryBrowser.getListViewHtml({
                         items: result.Items,
                         sortBy: query.SortBy
                     });
                 }
-            else if (view == "PosterCard") {
+                else if (viewStyle == "PosterCard") {
-                cardOptions = {
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         showTitle: true,
@@ -70,11 +87,12 @@
                         lazy: true,
                         cardLayout: true,
                         showDetailsMenu: true
-                };
+                    });
                 }
                 else {
+
                     // poster
-                cardOptions = {
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         showTitle: true,
@@ -83,53 +101,28 @@
                         lazy: true,
                         showDetailsMenu: 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;
             });
         }
 
@@ -149,31 +142,8 @@
             });
         };
 
-        function updateFilterControls(tabContent) {
-
-            var query = getQuery(tabContent);
-
-            $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
-        }
-
         function initPage(tabContent) {
 
-            $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
-
-                var query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = character;
-                query.StartIndex = 0;
-
-                reloadItems(tabContent);
-
-            }).on('alphaclear', function (e) {
-
-                var query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = '';
-
-                reloadItems(tabContent);
-            });
-
             $('.itemsContainer', tabContent).on('needsrefresh', function () {
 
                 reloadItems(tabContent);
@@ -248,44 +218,13 @@
         };
 
         initPage(tabContent);
-
        function createList() {
-
-            if (self.listCreated) {
-                return Promise.resolve();
-            }
-
-            return ironCardList.getTemplate('episodesTab').then(function (html) {
-
-                tabContent.querySelector('.itemsContainer').innerHTML = html;
-                self.listCreated = true;
-            });
-        }
-
-        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

@@ -78,17 +78,21 @@
             <div class="itemsContainer" style="margin-left:-10px;">
             </div>
         </div>
-        <div id="episodesTab" class="pageTabContent absolutePageTabContent hide smoothScrollY" data-index="4">
+        <div id="episodesTab" class="pageTabContent hide" data-index="4">
-            <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 class="itemsContainer">
             </div>
+            <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
+                <div class="paging"></div>
+            </div>
         </div>
         <div class="pageTabContent hide" data-index="5">
-            <div style="text-align: center;">
+            <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
                 <paper-icon-button class="btnSelectView" icon="view-comfy" title="${ButtonSelectView}"></paper-icon-button>
             </div>
             <div id="items" class="itemsContainer paddedItemsContainer"></div>