From 0bdb63bcff8fbffb2c44f3206334fd104002c178 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 25 Apr 2016 14:33:17 -0400
Subject: [PATCH] update lazy images

---
 .../emby-lazyload-image/lazyload-image.html   | 82 +++----------------
 .../bower_components/iron-icon/.bower.json    |  6 +-
 .../components/ironcardlist/ironcardlist.js   |  2 +-
 .../ironcardlist/ironcardlist.template.html   |  2 +-
 dashboard-ui/css/librarybrowser.css           |  2 +-
 dashboard-ui/scripts/episodes.js              |  5 +-
 dashboard-ui/scripts/site.js                  | 10 +--
 dashboard-ui/scripts/tvshows.js               | 11 ++-
 8 files changed, 34 insertions(+), 86 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html b/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html
index 2fedd03977..ed420476b6 100644
--- a/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html
+++ b/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html
@@ -1,8 +1,8 @@
 <script>
 
-    //require(['imageFetcher'], function (imageFetcher) {
-    //    window.ImageFetcherLazyloadImage = imageFetcher;
-    //});
+    require(['imageFetcher'], function (imageFetcher) {
+        window.ImageFetcherLazyloadImage = imageFetcher;
+    });
 
     /**
      * <lazyload-image>
@@ -16,83 +16,25 @@
         '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.createdCallback = function () {
 
         //};
 
-        LazyloadImagePrototype.detachedCallback = function () {
+        LazyloadImagePrototype.attachedCallback = function () {
 
-            if (this.observer) {
-                // later, you can stop observing
-                this.observer.disconnect();
+            var original = this.currentSrc || this.src;
+
+            if (original && window.ImageFetcherLazyloadImage) {
+                //console.log(original);
+                this.src = FALLBACK_IMAGE;
+                console.log('loading ' + original);
+                ImageFetcherLazyloadImage.loadImage(this, original);
             }
-
         };
 
         return document.registerElement('lazyload-image', {
diff --git a/dashboard-ui/bower_components/iron-icon/.bower.json b/dashboard-ui/bower_components/iron-icon/.bower.json
index 9784e3a3b7..f0167baf13 100644
--- a/dashboard-ui/bower_components/iron-icon/.bower.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/dashboard-ui/components/ironcardlist/ironcardlist.js b/dashboard-ui/components/ironcardlist/ironcardlist.js
index 84486662f3..42f7bf8c5e 100644
--- a/dashboard-ui/components/ironcardlist/ironcardlist.js
+++ b/dashboard-ui/components/ironcardlist/ironcardlist.js
@@ -2,7 +2,7 @@
 
     function getTemplate(scrollTarget) {
 
-        var maxPhysical = 80;
+        var maxPhysical = 200;
 
         // is="lazyload-image" 
 
diff --git a/dashboard-ui/components/ironcardlist/ironcardlist.template.html b/dashboard-ui/components/ironcardlist/ironcardlist.template.html
index 46edb0cf16..fb57d480e3 100644
--- a/dashboard-ui/components/ironcardlist/ironcardlist.template.html
+++ b/dashboard-ui/components/ironcardlist/ironcardlist.template.html
@@ -6,7 +6,7 @@
                     <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}}" />
+                            <img is="lazyload-image" class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
                             <div inner-h-t-m-l="{{item.overlayHtml}}"></div>
                         </a>
                     </div>
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index f3194e702c..d5f7b96465 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -1192,7 +1192,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 }
 
 .layout-desktop .absolutePageTabContent .alphabetPicker {
-    right: 15px;
+    right: 20px;
 }
 
 .alphabetPicker a {
diff --git a/dashboard-ui/scripts/episodes.js b/dashboard-ui/scripts/episodes.js
index 6429b087e9..0f8e9c1c79 100644
--- a/dashboard-ui/scripts/episodes.js
+++ b/dashboard-ui/scripts/episodes.js
@@ -183,7 +183,7 @@
                 self.showFilterMenu();
             });
 
-            tabContent.querySelector('.btnSort').addEventListener('click', function () {
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
@@ -224,7 +224,8 @@
                     callback: function () {
                         reloadItems(tabContent);
                     },
-                    query: getQuery(tabContent)
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index dd1ff4ad2a..7cd0d239cc 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -3107,11 +3107,11 @@ pageClassOn('viewshow', "page", function () {
         page.classList.remove('ui-body-a');
     }
 
-    if (currentTheme != 'a' && !browserInfo.mobile) {
-        document.documentElement.classList.add('darkScrollbars');
-    } else {
-        document.documentElement.classList.remove('darkScrollbars');
-    }
+    //if (currentTheme != 'a' && !browserInfo.mobile) {
+    //    document.documentElement.classList.add('darkScrollbars');
+    //} else {
+    //    document.documentElement.classList.remove('darkScrollbars');
+    //}
 
     var apiClient = window.ApiClient;
 
diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js
index 405af3b5f5..c186a96281 100644
--- a/dashboard-ui/scripts/tvshows.js
+++ b/dashboard-ui/scripts/tvshows.js
@@ -153,7 +153,6 @@
 
                 // Hack: notifyResize needs to be done after the items have been rendered
                 setTimeout(function () {
-
                     ironList.notifyResize();
                     self.scrollThreshold.resetSize();
                 }, 300);
@@ -213,7 +212,7 @@
                 self.showFilterMenu();
             });
 
-            tabContent.querySelector('.btnSort').addEventListener('click', function () {
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
@@ -251,7 +250,8 @@
                         getQuery(tabContent).StartIndex = 0;
                         reloadItems(tabContent);
                     },
-                    query: getQuery(tabContent)
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
 
@@ -287,6 +287,11 @@
 
                 tabContent.querySelector('.itemsContainer').innerHTML = html;
                 self.listCreated = true;
+
+                return new Promise(function (resolve, reject) {
+
+                    setTimeout(resolve, 2000);
+                });
             });
         }