Merge pull request #1681 from MediaBrowser/dev

Dev

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

@@ -0,0 +1,105 @@
+<script>
+
+    //require(['imageFetcher'], function (imageFetcher) {
+    //    window.ImageFetcherLazyloadImage = imageFetcher;
+    //});
+
+    /**
+     * <lazyload-image>
+     * HTMLImageElement extension for lazy loading.
+     * http://github.com/1000ch/lazyload-image
+     *
+     * Copyright 1000ch
+     * licensed under the MIT license.
+     */
+    window.LazyloadImage = (function () {
+        'use strict';
+
+        var FALLBACK_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
+        var DEFAULT_OFFSET = 0;
+
+        // create prototype from HTMLImageElement
+        var LazyloadImagePrototype = Object.create(HTMLImageElement.prototype);
+
+        function fadeIn(elem) {
+
+            if (elem.classList.contains('noFade')) {
+                return;
+            }
+
+            var keyframes = [
+              { opacity: '0', offset: 0 },
+              { opacity: '1', offset: 1 }];
+            var timing = { duration: 300, iterations: 1 };
+            elem.animate(keyframes, timing);
+        }
+
+        function imgObserver(that, mutations) {
+            mutations.forEach(function (mutation) {
+
+                if (mutation.attributeName != 'src') {
+                    return;
+                }
+
+                var src = that.src;
+
+                if (src && src != FALLBACK_IMAGE) {
+
+                    if (!that.loadingSrc) {
+                        that.src = FALLBACK_IMAGE;
+                        that.loadingSrc = src;
+
+                        ImageFetcherLazyloadImage.loadImage(that, src);
+                    } else {
+                        that.loadingSrc = null;
+                    }
+
+                } else if (!src) {
+                    that.src = FALLBACK_IMAGE;
+                }
+            });
+        }
+
+        // lifecycle callbacks
+        LazyloadImagePrototype.createdCallback = function () {
+
+            var that = this;
+
+            if (window.ImageFetcherLazyloadImage) {
+                // swap original src attribute
+                this.original = this.currentSrc || this.src;
+                this.src = FALLBACK_IMAGE;
+
+                var observer = new MutationObserver(function (mutations) {
+                    imgObserver(that, mutations);
+                });
+
+                // pass in the target node, as well as the observer options
+                observer.observe(this, { attributes: true, childList: false, characterData: false });
+
+                this.observer = observer;
+            }
+        };
+
+        //LazyloadImagePrototype.attachedCallback = function () {
+
+
+        //};
+
+        LazyloadImagePrototype.detachedCallback = function () {
+
+            if (this.observer) {
+                // later, you can stop observing
+                this.observer.disconnect();
+            }
+
+        };
+
+        return document.registerElement('lazyload-image', {
+            prototype: LazyloadImagePrototype,
+            extends: 'img'
+        });
+
+    })();
+
+</script>

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.2.35",
-  "_release": "1.2.35",
+  "version": "1.2.38",
+  "_release": "1.2.38",
   "_resolution": {
     "type": "version",
-    "tag": "1.2.35",
-    "commit": "7fe2a2677888e953d429ea985a8690af179faa06"
+    "tag": "1.2.38",
+    "commit": "ab981369a76f26211bc81fa383c3cb64f2298399"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/images/basicimagefetcher.js

@@ -4,16 +4,8 @@ define([], function () {
 
         if (elem.tagName !== "IMG") {
 
-            return new Promise(function (resolve, reject) {
-
-                var tmp = new Image();
-
-                tmp.onload = function () {
-                    elem.style.backgroundImage = "url('" + url + "')";
-                    resolve(elem);
-                };
-                tmp.src = url;
-            });
+            elem.style.backgroundImage = "url('" + url + "')";
+            return Promise.resolve(elem);
 
         } else {
             elem.setAttribute("src", url);

dashboard-ui/bower_components/emby-webcomponents/images/persistentimagefetcher.js

@@ -4,16 +4,8 @@ define(['cryptojs-md5'], function () {
 
         if (elem.tagName !== "IMG") {
 
-            return new Promise(function (resolve, reject) {
-
-                var tmp = new Image();
-
-                tmp.onload = function () {
-                    elem.style.backgroundImage = "url('" + url + "')";
-                    resolve(elem);
-                };
-                tmp.src = url;
-            });
+            elem.style.backgroundImage = "url('" + url + "')";
+            return Promise.resolve(elem);
 
         } else {
             elem.setAttribute("src", url);

dashboard-ui/bower_components/emby-webcomponents/loading/loading-lite.js

@@ -1,4 +1,4 @@
-define(['layoutManager', 'MaterialSpinner', 'css!./loading'], function (layoutManager) {
+define(['MaterialSpinner', 'css!./loading'], function () {
 
     return {
         show: function () {
@@ -11,10 +11,6 @@ define(['layoutManager', 'MaterialSpinner', 'css!./loading'], function (layoutMa
                 elem.classList.add('mdl-spinner');
                 elem.classList.add('mdl-js-spinner');
 
-                if (layoutManager.tv) {
-                    elem.classList.add('tv');
-                }
-
                 document.body.appendChild(elem);
                 componentHandler.upgradeElement(elem, 'MaterialSpinner');
             }

dashboard-ui/bower_components/emby-webcomponents/loading/loading.css

@@ -1,21 +1,14 @@
 .docspinner {
-    margin-top: -4vh;
-    margin-left: -4vh;
-    width: 7vh;
-    height: 7vh;
+    margin-top: -5vh;
+    margin-left: -5vh;
+    width: 10vh;
+    height: 10vh;
     position: fixed;
     top: 50%;
     left: 50%;
     z-index: 9999999;
 }
 
-    .docspinner.tv {
-        margin-top: -5vh;
-        margin-left: -5vh;
-        width: 10vh;
-        height: 10vh;
-    }
-
 .loadingHide {
     display: none !important;
-}
+}

dashboard-ui/bower_components/emby-webcomponents/loading/loading.js

@@ -1,4 +1,4 @@
-define(['layoutManager', 'paper-spinner', 'css!./loading'], function (layoutManager) {
+define(['paper-spinner', 'css!./loading'], function () {
 
     return {
         show: function () {
@@ -9,10 +9,6 @@ define(['layoutManager', 'paper-spinner', 'css!./loading'], function (layoutMana
                 elem = document.createElement("paper-spinner");
                 elem.classList.add('docspinner');
 
-                if (layoutManager.tv) {
-                    elem.classList.add('tv');
-                }
-
                 document.body.appendChild(elem);
             }
 

dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css

@@ -1,4 +1,4 @@
-.smoothScrollX {
+.smoothScrollX, .hiddenScrollX {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     overflow-y: hidden;
@@ -6,45 +6,30 @@
     white-space: nowrap;
 }
 
-.hiddenScrollX {
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: hidden;
-    white-space: nowrap;
-    scroll-behavior: smooth;
-}
-
-.hiddenScrollX, .layout-tv .smoothScrollX, .layout-mobile .smoothScrollX {
+.hiddenScrollX, .layout-tv .smoothScrollX {
     -ms-overflow-style: none;
     overflow: -moz-scrollbars-none;
 }
 
-    .hiddenScrollX::-webkit-scrollbar, .layout-tv .smoothScrollX::-webkit-scrollbar, .layout-mobile .smoothScrollX::-webkit-scrollbar {
+    .hiddenScrollX::-webkit-scrollbar, .layout-tv .smoothScrollX::-webkit-scrollbar {
         height: 0 !important;
         display: none;
     }
 
 
-.smoothScrollY {
+.smoothScrollY, .hiddenScrollY {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     scroll-behavior: smooth;
 }
 
-.hiddenScrollY, .layout-tv .smoothScrollY, .layout-mobile .smoothScrollY {
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-}
-
-.hiddenScrollY {
+.hiddenScrollY, .layout-tv .smoothScrollY {
     -ms-overflow-style: none;
     overflow: -moz-scrollbars-none;
 }
 
-    .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-mobile .smoothScrollY::-webkit-scrollbar {
+    .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar {
         width: 0 !important;
         display: none;
     }

dashboard-ui/bower_components/fingerprintjs2/.bower.json

@@ -23,15 +23,14 @@
     "spec"
   ],
   "homepage": "https://github.com/Valve/fingerprintjs2",
-  "version": "1.1.3",
-  "_release": "1.1.3",
+  "version": "1.1.4",
+  "_release": "1.1.4",
   "_resolution": {
     "type": "version",
-    "tag": "1.1.3",
-    "commit": "49e2c11cf08c13e12bf38185cec9ae159025e526"
+    "tag": "1.1.4",
+    "commit": "ae5719db3d942a1a84ab43b707d4d1c34138934e"
   },
   "_source": "https://github.com/Valve/fingerprintjs2.git",
   "_target": "^1.1.3",
-  "_originalSource": "fingerprintjs2",
-  "_direct": true
+  "_originalSource": "fingerprintjs2"
 }

dashboard-ui/bower_components/fingerprintjs2/fingerprint2.js

@@ -1,5 +1,5 @@
 /*
-* Fingerprintjs2 1.1.3 - Modern & flexible browser fingerprint library v2
+* Fingerprintjs2 1.1.4 - Modern & flexible browser fingerprint library v2
 * https://github.com/Valve/fingerprintjs2
 * Copyright (c) 2015 Valentin Vasilyev (valentin.vasilyev@outlook.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -438,7 +438,9 @@
     pluginsKey: function(keys) {
       if(!this.options.excludePlugins){
         if(this.isIE()){
-          keys.push({key: "ie_plugins", value: this.getIEPlugins()});
+          if(!this.options.excludeIEPlugins) {
+            keys.push({key: "ie_plugins", value: this.getIEPlugins()});
+          }
         } else {
           keys.push({key: "regular_plugins", value: this.getRegularPlugins()});
         }
@@ -1204,6 +1206,6 @@
       return ("00000000" + (h1[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h1[1] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[1] >>> 0).toString(16)).slice(-8);
     }
   };
-  Fingerprint2.VERSION = "1.1.3";
+  Fingerprint2.VERSION = "1.1.4";
   return Fingerprint2;
 });

dashboard-ui/bower_components/fingerprintjs2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fingerprintjs2",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Modern & flexible browser fingerprinting library",
   "main": "dist/fingerprint2.min.js",
   "devDependencies": {

dashboard-ui/bower_components/fingerprintjs2/specs/specs.js

@@ -97,6 +97,16 @@ describe("Fingerprint2", function () {
           done();
         });
       });
+
+      it("does not use IE plugins info when excluded", function (done) {
+        var fp2 = new Fingerprint2({excludeIEPlugins: true});
+        spyOn(fp2, "getIEPlugins");
+        fp2.get(function(result) {
+          expect(fp2.getIEPlugins).not.toHaveBeenCalled();
+          done();
+        });
+      });
+
     });
 
     describe("returns components", function () {

dashboard-ui/bower_components/iron-icon/.bower.json

@@ -32,14 +32,14 @@
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/polymerelements/iron-icon",
+  "homepage": "https://github.com/PolymerElements/iron-icon",
   "_release": "1.0.8",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.8",
     "commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
   },
-  "_source": "git://github.com/polymerelements/iron-icon.git",
+  "_source": "git://github.com/PolymerElements/iron-icon.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-icon"
+  "_originalSource": "PolymerElements/iron-icon"
 }

dashboard-ui/bower_components/polymer/.bower.json

@@ -34,6 +34,6 @@
     "commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
   },
   "_source": "git://github.com/Polymer/polymer.git",
-  "_target": "^1.1.0",
+  "_target": "^1.0.0",
   "_originalSource": "Polymer/polymer"
 }

dashboard-ui/components/ironcardlist/ironcardlist.js

@@ -0,0 +1,32 @@
+define(['iron-list', 'lazyload-image'], function () {
+
+    function getTemplate(scrollTarget) {
+
+        var maxPhysical = 80;
+
+        // is="lazyload-image" 
+
+        return new Promise(function (resolve, reject) {
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', 'components/ironcardlist/ironcardlist.template.html', true);
+
+            xhr.onload = function (e) {
+
+                var html = this.response;
+
+                html = html.replace('${maxphysical}', maxPhysical);
+                html = html.replace('${scrolltarget}', scrollTarget);
+
+                resolve(html);
+            }
+
+            xhr.send();
+        });
+    }
+
+    return {
+        getTemplate: getTemplate
+    };
+
+});

dashboard-ui/components/ironcardlist/ironcardlist.template.html

@@ -0,0 +1,18 @@
+<template is="dom-bind">
+    <iron-list as="item" id="ironList" scroll-target="${scrolltarget}" max-physical-count="${maxphysical}" style="width:96%;" grid>
+        <template>
+            <div class$="{{item.elemClass}}" data-action$="{{item.defaultAction}}" data-itemid$="{{item.data-itemid}}" data-commands$="{{item.data-commands}}" data-context$="{{item.data-context}}" data-isfolder$="{{item.data-isfolder}}" data-itemtype$="{{item.data-itemtype}}" data-mediatype$="{{item.data-mediatype}}" data-positionticks$="{{item.data-positionticks}}" data-playaccess$="{{item.data-playaccess}}" data-locationtype$="{{item.data-locationtype}}" data-index$="{{item.data-index}}" data-albumid$="{{item.data-albumid}}" data-channelid$="{{item.data-channelid}}" data-artistid$="{{item.data-artistid}}">
+                <div class$="{{item.cardBoxClass}}">
+                    <div class="cardScalable">
+                        <div class="cardPadder"></div>
+                        <a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">
+                            <img class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
+                            <div inner-h-t-m-l="{{item.overlayHtml}}"></div>
+                        </a>
+                    </div>
+                    <div inner-h-t-m-l="{{item.footerHtml}}"></div>
+                </div>
+            </div>
+        </template>
+    </iron-list>
+</template>

dashboard-ui/components/scrollthreshold.js

@@ -0,0 +1,95 @@
+define(['events'], function (events) {
+
+    function thresholdMonitor(elem, horizontal, lowerTolerance, upperTolerance) {
+
+        var defaultTolerance = horizontal ? (screen.availWidth / 3) : (screen.availHeight / 3);
+        lowerTolerance = lowerTolerance || defaultTolerance;
+        upperTolerance = upperTolerance || defaultTolerance;
+
+        var self = this;
+        var upperTriggered = true;
+        var lowerTriggered = false;
+        var isWindow = elem == window || elem.tagName == 'HTML' || elem.tagName == 'BODY';
+
+        var scrollSize;
+
+        function getScrollSize() {
+
+            if (!scrollSize) {
+
+                if (isWindow) {
+                    scrollSize = horizontal ? (document.documentElement.scrollWidth - document.documentElement.offsetWidth) : (document.documentElement.scrollHeight - document.documentElement.offsetHeight);
+                } else {
+                    scrollSize = horizontal ? (elem.scrollWidth - elem.offsetWidth) : (elem.scrollHeight - elem.offsetHeight);
+                }
+            }
+            return scrollSize;
+        }
+
+        function onScroll(e) {
+
+            if (lowerTriggered && upperTriggered) {
+                return;
+            }
+
+            var position;
+
+            if (isWindow) {
+                position = horizontal ? window.pageXOffset : window.pageYOffset;
+            } else {
+                position = horizontal ? elem.scrollLeft : elem.scrollTop;
+            }
+
+            //console.log('onscroll: ' + position + '-' + getScrollSize());
+
+            // Detect upper threshold
+            if (position < upperTolerance) {
+                if (!upperTriggered) {
+                    upperTriggered = true;
+                    events.trigger(self, 'upper-threshold');
+                }
+            } else {
+                upperTriggered = false;
+            }
+
+            // Detect lower threshold
+            if (position >= (getScrollSize() - lowerTolerance)) {
+                if (!lowerTriggered) {
+                    lowerTriggered = true;
+                    events.trigger(self, 'lower-threshold');
+                }
+            } else {
+                lowerTriggered = false;
+            }
+        }
+
+        self.reset = function () {
+            self.resetSize();
+            upperTriggered = true;
+            lowerTriggered = false;
+        };
+
+        self.resetSize = function () {
+            scrollSize = null;
+        };
+
+        self.enabled = function (enabled) {
+
+            self.reset();
+
+            if (enabled) {
+                elem.addEventListener('scroll', onScroll, true);
+            } else {
+                elem.removeEventListener('scroll', onScroll, true);
+            }
+        };
+
+        self.enabled(true);
+
+        self.destroy = function () {
+            self.enabled(false);
+        };
+    }
+
+    return thresholdMonitor;
+});

dashboard-ui/components/servertestermessage.js

@@ -1,4 +1,4 @@
-define(['appSettings'], function (appSettings) {
+define(['appSettings', 'paper-button'], function (appSettings) {
 
     function getReleases() {
 

dashboard-ui/css/librarybrowser.css

@@ -62,10 +62,18 @@
     padding-bottom: 0;
 }
 
-.pageWithAbsoluteTabs .pageTabContent, .libraryPage > .ui-content {
+.pageWithAbsoluteTabs .pageTabsContainer, .libraryPage > .ui-content {
     padding-top: 10px;
 }
 
+.absolutePageTabContent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
 /*.pageWithAbsoluteTabs .pageTabContent {
     padding-left: .5em !important;
     padding-right: .5em !important;
@@ -1174,7 +1182,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .alphabetPicker {
     position: fixed;
-    right: 0;
+    right: 5px;
     bottom: 0;
     z-index: 999;
     text-align: center;
@@ -1183,16 +1191,20 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     line-height: 1;
 }
 
-    .alphabetPicker a {
-        display: block;
-        text-decoration: none;
-        padding: 1px 5px 1px 10px;
-        font-weight: 500;
-    }
+.layout-desktop .absolutePageTabContent .alphabetPicker {
+    right: 15px;
+}
 
-        .alphabetPicker a:not(.selectedCharacter) {
-            color: #bbb !important;
-        }
+.alphabetPicker a {
+    display: block;
+    text-decoration: none;
+    padding: 1px 2px 1px 5px;
+    font-weight: 500;
+}
+
+    .alphabetPicker a:not(.selectedCharacter) {
+        color: #bbb !important;
+    }
 
 
 .selectedCharacter {
@@ -1256,6 +1268,17 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemsContainerWithAlphaPicker {
         margin-right: 20px;
     }
+
+    .absolutePageTabContent .itemsContainerWithAlphaPicker {
+        margin-right: 30px;
+    }
+}
+
+@media all and (min-height: 480px) and (max-width: 800px) {
+
+    .absolutePageTabContent .itemsContainerWithAlphaPicker iron-list {
+        width: 99.5% !important;
+    }
 }
 
 @media all and (min-height: 500px) {
@@ -1267,7 +1290,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 @media all and (min-width: 1200px) {
 
-    .itemsContainerWithAlphaPicker {
+    .itemsContainerWithAlphaPicker, .absolutePageTabContent .itemsContainerWithAlphaPicker {
         margin-right: 0;
     }
 }

dashboard-ui/css/librarymenu.css

@@ -10,6 +10,12 @@
     padding-top: 98px !important;
 }
 
+.absolutePageTabContent {
+    margin: 0 !important;
+    width: 100% !important;
+    top: 98px !important;
+}
+
 .sidebarDivider {
     height: 1px;
     background: #eaeaea;

dashboard-ui/css/site.css

@@ -287,7 +287,7 @@ html {
     }
 
 body {
-    overflow-y: scroll !important;
+    overflow-y: auto !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*/
@@ -870,7 +870,7 @@ paper-input + .fieldDescription {
     padding: 1em;
 }
 
-.page > .ui-content, .pageWithAbsoluteTabs .pageTabContent {
+.page > .ui-content, .pageWithAbsoluteTabs .pageTabContent, .absolutePageTabContent .itemsContainer {
     /* Need this so that the audio player doesn't cover content, but also for unveil lazy loading. */
     padding-bottom: 160px;
 }

dashboard-ui/scripts/episodes.js

@@ -1,8 +1,9 @@
-define(['jQuery'], function ($) {
+define(['ironCardList', 'scrollThreshold', 'events', 'libraryBrowser', 'jQuery'], function (ironCardList, scrollThreshold, events, libraryBrowser, $) {
 
     return function (view, params, tabContent) {
 
-        var self = this;
+        var self = this;
+        var pageSize = libraryBrowser.getDefaultPageSize();
 
         var data = {};
 
@@ -23,13 +24,13 @@
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,
-                        Limit: LibraryBrowser.getDefaultPageSize()
+                        Limit: pageSize
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
                 };
 
                 pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -42,164 +43,111 @@
         function getSavedQueryKey(context) {
 
             if (!context.savedQueryKey) {
-                context.savedQueryKey = LibraryBrowser.getSavedQueryKey('episodes');
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('episodes');
             }
             return context.savedQueryKey;
         }
 
+        function setCardOptions(result) {
+
+            var cardOptions;
+
+            var view = self.getCurrentViewStyle();
+
+            if (view == "List") {
+
+                html = libraryBrowser.getListViewHtml({
+                    items: result.Items,
+                    sortBy: query.SortBy
+                });
+            }
+            else if (view == "PosterCard") {
+                cardOptions = {
+                    items: result.Items,
+                    shape: "backdrop",
+                    showTitle: true,
+                    showParentTitle: true,
+                    lazy: true,
+                    cardLayout: true,
+                    showDetailsMenu: true
+                };
+            }
+            else {
+                // poster
+                cardOptions = {
+                    items: result.Items,
+                    shape: "backdrop",
+                    showTitle: true,
+                    showParentTitle: true,
+                    overlayText: true,
+                    lazy: true,
+                    showDetailsMenu: 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) {
 
-                // Scroll back up so they can see the results from the beginning
-                window.scrollTo(0, 0);
-
-                var view = getPageData(page).view;
-
-                var html = '';
-                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
-                    startIndex: query.StartIndex,
-                    limit: query.Limit,
-                    totalRecordCount: result.TotalRecordCount,
-                    showLimit: false,
-                    updatePageSizeSetting: false,
-                    addLayoutButton: true,
-                    sortButton: true,
-                    currentLayout: view,
-                    layouts: 'Poster,PosterCard',
-                    filterButton: true
-                });
-
-                page.querySelector('.listTopPaging').innerHTML = pagingHtml;
-
                 updateFilterControls(page);
 
-                if (view == "List") {
+                var pushItems = true;
+                if (reloadList) {
+                    setCardOptions(result);
+                    pushItems = false;
+                }
+                libraryBrowser.setPosterViewData(self.cardOptions);
+                libraryBrowser.setPosterViewDataOnItems(self.cardOptions, result.Items);
 
-                    html = LibraryBrowser.getListViewHtml({
-                        items: result.Items,
-                        sortBy: query.SortBy
-                    });
-                }
-                else if (view == "Poster") {
-                    html += LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        showTitle: true,
-                        showParentTitle: true,
-                        overlayText: true,
-                        lazy: true,
-                        showDetailsMenu: true,
-                        overlayPlayButton: true
-                    });
-                }
-                else if (view == "PosterCard") {
-                    html += LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        showTitle: true,
-                        showParentTitle: true,
-                        lazy: true,
-                        cardLayout: true,
-                        showDetailsMenu: true
-                    });
+                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;
                 }
 
-                var elem = page.querySelector('.itemsContainer');
-                elem.innerHTML = html + pagingHtml;
-                ImageLoader.lazyChildren(elem);
+                // Hack: notifyResize needs to be done after the items have been rendered
+                setTimeout(function () {
+                    ironList.notifyResize();
+                    self.scrollThreshold.resetSize();
+                }, 300);
 
-                $('.btnNextPage', page).on('click', function () {
-                    query.StartIndex += query.Limit;
-                    reloadItems(page);
-                });
-
-                $('.btnPreviousPage', page).on('click', function () {
-                    query.StartIndex -= query.Limit;
-                    reloadItems(page);
-                });
-
-                $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
-                    getPageData(page).view = layout;
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout);
-                    reloadItems(page);
-                });
-
-                $('.btnFilter', page).on('click', function () {
-                    showFilterMenu(page);
-                });
-
-                // On callback make sure to set StartIndex = 0
-                $('.btnSort', page).on('click', function () {
-                    LibraryBrowser.showSortMenu({
-                        items: [{
-                            name: Globalize.translate('OptionNameSort'),
-                            id: 'SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionTvdbRating'),
-                            id: 'CommunityRating,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDateAdded'),
-                            id: 'DateCreated,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionPremiereDate'),
-                            id: 'PremiereDate,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDatePlayed'),
-                            id: 'DatePlayed,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionParentalRating'),
-                            id: 'OfficialRating,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionPlayCount'),
-                            id: 'PlayCount,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionRuntime'),
-                            id: 'Runtime,SeriesSortName,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionVideoBitrate'),
-                            id: 'VideoBitRate,SeriesSortName,SortName'
-                        }],
-                        callback: function () {
-                            reloadItems(page);
-                        },
-                        query: query
-                    });
-                });
-
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
 
                 Dashboard.hideLoadingMsg();
+                self.hasMoreItems = result.TotalRecordCount > (startIndex + result.Items.length);
+                self.isLoading = false;
             });
         }
 
-        function showFilterMenu(page) {
-
+        self.showFilterMenu = function () {
             require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
 
                 var filterDialog = new filterDialogFactory({
-                    query: getQuery(page),
+                    query: getQuery(tabContent),
                     mode: 'episodes'
                 });
 
                 Events.on(filterDialog, 'filterchange', function () {
-                    reloadItems(page);
+                    reloadItems(tabContent);
                 });
 
                 filterDialog.show();
             });
-        }
+        };
 
         function updateFilterControls(tabContent) {
 
@@ -230,13 +178,113 @@
 
                 reloadItems(tabContent);
             });
+
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
+            });
+
+            tabContent.querySelector('.btnSort').addEventListener('click', function () {
+                libraryBrowser.showSortMenu({
+                    items: [{
+                        name: Globalize.translate('OptionNameSort'),
+                        id: 'SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionTvdbRating'),
+                        id: 'CommunityRating,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionDateAdded'),
+                        id: 'DateCreated,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionPremiereDate'),
+                        id: 'PremiereDate,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionDatePlayed'),
+                        id: 'DatePlayed,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionParentalRating'),
+                        id: 'OfficialRating,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionPlayCount'),
+                        id: 'PlayCount,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionRuntime'),
+                        id: 'Runtime,SeriesSortName,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionVideoBitrate'),
+                        id: 'VideoBitRate,SeriesSortName,SortName'
+                    }],
+                    callback: function () {
+                        reloadItems(tabContent);
+                    },
+                    query: getQuery(tabContent)
+                });
+            });
+
+            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+
+                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
+            });
+
+            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+
+                var viewStyle = e.detail.viewStyle;
+                getPageData(tabContent).view = viewStyle;
+                libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+                reloadItems(tabContent);
+            });
         }
 
