From 21bd21b70cfc1baa6ab1f7ae882ec3690a5dae63 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Tue, 27 Aug 2024 01:45:13 +0300
Subject: [PATCH] New: Digital and Physical release dates for Poster options

---
 frontend/src/App/State/MoviesAppState.ts      |  4 +-
 frontend/src/Movie/Details/MovieDetails.js    |  2 +-
 .../src/Movie/Details/MovieReleaseDates.tsx   |  6 ++-
 .../Movie/Index/Menus/MovieIndexSortMenu.tsx  |  8 +--
 .../Movie/Index/Posters/MovieIndexPoster.tsx  | 29 +++++++++++
 .../Index/Posters/MovieIndexPosterInfo.tsx    | 12 ++++-
 .../Movie/Index/Posters/MovieIndexPosters.tsx | 18 +++++++
 .../MovieIndexPosterOptionsModalContent.tsx   | 52 ++++++++++++++-----
 .../src/Store/Actions/movieIndexActions.js    |  2 +
 src/NzbDrone.Core/Localization/Core/en.json   |  6 ++-
 10 files changed, 115 insertions(+), 24 deletions(-)

diff --git a/frontend/src/App/State/MoviesAppState.ts b/frontend/src/App/State/MoviesAppState.ts
index 2c0904fea..24c0493bf 100644
--- a/frontend/src/App/State/MoviesAppState.ts
+++ b/frontend/src/App/State/MoviesAppState.ts
@@ -20,8 +20,10 @@ export interface MovieIndexAppState {
     showTitle: boolean;
     showMonitored: boolean;
     showQualityProfile: boolean;
-    showReleaseDate: boolean;
     showCinemaRelease: boolean;
+    showDigitalRelease: boolean;
+    showPhysicalRelease: boolean;
+    showReleaseDate: boolean;
     showTmdbRating: boolean;
     showImdbRating: boolean;
     showRottenTomatoesRating: boolean;
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index e609a0b4f..d90b190b3 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -438,8 +438,8 @@ class MovieDetails extends Component {
                             body={
                               <MovieReleaseDates
                                 inCinemas={inCinemas}
-                                physicalRelease={physicalRelease}
                                 digitalRelease={digitalRelease}
+                                physicalRelease={physicalRelease}
                               />
                             }
                             position={tooltipPositions.BOTTOM}
diff --git a/frontend/src/Movie/Details/MovieReleaseDates.tsx b/frontend/src/Movie/Details/MovieReleaseDates.tsx
index 5a0144f8f..d9604358b 100644
--- a/frontend/src/Movie/Details/MovieReleaseDates.tsx
+++ b/frontend/src/Movie/Details/MovieReleaseDates.tsx
@@ -32,7 +32,7 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
   }
 
   return (
-    <div>
+    <>
       {inCinemas ? (
         <div title={translate('InCinemas')}>
           <div className={styles.dateIcon}>
@@ -44,6 +44,7 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
           })}
         </div>
       ) : null}
+
       {digitalRelease ? (
         <div title={translate('DigitalRelease')}>
           <div className={styles.dateIcon}>
@@ -55,6 +56,7 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
           })}
         </div>
       ) : null}
+
       {physicalRelease ? (
         <div title={translate('PhysicalRelease')}>
           <div className={styles.dateIcon}>
@@ -68,7 +70,7 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
           )}
         </div>
       ) : null}
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx b/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx
index 390263a6f..6c8e23df7 100644
--- a/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx
+++ b/frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx
@@ -83,21 +83,21 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
         </SortMenuItem>
 
         <SortMenuItem
-          name="physicalRelease"
+          name="digitalRelease"
           sortKey={sortKey}
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('PhysicalRelease')}
+          {translate('DigitalRelease')}
         </SortMenuItem>
 
         <SortMenuItem
-          name="digitalRelease"
+          name="physicalRelease"
           sortKey={sortKey}
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('DigitalRelease')}
+          {translate('PhysicalRelease')}
         </SortMenuItem>
 
         <SortMenuItem
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
index bcd0af0ed..3be2dd459 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
@@ -48,6 +48,8 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showMonitored,
     showQualityProfile,
     showCinemaRelease,
+    showDigitalRelease,
+    showPhysicalRelease,
     showReleaseDate,
     showTmdbRating,
     showImdbRating,
@@ -248,6 +250,31 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         </div>
       ) : null}
 
