update shared components

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

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

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

@@ -0,0 +1,220 @@
+.card {
+    text-transform: none;
+    background-color: transparent !important;
+    background: none !important;
+    margin: 0;
+    padding: 0;
+    display: block;
+    color: inherit !important;
+    box-shadow: none !important;
+    outline: none !important;
+    cursor: pointer;
+    contain: style;
+}
+
+.verticalItemsContainer .card {
+    contain: layout style;
+}
+
+.card, .card:focus {
+    font-weight: inherit !important;
+}
+
+button.card {
+    border: 0 !important;
+    font-size: inherit !important;
+    font-family: inherit !important;
+}
+
+.cardScalable {
+    position: relative;
+}
+
+.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
+    padding-bottom: 56.25%;
+}
+
+.squareCard .cardPadder {
+    padding-bottom: 100%;
+}
+
+.letterBoxCard .cardPadder {
+    padding-bottom: 75%;
+}
+
+.portraitCard .cardPadder {
+    padding-bottom: 150%;
+}
+
+.bannerCard .cardPadder {
+    padding-bottom: 18.5%;
+}
+
+.card .cardBox {
+    padding: 0 !important;
+    margin: 0;
+    transition: none !important;
+    border-radius: 0 !important;
+    border: 3px solid transparent;
+    will-change: transform;
+    /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
+    overflow: hidden;
+}
+
+.round .cardBox {
+    border: .7em solid transparent;
+}
+
+.round .cardImageContainer {
+    border: .15em solid transparent;
+}
+
+.card:focus {
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+    .card:focus .cardBox {
+        border-color: transparent;
+    }
+
+.cardImageContainer, .round:focus .cardImageContainer {
+    border-color: #fff;
+}
+
+.round .cardBox {
+    transition: transform 180ms ease-out !important;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+}
+
+.layout-tv .round:focus .cardBox {
+    transform: scale(1.34, 1.34);
+}
+
+/*.card[focused]:not(.noScale) .cardBox, .card:focus:not(.noScale) .cardBox {
+    animation:SHW .2s;
+    animation-fill-mode: both;
+}*/
+
+.dimunselected .card .cardImageContainer {
+    -webkit-filter: brightness(50%);
+    filter: brightness(50%);
+    transition: filter, -webkit-filter 600ms ease-out !important;
+}
+
+.dimunselected .card:focus .cardImageContainer {
+    -webkit-filter: initial;
+    filter: initial;
+    transition: filter, -webkit-filter 600ms ease-out !important;
+}
+
+.cardImageContainer {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    display: -ms-flex;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background-clip: content-box !important;
+}
+
+.scalableCard .cardImageContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto !important;
+    height: auto !important;
+}
+
+.round .cardImageContainer, .round .cardImage {
+    border-radius: 1000px;
+}
+
+.cardImage.coveredImage, .cardImageContainer.coveredImage, .coveredImage .cardImage {
+    background-size: 100% 100%;
+    background-position: center center;
+}
+
+.coveredImage.noScale, .coveredImage.noScale .cardImage {
+    background-size: cover;
+}
+
+.cardFooter {
+    padding: .25em .25em;
+}
+
+.innerCardFooter {
+    background: rgba(0,0,0,.7);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: left;
+    z-index: 1;
+    overflow: hidden;
+    max-width: 100%;
+}
+
+.fullInnerCardFooter {
+    right: 0;
+}
+
+.cardText {
+    padding: .25em .35em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+    .cardText + .cardText {
+        padding-top: .1em;
+    }
+
+.cardText {
+    color: inherit;
+}
+
+.innerCardFooter .cardText, .cardImageContainer .cardText {
+    color: #fff;
+}
+
+.cardCenteredText {
+    white-space: normal;
+}
+
+.cardImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+}
+
+.cardImageIcon {
+    width: 12vh;
+    height: 12vh;
+    font-size: 12vh;
+    color: #fff;
+    position: relative;
+    top: -8%;
+}
+
+.card .indicators {
+    right: .5vh;
+    top: .5vh;
+    position: absolute;
+    display: flex;
+    align-items: center;
+}
+
+.emptyCardImageContainer {
+    font-size: 90%;
+}

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

