diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html index 59dbac89be..fd87513e23 100644 --- a/src/controllers/itemDetails/index.html +++ b/src/controllers/itemDetails/index.html @@ -205,6 +205,13 @@ +
+

${HeaderGuestCast}

+
+
+
+
+

${HeaderUpcomingOnTV}

diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 102940f65c..c5bc3d3c96 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -751,6 +751,9 @@ function setPeopleHeader(page, item) { } else { page.querySelector('#peopleHeader').innerHTML = globalize.translate('HeaderCastAndCrew'); } + if (item.Type === 'Episode') { + page.querySelector('#guestCastHeader').innerHTML = globalize.translate('HeaderGuestCast'); + } } function renderNextUp(page, item, user) { @@ -823,6 +826,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 +1809,36 @@ function renderCast(page, item) { }); } +function renderGuestCast(page, item) { + const people = (item.People || []).filter(function (p) { + return 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 91b91b44ea..22444af8b8 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 Cast", "HeaderGuideProviders": "TV Guide Data Providers", "HeaderHttpHeaders": "HTTP Headers", "HeaderHttpsSettings": "HTTPS Settings",