+      {showDigitalRelease && digitalRelease ? (
+        <div className={styles.title} title={translate('DigitalRelease')}>
+          <Icon name={icons.MOVIE_FILE} />{' '}
+          {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: false,
+          })}
+        </div>
+      ) : null}
+
+      {showPhysicalRelease && physicalRelease ? (
+        <div className={styles.title} title={translate('PhysicalRelease')}>
+          <Icon name={icons.DISC} />{' '}
+          {getRelativeDate(
+            physicalRelease,
+            shortDateFormat,
+            showRelativeDates,
+            {
+              timeFormat,
+              timeForToday: false,
+            }
+          )}
+        </div>
+      ) : null}
+
       {showReleaseDate && releaseDate ? (
         <div className={styles.title} title={translate('ReleaseDate')}>
           <Icon name={icons.CALENDAR} />{' '}
@@ -291,6 +318,8 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         year={year}
         showQualityProfile={showQualityProfile}
         showCinemaRelease={showCinemaRelease}
+        showDigitalRelease={showDigitalRelease}
+        showPhysicalRelease={showPhysicalRelease}
         showReleaseDate={showReleaseDate}
         showRelativeDates={showRelativeDates}
         shortDateFormat={shortDateFormat}
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
index 70ed4bb72..db4697924 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
@@ -34,6 +34,8 @@ interface MovieIndexPosterInfoProps {
   sortKey: string;
   showRelativeDates: boolean;
   showCinemaRelease: boolean;
+  showDigitalRelease: boolean;
+  showPhysicalRelease: boolean;
   showReleaseDate: boolean;
   shortDateFormat: string;
   longDateFormat: string;
@@ -65,6 +67,8 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     sortKey,
     showRelativeDates,
     showCinemaRelease,
+    showDigitalRelease,
+    showPhysicalRelease,
     showReleaseDate,
     shortDateFormat,
     longDateFormat,
@@ -142,7 +146,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
-  if (sortKey === 'digitalRelease' && digitalRelease && !showReleaseDate) {
+  if (sortKey === 'digitalRelease' && digitalRelease && !showDigitalRelease) {
     const digitalReleaseDate = getRelativeDate(
       digitalRelease,
       shortDateFormat,
@@ -160,7 +164,11 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
-  if (sortKey === 'physicalRelease' && physicalRelease && !showReleaseDate) {
+  if (
+    sortKey === 'physicalRelease' &&
+    physicalRelease &&
+    !showPhysicalRelease
+  ) {
     const physicalReleaseDate = getRelativeDate(
       physicalRelease,
       shortDateFormat,
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
index e8ca631fe..afa7bf07f 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx
@@ -144,6 +144,8 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       showMonitored,
       showQualityProfile,
       showCinemaRelease,
+      showDigitalRelease,
+      showPhysicalRelease,
       showReleaseDate,
       showTmdbRating,
       showImdbRating,
@@ -173,6 +175,14 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showDigitalRelease) {
+      heights.push(19);
+    }
+
+    if (showPhysicalRelease) {
+      heights.push(19);
+    }
+
     if (showReleaseDate) {
       heights.push(19);
     }
@@ -214,7 +224,15 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
         }
         break;
       case 'digitalRelease':
+        if (!showDigitalRelease) {
+          heights.push(19);
+        }
+        break;
       case 'physicalRelease':
+        if (!showPhysicalRelease) {
+          heights.push(19);
+        }
+        break;
       case 'releaseDate':
         if (!showReleaseDate) {
           heights.push(19);
diff --git a/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx b/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx
index ff1f9e717..85d33eeae 100644
--- a/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx
+++ b/frontend/src/Movie/Index/Posters/Options/MovieIndexPosterOptionsModalContent.tsx
@@ -9,7 +9,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes } from 'Helpers/Props';
+import { inputTypes, sizes } from 'Helpers/Props';
 import { setMoviePosterOption } from 'Store/Actions/movieIndexActions';
 import translate from 'Utilities/String/translate';
 import selectPosterOptions from '../selectPosterOptions';
@@ -53,6 +53,8 @@ function MovieIndexPosterOptionsModalContent(
     showMonitored,
     showQualityProfile,
     showCinemaRelease,
+    showDigitalRelease,
+    showPhysicalRelease,
     showReleaseDate,
     showTmdbRating,
     showImdbRating,
@@ -76,7 +78,7 @@ function MovieIndexPosterOptionsModalContent(
 
       <ModalBody>
         <Form>
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('PosterSize')}</FormLabel>
 
             <FormInputGroup
@@ -88,7 +90,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('DetailedProgressBar')}</FormLabel>
 
             <FormInputGroup
@@ -100,7 +102,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowTitle')}</FormLabel>
 
             <FormInputGroup
@@ -112,7 +114,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowMonitored')}</FormLabel>
 
             <FormInputGroup
@@ -124,7 +126,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowQualityProfile')}</FormLabel>
 
             <FormInputGroup
@@ -136,7 +138,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowCinemaRelease')}</FormLabel>
 
             <FormInputGroup
@@ -148,7 +150,31 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
+            <FormLabel>{translate('ShowDigitalRelease')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showDigitalRelease"
+              value={showDigitalRelease}
+              helpText={translate('ShowDigitalReleaseHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup size={sizes.MEDIUM}>
+            <FormLabel>{translate('ShowPhysicalRelease')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showPhysicalRelease"
+              value={showPhysicalRelease}
+              helpText={translate('ShowPhysicalReleaseHelpText')}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowReleaseDate')}</FormLabel>
 
             <FormInputGroup
@@ -160,7 +186,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowTmdbRating')}</FormLabel>
 
             <FormInputGroup
@@ -172,7 +198,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowImdbRating')}</FormLabel>
 
             <FormInputGroup
@@ -184,7 +210,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowRottenTomatoesRating')}</FormLabel>
 
             <FormInputGroup
@@ -196,7 +222,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowTags')}</FormLabel>
 
             <FormInputGroup
@@ -208,7 +234,7 @@ function MovieIndexPosterOptionsModalContent(
             />
           </FormGroup>
 
-          <FormGroup>
+          <FormGroup size={sizes.MEDIUM}>
             <FormLabel>{translate('ShowSearch')}</FormLabel>
 
             <FormInputGroup
diff --git a/frontend/src/Store/Actions/movieIndexActions.js b/frontend/src/Store/Actions/movieIndexActions.js
index c3d531e30..4dccea7a3 100644
--- a/frontend/src/Store/Actions/movieIndexActions.js
+++ b/frontend/src/Store/Actions/movieIndexActions.js
@@ -34,6 +34,8 @@ export const defaultState = {
     showMonitored: true,
     showQualityProfile: true,
     showCinemaRelease: false,
+    showDigitalRelease: false,
+    showPhysicalRelease: false,
     showReleaseDate: false,
     showTmdbRating: false,
     showImdbRating: false,
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index e0af37ac9..a0b60bea1 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -1570,6 +1570,8 @@
   "ShowCinemaReleaseHelpText": "Show cinema release date under poster",
   "ShowCollectionDetails": "Show Collection Status",
   "ShowDateAdded": "Show Date Added",
+  "ShowDigitalRelease": "Show Digital Release Date",
+  "ShowDigitalReleaseHelpText": "Show digital release date under poster",
   "ShowGenres": "Show Genres",
   "ShowImdbRating": "Show IMDb Rating",
   "ShowImdbRatingHelpText": "Show IMDb rating under poster",
@@ -1579,6 +1581,8 @@
   "ShowMovieInformationHelpText": "Show movie genres and certification",
   "ShowOverview": "Show Overview",
   "ShowPath": "Show Path",
+  "ShowPhysicalRelease": "Show Physical Release Date",
+  "ShowPhysicalReleaseHelpText": "Show physical release date under poster",
   "ShowPosters": "Show Posters",
   "ShowQualityProfile": "Show Quality Profile",
   "ShowQualityProfileHelpText": "Show quality profile under poster",
@@ -1586,7 +1590,7 @@
   "ShowRelativeDates": "Show Relative Dates",
   "ShowRelativeDatesHelpText": "Show relative (Today/Yesterday/etc) or absolute dates",
   "ShowReleaseDate": "Show Release Date",
-  "ShowReleaseDateHelpText": "Show release date under poster",
+  "ShowReleaseDateHelpText": "Show release date based on minimum availability under poster",
   "ShowRottenTomatoesRating": "Show Tomato Rating",
   "ShowRottenTomatoesRatingHelpText": "Show Tomato rating under poster",
   "ShowSearch": "Show Search",