@@ -0,0 +1,836 @@
+define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'emby-button', 'css!./card'],
+    function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize) {
+
+        function setShapeHorizontal(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();
+
+            var html = buildCardsHtmlInternal(items, apiClient, options);
+
+            return html;
+        }
+
+        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);
+
+            if (options.indexBy == 'Genres') {
+                return buildCardsByGenreHtmlInternal(items, apiClient, options);
+            }
+
+            var className = 'card';
+
+            if (options.shape) {
+                className += ' ' + options.shape;
+            }
+
+            var html = '';
+            var itemsInRow = 0;
+
+            var currentIndexValue;
+            var hasOpenRow;
+            var hasOpenSection;
+
+            for (var i = 0, length = items.length; i < length; i++) {
+
+                var item = items[i];
+
+                if (options.indexBy) {
+                    var newIndexValue = '';
+
+                    if (options.indexBy == 'PremiereDate') {
+                        if (item.PremiereDate) {
+                            try {
+
+                                newIndexValue = getDisplayDateText(datetime.parseISO8601Date(item.PremiereDate));
+
+                            } catch (err) {
+                            }
+                        }
+                    }
+
+                    else if (options.indexBy == 'Genres') {
+                        newIndexValue = item.Name;
+                    }
+
+                    else if (options.indexBy == 'ProductionYear') {
+                        newIndexValue = item.ProductionYear;
+                    }
+
+                    else if (options.indexBy == 'CommunityRating') {
+                        newIndexValue = item.CommunityRating ? (Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= .5 ? .5 : 0)) + '+' : null;
+                    }
+
+                    if (newIndexValue != currentIndexValue) {
+
+                        if (hasOpenRow) {
+                            html += '</div>';
+                            hasOpenRow = false;
+                            itemsInRow = 0;
+                        }
+
+                        if (hasOpenSection) {
+
+                            html += '</div>';
+
+                            if (isVertical) {
+                                html += '</div>';
+                            }
+                            hasOpenSection = false;
+                        }
+
+                        if (isVertical) {
+                            html += '<div class="verticalSection">';
+                        } else {
+                            html += '<div class="horizontalSection">';
+                        }
+                        if (isVertical) {
+                            html += '<h2>' + newIndexValue + '</h2>';
+                        } else {
+                            html += '<div class="sectionTitle">' + newIndexValue + '</div>';
+                        }
+                        if (isVertical) {
+                            html += '<div class="itemsContainer verticalItemsContainer">';
+                        }
+                        currentIndexValue = newIndexValue;
+                        hasOpenSection = true;
+                    }
+                }
+
+                if (options.rows && itemsInRow == 0) {
+
+                    if (hasOpenRow) {
+                        html += '</div>';
+                        hasOpenRow = false;
+                    }
+
+                    html += '<div class="cardColumn">';
+                    hasOpenRow = true;
+                }
+
+                var cardClass = className;
+                html += buildCard(i, item, apiClient, options, cardClass);
+
+                itemsInRow++;
+
+                if (options.rows && itemsInRow >= options.rows) {
+                    html += '</div>';
+                    hasOpenRow = false;
+                    itemsInRow = 0;
+                }
+            }
+
+            if (hasOpenRow) {
+                html += '</div>';
+            }
+
+            if (hasOpenSection) {
+                html += '</div>';
+
+                if (isVertical) {
+                    html += '</div>';
+                }
+            }
+
+            return html;
+        }
+
+        function buildCardsByGenreHtmlInternal(items, apiClient, options) {
+
+            var className = 'card';
+
+            if (options.shape) {
+                className += ' ' + options.shape;
+            }
+
+            var html = '';
+
+            var loopItems = options.genres;
+
+            for (var i = 0, length = loopItems.length; i < length; i++) {
+
+                var item = loopItems[i];
+
+                var genreLower = item.Name.toLowerCase();
+                var renderItems = items.filter(function (currentItem) {
+
+                    return currentItem.Genres.filter(function (g) {
+
+                        return g.toLowerCase() == genreLower;
+
+                    }).length > 0;
+                });
+
+                if (!renderItems.length) {
+                    continue;
+                }
+
+                html += '<div class="horizontalSection focuscontainer-down">';
+                html += '<div class="sectionTitle">' + item.Name + '</div>';
+
+                var showMoreButton = false;
+                if (renderItems.length > options.indexLimit) {
+                    renderItems.length = Math.min(renderItems.length, options.indexLimit);
+                    showMoreButton = true;
+                }
+
+                var itemsInRow = 0;
+                var hasOpenRow = false;
+                var hasOpenSection = false;
+
+                html += renderItems.map(function (renderItem) {
+
+                    var currentItemHtml = '';
+
+                    if (options.rows && itemsInRow == 0) {
+
+                        if (hasOpenRow) {
+                            currentItemHtml += '</div>';
+                            hasOpenRow = false;
+                        }
+
+                        currentItemHtml += '<div class="cardColumn">';
+                        hasOpenRow = true;
+                    }
+
+                    var cardClass = className;
+                    currentItemHtml += buildCard(i, renderItem, apiClient, options, cardClass);
+
+                    itemsInRow++;
+
+                    if (options.rows && itemsInRow >= options.rows) {
+                        currentItemHtml += '</div>';
+                        hasOpenRow = false;
+                        itemsInRow = 0;
+                    }
+
+                    return currentItemHtml;
+
+                }).join('');
+
+
+                if (showMoreButton) {
+                    html += '<div class="listItemsMoreButtonContainer">';
+                    html += '<button is="emby-button" class="listItemsMoreButton raised" data-parentid="' + options.parentId + '" data-indextype="Genres" data-indexvalue="' + item.Id + '">' + globalize.translate('core#More') + '</button>';
+                    html += '</div>';
+                }
+
+                html += '</div>';
+                html += '</div>';
+            }
+
+            return html;
+        }
+
+        function getDisplayDateText(date) {
+
+            var weekday = [];
+            weekday[0] = globalize.translate('core#OptionSunday');
+            weekday[1] = globalize.translate('core#OptionMonday');
+            weekday[2] = globalize.translate('core#OptionTuesday');
+            weekday[3] = globalize.translate('core#OptionWednesday');
+            weekday[4] = globalize.translate('core#OptionThursday');
+            weekday[5] = globalize.translate('core#OptionFriday');
+            weekday[6] = globalize.translate('core#OptionSaturday');
+
+            var day = weekday[date.getDay()];
+            date = date.toLocaleDateString();
+
+            if (date.toLowerCase().indexOf(day.toLowerCase()) == -1) {
+                return day + " " + date;
+            }
+
+            return date;
+        }
+
+        function getDesiredAspect(shape) {
+
+            if (shape) {
+                shape = shape.toLowerCase();
+                if (shape.indexOf('portrait') != -1) {
+                    return (2 / 3);
+                }
+                if (shape.indexOf('backdrop') != -1) {
+                    return (16 / 9);
+                }
+                if (shape.indexOf('square') != -1) {
+                    return 1;
+                }
+            }
+            return null;
+        }
+
+        function getCardImageUrl(item, apiClient, options) {
+
+            var width = options.width;
+            var height = null;
+            var primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio([item]);
+            var forceName = false;
+            var imgUrl = null;
+            var coverImage = false;
+
+            if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.ImageTags.Thumb
+                });
+
+            } else if (options.preferBanner && item.ImageTags && item.ImageTags.Banner) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                    type: "Banner",
+                    maxWidth: width,
+                    tag: item.ImageTags.Banner
+                });
+
+            } else if (options.preferThumb && item.SeriesThumbImageTag && options.inheritThumb !== false) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.SeriesThumbImageTag
+                });
+
+            } else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.ParentThumbImageTag
+                });
+
+            } else if (options.preferThumb && item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                    type: "Backdrop",
+                    maxWidth: width,
+                    tag: item.BackdropImageTags[0]
+                });
+
+                forceName = true;
+
+            } else if (item.ImageTags && item.ImageTags.Primary) {
+
+                height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
+
+                imgUrl = apiClient.getImageUrl(item.Id, {
+                    type: "Primary",
+                    maxHeight: height,
+                    maxWidth: width,
+                    tag: item.ImageTags.Primary
+                });
+
+                if (options.preferThumb && options.showTitle !== false) {
+                    forceName = true;
+                }
+
+                if (primaryImageAspectRatio) {
+                    var uiAspect = getDesiredAspect(options.shape);
+                    if (uiAspect) {
+                        coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= .2;
+                    }
+                }
+
+            } else if (item.PrimaryImageTag) {
+
+                height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
+
+                imgUrl = apiClient.getImageUrl(item.Id || item.ItemId, {
+                    type: "Primary",
+                    maxHeight: height,
+                    maxWidth: width,
+                    tag: item.PrimaryImageTag
+                });
+
+                if (options.preferThumb && options.showTitle !== false) {
+                    forceName = true;
+                }
+
+                if (primaryImageAspectRatio) {
+                    var uiAspect = getDesiredAspect(options.shape);
+                    if (uiAspect) {
+                        coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= .2;
+                    }
+                }
+            }
+            else if (item.ParentPrimaryImageTag) {
+
+                imgUrl = apiClient.getImageUrl(item.ParentPrimaryImageItemId, {
+                    type: "Primary",
+                    maxWidth: width,
+                    tag: item.ParentPrimaryImageTag
+                });
+            }
+            else if (item.AlbumId && item.AlbumPrimaryImageTag) {
+
+                width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
+
+                imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
+                    type: "Primary",
+                    maxHeight: height,
+                    maxWidth: width,
+                    tag: item.AlbumPrimaryImageTag
+                });
+
+                if (primaryImageAspectRatio) {
+                    var uiAspect = getDesiredAspect(options.shape);
+                    if (uiAspect) {
+                        coverImage = Math.abs(primaryImageAspectRatio - uiAspect) <= .2;
+                    }
+                }
+            }
+            else if (item.Type == 'Season' && item.ImageTags && item.ImageTags.Thumb) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.ImageTags.Thumb
+                });
+
+            }
+            else if (item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                    type: "Backdrop",
+                    maxWidth: width,
+                    tag: item.BackdropImageTags[0]
+                });
+
+            } else if (item.ImageTags && item.ImageTags.Thumb) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.Id, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.ImageTags.Thumb
+                });
+
+            } else if (item.SeriesThumbImageTag) {
+
+                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.SeriesThumbImageTag
+                });
+
+            } else if (item.ParentThumbItemId) {
+
+                imgUrl = apiClient.getThumbImageUrl(item.ParentThumbItemId, {
+                    type: "Thumb",
+                    maxWidth: width,
+                    tag: item.ParentThumbImageTag
+                });
+
+            }
+
+            return {
+                imgUrl: imgUrl,
+                forceName: forceName,
+                coverImage: coverImage
+            };
+        }
+
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        function buildCard(index, item, apiClient, options, className) {
+
+            className += " itemAction";
+
+            if (options.scalable) {
+                className += " scalableCard";
+            }
+
+            var imgInfo = getCardImageUrl(item, apiClient, options);
+            var imgUrl = imgInfo.imgUrl;
+
+            var cardImageContainerClass = 'cardImageContainer';
+            if (options.coverImage || imgInfo.coverImage) {
+                cardImageContainerClass += ' coveredImage';
+
+                if (item.MediaType == 'Photo' || item.Type == 'PhotoAlbum' || item.Type == 'Folder') {
+                    cardImageContainerClass += ' noScale';
+                }
+            }
+
+            if (!imgUrl) {
+                cardImageContainerClass += ' emptyCardImageContainer defaultCardColor' + getRandomInt(1, 5);
+            }
+
+            var separateCardBox = options.scalable;
+
+            if (!separateCardBox) {
+                cardImageContainerClass += " cardBox";
+            }
+
+            // 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>';
+
+            if (separateCardBox) {
+                cardImageContainerOpen = '<div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div><div class="cardContent">' + cardImageContainerOpen;
+                cardImageContainerClose += '</div></div></div>';
+            }
+
+            var indicatorsHtml = '';
+
+            indicatorsHtml += indicators.getTimerIndicator(item);
+
+            if (options.showGroupCount) {
+
+                indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
+                    minCount: 1
+                });
+            }
+            else {
+                indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
+            }
+
+            if (indicatorsHtml) {
+                cardImageContainerOpen += '<div class="indicators">' + indicatorsHtml + '</div>';
+            }
+
+            var showTitle = options.showTitle || imgInfo.forceName || item.Type == 'PhotoAlbum';
+            var showParentTitle = options.showParentTitle || (imgInfo.forceName && item.Type == 'Episode');
+
+            if (!imgUrl) {
+                var defaultName = item.EpisodeTitle ? item.Name : itemHelper.getDisplayName(item);
+                cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
+            }
+
+            var nameHtml = '';
+
+            if (showParentTitle) {
+                nameHtml += '<div class="cardText">' + (item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || "")) + '</div>';
+            }
+
+            if (showTitle) {
+                var nameClass = 'cardText';
+                nameHtml += '<div class="' + nameClass + '">' + itemHelper.getDisplayName(item) + '</div>';
+            }
+
+            var innerCardFooterClass = 'innerCardFooter';
+            var progressHtml = indicators.getProgressBarHtml(item);
+
+            if (progressHtml) {
+                nameHtml += progressHtml;
+                innerCardFooterClass += " fullInnerCardFooter";
+            }
+
+            var innerCardFooter = '';
+
+            if (nameHtml && imgUrl) {
+                innerCardFooter += '<div class="' + innerCardFooterClass + '">';
+                innerCardFooter += nameHtml;
+                innerCardFooter += '</div>';
+            }
+
+            var data = '';
+
+            var action = options.action || 'link';
+
+            var tagName = 'button';
+
+            var prefix = (item.SortName || item.Name || '')[0];
+
+            if (prefix) {
+                prefix = prefix.toUpperCase();
+            }
+
+            var timerAttributes = '';
+            if (item.TimerId) {
+                timerAttributes += ' data-timerid="' + item.TimerId + '"';
+            }
+            if (item.SeriesTimerId) {
+                timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"';
+            }
+
+            var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
+            var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
+            var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
+
+            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 + '"> \
+' + cardImageContainerOpen + innerCardFooter + data + cardImageContainerClose + '\
+</' + tagName + '>';
+        }
+
+        function buildCards(items, options) {
+
+            // Abort if the container has been disposed
+            if (!document.body.contains(options.itemsContainer)) {
+                return;
+            }
+
+            if (options.parentContainer) {
+                if (items.length) {
+                    options.parentContainer.classList.remove('hide');
+                } else {
+                    options.parentContainer.classList.add('hide');
+                    return;
+                }
+            }
+
+            var apiClient = connectionManager.currentApiClient();
+
+            var html = buildCardsHtmlInternal(items, apiClient, options);
+
+            if (html) {
+
+                if (options.itemsContainer.cardBuilderHtml != html) {
+                    options.itemsContainer.innerHTML = html;
+
+                    if (items.length < 50) {
+                        options.itemsContainer.cardBuilderHtml = html;
+                    } else {
+                        options.itemsContainer.cardBuilderHtml = null;
+                    }
+                }
+
+                imageLoader.lazyChildren(options.itemsContainer);
+            } else {
+
+                options.itemsContainer.innerHTML = html;
+                options.itemsContainer.cardBuilderHtml = null;
+            }
+
+            if (options.autoFocus) {
+                focusManager.autoFocus(options.itemsContainer, true);
+            }
+
+            if (options.indexBy == 'Genres') {
+                options.itemsContainer.addEventListener('click', onItemsContainerClick);
+            }
+        }
+
+        function parentWithClass(elem, className) {
+
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
+        }
+
+        function onItemsContainerClick(e) {
+
+            var listItemsMoreButton = parentWithClass(e.target, 'listItemsMoreButton');
+
+            if (listItemsMoreButton) {
+
+                var value = listItemsMoreButton.getAttribute('data-indexvalue');
+                var parentid = listItemsMoreButton.getAttribute('data-parentid');
+
+                Emby.Page.showGenre({
+                    ParentId: parentid,
+                    Id: value
+                });
+            }
+        }
+
+        function ensureIndicators(card, indicatorsElem) {
+
+            if (indicatorsElem) {
+                return indicatorsElem;
+            }
+
+            indicatorsElem = card.querySelector('.indicators');
+
+            if (!indicatorsElem) {
+
+                var cardImageContainer = card.querySelector('.cardImageContainer');
+                indicatorsElem = document.createElement('div');
+                indicatorsElem.classList.add('indicators');
+                cardImageContainer.appendChild(indicatorsElem);
+            }
+
+            return indicatorsElem;
+        }
+
+        function updateUserData(card, userData) {
+
+            var type = card.getAttribute('data-type');
+            var enableCountIndicator = type == 'Series' || type == 'BoxSet' || type == 'Season';
+            var indicatorsElem;
+
+            if (userData.Played) {
+
+                var playedIndicator = card.querySelector('.playedIndicator');
+
+                if (!playedIndicator) {
+
+                    playedIndicator = document.createElement('div');
+                    playedIndicator.classList.add('playedIndicator');
+                    indicatorsElem = ensureIndicators(card, indicatorsElem);
+                    indicatorsElem.appendChild(playedIndicator);
+                }
+                playedIndicator.innerHTML = '<i class="md-icon">check</i>';
+            } else {
+
+                var playedIndicator = card.querySelector('.playedIndicator');
+                if (playedIndicator) {
+
+                    playedIndicator.parentNode.removeChild(playedIndicator);
+                }
+            }
+            if (userData.UnplayedItemCount) {
+                var countIndicator = card.querySelector('.countIndicator');
+
+                if (!countIndicator) {
+
+                    countIndicator = document.createElement('div');
+                    countIndicator.classList.add('countIndicator');
+                    indicatorsElem = ensureIndicators(card, indicatorsElem);
+                    indicatorsElem.appendChild(countIndicator);
+                }
+                countIndicator.innerHTML = userData.UnplayedItemCount;
+            } else if (enableCountIndicator) {
+
+                var countIndicator = card.querySelector('.countIndicator');
+                if (countIndicator) {
+
+                    countIndicator.parentNode.removeChild(countIndicator);
+                }
+            }
+
+            var progressHtml = indicators.getProgressBarHtml({
+                Type: type,
+                UserData: userData,
+                MediaType: 'Video'
+            });
+
+            if (progressHtml) {
+
+                var itemProgressBar = card.querySelector('.itemProgressBar');
+
+                if (!itemProgressBar) {
+                    itemProgressBar = document.createElement('div');
+                    itemProgressBar.classList.add('itemProgressBar');
+
+                    var innerCardFooter = card.querySelector('.innerCardFooter');
+                    if (!innerCardFooter) {
+                        innerCardFooter = document.createElement('div');
+                        innerCardFooter.classList.add('innerCardFooter');
+                        var cardImageContainer = card.querySelector('.cardImageContainer');
+                        cardImageContainer.appendChild(innerCardFooter);
+                    }
+                    innerCardFooter.appendChild(itemProgressBar);
+                }
+
+                itemProgressBar.innerHTML = progressHtml;
+            }
+            else {
+
+                var itemProgressBar = card.querySelector('.itemProgressBar');
+                if (itemProgressBar) {
+                    itemProgressBar.parentNode.removeChild(itemProgressBar);
+                }
+            }
+        }
+
+        function onUserDataChanged(userData) {
+
+            var cards = document.querySelectorAll('.card[data-id="' + userData.ItemId + '"]');
+
+            for (var i = 0, length = cards.length; i < length; i++) {
+                updateUserData(cards[i], userData);
+            }
+        }
+
+        return {
+            buildCardsHtml: buildCardsHtml,
+            buildCards: buildCards,
+            onUserDataChanged: onUserDataChanged
+        };
+    });

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

