diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html
index 59dbac89b..fd87513e2 100644
--- a/src/controllers/itemDetails/index.html
+++ b/src/controllers/itemDetails/index.html
@@ -205,6 +205,13 @@
+
${HeaderUpcomingOnTV}
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 102940f65..8b000348e 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -823,6 +823,7 @@ function setInitialCollapsibleState(page, item, apiClient, context, user) {
}
renderCast(page, item);
+ renderGuestCast(page, item);
if (item.PartCount && item.PartCount > 1) {
page.querySelector('#additionalPartsCollapsible').classList.remove('hide');
@@ -1805,11 +1806,34 @@ function renderCast(page, item) {
});
}
+function renderGuestCast(page, item) {
+ const people = (item.People || []).filter(p => p.Type === 'GuestStar');
+
+ if (!people.length) {
+ page.querySelector('#guestCastCollapsible').classList.add('hide');
+ return;
+ }
+
+ page.querySelector('#guestCastCollapsible').classList.remove('hide');
+ const guestCastContent = page.querySelector('#guestCastContent');
+
+ import('../../components/cardbuilder/peoplecardbuilder').then(({ default: peoplecardbuilder }) => {
+ peoplecardbuilder.buildPeopleCards(people, {
+ itemsContainer: guestCastContent,
+ coverImage: true,
+ serverId: item.ServerId,
+ shape: 'overflowPortrait',
+ imageBlurhashes: item.ImageBlurHashes
+ });
+ });
+}
+
function ItemDetailPage() {
const self = this;
self.setInitialCollapsibleState = setInitialCollapsibleState;
self.renderDetails = renderDetails;
self.renderCast = renderCast;
+ self.renderGuestCast = renderGuestCast;
}
function bindAll(view, selector, eventName, fn) {
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 91b91b44e..7f4da8765 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -381,6 +381,7 @@
"HeaderFetchImages": "Fetch Images",
"HeaderForKids": "For Kids",
"HeaderFrequentlyPlayed": "Frequently Played",
+ "HeaderGuestCast": "Guest Stars",
"HeaderGuideProviders": "TV Guide Data Providers",
"HeaderHttpHeaders": "HTTP Headers",
"HeaderHttpsSettings": "HTTPS Settings",