update components

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

@@ -14,14 +14,14 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.142",
+  "version": "1.4.143",
-  "_release": "1.4.142",
+  "_release": "1.4.143",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.142",
+    "tag": "1.4.143",
-    "commit": "12659f33236f3a8daf282132ca715d2bbf449bfe"
+    "commit": "a5cb5b5e596af6e78cfe3cca056722ca6cffdb9d"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
-  "_target": "^1.2.0",
+  "_target": "^1.2.1",
   "_originalSource": "emby-webcomponents"
 }

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

@@ -3,7 +3,6 @@
     justify-content: center;
     padding: 0;
     border: none;
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
     max-height: 84%;
 }
 
@@ -11,7 +10,7 @@
     max-height: none;
 }
 
-.actionSheet.centered .actionSheetContent {
+.actionSheetContent-centered {
     text-align: center;
     align-items: center;
 }
@@ -27,7 +26,7 @@
     text-align: center;
 }
 
-button.actionSheetMenuItem {
+.actionSheetMenuItem {
     padding: 0 1.6em;
     margin: 0;
     text-transform: none;
@@ -68,23 +67,17 @@ button.actionSheetMenuItem {
     width: auto;
 }
 
-h1.actionSheetTitle {
+.actionSheetTitle {
     margin: .5em 0 1em !important;
     padding: 0 1em;
     flex-grow: 0;
 }
 
-h2.actionSheetTitle {
-    margin: .25em 0 .55em !important;
-    padding: 0 1em;
-    flex-grow: 0;
-}
-
 .actionSheetText {
     padding: 0 1em;
     flex-grow: 0;
 }
 
-.actionSheet.extraSpacing {
+.actionsheet-extraSpacing {
     font-size: 108%;
 }

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

@@ -107,13 +107,42 @@
         var dlg = dialogHelper.createDialog(dialogOptions);
 
         if (!layoutManager.tv) {
-            dlg.classList.add('extraSpacing');
+            dlg.classList.add('actionsheet-extraSpacing');
         }
 
         dlg.classList.add('actionSheet');
 
         var html = '';
+
+        var scrollType = layoutManager.desktop ? 'smoothScrollY' : 'hiddenScrollY';
+        var style = (browser.noFlex || browser.firefox) ? 'max-height:400px;' : '';
+
+        // Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
+        if (options.items.length > 20) {
+            var minWidth = window.innerWidth >= 300 ? 240 : 200;
+            style += "min-width:" + minWidth + "px;";
+        }
+
+        var i, length, option;
+        var renderIcon = false;
+        for (i = 0, length = options.items.length; i < length; i++) {
+
+            option = options.items[i];
+            option.icon = option.selected ? 'check' : null;
+
+            if (option.icon) {
+                renderIcon = true;
+            }
+        }
+
+        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+        var center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
+
+        if (center) {
+            html += '<div class="actionSheetContent actionSheetContent-centered">';
+        } else {
             html += '<div class="actionSheetContent">';
+        }
 
         if (options.title) {
 
@@ -133,35 +162,8 @@
             html += '</p>';
         }
 
-        var scrollType = layoutManager.desktop ? 'smoothScrollY' : 'hiddenScrollY';
-        var style = (browser.noFlex || browser.firefox) ? 'max-height:400px;' : '';
-
-        // Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
-        if (options.items.length > 20) {
-            var minWidth = window.innerWidth >= 300 ? 240 : 200;
-            style += "min-width:" + minWidth + "px;";
-        }
         html += '<div class="actionSheetScroller ' + scrollType + '" style="' + style + '">';
 
-        var i, length, option;
-        var renderIcon = false;
-        for (i = 0, length = options.items.length; i < length; i++) {
-
-            option = options.items[i];
-            option.icon = option.selected ? 'check' : null;
-
-            if (option.icon) {
-                renderIcon = true;
-            }
-        }
-
-        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
-        var center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
-
-        if (center) {
-            dlg.classList.add('centered');
-        }
-
         var itemTagName = 'button';
 
         for (i = 0, length = options.items.length; i < length; i++) {

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

@@ -307,6 +307,15 @@ define(['browser'], function (browser) {
                 VideoCodec: 'h264',
                 AudioCodec: videoAudioCodecs.join(',')
             });
+
+            if (isEdgeUniversal()) {
+                profile.DirectPlayProfiles.push({
+                    Container: 'mkv',
+                    Type: 'Video',
+                    VideoCodec: 'vc1',
+                    AudioCodec: videoAudioCodecs.join(',')
+                });
+            }
         }
 
         // These are formats we can't test for but some devices will support

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

@@ -83,6 +83,13 @@ button.card {
     will-change: transform;
 }
 
+@media all and (min-width: 600px) {
+
+    .layout-desktop .card .cardBox, .layout-mobile .card .cardBox {
+        margin: 3px;
+    }
+}
+
 button.cardContent {
     display: block;
 }
@@ -177,10 +184,16 @@ button.cardContent {
     justify-content: center;
     position: relative;
     background-clip: content-box !important;
+    border-radius: 2px;
+}
+
+.visualCardBox .cardImageContainer {
+    border-radius: 0;
 }
 
 .chapterCardImageContainer {
     background-color: #000;
+    border-radius: 0;
 }
 
 button.cardImageContainer {
@@ -262,12 +275,16 @@ button.cardImageContainer {
     max-width: 100%;
 }
 
+.innerCardFooterClear {
+    background-color: transparent;
+}
+
 .fullInnerCardFooter {
     right: 0;
 }
 
 .cardText {
-    padding: .35em .35em;
+    padding: .35em .5em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

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

@@ -150,6 +150,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 options.rows = options.rows[options.shape];
             }
 
+            if (layoutManager.tv) {
                 if (options.shape == 'backdrop') {
                     options.width = options.width || 500;
                 }
@@ -159,6 +160,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 else if (options.shape == 'square') {
                     options.width = options.width || 243;
                 }
+            }
 
             options.width = options.width || getImageWidth(options.shape);
         }
@@ -498,7 +500,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getImageUrl(item.Id, {
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Primary",
                     maxHeight: height,
                     maxWidth: width,
@@ -520,7 +522,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getImageUrl(item.Id || item.ItemId, {
+                imgUrl = apiClient.getScaledImageUrl(item.Id || item.ItemId, {
                     type: "Primary",
                     maxHeight: height,
                     maxWidth: width,
@@ -540,7 +542,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             }
             else if (item.ParentPrimaryImageTag) {
 
-                imgUrl = apiClient.getImageUrl(item.ParentPrimaryImageItemId, {
+                imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
                     type: "Primary",
                     maxWidth: width,
                     tag: item.ParentPrimaryImageTag
@@ -1078,9 +1080,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var forceName = imgInfo.forceName;
 
             var showTitle = options.showTitle == 'auto' ? true : (options.showTitle || item.Type == 'PhotoAlbum' || item.Type == 'Folder');
+            var overlayText = options.overlayText;
 
             if (forceName && !options.cardLayout) {
-                showTitle = false;
+                showTitle = imgUrl;
+                
+                if (overlayText == null) {
+                    overlayText = true;
+                }
             }
 
             if (!imgUrl) {
@@ -1095,14 +1102,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             var footerOverlayed = false;
 
-            if (options.overlayText) {
+            if (overlayText) {
 
                 footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
                 innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
                 footerOverlayed = true;
             }
             else if (progressHtml) {
-                innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter">';
+                innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
                 innerCardFooter += progressHtml;
                 innerCardFooter += '</div>';
 
@@ -1115,7 +1122,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             }
 
             var outerCardFooter = '';
-            if (!options.overlayText && !footerOverlayed) {
+            if (!overlayText && !footerOverlayed) {
                 footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
                 outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
             }

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

@@ -0,0 +1,26 @@
+
+.dialogButtons {
+    position: relative;
+    padding: 0 !important;
+    margin: 1em;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.dialogButton {
+    color: #52B54B;
+    padding: 0.35em 1em;
+    margin: 0;
+}
+
+    .dialogButton:focus {
+        color: #fff;
+        background-color: #52B54B;
+    }

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

@@ -1,4 +1,4 @@
-define(['layoutManager', 'globalize'], function (layoutManager, globalize) {
+define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager, globalize) {
 
     function showTvDialog(options) {
         return new Promise(function (resolve, reject) {
@@ -48,14 +48,14 @@ define(['layoutManager', 'globalize'], function (layoutManager, globalize) {
             html += '<div style="margin:1em 0;">' + text + '</div>';
         }
 
-        html += '<div class="buttons">';
+        html += '<div class="dialogButtons">';
 
         var i, length;
         for (i = 0, length = options.buttons.length; i < length; i++) {
 
             var item = options.buttons[i];
             var autoFocus = i == 0 ? ' autofocus' : '';
-            html += '<button is="emby-button" type="button" class="btnOption" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
+            html += '<button is="emby-button" type="button" class="btnOption dialogButton" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
         }
 
         html += '</div>';

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

@@ -12,7 +12,7 @@
     contain: style;
 }
 
-    .dialog.fixedSize {
+.dialog-fixedSize {
     position: fixed !important;
     top: 0 !important;
     bottom: 0 !important;
@@ -23,25 +23,25 @@
     max-height: none !important;
     max-width: none !important;
     width: auto;
-    }
+}
 
-    .dialog.centeredDialog {
+.centeredDialog {
     top: 50%;
     left: 50%;
     max-width: 70%;
     max-height: 84%;
-    }
+}
 
 @media all and (min-width: 1280px) and (min-height: 720px) {
 
-    .dialog.medium {
+    .dialog-medium {
         top: 10% !important;
         bottom: 10% !important;
         left: 10% !important;
         right: 10% !important;
     }
 
-    .dialog.small {
+    .dialog-small {
         top: 10% !important;
         bottom: 10% !important;
         left: 20% !important;
@@ -51,7 +51,7 @@
 
 @media all and (min-width: 1280px) and (min-height: 720px) {
 
-    .dialog.fullscreen-border {
+    .dialog-fullscreen-border {
         top: 5% !important;
         bottom: 5% !important;
         left: 5% !important;
@@ -68,32 +68,6 @@
     padding: 0 24px;
 }
 
-.dialog .buttons {
-    position: relative;
-    padding: 0;
-    margin: 1em;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-}
-
-    .dialog .buttons button {
-        color: #52B54B;
-        padding: 0.35em 1em;
-        margin: 0;
-    }
-
-        .dialog .buttons button:focus {
-            color: #fff;
-            background-color: #52B54B;
-        }
-
 .dialogBackdrop {
     background-color: #000;
     opacity: 0;
@@ -107,20 +81,6 @@
     transition: opacity ease-out 0.2s;
 }
 
-    .dialogBackdrop.opened {
+.dialogBackdropOpened {
-        opacity: .6;
-    }
-
-.dialog::backdrop {
-    opacity: 0;
-    background-color: #000;
-    transition: opacity ease-out 0.2s;
-}
-
-.mouseIdle .dialog::backdrop {
-    cursor: none !important;
-}
-
-.dialog.opened::backdrop {
     opacity: .6;
 }

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

@@ -98,7 +98,7 @@
 
         dlg.addEventListener('close', onDialogClosed);
 
-        var center = !dlg.classList.contains('fixedSize');
+        var center = !dlg.classList.contains('dialog-fixedSize');
         if (center) {
             dlg.classList.add('centeredDialog');
         }
@@ -184,7 +184,7 @@
 
         // Doing this immediately causes the opacity to jump immediately without animating
         setTimeout(function () {
-            backdrop.classList.add('opened');
+            backdrop.classList.add('dialogBackdropOpened');
         }, 0);
 
         backdrop.addEventListener('click', function () {
@@ -363,7 +363,7 @@
         if (backdrop) {
             dlg.backdrop = null;
 
-            backdrop.classList.remove('opened');
+            backdrop.classList.remove('dialogBackdropOpened');
 
             setTimeout(function () {
                 backdrop.parentNode.removeChild(backdrop);
@@ -382,16 +382,10 @@
 
         options = options || {};
 
-        var dlg = document.createElement('dialog');
-
         // If there's no native dialog support, use a plain div
         // Also not working well in samsung tizen browser, content inside not clickable
-        if (!dlg.showModal || browser.tv) {
-            dlg = document.createElement('div');
-        } else {
         // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
-            dlg = document.createElement('div');
+        var dlg = document.createElement('div');
-        }
 
         dlg.classList.add('focuscontainer');
         dlg.classList.add('hide');
@@ -474,8 +468,8 @@
         }
 
         if (options.size) {
-            dlg.classList.add('fixedSize');
+            dlg.classList.add('dialog-fixedSize');
-            dlg.classList.add(options.size);
+            dlg.classList.add('dialog-' + options.size);
         }
 
         return dlg;

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

@@ -47,7 +47,7 @@
         align-items: center;
         justify-content: center;
         text-align: center;
-        color: #fff !important;
+        color: #fff;
         margin: 0;
     }
 

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

@@ -20,15 +20,11 @@
     text-align: left;
 }
 
-    .emby-collapsible-button.noflex h3 {
-        display: inline-block;
-    }
-
 .emby-collapse-expandIcon {
     transform-origin: 50% 50%;
     transition: transform 180ms ease-out;
 }
 
-    .emby-collapse-expandIcon.expanded {
+.emby-collapse-expandIconExpanded {
     transform: rotate(180deg);
-    }
+}

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

@@ -23,7 +23,7 @@
 
         var icon = button.querySelector('i');
         //icon.innerHTML = 'expand_less';
-        icon.classList.add('expanded');
+        icon.classList.add('emby-collapse-expandIconExpanded');
     }
 
     function slideUpToHide(button, elem) {
@@ -44,7 +44,7 @@
 
         var icon = button.querySelector('i');
         //icon.innerHTML = 'expand_more';
-        icon.classList.remove('expanded');
+        icon.classList.remove('emby-collapse-expandIconExpanded');
     }
 
     function onButtonClick(e) {

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

@@ -48,7 +48,7 @@
     height: 28px;
 }
 
-    .playedIndicator i {
+    .playedIndicatorIcon {
         width: 22px;
         height: 22px;
         font-size: 22px;
@@ -63,7 +63,7 @@
     font-size: 80%;
 }
 
-.layout-tv .playedIndicator i {
+.layout-tv .playedIndicatorIcon {
     width: 2.6vh;
     height: 2.6vh;
     font-size: 2.6vh;

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

@@ -61,7 +61,7 @@ define(['css!./indicators.css', 'material-icons'], function () {
             }
 
             if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="md-icon">&#xE5CA;</i></div>';
+                return '<div class="playedIndicator indicator"><i class="md-icon playedIndicatorIcon">&#xE5CA;</i></div>';
             }
         }
 

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

@@ -14,19 +14,8 @@
     padding: .5em;
     color: #fff;
     text-align: left;
-
 }
 
-    .cardOverlayInner button:last-child {
-        margin-right: 0 !important;
-    }
-
-    .cardOverlayInner p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
 .cardOverlayMediaInfo {
     display: flex;
     align-items: center;
@@ -41,16 +30,16 @@
     flex-wrap: wrap;
 }
 
-    .cardOverlayButtons .fab {
+.cardOverlayFab {
-        background-color: #282828;
+    background-color: #282828 !important;
-        margin-right: .25em;
+    margin-right: .25em !important;
-    }
+}
 
-        .cardOverlayButtons .fab i.md-icon {
+.cardOverlayFab-md-icon {
     width: auto !important;
     height: auto !important;
-            font-size: 20px !important;
+    font-size: 30px !important;
-        }
+}
 
 @media all and (max-width: 1200px) {
 

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

@@ -127,22 +127,24 @@
 
         if (playbackManager.canPlay(item)) {
 
-            html += '<button is="emby-button" class="itemAction autoSize fab mini" data-action="playmenu"><i class="md-icon">&#xE037;</i></button>';
+            html += '<button is="emby-button" class="itemAction autoSize fab cardOverlayFab mini" data-action="playmenu"><i class="md-icon cardOverlayFab-md-icon">&#xE037;</i></button>';
             buttonCount++;
         }
 
         if (item.LocalTrailerCount) {
-            html += '<button title="' + globalize.translate('sharedcomponents#Trailer') + '" is="emby-button" class="itemAction autoSize fab mini" data-action="playtrailer"><i class="md-icon">&#xE04B;</i></button>';
+            html += '<button title="' + globalize.translate('sharedcomponents#Trailer') + '" is="emby-button" class="itemAction autoSize fab cardOverlayFab mini" data-action="playtrailer"><i class="md-icon cardOverlayFab-md-icon">&#xE04B;</i></button>';
             buttonCount++;
         }
 
         var moreIcon = appHost.moreIcon == 'dots-horiz' ? '&#xE5D3;' : '&#xE5D4;';
-        html += '<button is="emby-button" class="itemAction autoSize fab mini" data-action="menu" data-playoptions="false"><i class="md-icon">' + moreIcon + '</i></button>';
+        html += '<button is="emby-button" class="itemAction autoSize fab cardOverlayFab mini" data-action="menu" data-playoptions="false"><i class="md-icon cardOverlayFab-md-icon">' + moreIcon + '</i></button>';
         buttonCount++;
 
         html += userdataButtons.getIconsHtml({
             item: item,
-            style: 'fab-mini'
+            style: 'fab-mini',
+            cssClass: 'cardOverlayFab',
+            iconCssClass: 'cardOverlayFab-md-icon'
         });
 
         html += '</div>';

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

@@ -1,14 +1,15 @@
 .mdl-spinner {
-    display: inline-block;
     position: relative;
     width: 28px;
     height: 28px;
+    display: none;
 }
 
-    .mdl-spinner.is-active {
+.mdlSpinnerActive {
+    display: inline-block;
     -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
     animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
-    }
+}
 
 @-webkit-keyframes mdl-spinner__container-rotate {
     to {
@@ -35,11 +36,7 @@
     border-color: rgb(66,165,245);
 }
 
-.mdl-spinner--single-color .mdl-spinner__layer-1 {
+.mdlSpinnerActive .mdl-spinner__layer-1 {
-    border-color: rgb(63,81,181);
-}
-
-.mdl-spinner.is-active .mdl-spinner__layer-1 {
     -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
@@ -48,11 +45,7 @@
     border-color: rgb(244,67,54);
 }
 
-.mdl-spinner--single-color .mdl-spinner__layer-2 {
+.mdlSpinnerActive .mdl-spinner__layer-2 {
-    border-color: rgb(63,81,181);
-}
-
-.mdl-spinner.is-active .mdl-spinner__layer-2 {
     -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
@@ -61,11 +54,7 @@
     border-color: rgb(253,216,53);
 }
 
-.mdl-spinner--single-color .mdl-spinner__layer-3 {
+.mdlSpinnerActive .mdl-spinner__layer-3 {
-    border-color: rgb(63,81,181);
-}
-
-.mdl-spinner.is-active .mdl-spinner__layer-3 {
     -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
@@ -74,11 +63,7 @@
     border-color: rgb(76,175,80);
 }
 
-.mdl-spinner--single-color .mdl-spinner__layer-4 {
+.mdlSpinnerActive .mdl-spinner__layer-4 {
-    border-color: rgb(63,81,181);
-}
-
-.mdl-spinner.is-active .mdl-spinner__layer-4 {
     -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
@@ -360,30 +345,6 @@
     }
 }
 
-/**
-* Patch the gap that appear between the two adjacent
-* div.mdl-spinner__circle-clipper while the spinner is rotating
-* (appears on Chrome 38, Safari 7.1, and IE 11).
-*
-* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
-* opacity is 0.99, but still does on Safari and IE.
-*/
-.mdl-spinner__gap-patch {
-    position: absolute;
-    box-sizing: border-box;
-    top: 0;
-    left: 45%;
-    width: 10%;
-    height: 100%;
-    overflow: hidden;
-    border-color: inherit;
-}
-
-    .mdl-spinner__gap-patch .mdl-spinner__circle {
-        width: 1000%;
-        left: -450%;
-    }
-
 .mdl-spinner__circle-clipper {
     display: inline-block;
     position: relative;
@@ -414,25 +375,25 @@
     left: 0;
 }
 
-.mdl-spinner__left .mdl-spinner__circle {
+.mdl-spinner__circleLeft {
     border-right-color: transparent !important;
     -webkit-transform: rotate(129deg);
     transform: rotate(129deg);
 }
 
-.mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
+.mdlSpinnerActive .mdl-spinner__circleLeft {
     -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-.mdl-spinner__right .mdl-spinner__circle {
+.mdl-spinner__circleRight {
     left: -100%;
     border-left-color: transparent !important;
     -webkit-transform: rotate(-129deg);
     transform: rotate(-129deg);
 }
 
-.mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
+.mdlSpinnerActive .mdl-spinner__circleRight {
     -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
@@ -516,7 +477,3 @@
     z-index: 9999999;
     contain: layout style;
 }
-
-.loadingHide {
-    display: none !important;
-}

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

@@ -13,23 +13,20 @@ define(['css!./loading-lite'], function () {
 
                 elem.classList.add('docspinner');
                 elem.classList.add('mdl-spinner');
-                elem.classList.add('mdl-js-spinner');
 
-                elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div>';
+                elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
 
                 document.body.appendChild(elem);
             }
 
-            elem.classList.add('is-active');
+            elem.classList.add('mdlSpinnerActive');
-            elem.classList.remove('loadingHide');
         },
         hide: function () {
             var elem = loadingElem;
 
             if (elem) {
 
-                elem.classList.remove('is-active');
+                elem.classList.remove('mdlSpinnerActive');
-                elem.classList.add('loadingHide');
             }
         }
     };

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

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

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

@@ -1,28 +0,0 @@
-define(['paper-spinner', 'css!./loading'], function () {
-
-    return {
-        show: function () {
-            var elem = document.querySelector('.docspinner');
-
-            if (!elem) {
-
-                elem = document.createElement("paper-spinner");
-                elem.classList.add('docspinner');
-
-                document.body.appendChild(elem);
-            }
-
-            elem.active = true;
-            elem.classList.remove('loadingHide');
-        },
-        hide: function () {
-            var elem = document.querySelector('.docspinner');
-
-            if (elem) {
-
-                elem.active = false;
-                elem.classList.add('loadingHide');
-            }
-        }
-    };
-});

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

@@ -2,7 +2,7 @@
     margin: 0 1em 0 0;
 }
 
-i.mediaInfoItem {
+.mediaInfoIconItem {
     width: auto;
     height: auto;
     font-size: 1.6em;
@@ -22,14 +22,14 @@ i.mediaInfoItem {
     padding-bottom: 0;
 }
 
-    .starRatingContainer i {
+.starIcon {
     color: #CB272A;
     width: auto !important;
     height: auto !important;
     font-size: 1.4em;
-    }
+}
 
-.mediaInfoItem.criticRating {
+.mediaInfoCriticRating {
     padding-left: 1.5em;
     background-position: left center;
     background-repeat: no-repeat;
@@ -39,15 +39,15 @@ i.mediaInfoItem {
     align-items: center;
 }
 
-.mediaInfoItem.criticRatingFresh {
+.mediaInfoCriticRatingFresh {
     background-image: url(fresh.png);
 }
 
-.mediaInfoItem.criticRatingRotten {
+.mediaInfoCriticRatingRotten {
     background-image: url(rotten.png);
 }
 
-.mediaInfoItem.timerIcon {
+.mediaInfoTimerIcon {
     color: #CB272A;
 }
 

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

@@ -42,12 +42,12 @@ define(['datetime', 'globalize', 'embyRouter', 'material-icons', 'css!./mediainf
 
         if (item.SeriesTimerId) {
             miscInfo.push({
-                html: '<i class="md-icon mediaInfoItem timerIcon">&#xE062;</i>'
+                html: '<i class="md-icon mediaInfoItem mediaInfoTimerIcon mediaInfoIconItem">&#xE062;</i>'
             });
         }
         else if (item.TimerId) {
             miscInfo.push({
-                html: '<i class="md-icon mediaInfoItem timerIcon">&#xE061;</i>'
+                html: '<i class="md-icon mediaInfoItem mediaInfoTimerIcon mediaInfoIconItem">&#xE061;</i>'
             });
         }
 
@@ -248,15 +248,15 @@ define(['datetime', 'globalize', 'embyRouter', 'material-icons', 'css!./mediainf
         html += getStarIconsHtml(item);
 
         if (item.HasSubtitles && options.subtitles !== false) {
-            html += '<i class="md-icon mediaInfoItem closedCaptionIcon">&#xE01C;</i>';
+            html += '<i class="md-icon mediaInfoItem closedCaptionIcon mediaInfoIconItem">&#xE01C;</i>';
         }
 
         if (item.CriticRating && options.criticRating !== false) {
 
             if (item.CriticRating >= 60) {
-                html += '<div class="mediaInfoItem criticRating criticRatingFresh">' + item.CriticRating + '</div>';
+                html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">' + item.CriticRating + '</div>';
             } else {
-                html += '<div class="mediaInfoItem criticRating criticRatingRotten">' + item.CriticRating + '</div>';
+                html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">' + item.CriticRating + '</div>';
             }
         }
 
@@ -325,7 +325,7 @@ define(['datetime', 'globalize', 'embyRouter', 'material-icons', 'css!./mediainf
         if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            html += '<i class="md-icon">&#xE838;</i>';
+            html += '<i class="md-icon starIcon">&#xE838;</i>';
             html += rating;
             html += '</div>';
         }

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

@@ -4,7 +4,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./s
 
         var tabIndex = canFocus ? '' : ' tabindex="-1"';
         autoFocus = autoFocus ? ' autofocus' : '';
-        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon">' + icon + '</i></button>';
+        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon promptExitIcon">' + icon + '</i></button>';
     }
 
     return function (options) {

dashboard-ui/bower_components/emby-webcomponents/prompt/style.css

@@ -11,26 +11,26 @@
     margin: 0 !important;
 }
 
-.promptDialog.fullscreen .promptDialogContent {
+.promptDialog-fullscreen .promptDialogContent {
     padding: 0;
     width: 50%;
 }
 
-.promptDialog.fullscreen .btnSubmit {
+.promptDialog-fullscreen .btnSubmit {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: center;
 }
 
-.promptDialog.fullscreen .btnPromptExit {
+.promptDialog-fullscreen .btnPromptExit {
     z-index: 1002;
     position: absolute;
     top: .5em;
     left: .5em;
 }
 
-    .promptDialog.fullscreen .btnPromptExit i {
+    .promptDialog-fullscreen .promptExitIcon {
         width: 4.4vh;
         height: 4.4vh;
         font-size: 4.4vh;

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

@@ -1,4 +1,4 @@
-.recordingDialog .btnSubmit .md-icon {
+.recordingDialogSubmitIcon {
     color: #cc3333;
 }
 

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html

@@ -108,7 +108,7 @@
                 </button>
             </div>
             <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus>
-                <i class="md-icon">fiber_manual_record</i>
+                <i class="md-icon recordingDialogSubmitIcon">fiber_manual_record</i>
                 <span>${Record}</span>
             </button>
         </div>

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html

@@ -33,7 +33,7 @@
             </div>
             <br />
             <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus>
-                <i class="md-icon">fiber_manual_record</i>
+                <i class="md-icon recordingDialogSubmitIcon">fiber_manual_record</i>
                 <span>${Save}</span>
             </button>
         </form>

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

@@ -1,3 +1,3 @@
-.subtitleEditorDialog .originalFileLabel {
+.originalSubtitleFileLabel {
     margin-right: 1em;
 }

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

@@ -422,7 +422,7 @@
             dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
             document.body.appendChild(dlg);
 
-            dlg.querySelector('.originalFileLabel').innerHTML = globalize.translate('sharedcomponents#File');
+            dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('sharedcomponents#File');
 
             dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
 

dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html

@@ -8,7 +8,7 @@
         <div class="subtitleList" style="margin-bottom:2em;"></div>
         <h1>${SearchForSubtitles}</h1>
 
-        <p style="margin: 1.5em 0;" class="originalFile"><span class="originalFileLabel dimText"></span><span class="pathValue"></span></p>
+        <p style="margin: 1.5em 0;" class="originalFile"><span class="originalSubtitleFileLabel dimText"></span><span class="pathValue"></span></p>
 
         <form class="subtitleSearchForm" style="max-width: none;">
             <div style="display: flex; align-items: center;">

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

@@ -20,7 +20,7 @@
     transform: translateY(200px);
 }
 
-    .toast.visible {
+.toastVisible {
     -webkit-transform: none;
     transform: none;
-    }
+}

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

@@ -11,7 +11,7 @@ define(['css!./toast'], function () {
 
         setTimeout(function () {
 
-            elem.classList.remove('visible');
+            elem.classList.remove('toastVisible');
             remove(elem);
 
         }, 3300);
@@ -32,7 +32,7 @@ define(['css!./toast'], function () {
         document.body.appendChild(elem);
 
         setTimeout(function () {
-            elem.classList.add('visible');
+            elem.classList.add('toastVisible');
 
             animateRemove(elem);
 

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

@@ -1,8 +1,7 @@
-
 .btnUserData {
     color: #aaa;
 }
 
-.btnUserDataOn, .btnUserDataOn i {
+.btnUserDataOn {
     color: #cc3333 !important;
 }

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

@@ -1,21 +1,29 @@
 define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-icons', 'emby-button', 'css!./userdatabuttons'], function (connectionManager, globalize) {
 
-    function getUserDataButtonHtml(method, itemId, iconCssClass, icon, tooltip, style) {
+    function getUserDataButtonHtml(method, itemId, buttonCssClass, iconCssClass, icon, tooltip, style) {
 
         if (style == 'fab-mini') {
             style = 'fab';
-            iconCssClass = iconCssClass ? (iconCssClass + ' mini') : 'mini';
+            buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
         }
 
         var is = style == 'fab' ? 'emby-button' : 'paper-icon-button-light';
         var className = style == 'fab' ? 'autoSize fab' : 'autoSize';
 
-        if (iconCssClass) {
+        if (buttonCssClass) {
-            className += ' ' + iconCssClass;
+            className += ' ' + buttonCssClass;
         }
 
+        if (iconCssClass) {
+            iconCssClass += ' ';
+        } else {
+            iconCssClass = '';
+        }
+
+        iconCssClass += 'md-icon';
+
         return '<button title="' + tooltip + '" data-itemid="' + itemId + '" is="' + is + '" class="' + className + '" onclick="UserDataButtons.' + method + '(this);return false;">\
-                <i class="md-icon">' + icon + '</i>\
+                <i class="'+ iconCssClass + '">' + icon + '</i>\
             </button>';
     }
 
@@ -45,15 +53,17 @@ define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-i
             btnCssClass += " " + cssClass;
         }
 
+        var iconCssClass = options.iconCssClass;
+
         if (includePlayed !== false) {
             var tooltipPlayed = globalize.translate('sharedcomponents#MarkPlayed');
 
             if (item.MediaType == 'Video' || item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.Type == 'Playlist') {
                 if (item.Type != 'TvChannel') {
                     if (userData.Played) {
-                        html += getUserDataButtonHtml('markPlayed', itemId, btnCssClass + ' btnUserDataOn', 'check', tooltipPlayed, style);
+                        html += getUserDataButtonHtml('markPlayed', itemId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
                     } else {
-                        html += getUserDataButtonHtml('markPlayed', itemId, btnCssClass, 'check', tooltipPlayed, style);
+                        html += getUserDataButtonHtml('markPlayed', itemId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
                     }
                 }
             }
@@ -78,9 +88,9 @@ define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-i
         var tooltipFavorite = globalize.translate('sharedcomponents#Favorite');
         if (userData.IsFavorite) {
 
-            html += getUserDataButtonHtml('markFavorite', itemId, btnCssClass + ' btnUserData btnUserDataOn', 'favorite', tooltipFavorite, style);
+            html += getUserDataButtonHtml('markFavorite', itemId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
         } else {
-            html += getUserDataButtonHtml('markFavorite', itemId, btnCssClass + ' btnUserData', 'favorite', tooltipFavorite, style);
+            html += getUserDataButtonHtml('markFavorite', itemId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
         }
 
         return html;

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

@@ -29,14 +29,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/iron-behaviors",
+  "homepage": "https://github.com/polymerelements/iron-behaviors",
   "_release": "1.0.17",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.17",
     "commit": "ef8e89b5f0aa4e8a6b51ca6491ea453bf395f94f"
   },
-  "_source": "git://github.com/PolymerElements/iron-behaviors.git",
+  "_source": "git://github.com/polymerelements/iron-behaviors.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-behaviors"
+  "_originalSource": "polymerelements/iron-behaviors"
 }

dashboard-ui/bower_components/polymer/polymer.html

@@ -775,7 +775,7 @@ prevent = dy > dx;
 prevent = dx > dy;
 }
 if (prevent) {
-//ev.preventDefault();
+ev.preventDefault();
 } else {
 Gestures.prevent('track');
 }

dashboard-ui/components/favoriteitems.js

@@ -38,7 +38,7 @@
             SortOrder: "Ascending",
             Filters: "IsFavorite",
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
             CollapseBoxSetItems: false,
             ExcludeLocationTypes: "Virtual",
             EnableTotalRecordCount: false

dashboard-ui/components/remotecontrol.js

@@ -399,7 +399,7 @@
             //    SortOrder: "Ascending",
             //    IncludeItemTypes: "Audio",
             //    Recursive: true,
-            //    Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
+            //    Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount",
             //    StartIndex: 0,
             //    ImageTypeLimit: 1,
             //    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",

dashboard-ui/css/librarymenu.css

@@ -223,7 +223,6 @@
 .dashboardDocument .viewMenuBar {
     background-color: #333;
     height: auto;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
     .dashboardDocument .viewMenuBar .primaryIcons {

dashboard-ui/css/nowplayingbar.css

@@ -66,7 +66,7 @@
     will-change: transform;
     contain: layout style;
     height: 100%;
-    transform: translateY(-70px);
+    transform: translateY(-64px);
 }
 
 .hiddenNowPlayingBar .nowPlayingBar {
@@ -87,15 +87,15 @@
 }
 
     .mediaButton i {
-        height: 40px;
+        height: auto;
-        width: 40px;
+        width: auto;
-        font-size: 40px;
+        font-size: 36px;
     }
 
     .mediaButton.remoteControlButton i, .mediaButton.muteButton i, .mediaButton.unmuteButton i, .mediaButton.castButton i, .mediaButton.infoButton i {
-        height: 28px;
+        height: auto;
-        width: 28px;
+        width: auto;
-        font-size: 28px;
+        font-size: 24px;
     }
 
 .nowPlayingImage {
@@ -109,12 +109,12 @@
     }
 
      .nowPlayingImage img {
-        height: 70px;
+        height: 64px;
     }
 
         .nowPlayingBar .nowPlayingImage {
-            width: 70px;
+            width: 64px;
-            height: 70px;
+            height: 64px;
             background-position: center center;
             background-repeat: no-repeat;
             background-size: contain;
@@ -168,7 +168,7 @@
 .nowPlayingBarCenter {
     vertical-align: middle;
     text-align: center;
-    margin-top: 7px;
+    margin-top: 6px;
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
     position: absolute;
@@ -179,7 +179,7 @@
 
 .nowPlayingBarPositionContainer {
     position: absolute !important;
-    left: 70px;
+    left: 64px;
     top: -8px;
     right: 0;
     z-index: 1;

dashboard-ui/scripts/channelitems.js

@@ -11,7 +11,7 @@
                 query: {
                     SortBy: "",
                     SortOrder: "Ascending",
-                    Fields: "PrimaryImageAspectRatio,SyncInfo",
+                    Fields: "PrimaryImageAspectRatio",
                     StartIndex: 0,
                     Limit: LibraryBrowser.getDefaultPageSize()
                 }

dashboard-ui/scripts/episodes.js

@@ -18,7 +18,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Episode",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,UserData,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,UserData",
                         IsMissing: false,
                         IsVirtualUnaired: false,
                         ImageTypeLimit: 1,

dashboard-ui/scripts/homenextup.js

@@ -5,7 +5,7 @@
         var query = {
 
             Limit: 24,
-            Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo",
             UserId: Dashboard.getCurrentUserId(),
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Thumb"

dashboard-ui/scripts/homeupcoming.js

@@ -7,7 +7,7 @@
         var query = {
 
             Limit: 40,
-            Fields: "AirTime,UserData,SyncInfo",
+            Fields: "AirTime,UserData",
             UserId: Dashboard.getCurrentUserId(),
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Banner,Thumb",

dashboard-ui/scripts/itembynamedetailpage.js

@@ -299,7 +299,7 @@
             SortOrder: "Ascending",
             IncludeItemTypes: "",
             Recursive: true,
-            Fields: "AudioInfo,SeriesInfo,ParentId,PrimaryImageAspectRatio,SyncInfo",
+            Fields: "AudioInfo,SeriesInfo,ParentId,PrimaryImageAspectRatio,BasicSyncInfo",
             Limit: LibraryBrowser.getDefaultPageSize(),
             StartIndex: 0,
             CollapseBoxSetItems: false

dashboard-ui/scripts/itemdetailpage.js

@@ -873,7 +873,7 @@
         var options = {
             userId: Dashboard.getCurrentUserId(),
             limit: 8,
-            fields: "PrimaryImageAspectRatio,UserData,SyncInfo,CanDelete"
+            fields: "PrimaryImageAspectRatio,UserData,CanDelete"
         };
 
         if (item.Type == 'MusicAlbum' && item.AlbumArtists && item.AlbumArtists.length) {
@@ -1554,7 +1554,7 @@
             SortOrder: "Ascending",
             IncludeItemTypes: "MusicVideo",
             Recursive: true,
-            Fields: "DateCreated,SyncInfo,CanDelete",
+            Fields: "DateCreated,CanDelete",
             Albums: item.Name
 
         }).then(function (result) {

dashboard-ui/scripts/itemlistpage.js

@@ -14,7 +14,7 @@
                     query: {
                         SortBy: "IsFolder,SortName",
                         SortOrder: "Ascending",
-                        Fields: "DateCreated,PrimaryImageAspectRatio,MediaSourceCount,SyncInfo",
+                        Fields: "DateCreated,PrimaryImageAspectRatio,MediaSourceCount",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,

dashboard-ui/scripts/moviecollections.js

@@ -18,7 +18,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "BoxSet",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,SortName",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,

dashboard-ui/scripts/moviegenres.js

@@ -16,7 +16,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Movie",
                         Recursive: true,
-                        Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
+                        Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
                         StartIndex: 0
                     },
                     view: libraryBrowser.getSavedView(key) || 'Thumb'
@@ -62,7 +62,7 @@
                         itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,
@@ -75,7 +75,7 @@
                         itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,
@@ -86,7 +86,7 @@
                     cardBuilder.buildCards(result.Items, {
                         itemsContainer: elem,
                         shape: "auto",
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,
@@ -97,7 +97,7 @@
                     cardBuilder.buildCards(result.Items, {
                         itemsContainer: elem,
                         shape: "auto",
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,

dashboard-ui/scripts/movies.js

@@ -18,7 +18,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Movie",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,BasicSyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,

dashboard-ui/scripts/moviesrecommended.js

@@ -18,7 +18,7 @@
 
             IncludeItemTypes: "Movie",
             Limit: 18,
-            Fields: "PrimaryImageAspectRatio,MediaSourceCount,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo",
             ParentId: parentId,
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
@@ -49,7 +49,7 @@
             Filters: "IsResumable",
             Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1600 ? 4 : 3),
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,MediaSourceCount,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo",
             CollapseBoxSetItems: false,
             ParentId: parentId,
             ImageTypeLimit: 1,
@@ -131,7 +131,7 @@
             userId: userId,
             categoryLimit: 6,
             ItemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 6 : 5)),
-            Fields: "PrimaryImageAspectRatio,MediaSourceCount,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo",
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
         });

dashboard-ui/scripts/musicalbums.js

@@ -18,7 +18,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "MusicAlbum",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,

dashboard-ui/scripts/musicartists.js

@@ -16,7 +16,7 @@
                         SortBy: "SortName",
                         SortOrder: "Ascending",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,DateCreated,SyncInfo,ItemCounts",
+                        Fields: "PrimaryImageAspectRatio,SortName,DateCreated,ItemCounts",
                         StartIndex: 0,
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",

dashboard-ui/scripts/musicfolders.js

@@ -15,7 +15,7 @@
                     query: {
                         SortBy: "SortName",
                         SortOrder: "Ascending",
-                        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,SortName",
                         StartIndex: 0,
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",

dashboard-ui/scripts/musicgenres.js

@@ -16,7 +16,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Audio,MusicAlbum",
                         Recursive: true,
-                        Fields: "DateCreated,SyncInfo,ItemCounts",
+                        Fields: "DateCreated,ItemCounts",
                         StartIndex: 0
                     },
                     view: libraryBrowser.getSavedView(key) || 'PosterCard'

dashboard-ui/scripts/musicrecommended.js

@@ -61,7 +61,7 @@
             IncludeItemTypes: "Audio",
             Limit: itemsPerRow(),
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,AudioInfo,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,AudioInfo",
             Filters: "IsPlayed",
             ParentId: parentId,
             ImageTypeLimit: 1,
@@ -107,7 +107,7 @@
             IncludeItemTypes: "Audio",
             Limit: itemsPerRow(),
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,AudioInfo,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,AudioInfo",
             Filters: "IsPlayed",
             ParentId: parentId,
             ImageTypeLimit: 1,
@@ -152,7 +152,7 @@
             SortOrder: "Ascending",
             IncludeItemTypes: "Playlist",
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete",
             StartIndex: 0,
             Limit: itemsPerRow(),
             EnableTotalRecordCount: false

dashboard-ui/scripts/nowplayingbar.js

@@ -75,7 +75,7 @@
         return html;
     }
 
-    var translateY = '-70px';
+    var translateY = '-64px';
     function slideDown(elem) {
 
         if (elem.classList.contains('hide')) {

dashboard-ui/scripts/photos.js

@@ -13,7 +13,7 @@
                 query: {
                     SortBy: "IsFolder,SortName",
                     SortOrder: "Ascending",
-                    Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                    Fields: "PrimaryImageAspectRatio,SortName",
                     ImageTypeLimit: 1,
                     EnableImageTypes: "Primary",
                     StartIndex: 0,

dashboard-ui/scripts/playlistedit.js

@@ -8,7 +8,7 @@
         if (!pageData) {
             pageData = data[key] = {
                 query: {
-                    Fields: "PrimaryImageAspectRatio,SyncInfo",
+                    Fields: "PrimaryImageAspectRatio",
                     EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                     StartIndex: 0,
                     Limit: 200

dashboard-ui/scripts/playlists.js

@@ -14,7 +14,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Playlist",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete",
                         StartIndex: 0,
                         Limit: LibraryBrowser.getDefaultPageSize()
                     },

dashboard-ui/scripts/secondaryitems.js

@@ -39,7 +39,7 @@
                         SortBy: "SortName",
                         SortOrder: "Ascending",
                         Recursive: params.recursive !== 'false',
-                        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,

dashboard-ui/scripts/songs.js

@@ -17,7 +17,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Audio",
                         Recursive: true,
-                        Fields: "AudioInfo,ParentId,SyncInfo",
+                        Fields: "AudioInfo,ParentId",
                         Limit: 100,
                         StartIndex: 0,
                         ImageTypeLimit: 1,

dashboard-ui/scripts/tvgenres.js

@@ -16,7 +16,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Series",
                         Recursive: true,
-                        Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
+                        Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
                         StartIndex: 0
                     },
                     view: libraryBrowser.getSavedView(key) || 'Thumb'
@@ -62,7 +62,7 @@
                         itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,
@@ -75,7 +75,7 @@
                         itemsContainer: elem,
                         shape: "backdrop",
                         preferThumb: true,
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,
@@ -86,7 +86,7 @@
                     cardBuilder.buildCards(result.Items, {
                         itemsContainer: elem,
                         shape: "auto",
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,
@@ -97,7 +97,7 @@
                     cardBuilder.buildCards(result.Items, {
                         itemsContainer: elem,
                         shape: "auto",
-                        showTitle: false,
+                        showTitle: true,
                         scalable: true,
                         showItemCounts: true,
                         centerText: true,

dashboard-ui/scripts/tvlatest.js

@@ -17,7 +17,7 @@
 
             IncludeItemTypes: "Episode",
             Limit: 30,
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
             ParentId: parentId,
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Thumb"

dashboard-ui/scripts/tvrecommended.js

@@ -17,7 +17,7 @@
             var query = {
 
                 Limit: 24,
-                Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,SyncInfo",
+                Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo",
                 UserId: Dashboard.getCurrentUserId(),
                 ImageTypeLimit: 1,
                 EnableImageTypes: "Primary,Backdrop,Thumb"
@@ -72,7 +72,7 @@
                 Filters: "IsResumable",
                 Limit: limit,
                 Recursive: true,
-                Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData,SyncInfo",
+                Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData,BasicSyncInfo",
                 ExcludeLocationTypes: "Virtual",
                 ParentId: parentId,
                 ImageTypeLimit: 1,

dashboard-ui/scripts/tvshows.js

@@ -18,7 +18,7 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Series",
                         Recursive: true,
-                        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,SortName",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,

dashboard-ui/scripts/tvupcoming.js

@@ -7,7 +7,7 @@
         var query = {
 
             Limit: 40,
-            Fields: "AirTime,UserData,SyncInfo",
+            Fields: "AirTime,UserData",
             UserId: Dashboard.getCurrentUserId(),
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Backdrop,Banner,Thumb",