-        initPage(tabContent);
-
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
 
-
-            reloadItems(tabContent);
+        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/scripts/itemdetailpage.js

@@ -45,7 +45,6 @@
         getPromise().then(function (item) {
 
             reloadFromItem(page, item);
-            window.scrollTo(0, 0);
         });
     }
 

dashboard-ui/scripts/librarybrowser.js

@@ -173,6 +173,7 @@
 
             enableFullPaperTabs: function () {
 
+                return true;
                 if (browserInfo.animate && !browserInfo.mobile) {
                     //return true;
                 }
@@ -1489,49 +1490,94 @@
                 return outerHtml;
             },
 
-            getItemDataAttributes: function (item, options, index) {
+            getItemDataAttributesList: function (item, options, index) {
 
                 var atts = [];
 
                 var itemCommands = LibraryBrowser.getItemCommands(item, options);
 
-                atts.push('data-itemid="' + item.Id + '"');
-                atts.push('data-commands="' + itemCommands.join(',') + '"');
+                atts.push({
+                    name: 'itemid',
+                    value: item.Id
+                });
+                atts.push({
+                    name: 'commands',
+                    value: itemCommands.join(',')
+                });
 
                 if (options.context) {
-                    atts.push('data-context="' + (options.context || '') + '"');
+                    atts.push({
+                        name: 'context',
+                        value: options.context || ''
+                    });
                 }
 
                 if (item.IsFolder) {
-                    atts.push('data-isfolder="' + item.IsFolder + '"');
+                    atts.push({
+                        name: 'isfolder',
+                        value: item.IsFolder
+                    });
                 }
 
-                atts.push('data-itemtype="' + item.Type + '"');
+                atts.push({
+                    name: 'itemtype',
+                    value: item.Type
+                });
 
                 if (item.MediaType) {
-                    atts.push('data-mediatype="' + (item.MediaType || '') + '"');
+                    atts.push({
+                        name: 'mediatype',
+                        value: item.MediaType || ''
+                    });
                 }
 
                 if (item.UserData.PlaybackPositionTicks) {
-                    atts.push('data-positionticks="' + (item.UserData.PlaybackPositionTicks || 0) + '"');
+                    atts.push({
+                        name: 'positionticks',
+                        value: (item.UserData.PlaybackPositionTicks || 0)
+                    });
                 }
 
-                atts.push('data-playaccess="' + (item.PlayAccess || '') + '"');
-                atts.push('data-locationtype="' + (item.LocationType || '') + '"');
-                atts.push('data-index="' + index + '"');
+                atts.push({
+                    name: 'playaccess',
+                    value: item.PlayAccess || ''
+                });
+
+                atts.push({
+                    name: 'locationtype',
+                    value: item.LocationType || ''
+                });
 
                 if (item.AlbumId) {
-                    atts.push('data-albumid="' + item.AlbumId + '"');
+                    atts.push({
+                        name: 'albumid',
+                        value: item.AlbumId
+                    });
                 }
 
                 if (item.ChannelId) {
-                    atts.push('data-channelid="' + item.ChannelId + '"');
+                    atts.push({
+                        name: 'channelid',
+                        value: item.ChannelId
+                    });
                 }
 
                 if (item.ArtistItems && item.ArtistItems.length) {
-                    atts.push('data-artistid="' + item.ArtistItems[0].Id + '"');
+                    atts.push({
+                        name: 'artistid',
+                        value: item.ArtistItems[0].Id
+                    });
                 }
 
+                return atts;
+            },
+
+            getItemDataAttributes: function (item, options, index) {
+
+                var atts = LibraryBrowser.getItemDataAttributesList(item, options, index).map(function (i) {
+                    return 'data-' + i.name + '="' + i.value + '"';
+                });
+
                 var html = atts.join(' ');
 
                 if (html) {
@@ -1754,15 +1800,12 @@
                 return result;
             },
 
-            getPosterViewHtml: function (options) {
+            setPosterViewData: function (options) {
 
                 var items = options.items;
-                var currentIndexValue;
 
                 options.shape = options.shape || "portrait";
 
-                var html = "";
-
                 var primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio(items);
                 var isThumbAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < .3;
                 var isSquareAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < .33 ||
@@ -1827,8 +1870,446 @@
                     thumbWidth = 320;
                 }
 
+                options.uiAspect = getDesiredAspect(options.shape);
+                options.primaryImageAspectRatio = primaryImageAspectRatio;
+                options.posterWidth = posterWidth;
+                options.thumbWidth = thumbWidth;
+                options.bannerWidth = bannerWidth;
+                options.squareSize = squareSize;
+            },
+
+            setPosterViewDataOnItems: function (options, items) {
+
+                LibraryBrowser.setPosterViewData(options);
+
+                options.shape = options.shape || "portrait";
+
+                var html = "";
+
+                var primaryImageAspectRatio;
+                var thumbWidth = options.thumbWidth;
+                var posterWidth = options.posterWidth;
+                var squareSize = options.squareSize;
+                var bannerWidth = options.bannerWidth;
+
+                var uiAspect = options.uiAspect;
+
+                for (var i = 0, length = items.length; i < length; i++) {
+
+                    var item = items[i];
+
+                    primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio([item]);
+
+                    LibraryBrowser.setPosterViewDataOnItem(item, i, options, primaryImageAspectRatio, thumbWidth, posterWidth, squareSize, bannerWidth, uiAspect);
+                }
+
+                return html;
+            },
+
+            setPosterViewDataOnItem: function (item, index, options, primaryImageAspectRatio, thumbWidth, posterWidth, squareSize, bannerWidth, uiAspect) {
+
+                var imgUrl = null;
+                var icon;
+                var width = null;
+                var height = null;
+
+                var forceName = false;
+
+                var enableImageEnhancers = options.enableImageEnhancers !== false;
+
+                var cssClass = "card";
+
+                if (options.fullWidthOnMobile) {
+                    cssClass += " fullWidthCardOnMobile";
+                }
+
+                var showTitle = options.showTitle == 'auto' ? true : options.showTitle;
+                var coverImage = options.coverImage;
+
+                if (options.autoThumb && item.ImageTags && item.ImageTags.Primary && item.PrimaryImageAspectRatio && item.PrimaryImageAspectRatio >= 1.34) {
+
+                    width = posterWidth;
+                    height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
+                        type: "Primary",
+                        maxHeight: height,
+                        maxWidth: width,
+                        tag: item.ImageTags.Primary,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                    if (primaryImageAspectRatio) {
+                        if (uiAspect) {
+                            if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
+                                coverImage = true;
+                            }
+                        }
+                    }
+
+                } else if (options.autoThumb && item.ImageTags && item.ImageTags.Thumb) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        tag: item.ImageTags.Thumb,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Backdrop",
+                        maxWidth: thumbWidth,
+                        tag: item.BackdropImageTags[0],
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        tag: item.ImageTags.Thumb,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (options.preferBanner && item.ImageTags && item.ImageTags.Banner) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Banner",
+                        maxWidth: bannerWidth,
+                        tag: item.ImageTags.Banner,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (options.preferThumb && item.SeriesThumbImageTag && options.inheritThumb !== false) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        tag: item.SeriesThumbImageTag,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false) {
+
+                    imgUrl = ApiClient.getThumbImageUrl(item.ParentThumbItemId, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (options.preferThumb && item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Backdrop",
+                        maxWidth: thumbWidth,
+                        tag: item.BackdropImageTags[0],
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                    forceName = true;
+
+                } else if (item.ImageTags && item.ImageTags.Primary) {
+
+                    width = posterWidth;
+                    height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
+                        type: "Primary",
+                        maxHeight: height,
+                        maxWidth: width,
+                        tag: item.ImageTags.Primary,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                    if (primaryImageAspectRatio) {
+                        if (uiAspect) {
+                            if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
+                                coverImage = true;
+                            }
+                        }
+                    }
+                }
+                else if (item.ParentPrimaryImageTag) {
+
+                    imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
+                        type: "Primary",
+                        maxWidth: posterWidth,
+                        tag: item.ParentPrimaryImageTag,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+                }
+                else if (item.AlbumId && item.AlbumPrimaryImageTag) {
+
+                    height = squareSize;
+                    width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.AlbumId, {
+                        type: "Primary",
+                        maxHeight: height,
+                        maxWidth: width,
+                        tag: item.AlbumPrimaryImageTag,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                    if (primaryImageAspectRatio) {
+                        if (uiAspect) {
+                            if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
+                                coverImage = true;
+                            }
+                        }
+                    }
+                }
+                else if (item.Type == 'Season' && item.ImageTags && item.ImageTags.Thumb) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        tag: item.ImageTags.Thumb,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                }
+                else if (item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Backdrop",
+                        maxWidth: thumbWidth,
+                        tag: item.BackdropImageTags[0],
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (item.ImageTags && item.ImageTags.Thumb) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        tag: item.ImageTags.Thumb,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (item.SeriesThumbImageTag) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        tag: item.SeriesThumbImageTag,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (item.ParentThumbItemId) {
+
+                    imgUrl = ApiClient.getThumbImageUrl(item, {
+                        type: "Thumb",
+                        maxWidth: thumbWidth,
+                        enableImageEnhancers: enableImageEnhancers
+                    });
+
+                } else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
+
+                    if (item.Name && showTitle) {
+                        icon = 'library-music';
+                    }
+                    cssClass += " defaultBackground";
+
+                } else if (item.Type == "Recording" || item.Type == "Program" || item.Type == "TvChannel") {
+
+                    if (item.Name && showTitle) {
+                        icon = 'folder-open';
+                    }
+
+                    cssClass += " defaultBackground";
+                } else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
+
+                    if (item.Name && showTitle) {
+                        icon = 'videocam';
+                    }
+                    cssClass += " defaultBackground";
+                } else if (item.Type == "Person") {
+
+                    if (item.Name && showTitle) {
+                        icon = 'person';
+                    }
+                    cssClass += " defaultBackground";
+                } else {
+                    if (item.Name && showTitle) {
+                        icon = 'folder-open';
+                    }
+                    cssClass += " defaultBackground";
+                }
+
+                icon = item.icon || icon;
+                cssClass += ' ' + options.shape + 'Card';
+
+                var mediaSourceCount = item.MediaSourceCount || 1;
+
+                var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
+
+                if (options.showChildCountIndicator && item.ChildCount && options.showLatestItemsPopup !== false) {
+                    cssClass += ' groupedCard';
+                }
+
+                if ((showTitle || options.showItemCounts) && !options.overlayText) {
+                    cssClass += ' bottomPaddedCard';
+                }
+
+                var dataAttributes = LibraryBrowser.getItemDataAttributesList(item, options, index);
+
+                for (var i = 0, length = dataAttributes.length; i < length; i++) {
+                    var att = dataAttributes[i];
+                    if (att.value) {
+                        item['data-' + att.name] = att.value;
+                    }
+                }
+                console.log(item['data-commands']);
+
+                var defaultAction = options.defaultAction;
+                if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
+                    if (item.PlayAccess != 'Full') {
+                        defaultAction = null;
+                    }
+                }
+
+                // card
+                //html += '<div' + dataAttributes + ' class="' + cssClass + '">';
+                item.elemClass = cssClass;
+                item.defaultAction = defaultAction;
+
+                var style = "";
+
+                if (imgUrl && !options.lazy) {
+                    style += 'background-image:url(\'' + imgUrl + '\');';
+                }
+
+                var imageCssClass = 'cardImage';
+
+                if (icon) {
+                    imageCssClass += " iconCardImage";
+                }
+
+                if (coverImage) {
+                    imageCssClass += " coveredCardImage";
+                    if (item.MediaType == 'Photo' || item.Type == 'PhotoAlbum' || item.Type == 'Folder' || item.Type == 'Program' || item.Type == 'Recording') {
+                        imageCssClass += " noScale";
+                    }
+                }
+                if (options.centerImage) {
+                    imageCssClass += " centeredCardImage";
+                }
+
+                var dataSrc = "";
+
+                if (options.lazy && imgUrl) {
+                    imageCssClass += " lazy";
+                    dataSrc = ' data-src="' + imgUrl + '"';
+                }
+
+                var cardboxCssClass = 'cardBox';
+
+                if (options.cardLayout) {
+                    cardboxCssClass += ' visualCardBox';
+                }
+
+                item.cardBoxClass = cardboxCssClass;
+
+                var anchorCssClass = "cardContent";
+
+                anchorCssClass += ' mediaItem';
+
+                if (defaultAction) {
+                    anchorCssClass += ' itemWithAction';
+                }
+
+                item.anchorClass = anchorCssClass;
+                item.href = href;
+                item.imgUrl = imgUrl;
+                item.imageClass = imageCssClass;
+
+                if (imgUrl) {
+                    item.imageStyle = 'background-image:url("' + imgUrl + '");';
+                } else {
+                    item.imageStyle = null;
+                }
+
+                var overlayHtml = '';
+
+                if (item.LocationType == "Virtual" || item.LocationType == "Offline") {
+                    if (options.showLocationTypeIndicator !== false) {
+                        overlayHtml += LibraryBrowser.getOfflineIndicatorHtml(item);
+                    }
+                } else if (options.showUnplayedIndicator !== false) {
+                    overlayHtml += LibraryBrowser.getPlayedIndicatorHtml(item);
+                } else if (options.showChildCountIndicator) {
+                    overlayHtml += LibraryBrowser.getGroupCountIndicator(item);
+                }
+
+                overlayHtml += LibraryBrowser.getSyncIndicator(item);
+
+                if (mediaSourceCount > 1) {
+                    overlayHtml += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
+                }
+
+                var progressHtml = options.showProgress === false || item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
+
+                var footerOverlayed = false;
+
+                if (options.overlayText || (forceName && !showTitle)) {
+
+                    var footerCssClass = progressHtml ? 'cardFooter fullCardFooter' : 'cardFooter';
+
+                    overlayHtml += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, footerCssClass, progressHtml);
+                    footerOverlayed = true;
+                }
+                else if (progressHtml) {
+                    overlayHtml += '<div class="cardFooter fullCardFooter lightCardFooter">';
+                    overlayHtml += "<div class='cardProgress cardText'>";
+                    overlayHtml += progressHtml;
+                    overlayHtml += "</div>";
+                    //cardFooter
+                    overlayHtml += "</div>";
+
+                    progressHtml = '';
+                }
+
+                if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person') {
+                    overlayHtml += '<div class="cardOverlayButtonContainer"><paper-icon-button icon="play-arrow" class="cardOverlayPlayButton" onclick="return false;"></paper-icon-button></div>';
+                }
+                if (options.overlayMoreButton) {
+                    overlayHtml += '<div class="cardOverlayButtonContainer"><paper-icon-button icon="' + AppInfo.moreIcon + '" class="cardOverlayMoreButton" onclick="return false;"></paper-icon-button></div>';
+                }
+
+                //// cardScalable
+
+                if (!options.overlayText && !footerOverlayed) {
+                    item.footerHtml = LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, 'cardFooter outerCardFooter', progressHtml);
+                } else {
+                    item.footerHtml = '';
+                }
+
+                item.overlayHtml = overlayHtml;
+            },
+
+            getPosterViewHtml: function (options) {
+
+                LibraryBrowser.setPosterViewData(options);
+
+                var items = options.items;
+                var currentIndexValue;
+
+                options.shape = options.shape || "portrait";
+
+                var html = "";
+
+                var primaryImageAspectRatio;
+                var thumbWidth = options.thumbWidth;
+                var posterWidth = options.posterWidth;
+                var squareSize = options.squareSize;
+                var bannerWidth = options.bannerWidth;
+
                 var dateText;
-                var uiAspect = getDesiredAspect(options.shape);
+                var uiAspect = options.uiAspect;
 
                 for (var i = 0, length = items.length; i < length; i++) {
 
@@ -2765,23 +3246,24 @@
                 }
             },
 
