update image loader

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

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.0.27",
+  "version": "1.0.30",
-  "_release": "1.0.27",
+  "_release": "1.0.30",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.27",
+    "tag": "1.0.30",
-    "commit": "c8758fe411230a36326a0bd72e8d4d5971f506f7"
+    "commit": "9f144d506da6c01cd99f2421953a9f2c5c96e295"
   },
   "_source": "git://github.com/MediaBrowser/Emby.ApiClient.Javascript.git",
   "_target": "~1.0.3",

dashboard-ui/bower_components/emby-apiclient/connectionmanager.js

@@ -488,6 +488,10 @@
             });
         }
 
+        function getConnectUrl(handler) {
+            return 'https://connect.emby.media/service/' + handler;
+        }
+
         function getConnectUser(userId, accessToken) {
 
             if (!userId) {
@@ -1529,6 +1533,76 @@
             }
         }
 
+        function addAppInfoToConnectRequest(request) {
+            request.headers = request.headers || {};
+            request.headers['X-Application'] = appName + '/' + appVersion;
+        }
+
+        self.createPin = function () {
+
+            var request = {
+                type: 'POST',
+                url: getConnectUrl('pin'),
+                data: {
+                    deviceId: deviceId
+                },
+                dataType: 'json'
+            };
+
+            addAppInfoToConnectRequest(request);
+
+            return ajax(request);
+        };
+
+        self.getPinStatus = function (pinInfo) {
+
+            var queryString = {
+                deviceId: pinInfo.DeviceId,
+                pin: pinInfo.Pin
+            };
+
+            var request = {
+                type: 'GET',
+                url: getConnectUrl('pin') + '?' + paramsToString(queryString),
+                dataType: 'json'
+            };
+
+            addAppInfoToConnectRequest(request);
+
+            return ajax(request);
+
+        };
+
+        function exchangePin(pinInfo) {
+
+            var request = {
+                type: 'POST',
+                url: getConnectUrl('pin/authenticate'),
+                data: {
+                    deviceId: pinInfo.DeviceId,
+                    pin: pinInfo.Pin
+                },
+                dataType: 'json'
+            };
+
+            addAppInfoToConnectRequest(request);
+
+            return ajax(request);
+        }
+
+        self.exchangePin = function (pinInfo) {
+
+            return exchangePin(pinInfo).then(function (result) {
+
+                var credentials = credentialProvider.credentials();
+                credentials.ConnectAccessToken = result.AccessToken;
+                credentials.ConnectUserId = result.UserId;
+                credentialProvider.credentials(credentials);
+
+                return ensureConnectUser(credentials);
+            });
+        };
+
         return self;
     };
 

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

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.0.21",
+  "version": "1.0.23",
-  "_release": "1.0.21",
+  "_release": "1.0.23",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.21",
+    "tag": "1.0.23",
-    "commit": "dd73237b9d554d45a664e820042804c6d129d280"
+    "commit": "1e7c56cf54a657d72d35d36f37937231942a2685"
   },
   "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "~1.0.0",

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

