diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js index 0aea438f4f..82dfd87297 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js +++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js @@ -620,6 +620,23 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo return Math.floor(Math.random() * (max - min + 1)) + min; } + var numRandomColors = 5; + function getDefaultColorIndex(str) { + + if (str) { + var character = String(str.substr(str.length - 1).charCodeAt()); + var sum = 0; + for (var i = 0; i < character.length; i++) { + sum += parseInt(character.charAt(i)); + } + var index = String(sum).substr(-1); + + return index % numRandomColors; + } else { + return getRandomInt(1, numRandomColors); + } + } + function getCardTextLines(lines, cssClass, forceLines) { var html = ''; @@ -977,7 +994,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo } if (!imgUrl) { - cardImageContainerClass += ' defaultCardColor' + getRandomInt(1, 5); + cardImageContainerClass += ' defaultCardColor' + getDefaultColorIndex(item.Name); } var separateCardBox = scalable; diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 085955278e..3b8cae5205 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -74,7 +74,7 @@

${HeaderNextUp}

-
+

@@ -88,7 +88,7 @@

${HeaderAdditionalParts}

-
+

@@ -110,13 +110,13 @@

${HeaderSpecialFeatures}

-
+

${HeaderMusicVideos}

-
+

@@ -153,7 +153,7 @@ -
+

@@ -180,7 +180,7 @@

${HeaderThemeVideos}

-
+
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index bd515d9d74..90a0a73873 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) { +define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) { var currentItem; @@ -373,9 +373,9 @@ section.classList.add('hide'); } - var html = LibraryBrowser.getPosterViewHtml({ + var html = cardBuilder.getCardsHtml({ items: result.Items, - shape: "detailPage169", + shape: getThumbShape(false), showTitle: true, displayAsSpecial: item.Type == "Season" && item.IndexNumber, overlayText: true, @@ -775,16 +775,26 @@ return browserInfo.mobile && AppInfo.enableAppLayouts && screen.availWidth <= 1000; } - function getPortraitShape() { - return enableScrollX() ? 'overflowPortrait' : 'detailPagePortrait'; + function getPortraitShape(scrollX) { + if (scrollX == null) { + scrollX = enableScrollX(); + } + return scrollX ? 'overflowPortrait' : 'portrait'; } - function getSquareShape() { - return enableScrollX() ? 'overflowSquare' : 'detailPageSquare'; + function getSquareShape(scrollX) { + if (scrollX == null) { + scrollX = enableScrollX(); + } + return scrollX ? 'overflowSquare' : 'square'; } - function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'detailPage169'; + function getThumbShape(scrollX) { + + if (scrollX == null) { + scrollX = enableScrollX(); + } + return scrollX ? 'overflowBackdrop' : 'backdrop'; } function renderMoreFromItems(page, item) { @@ -822,12 +832,12 @@ if (enableScrollX()) { html += '
'; } else { - html += '
'; + html += '
'; } var shape = item.Type == "MusicAlbum" || item.Type == "MusicArtist" ? getSquareShape() : getPortraitShape(); - html += LibraryBrowser.getPosterViewHtml({ + html += cardBuilder.getCardsHtml({ items: result.Items, shape: shape, showParentTitle: item.Type == "MusicAlbum", @@ -892,9 +902,9 @@ if (enableScrollX()) { html += '
'; } else { - html += '
'; + html += '
'; } - html += LibraryBrowser.getPosterViewHtml({ + html += cardBuilder.getCardsHtml({ items: result.Items, shape: shape, showParentTitle: item.Type == "MusicAlbum", @@ -1085,7 +1095,7 @@ scrollX = enableScrollX(); - html = LibraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: getPortraitShape(), showTitle: true, @@ -1096,9 +1106,9 @@ } else if (item.Type == "Season") { - html = LibraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, - shape: "detailPage169", + shape: getThumbShape(false), showTitle: true, displayAsSpecial: item.Type == "Season" && item.IndexNumber, playFromHere: true, @@ -1109,7 +1119,7 @@ }); } else if (item.Type == "GameSystem") { - html = LibraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "auto", showTitle: true, @@ -1120,15 +1130,17 @@ } var elem = page.querySelector('.childrenItemsContainer'); - elem.innerHTML = html; - ImageLoader.lazyChildren(elem); - if (scrollX) { elem.classList.add('hiddenScrollX'); + elem.classList.remove('vertical-wrap'); } else { elem.classList.remove('hiddenScrollX'); + elem.classList.add('vertical-wrap'); } + elem.innerHTML = html; + ImageLoader.lazyChildren(elem); + if (item.Type == "BoxSet") { var collectionItemTypes = [ @@ -1321,11 +1333,11 @@ html += ''; html += '
'; - html += '
'; + html += '
'; - var shape = type.type == 'MusicAlbum' ? 'detailPageSquare' : 'detailPagePortrait'; + var shape = type.type == 'MusicAlbum' ? getSquareShape(false) : getPortraitShape(false); - html += LibraryBrowser.getPosterViewHtml({ + html += cardBuilder.getCardsHtml({ items: items, shape: shape, showTitle: true, @@ -1577,13 +1589,11 @@ var chapters = item.Chapters || []; - var maxWidth = LibraryBrowser.getPosterViewInfo().backdropWidth; - if (enableScrollX()) { html += '
'; limit = null; } else { - html += '
'; + html += '
'; } for (var i = 0, length = chapters.length; i < length; i++) { @@ -1597,7 +1607,7 @@ var onclick = item.PlayAccess == 'Full' && !isStatic ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : ''; - html += ''; + html += ''; html += '
'; html += '
'; @@ -1607,7 +1617,7 @@ if (chapter.ImageTag) { imgUrl = ApiClient.getScaledImageUrl(item.Id, { - maxWidth: maxWidth, + maxWidth: 400, tag: chapter.ImageTag, type: "Chapter", index: i @@ -1621,7 +1631,7 @@ html += '
'; html += '
'; - html += '
'; + html += '
'; html += '
' + chapterName + '
'; html += '
'; html += datetime.getDisplayRunningTime(chapter.StartPositionTicks); @@ -1819,8 +1829,6 @@ var html = ''; - var maxWidth = LibraryBrowser.getPosterViewInfo().backdropWidth; - for (var i = 0, length = items.length; i < length; i++) { if (limit && i >= limit) { @@ -1829,7 +1837,7 @@ var item = items[i]; - var cssClass = "card detailPage169Card"; + var cssClass = "card backdropCard scalableCard"; var href = "itemdetails.html?id=" + item.Id; @@ -1847,7 +1855,7 @@ if (imageTags.Primary) { imgUrl = ApiClient.getScaledImageUrl(item.Id, { - maxWidth: maxWidth, + maxWidth: 400, tag: imageTags.Primary, type: "primary" }); @@ -1861,7 +1869,7 @@ html += '
'; html += '
'; - html += '
'; + html += '
'; html += '
' + item.Name + '
'; html += '
'; if (item.RunTimeTicks != "") { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index ed54c27903..d8088659ae 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -1,4 +1,4 @@ -define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom, imageLoader) { +define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom) { function fadeInRight(elem) { diff --git a/dashboard-ui/shared.html b/dashboard-ui/shared.html index fbb091e4f2..7680a5bf1f 100644 --- a/dashboard-ui/shared.html +++ b/dashboard-ui/shared.html @@ -110,7 +110,7 @@

${HeaderScenes}

-
+