-            getDefaultPageSizeSelections: function () {
+            showLayoutMenu: function (button, currentLayout, views) {
 
-                return [20, 50, 100, 200, 300, 400, 500];
-            },
+                var dispatchEvent = true;
 
-            showLayoutMenu: function (button, currentLayout) {
+                if (!views) {
 
-                // Add banner and list once all screens support them
-                var views = button.getAttribute('data-layouts');
+                    dispatchEvent = false;
+                    // Add banner and list once all screens support them
+                    views = button.getAttribute('data-layouts');
 
-                views = views ? views.split(',') : ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
+                    views = views ? views.split(',') : ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
+                }
 
                 var menuItems = views.map(function (v) {
                     return {
                         name: Globalize.translate('Option' + v),
                         id: v,
-                        ironIcon: currentLayout == v ? 'check' : null
+                        selected: currentLayout == v
                     };
                 });
 
@@ -2792,10 +3274,20 @@
                         positionTo: button,
                         callback: function (id) {
 
-                            // TODO: remove jQuery
-                            require(['jQuery'], function ($) {
-                                $(button).trigger('layoutchange', [id]);
-                            });
+                            if (dispatchEvent) {
+                                button.dispatchEvent(new CustomEvent('layoutchange', {
+                                    detail: {
+                                        viewStyle: id
+                                    },
+                                    bubbles: true,
+                                    cancelable: false
+                                }));
+                            } else {
+                                // TODO: remove jQuery
+                                require(['jQuery'], function ($) {
+                                    $(button).trigger('layoutchange', [id]);
+                                });
+                            }
                         }
                     });
 
