New: Add options to show ratings in movie poster info

frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx

@@ -100,6 +100,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           {translate('DigitalRelease')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="tmdbRating"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('TmdbRating')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="imdbRating"
           sortKey={sortKey}
@@ -110,12 +119,12 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
         </SortMenuItem>
 
         <SortMenuItem
-          name="tmdbRating"
+          name="rottenTomatoesRating"
           sortKey={sortKey}
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('TmdbRating')}
+          {translate('RottenTomatoesRating')}
         </SortMenuItem>
 
         <SortMenuItem

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -2,10 +2,13 @@ import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { MOVIE_SEARCH, REFRESH_MOVIE } from 'Commands/commandNames';
 import Icon from 'Components/Icon';
+import ImdbRating from 'Components/ImdbRating';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TmdbRating from 'Components/TmdbRating';
 import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -44,6 +47,9 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showQualityProfile,
     showCinemaRelease,
     showReleaseDate,
+    showTmdbRating,
+    showImdbRating,
+    showRottenTomatoesRating,
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
@@ -257,6 +263,24 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         </div>
       ) : null}
 
+      {showTmdbRating && !!ratings.tmdb ? (
+        <div className={styles.title}>
+          <TmdbRating ratings={ratings} iconSize={12} />
+        </div>
+      ) : null}
+
+      {showImdbRating && !!ratings.imdb ? (
+        <div className={styles.title}>
+          <ImdbRating ratings={ratings} iconSize={12} />
+        </div>
+      ) : null}
+
+      {showRottenTomatoesRating && !!ratings.rottenTomatoes ? (
+        <div className={styles.title}>
+          <RottenTomatoRating ratings={ratings} iconSize={12} />
+        </div>
+      ) : null}
+
       <MovieIndexPosterInfo
         studio={studio}
         qualityProfile={qualityProfile}
@@ -279,6 +303,9 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         certification={certification}
         originalTitle={originalTitle}
         originalLanguage={originalLanguage}
+        showTmdbRating={showTmdbRating}
+        showImdbRating={showImdbRating}
+        showRottenTomatoesRating={showRottenTomatoesRating}
       />
 
       <EditMovieModalConnector

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
+import RottenTomatoRating from 'Components/RottenTomatoRating';
 import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
 import { Language, Ratings } from 'Movie/Movie';
@@ -33,6 +34,9 @@ interface MovieIndexPosterInfoProps {
   shortDateFormat: string;
   longDateFormat: string;
   timeFormat: string;
+  showTmdbRating: boolean;
+  showImdbRating: boolean;
+  showRottenTomatoesRating: boolean;
 }
 
 function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
@@ -58,6 +62,9 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     shortDateFormat,
     longDateFormat,
     timeFormat,
+    showTmdbRating,
+    showImdbRating,
+    showRottenTomatoesRating,
   } = props;
 
   if (sortKey === 'studio' && studio) {
@@ -163,7 +170,15 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
-  if (sortKey === 'imdbRating' && !!ratings.imdb) {
+  if (!showTmdbRating && sortKey === 'tmdbRating' && !!ratings.tmdb) {
+    return (
+      <div className={styles.info}>
+        <TmdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
+  if (!showImdbRating && sortKey === 'imdbRating' && !!ratings.imdb) {
     return (
       <div className={styles.info}>
         <ImdbRating ratings={ratings} iconSize={12} />
@@ -171,10 +186,14 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
-  if (sortKey === 'tmdbRating' && !!ratings.tmdb) {
+  if (
+    !showRottenTomatoesRating &&
+    sortKey === 'rottenTomatoesRating' &&
+    !!ratings.rottenTomatoes
+  ) {
     return (
       <div className={styles.info}>
-        <TmdbRating ratings={ratings} iconSize={12} />
+        <RottenTomatoRating ratings={ratings} iconSize={12} />
       </div>
     );
   }

frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx

@@ -145,6 +145,9 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       showQualityProfile,
       showCinemaRelease,
       showReleaseDate,
+      showTmdbRating,
+      showImdbRating,
+      showRottenTomatoesRating,
     } = posterOptions;
 
     const nextAiringHeight = 19;
@@ -176,12 +179,22 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showTmdbRating) {
+      heights.push(19);
+    }
+
+    if (showImdbRating) {
+      heights.push(19);
+    }
+
+    if (showRottenTomatoesRating) {
+      heights.push(19);
+    }
+
     switch (sortKey) {
       case 'studio':
       case 'added':
       case 'year':
-      case 'imdbRating':
-      case 'tmdbRating':
       case 'path':
       case 'sizeOnDisk':
       case 'originalTitle':
@@ -204,6 +217,21 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'imdbRating':
+        if (!showImdbRating) {
+          heights.push(19);
+        }
+        break;
+      case 'tmdbRating':
+        if (!showTmdbRating) {
+          heights.push(19);
+        }
+        break;
+      case 'rottenTomatoesRating':
+        if (!showRottenTomatoesRating) {
+          heights.push(19);
+        }
+        break;
       default:
       // No need to add a height of 0
     }

frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx

@@ -54,6 +54,9 @@ function MovieIndexPosterOptionsModalContent(
     showQualityProfile,
     showCinemaRelease,
     showReleaseDate,
+    showTmdbRating,
+    showImdbRating,
+    showRottenTomatoesRating,
     showSearchAction,
   } = posterOptions;
 
@@ -156,6 +159,42 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
+          <FormGroup>
+            <FormLabel>{translate('ShowTmdbRating')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTmdbRating"
+              value={showTmdbRating}
+              helpText={translate('ShowTmdbRatingHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('ShowImdbRating')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showImdbRating"
+              value={showImdbRating}
+              helpText={translate('ShowImdbRatingHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('ShowRottenTomatoesRating')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showRottenTomatoesRating"
+              value={showRottenTomatoesRating}
+              helpText={translate('ShowRottenTomatoesRatingHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
           <FormGroup>
             <FormLabel>{translate('ShowSearch')}</FormLabel>