Display material icon "movie" when media item has special features

src/components/cardbuilder/card.scss

@@ -141,26 +141,6 @@ button::-moz-focus-inner {
     z-index: 1;
 }
 
-.mediaSourceIndicator {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    top: 0.3em;
-    left: 0.3em;
-    text-align: center;
-    vertical-align: middle;
-    font-size: 88%;
-    font-weight: 500;
-    width: 2em;
-    height: 2em;
-    border-radius: 50%;
-    color: #fff;
-    background: rgb(51, 136, 204);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-    z-index: 1;
-}
-
 .cardImageContainer {
     background-size: cover;
     background-repeat: no-repeat;
@@ -420,6 +400,15 @@ button::-moz-focus-inner {
     }
 }
 
+.cardMediaIndicators {
+    top: 0.3em;
+    left: 0.3em;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    contain: layout style;
+}
+
 .cardProgramAttributeIndicators {
     top: 0;
     position: absolute;

src/components/cardbuilder/cardBuilder.js

@@ -942,8 +942,19 @@ function buildCard(index, item, apiClient, options) {
     }
 
     const mediaSourceCount = item.MediaSourceCount || 1;
-    if (mediaSourceCount > 1 && options.disableIndicators !== true) {
-        innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
+    const specialFeatureCount = item.SpecialFeatureCount || 0;
+
+    if ((mediaSourceCount > 1 || specialFeatureCount > 0) && options.disableIndicators !== true) {
+        innerCardFooter += '<div class="cardMediaIndicators">';
+        if (mediaSourceCount > 1) {
+            innerCardFooter += '<div class="indicator countIndicator mediaSourceIndicator">' + mediaSourceCount + '</div>';
+        }
+
+        if (specialFeatureCount > 0) {
+            // countIndicator specialFeatureIndicator
+            innerCardFooter += '<div class="indicator specialFeatureIndicator"><span class="material-icons indicatorIcon movie" aria-hidden="true"></span></div>';
+        }
+        innerCardFooter += '</div>';
     }
 
     let outerCardFooter = '';

src/components/homesections/sections/nextUp.ts

@@ -22,7 +22,7 @@ function getNextUpFetchFn(
         oldestDateForNextUp.setDate(oldestDateForNextUp.getDate() - userSettings.maxDaysForNextUp());
         return apiClient.getNextUpEpisodes({
             Limit: enableOverflow ? 24 : 15,
-            Fields: 'PrimaryImageAspectRatio,DateCreated,Path,MediaSourceCount',
+            Fields: 'PrimaryImageAspectRatio,DateCreated,Path,MediaSourceCount,SpecialFeatureCount',
             UserId: apiClient.getCurrentUserId(),
             ImageTypeLimit: 1,
             EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',

src/components/indicators/indicators.scss

@@ -82,6 +82,15 @@
     font-size: 80%;
 }
 
+.mediaSourceIndicator {
+    background: rgb(51, 136, 204);
+}
+
+.specialFeatureIndicator {
+    color: #fff;
+    font-size: 80%;
+}
+
 .videoIndicator {
     background: #444;
     border-radius: 100em;

src/components/listview/listview.js

@@ -286,8 +286,19 @@ export function getListViewHtml(options) {
             }
 
             const mediaSourceCount = item.MediaSourceCount || 1;
-            if (mediaSourceCount > 1 && options.disableIndicators !== true) {
-                html += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
+            const specialFeatureCount = item.SpecialFeatureCount || 0;
+
+            if ((mediaSourceCount > 1 || specialFeatureCount > 0) && options.disableIndicators !== true) {
+                html += '<div class="cardMediaIndicators">';
+                if (mediaSourceCount > 1) {
+                    html += '<div class="indicator countIndicator mediaSourceIndicator">' + mediaSourceCount + '</div>';
+                }
+
+                if (specialFeatureCount > 0) {
+                    // countIndicator specialFeatureIndicator
+                    html += '<div class="indicator specialFeatureIndicator"><span class="material-icons indicatorIcon movie" aria-hidden="true"></span></div>';
+                }
+                html += '</div>';
             }
 
             let indicatorsHtml = '';

src/controllers/favorites.js

@@ -138,7 +138,7 @@ function getFetchDataFn(section) {
             SortOrder: 'Ascending',
             Filters: 'IsFavorite',
             Recursive: true,
-            Fields: 'PrimaryImageAspectRatio',
+            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,SpecialFeatureCount',
             CollapseBoxSetItems: false,
             ExcludeLocationTypes: 'Virtual',
             EnableTotalRecordCount: false

src/controllers/itemDetails/index.js

@@ -775,7 +775,7 @@ function renderNextUp(page, item, user) {
     ServerConnections.getApiClient(item.ServerId).getNextUpEpisodes({
         SeriesId: item.Id,
         UserId: user.Id,
-        Fields: 'MediaSourceCount'
+        Fields: 'MediaSourceCount,SpecialFeatureCount'
     }).then(function (result) {
         if (result.Items.length) {
             section.classList.remove('hide');
@@ -1139,7 +1139,7 @@ function renderMoreFromSeason(view, item, apiClient) {
         apiClient.getEpisodes(item.SeriesId, {
             SeasonId: item.SeasonId,
             UserId: userId,
-            Fields: 'ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount'
+            Fields: 'ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,SpecialFeatureCount'
         }).then(function (result) {
             if (result.Items.length < 2) {
                 section.classList.add('hide');
@@ -1241,7 +1241,7 @@ function renderSimilarItems(page, item, context) {
         const options = {
             userId: apiClient.getCurrentUserId(),
             limit: 12,
-            fields: 'PrimaryImageAspectRatio,CanDelete'
+            fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount,SpecialFeatureCount'
         };
 
         if (item.Type == 'MusicAlbum' && item.AlbumArtists && item.AlbumArtists.length) {
@@ -1336,7 +1336,7 @@ function renderTags(page, item) {
 }
 
 function renderChildren(page, item) {
-    let fields = 'ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount';
+    let fields = 'ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,SpecialFeatureCount';
     const query = {
         ParentId: item.Id,
         Fields: fields
@@ -1759,7 +1759,7 @@ function renderMusicVideos(page, item, user) {
         SortOrder: 'Ascending',
         IncludeItemTypes: 'MusicVideo',
         Recursive: true,
-        Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount'
+        Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount,SpecialFeatureCount'
     };
 
     if (item.Type == 'MusicAlbum') {

src/controllers/list.js

@@ -255,7 +255,7 @@ function getItems(instance, params, item, sortBy, startIndex, limit) {
     if (params.type === 'nextup') {
         return apiClient.getNextUpEpisodes(modifyQueryWithFilters(instance, {
             Limit: limit,
-            Fields: 'PrimaryImageAspectRatio,DateCreated,MediaSourceCount',
+            Fields: 'PrimaryImageAspectRatio,DateCreated,MediaSourceCount,SpecialFeatureCount',
             UserId: apiClient.getCurrentUserId(),
             ImageTypeLimit: 1,
             EnableImageTypes: 'Primary,Backdrop,Thumb',
@@ -278,7 +278,7 @@ function getItems(instance, params, item, sortBy, startIndex, limit) {
         return apiClient[method](apiClient.getCurrentUserId(), modifyQueryWithFilters(instance, {
             StartIndex: startIndex,
             Limit: limit,
-            Fields: 'PrimaryImageAspectRatio,SortName',
+            Fields: 'PrimaryImageAspectRatio,SortName,MediaSourceCount,SpecialFeatureCount',
             ImageTypeLimit: 1,
             IncludeItemTypes: params.type === 'MusicArtist' || params.type === 'Person' ? null : params.type,
             Recursive: true,
@@ -326,7 +326,7 @@ function getItems(instance, params, item, sortBy, startIndex, limit) {
     return apiClient.getItems(apiClient.getCurrentUserId(), modifyQueryWithFilters(instance, {
         StartIndex: startIndex,
         Limit: limit,
-        Fields: 'PrimaryImageAspectRatio,SortName,Path,ChildCount,MediaSourceCount',
+        Fields: 'PrimaryImageAspectRatio,SortName,Path,ChildCount,MediaSourceCount,SpecialFeatureCount',
         ImageTypeLimit: 1,
         ParentId: item.Id,
         SortBy: sortBy

src/controllers/shows/episodes.js

@@ -23,7 +23,7 @@ export default function (view, params, tabContent) {
                     SortOrder: 'Ascending',
                     IncludeItemTypes: 'Episode',
                     Recursive: true,
-                    Fields: 'PrimaryImageAspectRatio,MediaSourceCount',
+                    Fields: 'PrimaryImageAspectRatio,MediaSourceCount,SpecialFeatureCount',
                     IsMissing: false,
                     ImageTypeLimit: 1,
                     EnableImageTypes: 'Primary,Backdrop,Thumb',

src/controllers/shows/tvgenres.js

@@ -68,7 +68,7 @@ export default function (view, params, tabContent) {
             SortOrder: 'Ascending',
             IncludeItemTypes: 'Series',
             Recursive: true,
-            Fields: 'PrimaryImageAspectRatio,MediaSourceCount',
+            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,SpecialFeatureCount',
             ImageTypeLimit: 1,
             EnableImageTypes: enableImageTypes,
             Limit: limit,

src/controllers/shows/tvrecommended.js

@@ -102,7 +102,7 @@ function loadResume(view, userId, parentId) {
         Filters: 'IsResumable',
         Limit: screenWidth >= 1600 ? 5 : 3,
         Recursive: true,
-        Fields: 'PrimaryImageAspectRatio,MediaSourceCount',
+        Fields: 'PrimaryImageAspectRatio,MediaSourceCount,SpecialFeatureCount',
         CollapseBoxSetItems: false,
         ParentId: parentId,
         ImageTypeLimit: 1,
@@ -180,7 +180,7 @@ function loadNextUp(view, userId, parentId) {
     const query = {
         userId: userId,
         Limit: 24,
-        Fields: 'PrimaryImageAspectRatio,DateCreated,MediaSourceCount',
+        Fields: 'PrimaryImageAspectRatio,DateCreated,MediaSourceCount,SpecialFeatureCount',
         ParentId: parentId,
         ImageTypeLimit: 1,
         EnableImageTypes: 'Primary,Backdrop,Thumb',

src/controllers/shows/tvshows.js

@@ -23,7 +23,7 @@ export default function (view, params, tabContent) {
                     SortOrder: 'Ascending',
                     IncludeItemTypes: 'Series',
                     Recursive: true,
-                    Fields: 'PrimaryImageAspectRatio',
+                    Fields: 'PrimaryImageAspectRatio,MediaSourceCount,SpecialFeatureCount',
                     ImageTypeLimit: 1,
                     EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
                     StartIndex: 0

src/themes/appletv/theme.css

@@ -357,6 +357,10 @@ a[data-role=button] {
     background: #00a4dc;
 }
 
+.specialFeatureIndicator {
+    color: #00a4dc;
+}
+
 .fullSyncIndicator {
     color: #fff;
 }

src/themes/blueradiance/theme.css

@@ -348,6 +348,10 @@ a[data-role=button] {
     background: #00a4dc;
 }
 
+.specialFeatureIndicator {
+    color: #00a4dc;
+}
+
 .fullSyncIndicator {
     color: #fff;
 }

src/themes/dark/theme.css

@@ -319,6 +319,10 @@ html {
     background: #00a4dc;
 }
 
+.specialFeatureIndicator {
+    color: #00a4dc;
+}
+
 .fullSyncIndicator {
     color: #fff;
 }

src/themes/light/theme.css

@@ -344,6 +344,10 @@ a[data-role=button] {
     background: #00a4dc;
 }
 
+.specialFeatureIndicator {
+    color: #00a4dc;
+}
+
 .fullSyncIndicator {
     color: #fff;
 }

src/themes/purplehaze/theme.css

@@ -435,6 +435,10 @@ a[data-role=button] {
     background: rgb(12, 232, 214);
 }
 
+.specialFeatureIndicator {
+    color: rgb(12, 232, 214);
+}
+
 .fullSyncIndicator {
     color: #fff;
 }

src/themes/wmc/theme.css

@@ -326,6 +326,10 @@ a[data-role=button] {
     background: #00a4dc;
 }
 
+.specialFeatureIndicator {
+    color: #00a4dc;
+}
+
 .fullSyncIndicator {
     color: #fff;
 }