@@ -2866,7 +3358,7 @@
 
                         var id = "selectPageSize";
 
-                        var pageSizes = options.pageSizes || LibraryBrowser.getDefaultPageSizeSelections();
+                        var pageSizes = options.pageSizes || [20, 50, 100, 200, 300, 400, 500];
 
                         var optionsHtml = pageSizes.map(function (val) {
 

dashboard-ui/scripts/librarymenu.js

@@ -1,4 +1,4 @@
-define(['imageLoader', 'layoutManager', 'jQuery', 'paper-icon-button', 'emby-icons'], function (imageLoader, layoutManager, $) {
+define(['imageLoader', 'layoutManager', 'jQuery'], function (imageLoader, layoutManager, $) {
 
     var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
 
@@ -87,7 +87,7 @@
                 var url = user.imageUrl;
 
                 if (user.supportsImageParams) {
-                    url += "&height=" + (userButtonHeight * Math.max(window.devicePixelRatio || 1, 2));
+                    url += "&height=" + Math.round((userButtonHeight * Math.max(window.devicePixelRatio || 1, 2)));
                 }
 
                 if (headerUserButton) {
@@ -993,7 +993,7 @@
 
         if (!e.detail.isRestored) {
             // Scroll back up so in case vertical scroll was messed with
-            window.scrollTo(0, 0);
+            //window.scrollTo(0, 0);
         }
 
         updateTitle(page);
@@ -1126,8 +1126,19 @@
     }
 
     mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
+    var headerCreated;
+    var userRequiresUpdateAfterHeader;
 
-    renderHeader();
+    require(['paper-icon-button', 'emby-icons'], function () {
+        renderHeader();
+        headerCreated = true;
+
+        var user = userRequiresUpdateAfterHeader;
+        if (user) {
+            updateUserInHeader(user);
+        }
+        userRequiresUpdateAfterHeader = null;
+    });
 
     Events.on(ConnectionManager, 'apiclientcreated', function (e, apiClient) {
         initializeApiClient(apiClient);
@@ -1138,7 +1149,12 @@
         var apiClient = ConnectionManager.getApiClient(user.ServerId);
         ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(function (user) {
             refreshLibraryDrawer(user);
-            updateUserInHeader(user);
+
+            if (headerCreated) {
+                updateUserInHeader(user);
+            } else {
+                userRequiresUpdateAfterHeader = user;
+            }
         });
 
         if (!AppInfo.isNativeApp) {

dashboard-ui/scripts/site.js

@@ -1606,6 +1606,8 @@ var AppInfo = {};
         var paths = {
             velocity: bowerPath + "/velocity/velocity.min",
             tvguide: 'components/tvguide/tvguide',
+            ironCardList: 'components/ironcardlist/ironcardlist',
+            scrollThreshold: 'components/scrollthreshold',
             directorybrowser: 'components/directorybrowser/directorybrowser',
             collectioneditor: 'components/collectioneditor/collectioneditor',
             playlisteditor: 'components/playlisteditor/playlisteditor',
@@ -1714,6 +1716,7 @@ var AppInfo = {};
         // Done
         define("emby-icons", ["html!" + bowerPath + "/emby-icons/emby-icons.html"]);
 
+        define("lazyload-image", ["html!" + bowerPath + "/emby-lazyload-image/lazyload-image.html"]);
         define("paper-spinner", ["html!" + bowerPath + "/paper-spinner/paper-spinner.html"]);
         define("paper-toast", ["html!" + bowerPath + "/paper-toast/paper-toast.html"]);
         define("paper-slider", ["html!" + bowerPath + "/paper-slider/paper-slider.html"]);
@@ -2732,7 +2735,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/tv.html',
-            dependencies: ['paper-tabs', 'paper-checkbox'],
+            dependencies: ['paper-tabs', 'paper-checkbox', 'paper-button'],
             autoFocus: false,
             controller: 'scripts/tvrecommended'
         });

dashboard-ui/scripts/tvgenres.js

@@ -17,8 +17,7 @@
                         IncludeItemTypes: "Series",
                         Recursive: true,
                         Fields: "DateCreated,SyncInfo,ItemCounts",
-                        StartIndex: 0,
-                        Limit: LibraryBrowser.getDefaultPageSize()
+                        StartIndex: 0
                     },
                     view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
                 };
@@ -46,23 +45,9 @@
 
             ApiClient.getGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
 
-                // Scroll back up so they can see the results from the beginning
-                window.scrollTo(0, 0);
-
                 var html = '';
 
-                var viewStyle = getPageData().view;
-
-                $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
-                    startIndex: query.StartIndex,
-                    limit: query.Limit,
-                    totalRecordCount: result.TotalRecordCount,
-                    viewButton: false,
-                    showLimit: false,
-                    updatePageSizeSetting: false,
-                    addLayoutButton: true,
-                    currentLayout: viewStyle
-                }));
+                var viewStyle = self.getCurrentViewStyle();
 
                 if (viewStyle == "Thumb") {
                     html = LibraryBrowser.getPosterViewHtml({
@@ -116,30 +101,40 @@
                 elem.innerHTML = html;
                 ImageLoader.lazyChildren(elem);
 
-                $('.btnNextPage', context).on('click', function () {
-                    query.StartIndex += query.Limit;
-                    reloadItems(context);
-                });
-
-                $('.btnPreviousPage', context).on('click', function () {
-                    query.StartIndex -= query.Limit;
-                    reloadItems(context);
-                });
-
-                $('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
-                    getPageData().view = layout;
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                    reloadItems(context);
-                });
-
                 LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
                 Dashboard.hideLoadingMsg();
             });
         }
-
+
+        self.getViewStyles = function () {
+            return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
+        };
+
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
+
+        self.setCurrentViewStyle = function(viewStyle) {
+            getPageData(tabContent).view = viewStyle;
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            reloadItems(tabContent);
+        };
+
+        self.enableViewSelection = true;
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
+        };
+
+        tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+
+            LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
+        });
+
+        tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+
+            self.setCurrentViewStyle(e.detail.viewStyle);
         });
     };