@@ -0,0 +1,115 @@
+define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLoader, itemShortcuts) {
+
+    function buildChapterCardsHtml(item, chapters, options) {
+
+        var className = 'card scalableCard itemAction chapterCard';
+
+        var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
+        var videoStream = mediaStreams.filter(function (i) {
+            return i.Type == 'Video';
+        })[0] || {};
+
+        var shape = 'backdropCard';
+
+        if (videoStream.Width && videoStream.Height) {
+
+            if ((videoStream.Width / videoStream.Height) <= 1.34) {
+                shape = 'squareCard';
+            }
+        }
+
+        className += ' ' + shape;
+
+        if (options.block || options.rows) {
+            className += ' block';
+        }
+
+        var html = '';
+        var itemsInRow = 0;
+
+        for (var i = 0, length = chapters.length; i < length; i++) {
+
+            if (options.rows && itemsInRow == 0) {
+                html += '<div class="cardColumn">';
+            }
+
+            var chapter = chapters[i];
+
+            html += buildChapterCard(item, chapter, options, className);
+            itemsInRow++;
+
+            if (options.rows && itemsInRow >= options.rows) {
+                itemsInRow = 0;
+                html += '</div>';
+            }
+        }
+
+        return html;
+    }
+
+    function buildChapterCard(item, chapter, options, className) {
+
+        var imgUrl = chapter.images ? chapter.images.primary : '';
+
+        var cardImageContainerClass = 'cardImageContainer';
+        if (options.coverImage) {
+            cardImageContainerClass += ' coveredImage';
+        }
+        var dataAttributes = ' data-action="play" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-positionticks="' + chapter.StartPositionTicks + '"';
+        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+
+        var nameHtml = '';
+        nameHtml += '<div class="cardText">' + chapter.Name + '</div>';
+        nameHtml += '<div class="cardText">' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + '</div>';
+
+        var html = '\
+<button type="button" class="' + className + '"' + dataAttributes + '> \
+<div class="cardBox">\
+<div class="cardScalable">\
+<div class="cardPadder"></div>\
+<div class="cardContent">\
+' + cardImageContainer + '\
+</div>\
+<div class="innerCardFooter">\
+' + nameHtml + '\
+</div>\
+</div>\
+</div>\
+</div>\
+</button>'
+        ;
+
+        return html;
+    }
+
+    function buildChapterCards(item, chapters, options) {
+
+        // Abort if the container has been disposed
+        if (!document.body.contains(options.parentContainer)) {
+            return;
+        }
+
+        if (options.parentContainer) {
+            if (chapters.length) {
+                options.parentContainer.classList.remove('hide');
+            } else {
+                options.parentContainer.classList.add('hide');
+                return;
+            }
+        }
+
+        var html = buildChapterCardsHtml(item, chapters, options);
+
+        options.itemsContainer.innerHTML = html;
+
+        imageLoader.lazyChildren(options.itemsContainer);
+
+        itemShortcuts.off(options.itemsContainer);
+        itemShortcuts.on(options.itemsContainer);
+    }
+
+    return {
+        buildChapterCards: buildChapterCards
+    };
+
+});

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

