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}
-
+
@@ -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 += '