dashboard-ui/scripts/tvrecommended.js

@@ -294,5 +294,14 @@
 
             Events.off(MediaController, 'playbackstop', onPlaybackStop);
         });
+
+        view.addEventListener('viewdestroy', function (e) {
+
+            tabControllers.forEach(function (t) {
+                if (t.destroy) {
+                    t.destroy();
+                }
+            });
+        });
     };
 });

dashboard-ui/scripts/tvshows.js

@@ -1,8 +1,9 @@
-define(['jQuery'], function ($) {
+define(['ironCardList', 'scrollThreshold', 'events', 'libraryBrowser', 'jQuery'], function (ironCardList, scrollThreshold, events, libraryBrowser, $) {
 
     return function (view, params, tabContent) {
 
-        var self = this;
+        var self = this;
+        var pageSize = libraryBrowser.getDefaultPageSize();
 
         var data = {};
 
@@ -21,13 +22,13 @@
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,
-                        Limit: LibraryBrowser.getDefaultPageSize()
+                        Limit: pageSize
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Thumb')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
                 };
 
                 pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -40,192 +41,143 @@
         function getSavedQueryKey(context) {
 
             if (!context.savedQueryKey) {
-                context.savedQueryKey = LibraryBrowser.getSavedQueryKey('series');
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('series');
             }
             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) {
 
-                // Scroll back up so they can see the results from the beginning
-                window.scrollTo(0, 0);
-
-                var view = getPageData(page).view;
-
-                var html = '';
-                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
-                    startIndex: query.StartIndex,
-                    limit: query.Limit,
-                    totalRecordCount: result.TotalRecordCount,
-                    showLimit: false,
-                    updatePageSizeSetting: false,
-                    addLayoutButton: true,
-                    sortButton: true,
-                    currentLayout: view,
-                    layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard',
-                    filterButton: true
-                });
-
-                page.querySelector('.listTopPaging').innerHTML = pagingHtml;
-
                 updateFilterControls(page);
 
-                if (view == "Thumb") {
-
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        preferThumb: true,
-                        context: 'tv',
-                        lazy: true,
-                        overlayPlayButton: true
-                    });
-
+                var pushItems = true;
+                if (reloadList) {
+                    setCardOptions(result);
+                    pushItems = false;
                 }
-                else if (view == "ThumbCard") {
+                libraryBrowser.setPosterViewData(self.cardOptions);
+                libraryBrowser.setPosterViewDataOnItems(self.cardOptions, result.Items);
 
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "backdrop",
-                        preferThumb: true,
-                        context: 'tv',
-                        lazy: true,
-                        cardLayout: true,
-                        showTitle: true,
-                        showSeriesYear: true
-                    });
-                }
-                else if (view == "Banner") {
-
-                    html = LibraryBrowser.getPosterViewHtml({
-                        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") {
-                    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
-                    });
+                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;
                 }
 