@@ -0,0 +1,110 @@
+define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
+
+    function buildPeopleCardsHtml(people, options) {
+
+        var className = 'card portraitCard personCard';
+
+        if (options.block || options.rows) {
+            className += ' block';
+        }
+
+        var html = '';
+        var itemsInRow = 0;
+
+        var serverId = options.serverId;
+
+        for (var i = 0, length = people.length; i < length; i++) {
+
+            if (options.rows && itemsInRow == 0) {
+                html += '<div class="cardColumn">';
+            }
+
+            var person = people[i];
+
+            html += buildPersonCard(person, serverId, options, className);
+            itemsInRow++;
+
+            if (options.rows && itemsInRow >= options.rows) {
+                itemsInRow = 0;
+                html += '</div>';
+            }
+        }
+
+        return html;
+    }
+
+    function buildPersonCard(person, serverId, options, className) {
+
+        className += " itemAction scalableCard";
+
+        var imgUrl = person.images ? person.images.primary : '';
+
+        var cardImageContainerClass = 'cardImageContainer';
+        if (options.coverImage) {
+            cardImageContainerClass += ' coveredImage';
+        }
+        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+
+        var nameHtml = '';
+        nameHtml += '<div class="cardText">' + person.Name + '</div>';
+
+        if (person.Role) {
+            nameHtml += '<div class="cardText">as ' + person.Role + '</div>';
+        }
+        else if (person.Type) {
+            nameHtml += '<div class="cardText">' + Globalize.translate('core#' + person.Type) + '</div>';
+        } else {
+            nameHtml += '<div class="cardText">&nbsp;</div>';
+        }
+
+        var html = '\
+<button type="button" data-isfolder="' + person.IsFolder + '" data-type="' + person.Type + '" data-action="link" data-id="' + person.Id + '" data-serverid="' + serverId + '" raised class="' + className + '"> \
+<div class="cardBox">\
+<div class="cardScalable">\
+<div class="cardPadder"></div>\
+<div class="cardContent">\
+' + cardImageContainer + '\
+</div>\
+</div>\
+</div>\
+<div class="cardFooter">\
+' + nameHtml + '\
+</div>\
+</div>\
+</button>'
+        ;
+
+        return html;
+    }
+
+    function buildPeopleCards(items, options) {
+
+        // Abort if the container has been disposed
+        if (!document.body.contains(options.parentContainer)) {
+            return;
+        }
+
+        if (options.parentContainer) {
+            if (items.length) {
+                options.parentContainer.classList.remove('hide');
+            } else {
+                options.parentContainer.classList.add('hide');
+                return;
+            }
+        }
+
+        var html = buildPeopleCardsHtml(items, options);
+
+        options.itemsContainer.innerHTML = html;
+
+        imageLoader.lazyChildren(options.itemsContainer);
+
+        itemShortcuts.off(options.itemsContainer);
+        itemShortcuts.on(options.itemsContainer);
+    }
+
+    return {
+        buildPeopleCards: buildPeopleCards
+    };
+
+});

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

