Merge pull request #1683 from MediaBrowser/dev

Dev

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/bower_components/emby-webcomponents/.bower.json

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

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

@@ -127,6 +127,10 @@
     transition: opacity ease-out 0.2s;
 }
 
+.mouseIdle .dialog::backdrop {
+    cursor: none !important;
+}
+
 .dialog.opened::backdrop {
     opacity: .6;
 }

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/iron-selector/.bower.json

@@ -36,7 +36,7 @@
     "tag": "v1.4.0",
     "commit": "554f7418fdbd97688eb21518b5f8172167d53a95"
   },
-  "_source": "git://github.com/PolymerElements/iron-selector.git",
+  "_source": "git://github.com/polymerelements/iron-selector.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-selector"
+  "_originalSource": "polymerelements/iron-selector"
 }

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,88 +48,81 @@
             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) {
 
-                updateFilterControls(page);
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    showLimit: false,
+                    updatePageSizeSetting: false,
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
+                });
 
-                var pushItems = true;
+                var viewStyle = self.getCurrentViewStyle();
-                if (reloadList) {
+
-                    setCardOptions(result);
+                var html;
-                    pushItems = false;
+
+                if (viewStyle == "List") {
+
+                    html = libraryBrowser.getListViewHtml({
+                        items: result.Items,
+                        sortBy: query.SortBy
+                    });
                 }
-                libraryBrowser.setPosterViewData(self.cardOptions);
+                else if (viewStyle == "PosterCard") {
-                libraryBrowser.setPosterViewDataOnItems(self.cardOptions, result.Items);
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        showTitle: true,
+                        showParentTitle: true,
+                        lazy: true,
+                        cardLayout: true,
+                        showDetailsMenu: true
+                    });
+                }
+                else {
 
-                var ironList = page.querySelector('#ironList');
+                    // poster
-                if (pushItems) {
+                    html = libraryBrowser.getPosterViewHtml({
-                    for (var i = 0, length = result.Items.length; i < length; i++) {
+                        items: result.Items,
-                        ironList.push('items', result.Items[i]);
+                        shape: "backdrop",
-                    }
+                        showTitle: true,
-                } else {
+                        showParentTitle: true,
-                    ironList.items = result.Items;
+                        overlayText: true,
+                        lazy: true,
+                        showDetailsMenu: true,
+                        overlayPlayButton: true
+                    });
                 }
 
-                // Hack: notifyResize needs to be done after the items have been rendered
+                $('.paging', tabContent).html(pagingHtml);
-                setTimeout(function () {
+
-                    ironList.notifyResize();
+                $('.btnNextPage', tabContent).on('click', function () {
-                    self.scrollThreshold.resetSize();
+                    query.StartIndex += query.Limit;
-                }, 300);
+                    reloadItems(tabContent);
+                });
+
+                $('.btnPreviousPage', tabContent).on('click', function () {
+                    query.StartIndex -= query.Limit;
+                    reloadItems(tabContent);
+                });
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
 
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
 
                 Dashboard.hideLoadingMsg();
-                self.hasMoreItems = result.TotalRecordCount > (startIndex + result.Items.length);
-                self.isLoading = false;
             });
         }
 
@@ -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);
-                reloadItems(tabContent);
-                updateFilterControls(tabContent);
-            });
         };
 
         self.destroy = function () {
-            events.off(self.scrollThreshold, 'lower-threshold', loadMoreItems);
-            if (self.scrollThreshold) {
-                self.scrollThreshold.destroy();
-            }
         };
     };
 });

dashboard-ui/scripts/librarybrowser.js

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

dashboard-ui/scripts/tvshows.js

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

dashboard-ui/tv.html

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