-                var elem = page.querySelector('#items');
-                elem.innerHTML = html + pagingHtml;
-                ImageLoader.lazyChildren(elem);
+                // Hack: notifyResize needs to be done after the items have been rendered
+                setTimeout(function () {
 
-                $('.btnNextPage', page).on('click', function () {
-                    query.StartIndex += query.Limit;
-                    reloadItems(page);
-                });
+                    ironList.notifyResize();
+                    self.scrollThreshold.resetSize();
+                }, 300);
 
-                $('.btnPreviousPage', page).on('click', function () {
-                    query.StartIndex -= query.Limit;
-                    reloadItems(page);
-                });
-
-                $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
-                    getPageData(page).view = layout;
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout);
-                    reloadItems(page);
-                });
-
-                $('.btnFilter', page).on('click', function () {
-                    showFilterMenu(page);
-                });
-
-                // On callback make sure to set StartIndex = 0
-                $('.btnSort', page).on('click', function () {
-                    LibraryBrowser.showSortMenu({
-                        items: [{
-                            name: Globalize.translate('OptionNameSort'),
-                            id: 'SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionImdbRating'),
-                            id: 'CommunityRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDateAdded'),
-                            id: 'DateCreated,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionDatePlayed'),
-                            id: 'DatePlayed,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionMetascore'),
-                            id: 'Metascore,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionParentalRating'),
-                            id: 'OfficialRating,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionPlayCount'),
-                            id: 'PlayCount,SortName'
-                        },
-                        {
-                            name: Globalize.translate('OptionReleaseDate'),
-                            id: 'PremiereDate,SortName'
-                        }],
-                        callback: function () {
-                            reloadItems(page);
-                        },
-                        query: query
-                    });
-                });
-
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
 
                 Dashboard.hideLoadingMsg();