@@ -1,4 +1,4 @@
-define(['visibleinviewport', 'imageloader'], function (visibleinviewport, imageLoader) {
+define(['visibleinviewport', 'imageFetcher'], function (visibleinviewport, imageFetcher) {
 
     var thresholdX = screen.availWidth;
     var thresholdY = screen.availHeight;
@@ -9,14 +9,33 @@ define(['visibleinviewport', 'imageloader'], function (visibleinviewport, imageL
         return visibleinviewport(elem, true, thresholdX, thresholdY);
     }
 
+    var self = {};
+
     function fillImage(elem) {
         var source = elem.getAttribute('data-src');
         if (source) {
-            imageLoader.loadImage(elem, source);
+            if (self.enableFade) {
+                imageFetcher.loadImage(elem, source).then(fadeIn);
+            } else {
+                imageFetcher.loadImage(elem, source);
+            }
             elem.setAttribute("data-src", '');
         }
     }
 
+    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 cancelAll(tokens) {
         for (var i = 0, length = tokens.length; i < length; i++) {
 
@@ -167,9 +186,24 @@ define(['visibleinviewport', 'imageloader'], function (visibleinviewport, imageL
         return result;
     }
 
-    return {
+    function fillImages(elems) {
-        lazyChildren: lazyChildren,
-        getPrimaryImageAspectRatio: getPrimaryImageAspectRatio
-    };
 
+        for (var i = 0, length = elems.length; i < length; i++) {
+            var elem = elems[0];
+            fillImage(elem);
+        }
+    }
+
+    function lazyImage(elem, url) {
+
+        elem.setAttribute('data-src', url);
+        fillImage(elem);
+    }
+
+    self.fillImages = fillImages;
+    self.lazyImage = lazyImage;
+    self.lazyChildren = lazyChildren;
+    self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
+
+    return self;
 });

dashboard-ui/scripts/librarymenu.js

@@ -50,7 +50,9 @@
 
         document.body.appendChild(viewMenuBar);
 
-        ImageLoader.lazyChildren(document.querySelector('.viewMenuBar'));
+        require(['imageLoader'], function (imageLoader) {
+            imageLoader.lazyChildren(document.querySelector('.viewMenuBar'));
+        });
 
         document.dispatchEvent(new CustomEvent("headercreated", {}));
         bindMenuEvents();
@@ -323,7 +325,10 @@
         var userHeader = drawer.querySelector('.userheader');
 
         userHeader.innerHTML = html;
-        ImageLoader.fillImages(userHeader.getElementsByClassName('lazy'));
+
+        require(['imageLoader'], function (imageLoader) {
+            imageLoader.fillImages(userHeader.getElementsByClassName('lazy'));
+        });
     }
 
     function refreshLibraryInfoInDrawer(user, drawer) {

dashboard-ui/scripts/site.js

@@ -1855,15 +1855,16 @@ var AppInfo = {};
             browser: embyWebComponentsBowerPath + "/browser",
             qualityoptions: embyWebComponentsBowerPath + "/qualityoptions",
             connectservice: apiClientBowerPath + '/connectservice',
-            hammer: bowerPath + "/hammerjs/hammer.min"
+            hammer: bowerPath + "/hammerjs/hammer.min",
+            imageLoader: embyWebComponentsBowerPath + "/images/imagehelper"
         };
 
         if (navigator.webkitPersistentStorage) {
-            paths.imageloader = embyWebComponentsBowerPath + "/images/persistentimageloader";
+            paths.imageFetcher = embyWebComponentsBowerPath + "/images/persistentimagefetcher";
         } else if (Dashboard.isRunningInCordova()) {
-            paths.imageloader = 'cordova/imagestore';
+            paths.imageFetcher = 'cordova/imagestore';
         } else {
-            paths.imageloader = embyWebComponentsBowerPath + "/images/basicimageloader";
+            paths.imageFetcher = embyWebComponentsBowerPath + "/images/basicimagefetcher";
         }
 
         paths.hlsjs = bowerPath + "/hls.js/dist/hls.min";
@@ -2152,7 +2153,6 @@ var AppInfo = {};
             var promises = [];
             deps = [];
             deps.push('scripts/mediaplayer');
-            deps.push('thirdparty/jquery.unveil-custom.js');
             deps.push('emby-icons');
             deps.push('paper-icon-button');
             deps.push('paper-button');
@@ -2219,6 +2219,8 @@ var AppInfo = {};
 
         var deps = [];
 
+        deps.push('imageLoader');
+
         if (!(AppInfo.isNativeApp && browserInfo.android)) {
             document.documentElement.classList.add('minimumSizeTabs');
         }
@@ -2263,7 +2265,10 @@ var AppInfo = {};
 
         deps.push('css!css/card.css');
 
-        require(deps, function () {
+        require(deps, function (imageLoader) {
+
+            imageLoader.enableFade = browserInfo.animate && !browserInfo.mobile;
+            window.ImageLoader = imageLoader;
 
             $.mobile.filterHtml = Dashboard.filterHtml;
 

dashboard-ui/thirdparty/jquery.unveil-custom.js

@@ -1,130 +0,0 @@
-define(['visibleinviewport', 'imageloader'], function (visibleInViewport, imageLoader) {
-
-    var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
-    var thresholdX = screen.availWidth;
-    var thresholdY = screen.availHeight;
-
-    function isVisible(elem) {
-        return visibleInViewport(elem, true, thresholdX, thresholdY);
-    }
-
-    function fillImage(elem) {
-        var source = elem.getAttribute('data-src');
-        if (source) {
-            imageLoader.loadImage(elem, source).then(fadeIn);
-            elem.setAttribute("data-src", '');
-        }
-    }
-
-    function fadeIn(elem) {
-
-        if (!browserInfo.animate || browserInfo.mobile) {
-            return;
-        }
-        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 cancelAll(tokens) {
-        for (var i = 0, length = tokens.length; i < length; i++) {
-
-            tokens[i] = true;
-        }
-    }
-
-    function unveilElements(images) {
-
-        if (!images.length) {
-            return;
-        }
-
-        var cancellationTokens = [];
-        function unveilInternal(tokenIndex) {
-
-            var remaining = [];
-            var anyFound = false;
-            var out = false;
-
-            // TODO: This out construct assumes left to right, top to bottom
-
-            for (var i = 0, length = images.length; i < length; i++) {
-
-                if (cancellationTokens[tokenIndex]) {
-                    return;
-                }
-                var img = images[i];
-                if (!out && isVisible(img)) {
-                    anyFound = true;
-                    fillImage(img);
-                } else {
-
-                    if (anyFound) {
-                        out = true;
-                    }
-                    remaining.push(img);
-                }
-            }
-
-            images = remaining;
-
-            if (!images.length) {
-                document.removeEventListener('focus', unveil, true);
-                document.removeEventListener('scroll', unveil, true);
-                document.removeEventListener(wheelEvent, unveil, true);
-                window.removeEventListener('resize', unveil, true);
-            }
-        }
-
-        function unveil() {
-
-            cancelAll(cancellationTokens);
-
-            var index = cancellationTokens.length;
-            cancellationTokens.length++;
-
-            setTimeout(function () {
-                unveilInternal(index);
-            }, 1);
-        }
-
-        document.addEventListener('scroll', unveil, true);
-        document.addEventListener('focus', unveil, true);
-        document.addEventListener(wheelEvent, unveil, true);
-        window.addEventListener('resize', unveil, true);
-
-        unveil();
-    }
-
-    function fillImages(elems) {
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            var elem = elems[0];
-            fillImage(elem);
-        }
-    }
-
-    function lazyChildren(elem) {
-
-        unveilElements(elem.getElementsByClassName('lazy'), elem);
-    }
-
-    function lazyImage(elem, url) {
-
-        elem.setAttribute('data-src', url);
-        fillImages([elem]);
-    }
-
-    window.ImageLoader = {
-        fillImages: fillImages,
-        lazyImage: lazyImage,
-        lazyChildren: lazyChildren
-    };
-
-});