Merge pull request #4507 from fffrankieh/episode-guest-cast

src/controllers/itemDetails/index.html

@@ -205,6 +205,13 @@
                     </div>
                 </div>
 
+                <div id="guestCastCollapsible" class="verticalSection detailVerticalSection hide">
+                    <h2 id="guestCastHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderGuestCast}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div id="guestCastContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
                 <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
                     <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>

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) {

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",