+                self.hasMoreItems = result.TotalRecordCount > (startIndex + result.Items.length);
+                self.isLoading = false;
             });
         }
 
-        function showFilterMenu(page) {
+        self.showFilterMenu = function () {
 
             require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
 
                 var filterDialog = new filterDialogFactory({
-                    query: getQuery(page),
+                    query: getQuery(tabContent),
                     mode: 'series'
                 });
 
                 Events.on(filterDialog, 'filterchange', function () {
-                    reloadItems(page);
+                    getQuery(tabContent).StartIndex = 0;
+                    reloadItems(tabContent);
                 });
 
                 filterDialog.show();
@@ -252,16 +204,117 @@
 
                 var query = getQuery(tabContent);
                 query.NameStartsWithOrGreater = '';
+                getQuery(tabContent).StartIndex = 0;
 
                 reloadItems(tabContent);
             });
+
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
+            });
+
+            tabContent.querySelector('.btnSort').addEventListener('click', function () {
+                libraryBrowser.showSortMenu({
+                    items: [{
+                        name: Globalize.translate('OptionNameSort'),
+                        id: 'SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionImdbRating'),
+                        id: 'CommunityRating,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionDateAdded'),
+                        id: 'DateCreated,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionDatePlayed'),
+                        id: 'DatePlayed,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionMetascore'),
+                        id: 'Metascore,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionParentalRating'),
+                        id: 'OfficialRating,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionPlayCount'),
+                        id: 'PlayCount,SortName'
+                    },
+                    {
+                        name: Globalize.translate('OptionReleaseDate'),
+                        id: 'PremiereDate,SortName'
+                    }],
+                    callback: function () {
+                        getQuery(tabContent).StartIndex = 0;
+                        reloadItems(tabContent);
+                    },
+                    query: getQuery(tabContent)
+                });
+            });
+
+            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+
+                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
+            });
+
+            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+
+                var viewStyle = e.detail.viewStyle;
+
+                getPageData(tabContent).view = viewStyle;
+                libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+                getQuery(tabContent).StartIndex = 0;
+                reloadItems(tabContent);
+            });
         }
 