@@ -196,9 +196,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
             var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
             var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
-            var seriesIdData = item.SeriesId ? (' data-seriesid="' + item.SeriesId + '"') : '';
 
-            html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + i + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-mediatype="' + item.MediaType + '" data-type="' + item.Type + '"' + positionTicksData + collectionIdData + playlistIdData + seriesIdData + '>';
+            html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + i + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-mediatype="' + item.MediaType + '" data-type="' + item.Type + '"' + positionTicksData + collectionIdData + playlistIdData + '>';
 
             if (!clickEntireItem && options.dragHandle) {
                 html += '<button is="paper-icon-button-light" class="listViewDragHandle autoSize"><i class="md-icon">&#xE25D;</i></button>';

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

@@ -15,20 +15,13 @@ define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'
         var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
 
         var showExternalPlayer = isMobileApp && mediaType == 'Video' && !isFolder && appSettings.enableExternalPlayers();
-
         var playableItemId = itemType == 'Program' ? channelId : itemId;
 
         if (!resumePositionTicks && mediaType != "Audio" && !isFolder && !showExternalPlayer) {
-            if (itemType == 'Program') {
             playbackManager.play({
-                    ids: [channelId],
+                ids: [playableItemId],
                 serverId: serverId
             });
-            } else {
-                playbackManager.play({
-                    items: [item]
-                });
-            }
             return;
         }
 

dashboard-ui/bower_components/polymer/.bower.json

@@ -31,14 +31,14 @@
     "web-component-tester": "*"
   },
   "private": true,
