update components

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.128",
+  "version": "1.4.129",
-  "_release": "1.4.128",
+  "_release": "1.4.129",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.128",
+    "tag": "1.4.129",
-    "commit": "75f2667ad68265aa1f8c28127bbbeacfc22a21a6"
+    "commit": "9b0a80ee4591676e9cf52e2a493c5752ef1f9dee"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

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

@@ -10,12 +10,23 @@
     outline: none !important;
     cursor: pointer;
     contain: style;
+    flex-shrink: 0;
 }
 
-.verticalItemsContainer .card {
+.itemsContainer {
-    contain: layout style;
+    display: flex;
 }
 
+.verticalItemsContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+    .verticalItemsContainer .card {
+        contain: layout style;
+    }
+
 .card, .card:focus {
     font-weight: inherit !important;
 }
@@ -34,15 +45,11 @@ button.card {
     padding-bottom: 56.25%;
 }
 
-.squareCard .cardPadder {
+.squareCard .cardPadder, .overflowSquareCard .cardPadder {
     padding-bottom: 100%;
 }
 
-.letterBoxCard .cardPadder {
+.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
-    padding-bottom: 75%;
-}
-
-.portraitCard .cardPadder {
     padding-bottom: 150%;
 }
 
@@ -61,6 +68,10 @@ button.card {
     overflow: hidden;
 }
 
+button.cardContent {
+    display: block;
+}
+
 .round .cardBox {
     border: .7em solid transparent;
 }
@@ -146,7 +157,21 @@ button.card {
 }
 
 .cardFooter {
-    padding: .25em .25em;
+    padding: .5em .3em;
+}
+
+    .cardFooter .cardText + .cardText {
+        opacity: .6;
+    }
+
+.card:not(.round) .cardFooter {
+    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #222326;
 }
 
 .innerCardFooter {
@@ -165,16 +190,12 @@ button.card {
 }
 
 .cardText {
-    padding: .25em .35em;
+    padding: .35em .35em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-    .cardText + .cardText {
-        padding-top: .1em;
-    }
-
 .cardText {
     color: inherit;
 }
@@ -215,6 +236,250 @@ button.card {
     align-items: center;
 }
 
+.cardOverlayButton {
+    color: #fff !important;
+    background-color: rgba(0,0,0,.7) !important;
+    border-radius: 500px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 0 .25em .25em 0;
+}
+
+    .cardOverlayButton:hover {
+        background-color: rgba(0,0,0,.9) !important;
+        transition: background-color .5s ease-out;
+    }
+
 .emptyCardImageContainer {
     font-size: 90%;
 }
+
+.scalableCard.personCard {
+    width: 14.285714285714285714285714285714%;
+}
+
+.scalableCard.backdropCard {
+    width: 100%;
+}
+
+.scalableCard.squareCard {
+    width: 50%;
+}
+
+.scalableCard.portraitCard {
+    width: 33.333333333333333333333333333333%;
+}
+
+.scalableCard.overflowPortraitCard {
+    width: 40%;
+    max-width: 200px;
+}
+
+.scalableCard.overflowBackdropCard {
+    width: 84%;
+    max-width: 400px;
+}
+
+.scalableCard.overflowSquareCard {
+    width: 42%;
+}
+
+@media all and (max-width: 420px) {
+
+    .scalableCard.backdropCard {
+        width: 100% !important;
+    }
+}
+
+@media all and (min-width: 500px) {
+
+    .scalableCard.smallBackdropCard {
+        width: 33.333333333333333333333333333333%;
+    }
+
+    .scalableCard.squareCard {
+        width: 33.333333333333333333333333333333%;
+    }
+}
+
+@media all and (min-width: 640px) {
+
+    .scalableCard.portraitCard {
+        width: 25%;
+    }
+
+    .scalableCard.overflowPortraitCard {
+        width: 36%;
+    }
+
+    .scalableCard.overflowBackdropCard {
+        width: 60%;
+    }
+
+    .scalableCard.overflowSquareCard {
+        width: 30%;
+    }
+}
+
+@media all and (min-width: 700px) {
+    .scalableCard.squareCard {
+        width: 25%;
+    }
+}
+
+@media all and (min-width: 770px) {
+    .scalableCard.backdropCard {
+        width: 33.333333333333333333333333333333%;
+    }
+}
+
+@media all and (min-width: 800px) {
+
+    .scalableCard.bannerCard {
+        width: 50%;
+    }
+
+    .scalableCard.portraitCard {
+        width: 20%;
+    }
+
+    .scalableCard.smallBackdropCard {
+        width: 25%;
+    }
+}
+
+
+@media all and (min-width: 900px) {
+
+    .scalableCard.squareCard {
+        width: 20%;
+    }
+}
+
+@media all and (min-width: 1000px) {
+
+
+    .scalableCard.smallBackdropCard {
+        width: 20%;
+    }
+
+    .scalableCard.overflowPortraitCard {
+        width: 23%;
+    }
+
+    .scalableCard.overflowBackdropCard {
+        width: 40%;
+    }
+
+    .scalableCard.overflowSquareCard {
+        width: 22%;
+    }
+}
+
+@media all and (min-width: 1200px) {
+
+    .scalableCard.backdropCard {
+        width: 25%;
+    }
+
+    .scalableCard.squareCard {
+        width: 16.666666666666666666666666666667%;
+    }
+
+    .scalableCard.bannerCard {
+        width: 33.333333333333333333333333333333%;
+    }
+
+    .scalableCard.portraitCard {
+        width: 16.666666666666666666666666666667%;
+    }
+
+    .scalableCard.smallBackdropCard {
+        width: 16.666666666666666666666666666667%;
+    }
+}
+
+
+@media all and (min-width: 1400px) {
+
+    .scalableCard.squareCard {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .scalableCard.portraitCard {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .scalableCard.smallBackdropCard {
+        width: 14.285714285714285714285714285714%;
+    }
+}
+
+
+@media all and (min-width: 1600px) {
+
+    .scalableCard.scalableCard.portraitCard {
+        width: 12.5%;
+    }
+
+    .scalableCard.scalableCard.smallBackdropCard {
+        width: 12.5%;
+    }
+}
+
+@media all and (min-width: 1800px) {
+
+    .scalableCard.squareCard {
+        width: 12.5%;
+    }
+
+    .scalableCard.smallBackdropCard {
+        width: 10%;
+    }
+}
+
+@media all and (min-width: 2100px) {
+
+    .scalableCard.squareCard {
+        width: 11.111111111111111111111111111111%;
+    }
+
+    .scalableCard.backdropCard {
+        width: 20%;
+    }
+
+    .scalableCard.portraitCard {
+        width: 11.111111111111111111111111111111%;
+    }
+}
+
+@media all and (min-width: 2200px) {
+
+    .scalableCard.bannerCard {
+        width: 25%;
+    }
+
+    .scalableCard.portraitCard {
+        width: 10%;
+    }
+}
+
+@media all and (min-width: 2500px) {
+
+    .scalableCard.backdropCard {
+        width: 16.666666666666666666666666666667%;
+    }
+}
+
+.layout-tv .scalableCard.backdropCard {
+    width: 25%;
+}
+
+.layout-tv .scalableCard.squareCard {
+    width: 16.66666666666666667%;
+}
+
+.layout-tv .scalableCard.portraitCard {
+    width: 16.66666666666666667%;
+}

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

@@ -1,82 +1,7 @@
-define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'emby-button', 'css!./card'],
+define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'browser', 'layoutManager', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
-    function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize) {
+    function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, browser, layoutManager) {
 
-        function setShapeHorizontal(items, options) {
+        function getCardsHtml(items, options) {
-
-            var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items) || 0;
-
-            if (primaryImageAspectRatio && primaryImageAspectRatio < .85) {
-                options.shape = 'portraitCard';
-
-                if (options.rows !== 0) {
-                    options.rows = 2;
-                }
-            }
-            else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.34) {
-                options.shape = 'backdropCard';
-
-                if (options.rows !== 0) {
-                    options.rows = 3;
-                }
-            }
-            else {
-                options.shape = 'squareCard';
-
-                if (options.rows !== 0) {
-                    options.rows = 3;
-                }
-            }
-        }
-
-        function setShapeVertical(items, options) {
-
-            var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items) || 0;
-
-            if (options.preferThumb) {
-                options.shape = 'backdropCard';
-            }
-            else if (primaryImageAspectRatio && primaryImageAspectRatio < .85) {
-                options.shape = 'portraitCard';
-            }
-            else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.34) {
-                options.shape = 'backdropCard';
-            }
-            else {
-                options.shape = 'squareCard';
-            }
-        }
-
-        function setWidth(isVertical, options) {
-
-            if (options.width) {
-                return;
-            }
-
-            if (isVertical) {
-                if (options.shape == 'backdropCard') {
-                    options.width = options.thumbWidth;
-                }
-                else if (options.shape == 'portraitCard') {
-                    options.width = options.portraitWidth;
-                }
-                else if (options.shape == 'squareCard') {
-                    options.width = options.squareWidth;
-                }
-            }
-            else {
-                if (options.shape == 'backdropCard') {
-                    options.width = 500;
-                }
-                else if (options.shape == 'portraitCard') {
-                    options.width = 243;
-                }
-                else if (options.shape == 'squareCard') {
-                    options.width = 242;
-                }
-            }
-        }
-
-        function buildCardsHtml(items, options) {
 
             var apiClient = connectionManager.currentApiClient();
 
@@ -85,19 +10,136 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             return html;
         }
 
+        function getPostersPerRow(shape, screenWidth) {
+
+            switch (shape) {
+
+                case 'portrait':
+                    if (screenWidth >= 2200) return 10;
+                    if (screenWidth >= 2100) return 9;
+                    if (screenWidth >= 1600) return 8;
+                    if (screenWidth >= 1400) return 7;
+                    if (screenWidth >= 1200) return 6;
+                    if (screenWidth >= 800) return 5;
+                    if (screenWidth >= 640) return 4;
+                    return 3;
+                case 'square':
+                    if (screenWidth >= 2100) return 9;
+                    if (screenWidth >= 1800) return 8;
+                    if (screenWidth >= 1400) return 7;
+                    if (screenWidth >= 1200) return 6;
+                    if (screenWidth >= 900) return 5;
+                    if (screenWidth >= 700) return 4;
+                    if (screenWidth >= 500) return 3;
+                    return 2;
+                case 'banner':
+                    if (screenWidth >= 2200) return 4;
+                    if (screenWidth >= 1200) return 3;
+                    if (screenWidth >= 800) return 2;
+                    return 1;
+                case 'backdrop':
+                    if (screenWidth >= 2500) return 6;
+                    if (screenWidth >= 2100) return 5;
+                    if (screenWidth >= 1200) return 4;
+                    if (screenWidth >= 770) return 3;
+                    if (screenWidth >= 420) return 2;
+                    return 1;
+                case 'smallBackdrop':
+                    if (screenWidth >= 1440) return 8;
+                    if (screenWidth >= 1100) return 6;
+                    if (screenWidth >= 800) return 5;
+                    if (screenWidth >= 600) return 4;
+                    if (screenWidth >= 540) return 3;
+                    if (screenWidth >= 420) return 2;
+                    return 1;
+                case 'overflowPortrait':
+                    if (screenWidth >= 1000) return 100 / 23;
+                    if (screenWidth >= 640) return 100 / 36;
+                    return 2.5;
+                case 'overflowSquare':
+                    if (screenWidth >= 1000) return 100 / 22;
+                    if (screenWidth >= 640) return 100 / 30;
+                    return 100 / 42;
+                case 'overflowBackdrop':
+                    if (screenWidth >= 1000) return 100 / 40;
+                    if (screenWidth >= 640) return 100 / 60;
+                    return 100 / 84;
+                default:
+                    return 4;
+            }
+        }
+
+        var shapes = ['square', 'portrait', 'banner', 'smallBackdrop', 'backdrop', 'overflowBackdrop', 'overflowPortrait', 'overflowSquare'];
+        function getImageWidth(shape) {
+
+            var screenWidth = window.innerWidth;
+            var imagesPerRow = getPostersPerRow(shape, screenWidth);
+
+            var shapeWidth = screenWidth / imagesPerRow;
+
+            return Math.round(shapeWidth);
+        }
+
+        function setCardData(items, options) {
+
+            options.shape = options.shape || "auto";
+
+            var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
+
+            var isThumbAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.777777778) < .3;
+            var isSquareAspectRatio = primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1) < .33 ||
+                primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 1.3333334) < .01;
+
+            if (options.shape == 'auto' || options.shape == 'autohome' || options.shape == 'autooverflow' || options.shape == 'autoVertical') {
+
+                if (options.preferThumb || isThumbAspectRatio) {
+                    options.shape = options.shape == 'autooverflow' ? 'overflowBackdrop' : 'backdrop';
+                } else if (isSquareAspectRatio) {
+                    options.coverImage = true;
+                    options.shape = options.shape == 'autooverflow' ? 'overflowSquare' : 'square';
+                } else if (primaryImageAspectRatio && primaryImageAspectRatio > 1.9) {
+                    options.shape = 'banner';
+                    options.coverImage = true;
+                } else if (primaryImageAspectRatio && Math.abs(primaryImageAspectRatio - 0.6666667) < .2) {
+                    options.shape = options.shape == 'autooverflow' ? 'overflowPortrait' : 'portrait';
+                } else {
+                    options.shape = options.defaultShape || (options.shape == 'autooverflow' ? 'overflowSquare' : 'square');
+                }
+            }
+
+            options.uiAspect = getDesiredAspect(options.shape);
+            options.primaryImageAspectRatio = primaryImageAspectRatio;
+
+            if (!options.width && options.widths) {
+                options.width = options.widths[options.shape];
+            }
+
+            if (options.rows && typeof (options.rows) !== 'number') {
+                options.rows = options.rows[options.shape];
+            }
+
+            if (options.shape == 'backdrop') {
+                options.width = options.width || 500;
+            }
+            else if (options.shape == 'portrait') {
+                options.width = options.width || 243;
+            }
+            else if (options.shape == 'square') {
+                options.width = options.width || 243;
+            }
+
+            options.width = options.width || getImageWidth(options.shape);
+        }
+
         function buildCardsHtmlInternal(items, apiClient, options) {
 
             var isVertical;
 
             if (options.shape == 'autoVertical') {
                 isVertical = true;
-                setShapeVertical(items, options);
-            }
-            else if (options.shape == 'auto') {
-                setShapeHorizontal(items, options);
             }
 
-            setWidth(isVertical, options);
+            setCardData(items, options);
 
             if (options.indexBy == 'Genres') {
                 return buildCardsByGenreHtmlInternal(items, apiClient, options);
@@ -106,7 +148,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var className = 'card';
 
             if (options.shape) {
-                className += ' ' + options.shape;
+                className += ' ' + options.shape + 'Card';
             }
 
             var html = '';
@@ -116,6 +158,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var hasOpenRow;
             var hasOpenSection;
 
+            var sectionTitleTagName = options.sectionTitleTagName || 'div';
+
             for (var i = 0, length = items.length; i < length; i++) {
 
                 var item = items[i];
@@ -169,11 +213,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                         } else {
                             html += '<div class="horizontalSection">';
                         }
-                        if (isVertical) {
+                        html += '<' + sectionTitleTagName + ' class="sectionTitle">' + newIndexValue + '</' + sectionTitleTagName + '>';
-                            html += '<h2>' + newIndexValue + '</h2>';
-                        } else {
-                            html += '<div class="sectionTitle">' + newIndexValue + '</div>';
-                        }
                         if (isVertical) {
                             html += '<div class="itemsContainer verticalItemsContainer">';
                         }
@@ -225,7 +265,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var className = 'card';
 
             if (options.shape) {
-                className += ' ' + options.shape;
+                className += ' ' + options.shape + 'Card';
             }
 
             var html = '';
@@ -522,7 +562,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
         function buildCard(index, item, apiClient, options, className) {
 
-            className += " itemAction";
+            var action = options.action || 'link';
+
+            if (layoutManager.tv) {
+                className += " itemAction";
+            }
 
             if (options.scalable) {
                 className += " scalableCard";
@@ -552,11 +596,25 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             // cardBox can be it's own separate element if an outer footer is ever needed
             var cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
-            var cardImageContainerClose = '</div>';
+            var cardImageContainerClose = '';
+            var cardBoxClose = '</div>';
+            var cardContentClose = '';
+            var cardScalableClose = '';
 
             if (separateCardBox) {
-                cardImageContainerOpen = '<div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div><div class="cardContent">' + cardImageContainerOpen;
+                var cardContentOpen;
-                cardImageContainerClose += '</div></div></div>';
+
+                if (layoutManager.tv) {
+                    cardContentOpen = '<div class="cardContent">';
+                    cardContentClose = '</div>';
+                } else {
+                    cardContentOpen = '<button type="button" class="clearButton cardContent itemAction" data-action="' + action + '">';
+                    cardContentClose = '</button>';
+                }
+                cardImageContainerOpen = '<div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
+                cardBoxClose = '</div>';
+                cardScalableClose = '</div>';
+                cardImageContainerClose = '</div>';
             }
 
             var indicatorsHtml = '';
@@ -585,6 +643,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
             }
 
+            var enableOuterFooter = options.overlayText === false;
             var nameHtml = '';
 
             if (showParentTitle) {
@@ -600,23 +659,39 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var progressHtml = indicators.getProgressBarHtml(item);
 
             if (progressHtml) {
-                nameHtml += progressHtml;
                 innerCardFooterClass += " fullInnerCardFooter";
             }
 
             var innerCardFooter = '';
 
-            if (nameHtml && imgUrl) {
+            if (imgUrl && (progressHtml || (nameHtml && !enableOuterFooter))) {
                 innerCardFooter += '<div class="' + innerCardFooterClass + '">';
-                innerCardFooter += nameHtml;
+
+                if (!enableOuterFooter) {
+                    innerCardFooter += nameHtml;
+                }
+                innerCardFooter += progressHtml;
                 innerCardFooter += '</div>';
             }
 
-            var data = '';
+            var outerCardFooter = '';
+            if (nameHtml && enableOuterFooter) {
+                outerCardFooter += '<div class="cardFooter">';
+                outerCardFooter += nameHtml;
+                outerCardFooter += '</div>';
+            }
 
-            var action = options.action || 'link';
+            var overlayButtons = '';
+            if (!layoutManager.tv) {
+                if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
+                    overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="playmenu" onclick="return false;"><i class="md-icon">play_arrow</i></button>';
+                }
+                if (options.overlayMoreButton) {
+                    overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">more_vert</i></button>';
+                }
+            }
 
-            var tagName = 'button';
+            var tagName = layoutManager.tv ? 'button' : 'div';
 
             var prefix = (item.SortName || item.Name || '')[0];
 
@@ -636,9 +711,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
             var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
 
+            var actionAttribute = layoutManager.tv ? (' data-action="' + action + '"') : '';
+
             return '\
-<' + tagName + ' data-index="' + index + '"' + timerAttributes + ' data-action="' + action + '" data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '"' + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
+<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '"' + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
-' + cardImageContainerOpen + innerCardFooter + data + cardImageContainerClose + '\
+' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
 </' + tagName + '>';
         }
 
@@ -829,7 +906,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
         }
 
         return {
-            buildCardsHtml: buildCardsHtml,
+            getCardsHtml: getCardsHtml,
             buildCards: buildCards,
             onUserDataChanged: onUserDataChanged
         };

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

@@ -1,6 +1,7 @@
 .itemProgressBar {
     background: rgba(0,0,0,.5);
     position: relative;
+    height: .7vh;
 }
 
 .itemProgressBarForeground {