From a54f54eb6efc492ad0fed4a52cc2b85539aca309 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 14 Jul 2024 11:56:25 -0700
Subject: [PATCH] New: Add option to show tags on movies Poster and Overview

(cherry picked from commit e35b39b4b1c88e13f9b1515c68b4d0942f84fa6d)

Closes #10176
---
 frontend/src/App/State/MoviesAppState.ts      |  2 ++
 .../Index/Overview/MovieIndexOverview.css     | 14 ++++++++++-
 .../Overview/MovieIndexOverview.css.d.ts      |  2 ++
 .../Index/Overview/MovieIndexOverview.tsx     | 25 +++++++++++++------
 .../MovieIndexOverviewOptionsModalContent.tsx | 12 +++++++++
 .../Movie/Index/Posters/MovieIndexPoster.css  | 14 +++++++++++
 .../Index/Posters/MovieIndexPoster.css.d.ts   |  2 ++
 .../Movie/Index/Posters/MovieIndexPoster.tsx  | 11 ++++++++
 .../Movie/Index/Posters/MovieIndexPosters.tsx |  5 ++++
 .../MovieIndexPosterOptionsModalContent.tsx   | 13 ++++++++++
 .../src/Store/Actions/movieIndexActions.js    |  2 ++
 src/NzbDrone.Core/Localization/Core/en.json   |  2 ++
 12 files changed, 95 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App/State/MoviesAppState.ts b/frontend/src/App/State/MoviesAppState.ts
index c8db9ab36..2c0904fea 100644
--- a/frontend/src/App/State/MoviesAppState.ts
+++ b/frontend/src/App/State/MoviesAppState.ts
@@ -25,6 +25,7 @@ export interface MovieIndexAppState {
     showTmdbRating: boolean;
     showImdbRating: boolean;
     showRottenTomatoesRating: boolean;
+    showTags: boolean;
     showSearchAction: boolean;
   };
 
@@ -37,6 +38,7 @@ export interface MovieIndexAppState {
     showAdded: boolean;
     showPath: boolean;
     showSizeOnDisk: boolean;
+    showTags: boolean;
     showSearchAction: boolean;
   };
 
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css
index fdb5be0ba..a2d5e6c2f 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css
+++ b/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;
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts
index 5a7467424..f11f6809b 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts
+++ b/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;
 }
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx b/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
index 29d4ace25..a2ac34ad7 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
+++ b/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}
diff --git a/frontend/src/Movie/Index/Overview/Options/MovieIndexOverviewOptionsModalContent.tsx b/frontend/src/Movie/Index/Overview/Options/MovieIndexOverviewOptionsModalContent.tsx
index 4a4135a2a..f4cba51d6 100644
--- a/frontend/src/Movie/Index/Overview/Options/MovieIndexOverviewOptionsModalContent.tsx
+++ b/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>
 
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
index 27a40dd96..e8d11ccf4 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
+++ b/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;
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts
index 0ddb53cf9..49eb2068e 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts
+++ b/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;
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
index 1b2c3569d..997293352 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
+++ b/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}
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
index 5e9b878d1..97710003c 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
+++ b/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':
diff --git a/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx b/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx
index 9617ebd3c..ff1f9e717 100644
--- a/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx
+++ b/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>
 
diff --git a/frontend/src/Store/Actions/movieIndexActions.js b/frontend/src/Store/Actions/movieIndexActions.js
index e2b914a20..51c4009f9 100644
--- a/frontend/src/Store/Actions/movieIndexActions.js
+++ b/frontend/src/Store/Actions/movieIndexActions.js
@@ -38,6 +38,7 @@ export const defaultState = {
     showTmdbRating: false,
     showImdbRating: false,
     showRottenTomatoesRating: false,
+    showTags: false,
     showSearchAction: false
   },
 
@@ -50,6 +51,7 @@ export const defaultState = {
     showAdded: false,
     showPath: false,
     showSizeOnDisk: false,
+    showTags: false,
     showSearchAction: false
   },
 
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index e36a5658f..3b4f83551 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -1579,6 +1579,8 @@
   "ShowSearchHelpText": "Show search button on hover",
   "ShowSizeOnDisk": "Show Size on Disk",
   "ShowStudio": "Show Studio",
+  "ShowTags": "Show Tags",
+  "ShowTagsHelpText": "Show tags under poster",
   "ShowTitle": "Show Title",
   "ShowTitleHelpText": "Show movie title under poster",
   "ShowTmdbRating": "Show TMDb Rating",