update card layouts

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

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.1.94",
+  "version": "1.1.95",
-  "_release": "1.1.94",
+  "_release": "1.1.95",
   "_resolution": {
     "type": "version",
-    "tag": "1.1.94",
+    "tag": "1.1.95",
-    "commit": "dfd0b14c1af141e548fe2cee92a1f86967c50e8f"
+    "commit": "e8acc2b7fb936b9e8d54a1eda726a16806258639"
   },
   "_source": "https://github.com/MediaBrowser/Emby.ApiClient.Javascript.git",
   "_target": "^1.1.51",

dashboard-ui/bower_components/emby-apiclient/appstorage-localstorage.js

@@ -6,7 +6,10 @@
     var localData;
 
     function updateCache() {
-        cache.put('data', new Response(JSON.stringify(localData)));
+
+        if (cache) {
+            cache.put('data', new Response(JSON.stringify(localData)));
+        }
     }
 
     myStore.setItem = function (name, value) {
@@ -38,10 +41,13 @@
 
     try {
 
-        caches.open('embydata').then(function (result) {
+        if (self.caches) {
-            cache = result;
+
-            localData = {};
+            caches.open('embydata').then(function (result) {
-        });
+                cache = result;
+                localData = {};
+            });
+        }
 
     } catch (err) {
         console.log('Error opening cache: ' + err);

dashboard-ui/bower_components/emby-apiclient/sync/localsync.js

@@ -0,0 +1,46 @@
+define(['appSettings', 'connectionManager'], function (appSettings, connectionManager) {
+    'use strict';
+
+    var syncPromise;
+
+    return {
+
+        sync: function (options) {
+
+            if (syncPromise) {
+                return syncPromise;
+            }
+
+            return new Promise(function (resolve, reject) {
+
+                require(['multiserversync'], function (MultiServerSync) {
+
+                    options = options || {};
+
+                    options.cameraUploadServers = appSettings.cameraUploadServers();
+
+                    syncPromise = new MultiServerSync(connectionManager).sync(options).then(function () {
+
+                        syncPromise = null;
+                        resolve();
+
+                    }, function () {
+
+                        syncPromise = null;
+                        reject();
+                    });
+                });
+
+            });
+        },
+
+        getSyncStatus: function () {
+
+            if (syncPromise != null) {
+                return 'Syncing';
+            }
+            return 'Idle';
+        }
+    };
+
+});

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.360",
+  "version": "1.4.362",
-  "_release": "1.4.360",
+  "_release": "1.4.362",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.360",
+    "tag": "1.4.362",
-    "commit": "a6e44673685b3060947662be41de5cb36253320a"
+    "commit": "74f60991dce95403508b7eb84ec362226f574bc9"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css

@@ -53,7 +53,7 @@ button {
     position: relative;
 }
 
-.cardPadder-backdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop {
+.cardPadder-backdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop {
     padding-bottom: 56.25%;
 }
 
@@ -402,6 +402,10 @@ button {
     max-width: 400px;
 }
 
+.overflowSmallBackdropCard-scalable {
+    width: 60%;
+}
+
 .overflowSquareCard-scalable {
     width: 42%;
     max-width: 200px;
@@ -438,6 +442,10 @@ button {
     .overflowSquareCard-scalable {
         width: 30%;
     }
+
+    .overflowSmallBackdropCard-scalable {
+        width: 40%
+    }
 }
 
 @media all and (min-width: 640px) {
@@ -449,6 +457,10 @@ button {
     .overflowBackdropCard-scalable {
         width: 56%;
     }
+
+    .overflowSmallBackdropCard-scalable {
+        width: 40%
+    }
 }
 
 @media all and (min-width: 700px) {
@@ -461,6 +473,10 @@ button {
     .backdropCard-scalable {
         width: 33.333333333333333333333333333333%;
     }
+
+    .overflowSmallBackdropCard-scalable {
+        width: 30%
+    }
 }
 
 @media all and (min-width: 800px) {
@@ -501,6 +517,10 @@ button {
         width: 40%;
     }
 
+    .overflowSmallBackdropCard-scalable {
+        width: 24%
+    }
+
     .overflowSquareCard-scalable {
         width: 22%;
     }
@@ -527,6 +547,10 @@ button {
     .smallBackdropCard-scalable {
         width: 16.666666666666666666666666666667%;
     }
+
+    .overflowSmallBackdropCard-scalable {
+        width: 18%
+    }
 }
 
 

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

@@ -1,5 +1,5 @@
-define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
+define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'browser', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
-    function (datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom) {
+    function (datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom, browser) {
         'use strict';
 
         var devicePixelRatio = window.devicePixelRatio || 1;
@@ -144,6 +144,20 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         return 100 / 64;
                     }
                     return 100 / 72;
+                case 'overflowSmallBackdrop':
+                    if (screenWidth >= 1200) {
+                        return 100 / 18;
+                    }
+                    if (screenWidth >= 1000) {
+                        return 100 / 24;
+                    }
+                    if (screenWidth >= 770) {
+                        return 100 / 30;
+                    }
+                    if (screenWidth >= 540) {
+                        return 100 / 40;
+                    }
+                    return 100 / 60;
                 default:
                     return 4;
             }
@@ -1275,7 +1289,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     cardContentClose = '</button>';
                 }
 
-                if (options.vibrant && imgUrl && !vibrantSwatch) {
+                var vibrantAttributes = options.vibrant && imgUrl && !vibrantSwatch ?
+                    (' data-vibrant="' + cardFooterId + '" data-swatch="db"') :
+                    '';
+
+                // Don't use the IMG tag with safari because it puts a white border around it
+                if (vibrantAttributes && !browser.safari) {
                     cardImageContainerOpen = '<div class="' + cardImageContainerClass + '">';
 
                     var imgClass = 'cardImage cardImage-img lazy';
@@ -1286,10 +1305,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                             imgClass += ' coveredImage-img';
                         }
                     }
-                    cardImageContainerOpen += '<img crossOrigin="Anonymous" class="' + imgClass + '" data-vibrant="' + cardFooterId + '" data-swatch="db" data-src="' + imgUrl + '" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />';
+                    cardImageContainerOpen += '<img crossOrigin="Anonymous" class="' + imgClass + '"' + vibrantAttributes + ' data-src="' + imgUrl + '" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />';
 
                 } else {
-                    cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+                    cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy"' + vibrantAttributes + ' data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
                 }
 
                 var cardScalableClass = options.cardLayout ? 'cardScalable visualCardBox-cardScalable' : 'cardScalable';

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

@@ -27,7 +27,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     function fillImageElement(elem, source, enableEffects) {
         imageFetcher.loadImage(elem, source).then(function () {
 
-            var fillingVibrant = elem.tagName !== 'IMG' ? false : fillVibrant(elem, source);
+            var fillingVibrant = fillVibrant(elem, source);
 
             if (enableFade && !layoutManager.tv && enableEffects !== false && !fillingVibrant) {
                 fadeIn(elem);
@@ -110,14 +110,17 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         requestIdleCallback(function () {
 
             //var now = new Date().getTime();
-            var swatch = getVibrantInfo(img, url).split('|');
+            getVibrantInfoFromElement(img, url).then(function (vibrantInfo) {
-            //console.log('vibrant took ' + (new Date().getTime() - now) + 'ms');
+                
-            if (swatch.length) {
+                var swatch = vibrantInfo.split('|');
+                //console.log('vibrant took ' + (new Date().getTime() - now) + 'ms');
+                if (swatch.length) {
 
-                var index = 0;
+                    var index = 0;
-                vibrantElement.style.backgroundColor = swatch[index];
+                    vibrantElement.style.backgroundColor = swatch[index];
-                vibrantElement.style.color = swatch[index + 1];
+                    vibrantElement.style.color = swatch[index + 1];
-            }
+                }
+            });
         });
         /*
          * Results into:
@@ -129,6 +132,22 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
          */
     }
 
+    function getVibrantInfoFromElement(elem, url) {
+        
+        if (elem.tagName === 'IMG') {
+            return Promise.resolve(getVibrantInfo(elem, url));
+        }
+
+        return new Promise(function (resolve, reject) {
+
+            var img = new Image();
+            img.onload = function () {
+                resolve(getVibrantInfo(img, url));
+            };
+            img.src = url;
+        });
+    }
+
     function getSettingsKey(url) {
 
         var parts = url.split('://');

dashboard-ui/css/librarybrowser.css

@@ -46,7 +46,7 @@
 }
 
 .pageWithAbsoluteTabs .pageTabContent {
-    padding-top: 2.2em;
+    padding-top: 2.6em;
 }
 
 /*.pageWithAbsoluteTabs .pageTabContent {
@@ -103,13 +103,6 @@
     margin-bottom: 2em;
 }
 
-@media all and (max-width: 800px) {
-
-    .hiddenSectionOnMobile {
-        display: none;
-    }
-}
-
 @media all and (min-width: 800px) {
 
     .hiddenSectionOnNonMobile {

dashboard-ui/devices/ios/ios.css

@@ -66,7 +66,7 @@ h1, h1 a {
 }
 
 .cardImageContainer {
-    border-radius: 5px;
+    border-radius: 4px;
 }
 
 .noSecondaryNavPage .itemBackdrop {

dashboard-ui/scripts/indexpage.js

@@ -38,16 +38,16 @@
             return Sections.loadRecentlyAdded(elem, user);
         }
         else if (section == 'librarytiles') {
-            return Sections.loadLibraryTiles(elem, user, 'backdrop', index, false);
+            return Sections.loadLibraryTiles(elem, user, 'backdrop', index);
         }
         else if (section == 'smalllibrarytiles') {
-            return Sections.loadLibraryTiles(elem, user, 'smallBackdrop', index, false);
+            return Sections.loadLibraryTiles(elem, user, 'smallBackdrop', index);
         }
         else if (section == 'smalllibrarytiles-automobile') {
-            return Sections.loadLibraryTiles(elem, user, 'smallBackdrop', index, true);
+            return Sections.loadLibraryTiles(elem, user, 'smallBackdrop', index);
         }
         else if (section == 'librarytiles-automobile') {
-            return Sections.loadLibraryTiles(elem, user, 'backdrop', index, true);
+            return Sections.loadLibraryTiles(elem, user, 'backdrop', index);
         }
         else if (section == 'librarybuttons') {
             return Sections.loadlibraryButtons(elem, userId, index);

dashboard-ui/scripts/moviestudios.js

@@ -48,7 +48,7 @@
                 itemsContainer: elem,
                 shape: "backdrop",
                 preferThumb: true,
-                showTitle: false,
+                showTitle: true,
                 scalable: true,
                 showItemCounts: true,
                 centerText: true,

dashboard-ui/scripts/sections.js

@@ -396,17 +396,13 @@
         });
     }
 
-    function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile) {
+    function loadLibraryTiles(elem, user, shape) {
 
         return getUserViews(user.Id).then(function (items) {
 
             var html = '';
 
-            if (autoHideOnMobile) {
+            html += '<div>';
-                html += '<div class="hiddenSectionOnMobile">';
-            } else {
-                html += '<div>';
-            }
 
             if (items.length) {
 
@@ -415,7 +411,7 @@
 
                 html += '</div>';
 
-                var scrollX = enableScrollX() && dom.getWindowSize().innerWidth >= 600;
+                var scrollX = enableScrollX() && dom.getWindowSize().innerWidth >= 500;
 
                 if (scrollX) {
                     html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
@@ -425,7 +421,7 @@
 
                 html += cardBuilder.getCardsHtml({
                     items: items,
-                    shape: scrollX ? 'overflowBackdrop' : shape,
+                    shape: scrollX ? 'overflowSmallBackdrop' : shape,
                     showTitle: true,
                     centerText: true,
                     overlayText: false,
@@ -438,12 +434,6 @@
 
             html += '</div>';
 
-            if (autoHideOnMobile) {
-                html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
-                html += getLibraryButtonsHtml(items);
-                html += '</div>';
-            }
-
             return getAppInfo().then(function (infoHtml) {
 
                 elem.innerHTML = html + infoHtml;
@@ -497,7 +487,7 @@
                 }
 
                 var supportsImageAnalysis = appHost.supports('imageanalysis');
-                var cardLayout = appHost.preferVisualCards;
+                var cardLayout = supportsImageAnalysis;
 
                 html += cardBuilder.getCardsHtml({
                     items: result.Items,

dashboard-ui/scripts/tvrecommended.js

@@ -99,7 +99,7 @@
                 var container = view.querySelector('#resumableItems');
 
                 var supportsImageAnalysis = appHost.supports('imageanalysis');
-                var cardLayout = appHost.preferVisualCards;
+                var cardLayout = supportsImageAnalysis;
 
                 cardBuilder.buildCards(result.Items, {
                     itemsContainer: container,

dashboard-ui/scripts/tvstudios.js

@@ -49,7 +49,7 @@
                 itemsContainer: elem,
                 shape: "backdrop",
                 preferThumb: true,
-                showTitle: false,
+                showTitle: true,
                 scalable: true,
                 showItemCounts: true,
                 centerText: true,