New: Digital and Physical release dates for Poster options

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

@@ -82,15 +82,6 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           {translate('InCinemas')}
         </SortMenuItem>
 
-        <SortMenuItem
-          name="physicalRelease"
-          sortKey={sortKey}
-          sortDirection={sortDirection}
-          onPress={onSortSelect}
-        >
-          {translate('PhysicalRelease')}
-        </SortMenuItem>
-
         <SortMenuItem
           name="digitalRelease"
           sortKey={sortKey}
@@ -100,6 +91,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           {translate('DigitalRelease')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="physicalRelease"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('PhysicalRelease')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="releaseDate"
           sortKey={sortKey}

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}

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,

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);

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