-        initPage(tabContent);
-
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
 
-
-            reloadItems(tabContent);
+        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;
+            });
+        }
+
+        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/scripts/tvstudios.js

@@ -16,8 +16,7 @@
                     IncludeItemTypes: "Series",
                     Recursive: true,
                     Fields: "DateCreated,ItemCounts",
-                    StartIndex: 0,
-                    Limit: LibraryBrowser.getDefaultPageSize()
+                    StartIndex: 0
                 }
             };
 
@@ -40,18 +39,8 @@
 
         ApiClient.getStudios(Dashboard.getCurrentUserId(), query).then(function (result) {
 
-            // Scroll back up so they can see the results from the beginning
-            window.scrollTo(0, 0);
-
             var html = '';
 
-            $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                showLimit: false
-            }));
-
             html += LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: "backdrop",
@@ -68,16 +57,6 @@
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', context).on('click', function () {
-                query.StartIndex += query.Limit;
-                reloadItems(context, params);
-            });
-
-            $('.btnPreviousPage', context).on('click', function () {
-                query.StartIndex -= query.Limit;
-                reloadItems(context, params);
-            });
-
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
             Dashboard.hideLoadingMsg();
         });

dashboard-ui/tv.html

@@ -22,6 +22,7 @@
     </div>
 
     <div class="ehsContent fullWidth pageTabsContainer">
+
         <div class="pageTabContent hide" data-index="0">
             <div id="resumableSection" class="homePageSection">
                 <div>
@@ -63,26 +64,32 @@
                 </p>
             </div>
         </div>
-        <div class="pageTabContent hide" data-index="3">
+        <div id="seriesTab" class="pageTabContent absolutePageTabContent hide smoothScrollY" data-index="3">
+
+            <div style="text-align: center;padding:.7em 0;">
+                <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="alphabetPicker">
             </div>
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
+
+            <div class="itemsContainer" style="margin-left:-10px;">
             </div>
-            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
         </div>
-        <div class="pageTabContent hide" data-index="4">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
+        <div id="episodesTab" class="pageTabContent absolutePageTabContent hide smoothScrollY" data-index="4">
+            <div style="text-align: center;padding:.7em 0;">
+                <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 id="items" class="itemsContainer paddedItemsContainer"></div>
         </div>
         <div class="pageTabContent hide" data-index="5">
-            <div class="viewSettings">
-                <div class="listTopPaging">
-                </div>
+            <div style="text-align: center;">
+                <paper-icon-button class="btnSelectView" icon="view-comfy" title="${ButtonSelectView}"></paper-icon-button>
             </div>
             <div id="items" class="itemsContainer paddedItemsContainer"></div>
         </div>