Item Card component displays Critic|Community ratings from setting

src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts

@@ -79,6 +79,7 @@ async function loadDisplaySettings({
 
     const displaySettings = {
         customCss: settings.customCss(),
+        cardRatings: settings.cardRatings() || 'none',
         dashboardTheme: settings.dashboardTheme() || 'auto',
         dateTimeLocale: settings.dateTimeLocale() || 'auto',
         disableCustomCss: Boolean(settings.disableCustomCss()),
@@ -125,6 +126,7 @@ async function saveDisplaySettings({
         userSettings.language(normalizeValue(newDisplaySettings.language));
     }
     userSettings.customCss(normalizeValue(newDisplaySettings.customCss));
+    userSettings.cardRatings(newDisplaySettings.cardRatings);
     userSettings.dashboardTheme(normalizeValue(newDisplaySettings.dashboardTheme));
     userSettings.dateTimeLocale(normalizeValue(newDisplaySettings.dateTimeLocale));
     userSettings.disableCustomCss(newDisplaySettings.disableCustomCss);

src/apps/experimental/features/preferences/types/displaySettingsValues.ts

@@ -1,5 +1,6 @@
 export interface DisplaySettingsValues {
     customCss: string;
+    cardRatings: string;
     dashboardTheme: string;
     dateTimeLocale: string;
     disableCustomCss: boolean;

src/components/cardbuilder/card.scss

@@ -871,3 +871,52 @@ button::-moz-focus-inner {
     transform: scale(1.4, 1.4);
     transition: 0.2s;
 }
+
+.cardRatingContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    padding: 5px;
+    font-weight: 550;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 15px;
+    z-index: 10;
+}
+
+.card-hoverable:hover .cardRatingContainer {
+    background-color: rgba(0, 0, 0, 0.0);
+}
+
+.cardCriticRating {
+    background-repeat: no-repeat;
+    background-size: auto 1.2em;
+    min-height: 1.2em;
+    background-position: 2px center;
+    padding-left: 24px;
+}
+
+.cardRatingFresh {
+    background-image: url(../../assets/img/fresh.svg);
+}
+
+.cardRatingRotten {
+    background-image: url(../../assets/img/rotten.svg);
+}
+
+.cardCommunityRating {
+    min-height: 1.2em;
+    display: flex;
+    align-items: center;
+    margin-right: 3px;
+}
+
+.cardStarIcon {
+    width: auto !important;
+    height: auto !important;
+    font-size: 1.4em;
+    margin-right: 3px;
+    color: #f2b01e;
+}

src/components/cardbuilder/cardBuilder.js

@@ -41,6 +41,8 @@
     resolveMixedShapeByAspectRatio
 } from './cardBuilderUtils';
 
+import * as userSettings from 'scripts/settings/userSettings';
+
 const enableFocusTransform = !browser.slow && !browser.edge;
 
 /**
@@ -1127,12 +1129,37 @@
     let additionalCardContent = '';
 
     if (layoutManager.desktop && !options.disableHoverMenu) {
+        additionalCardContent += getRatingHtml(item);
         additionalCardContent += getHoverMenuHtml(item, action);
     }
 
     return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + escapeHtml(prefix) + '" class="' + className + '"' + ariaLabelAttribute + '>' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
 }
 
+/**
+ * Generates HTML markup for card rating.
+ * @param {object} item - Item used to generate the card rating.
+ * @returns {string} HTML markup of the card rating.
+ */
+function getRatingHtml(item) {
+    const ratingsSetting = userSettings.cardRatings();
+    if (!ratingsSetting || ratingsSetting === 'none') {
+        return '';
+    }
+
+    let cardRatingHtml = '';
+    if (item.CriticRating && ['critic', 'all'].includes(ratingsSetting)) {
+        const backgroundImageClass = item.CriticRating >= 60 ? 'cardRatingFresh' : 'cardRatingRotten';
+        cardRatingHtml += `<div class="cardCriticRating ${backgroundImageClass}">${item.CriticRating}</div>`;
+    }
+    if (item.CommunityRating && ['community', 'all'].includes(ratingsSetting)) {
+        const starIconHtml = '<span class="material-icons cardStarIcon star" aria-hidden="true"></span>'
+        cardRatingHtml += `<div class="cardRating cardCommunityRating">${starIconHtml}${item.CommunityRating.toFixed(1)}</div>`;
+    }
+
+    return cardRatingHtml ? `<div class="cardRatingContainer">${cardRatingHtml}</div>` : '';
+}
+
 /**
  * Generates HTML markup for the card overlay.
  * @param {object} item - Item used to generate the card overlay.

src/components/displaySettings/displaySettings.js

@@ -121,6 +121,7 @@ function loadForm(context, user, userSettings) {
     context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
     context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
     context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
+    context.querySelector('#selectCardRatings').value = userSettings.cardRatings();
     context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
 
     context.querySelector('#chkDisableCustomCss').checked = userSettings.disableCustomCss();
@@ -168,6 +169,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
     userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
     userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
+    userSettingsInstance.cardRatings(context.querySelector('#selectCardRatings').value);
     userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
 
     userSettingsInstance.disableCustomCss(context.querySelector('#chkDisableCustomCss').checked);

src/components/displaySettings/displaySettings.template.html

@@ -296,6 +296,20 @@ <h2 class="sectionTitle">
         <div class="fieldDescription checkboxFieldDescription">${UseEpisodeImagesInNextUpHelp}</div>
     </div>
 
+    <h2 class="sectionTitle">
+        ${ItemCard}
+    </h2>
+
+    <div class="selectContainer">
+        <select id="selectCardRatings" is="emby-select" class="selectLayout" label="${LabelCardRatings}">
+            <option value="none">${None}</option>
+            <option value="critic">${CriticRating}</option>
+            <option value="community">${CommunityRating}</option>
+            <option value="all">${All}</option>
+        </select>
+        <div class="fieldDescription">${CardRatingsHelp}</div>
+    </div>
+
     <h2 class="sectionTitle">
         ${ItemDetails}
     </h2>

src/scripts/settings/userSettings.js

@@ -309,9 +309,9 @@ export class UserSettings {
     }
 
     /**
-     * Get or set customCss.
-     * @param {string|undefined} [val] - Language.
-     * @return {string} Language.
+     * Get or set 'customCss'.
+     * @param {string|undefined} [val] - 'customCss' state.
+     * @return {string} 'customCss' state.
      */
     customCss(val) {
         if (val !== undefined) {
@@ -321,6 +321,19 @@ export class UserSettings {
         return this.get('customCss', false);
     }
 
+    /**
+     * Get or set 'cardRatings' state.
+     * @param {string|undefined} [val] - 'cardRatings' state.
+     * @return {string} 'cardRatings' state.
+     */
+    cardRatings(val) {
+        if (val !== undefined) {
+            return this.set('cardRatings', val.toString(), false);
+        }
+
+        return this.get('cardRatings', false);
+    }
+
     /**
      * Get or set 'Details Banner' state.
      * @param {boolean|undefined} [val] - Flag to enable 'Details Banner' or undefined.
@@ -694,6 +707,7 @@ export const enableThemeVideos = currentSettings.enableThemeVideos.bind(currentS
 export const enableFastFadein = currentSettings.enableFastFadein.bind(currentSettings);
 export const enableBlurhash = currentSettings.enableBlurhash.bind(currentSettings);
 export const enableBackdrops = currentSettings.enableBackdrops.bind(currentSettings);
+export const cardRatings = currentSettings.cardRatings.bind(currentSettings);
 export const detailsBanner = currentSettings.detailsBanner.bind(currentSettings);
 export const useEpisodeImagesInNextUpAndResume = currentSettings.useEpisodeImagesInNextUpAndResume.bind(currentSettings);
 export const language = currentSettings.language.bind(currentSettings);

src/strings/en-us.json

@@ -147,6 +147,7 @@
     "Bwdif": "Bob Weaver DeInterlacing Filter (BWDIF)",
     "CancelRecording": "Cancel recording",
     "CancelSeries": "Cancel series",
+    "CardRatingsHelp": "Allows title cards to display critic/community ratings, when available.",
     "Casual": "Casual",
     "Categories": "Categories",
     "ChangingMetadataImageSettingsNewContent": "Changes to metadata or artwork downloading settings will only apply to new content added to your library. To apply the changes to existing titles, you'll need to refresh their metadata manually.",
@@ -572,6 +573,7 @@
     "Inker": "Inker",
     "InstallingPackage": "Installing {0} (version {1})",
     "InstantMix": "Instant mix",
+    "ItemCard": "Item Card",
     "ItemCount": "{0} items",
     "ItemDetails": "Item Details",
     "Items": "Items",
@@ -635,6 +637,7 @@
     "LabelCachePath": "Cache path",
     "LabelCachePathHelp": "Specify a custom location for server cache files such as images. Leave blank to use the server default.",
     "LabelCancelled": "Cancelled",
+    "LabelCardRatings": "Item Card Ratings Display",
     "LabelCertificatePassword": "Certificate password",
     "LabelCertificatePasswordHelp": "If your certificate requires a password, please enter it here.",
     "LabelChannels": "Channels",