-  "homepage": "https://github.com/Polymer/polymer",
+  "homepage": "https://github.com/polymer/polymer",
   "_release": "1.6.0",
   "_resolution": {
     "type": "version",
     "tag": "v1.6.0",
     "commit": "8715c83bf04a228de00ec662ed43eb6141e61b91"
   },
-  "_source": "git://github.com/Polymer/polymer.git",
+  "_source": "git://github.com/polymer/polymer.git",
   "_target": "^1.1.0",
-  "_originalSource": "Polymer/polymer"
+  "_originalSource": "polymer/polymer"
 }

dashboard-ui/scripts/librarybrowser.js

@@ -802,13 +802,6 @@
                     });
                 }
 
-                if (item.SeriesId) {
-                    atts.push({
-                        name: 'seriesid',
-                        value: item.SeriesId
-                    });
-                }
-
                 if (options.collectionId) {
                     atts.push({
                         name: 'collectionid',

dashboard-ui/scripts/site.js

@@ -1429,6 +1429,11 @@ var AppInfo = {};
         define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
         define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
 
+        define("cardStyle", ['css!' + embyWebComponentsBowerPath + "/cardbuilder/card"], returnFirstDependency);
+        define("cardBuilder", [embyWebComponentsBowerPath + "/cardbuilder/cardbuilder"], returnFirstDependency);
+        define("peoplecardbuilder", [embyWebComponentsBowerPath + "/cardbuilder/peoplecardbuilder"], returnFirstDependency);
+        define("chaptercardbuilder", [embyWebComponentsBowerPath + "/cardbuilder/chaptercardbuilder"], returnFirstDependency);
+
         define("tvguide", [embyWebComponentsBowerPath + "/guide/guide", 'embyRouter'], returnFirstDependency);
         define("voiceDialog", [embyWebComponentsBowerPath + "/voice/voicedialog"], returnFirstDependency);
         define("voiceReceiver", [embyWebComponentsBowerPath + "/voice/voicereceiver"], returnFirstDependency);