Implement the Included In feature

src/controllers/itemDetails/index.html

@@ -253,6 +253,13 @@ <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
                     </div>
                 </div>
 
+                <div id="collectionsCollapsible" class="verticalSection detailVerticalSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderIncludedIn}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                        <div id="includedInContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer includedInContent"></div>
+                    </div>
+                </div>
+
                 <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">

src/controllers/itemDetails/index.js

@@ -1083,6 +1083,7 @@ function renderTagline(page, item) {
 }
 
 function renderDetails(page, item, apiClient, context) {
+    renderItemCollections(page, item, apiClient, context);
     renderSimilarItems(page, item, context);
     renderMoreFromSeason(page, item, apiClient);
     renderMoreFromArtist(page, item, apiClient);
@@ -1243,6 +1244,47 @@ function renderMoreFromArtist(view, item, apiClient) {
     }
 }
 
+function renderItemCollections(page, item, apiClient, context) {
+    const section = page.querySelector('#collectionsCollapsible');
+
+    if (!section) {
+        return;
+    }
+
+    const query = {
+        userId: apiClient.getCurrentUserId(),
+        fields: 'PrimaryImageAspectRatio'
+    };
+
+    apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/Collections`, query)).then((result) => {
+        const items = result?.Items || [];
+
+        if (!items.length) {
+            section.classList.add('hide');
+            return;
+        }
+
+        section.classList.remove('hide');
+        cardBuilder.buildCards(items, {
+            parentContainer: section,
+            itemsContainer: section.querySelector('.includedInContent'),
+            shape: 'overflowPortrait',
+            sectionTitleTagName: 'h2',
+            scalable: true,
+            centerText: true,
+            showTitle: true,
+            showParentTitle: false,
+            overlayText: false,
+            overlayPlayButton: false,
+            coverImage: true,
+            showYear: false,
+            context
+        });
+    }).catch(() => {
+        section.classList.add('hide');
+    });
+}
+
 function renderSimilarItems(page, item, context) {
     const similarCollapsible = page.querySelector('#similarCollapsible');
 

src/strings/en-gb.json

@@ -316,6 +316,7 @@
     "HeaderExternalIds": "External IDs",
     "HeaderFeatureAccess": "Feature access",
     "HeaderFetchImages": "Fetch Images",
+    "HeaderIncludedIn": "Included In",
     "HeaderFetcherSettings": "Fetcher Settings",
     "HeaderForKids": "For Kids",
     "HeaderFrequentlyPlayed": "Frequently Played",

src/strings/en-us.json

@@ -437,6 +437,7 @@
     "HeaderError": "Error",
     "HeaderExternalIds": "External IDs",
     "HeaderFeatureAccess": "Feature access",
+    "HeaderIncludedIn": "Included In",
     "HeaderFetcherSettings": "Fetcher Settings",
     "HeaderFetchImages": "Fetch Images",
     "HeaderForKids": "For Kids",