New: Add option to show tags on movies Poster and Overview

(cherry picked from commit e35b39b4b1c88e13f9b1515c68b4d0942f84fa6d)

Closes #10176

frontend/src/Movie/Index/Overview/MovieIndexOverview.css

@@ -80,14 +80,26 @@ $hoverScale: 1.05;
   flex: 1 0 auto;
 }
 
+.overviewContainer {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 1 1000px;
+  flex-direction: column;
+}
+
 .overview {
   composes: link;
 
-  flex: 0 1 1000px;
   overflow: hidden;
   min-height: 0;
 }
 
+.tags {
+  display: flex;
+  justify-content: space-around;
+  overflow: hidden;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .overview {
     display: none;

frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts

@@ -10,9 +10,11 @@ interface CssExports {
   'info': string;
   'link': string;
   'overview': string;
+  'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
   'queue': string;
+  'tags': string;
   'title': string;
   'titleRow': string;
 }

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -6,6 +6,7 @@ import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TagListConnector from 'Components/TagListConnector';
 import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -69,6 +70,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     overview,
     statistics = {} as Statistics,
     images,
+    tags,
     hasFile,
     isAvailable,
     tmdbId,
@@ -212,15 +214,22 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
           </div>
 
           <div className={styles.details}>
-            <Link className={styles.overview} to={link}>
-              <TextTruncate
-                line={Math.floor(
-                  overviewHeight / (defaultFontSize * lineHeight)
-                )}
-                text={overview}
-              />
-            </Link>
+            <div className={styles.overviewContainer}>
+              <Link className={styles.overview} to={link}>
+                <TextTruncate
+                  line={Math.floor(
+                    overviewHeight / (defaultFontSize * lineHeight)
+                  )}
+                  text={overview}
+                />
+              </Link>
 
+              {overviewOptions.showTags ? (
+                <div className={styles.tags}>
+                  <TagListConnector tags={tags} />
+                </div>
+              ) : null}
+            </div>
             <MovieIndexOverviewInfo
               height={overviewHeight}
               monitored={monitored}

frontend/src/Movie/Index/Overview/Options/MovieIndexOverviewOptionsModalContent.tsx

@@ -53,6 +53,7 @@ function MovieIndexOverviewOptionsModalContent(
     showAdded,
     showPath,
     showSizeOnDisk,
+    showTags,
     showSearchAction,
   } = useSelector(selectOverviewOptions);
 
@@ -161,6 +162,17 @@ function MovieIndexOverviewOptionsModalContent(
             />
           </FormGroup>
 
+          <FormGroup>
+            <FormLabel>{translate('ShowTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTags"
+              value={showTags}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
           <FormGroup>
             <FormLabel>{translate('ShowSearch')}</FormLabel>
 

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

@@ -75,6 +75,20 @@ $hoverScale: 1.05;
   }
 }
 
+.tags {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 3px;
+  height: 21px;
+  background-color: var(--movieBackgroundColor);
+}
+
+.tagsList {
+  display: flex;
+  overflow: hidden;
+}
+
 .ended {
   position: absolute;
   top: 0;

frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts

@@ -13,6 +13,8 @@ interface CssExports {
   'overlayTitle': string;
   'poster': string;
   'posterContainer': string;
+  'tags': string;
+  'tagsList': string;
   'title': string;
 }
 export const cssExports: CssExports;

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

@@ -8,6 +8,7 @@ import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
@@ -51,6 +52,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showTmdbRating,
     showImdbRating,
     showRottenTomatoesRating,
+    showTags,
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
@@ -80,6 +82,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     certification,
     originalTitle,
     originalLanguage,
+    tags,
   } = movie;
 
   const { sizeOnDisk = 0 } = statistics;
@@ -284,6 +287,14 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         </div>
       ) : null}
 
+      {showTags && tags.length ? (
+        <div className={styles.tags}>
+          <div className={styles.tagsList}>
+            <TagListConnector tags={tags} />
+          </div>
+        </div>
+      ) : null}
+
       <MovieIndexPosterInfo
         studio={studio}
         qualityProfile={qualityProfile}

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

@@ -148,6 +148,7 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       showTmdbRating,
       showImdbRating,
       showRottenTomatoesRating,
+      showTags,
     } = posterOptions;
 
     const nextAiringHeight = 19;
@@ -191,6 +192,10 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showTags) {
+      heights.push(21);
+    }
+
     switch (sortKey) {
       case 'studio':
       case 'added':

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

@@ -57,6 +57,7 @@ function MovieIndexPosterOptionsModalContent(
     showTmdbRating,
     showImdbRating,
     showRottenTomatoesRating,
+    showTags,
     showSearchAction,
   } = posterOptions;
 
@@ -195,6 +196,18 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
+          <FormGroup>
+            <FormLabel>{translate('ShowTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTags"
+              value={showTags}
+              helpText={translate('ShowTagsHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
           <FormGroup>
             <FormLabel>{translate('ShowSearch')}</FormLabel>