Fixed: Improve sorting movies by release dates

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

@@ -106,7 +106,7 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('ReleaseDates')}
+          {translate('ReleaseDate')}
         </SortMenuItem>
 
         <SortMenuItem

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

@@ -75,6 +75,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     inCinemas,
     physicalRelease,
     digitalRelease,
+    releaseDate,
     path,
     movieFile,
     ratings,
@@ -142,20 +143,6 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     height: `${posterHeight}px`,
   };
 
-  let releaseDate = '';
-  let releaseDateType = '';
-  if (physicalRelease && digitalRelease) {
-    releaseDate =
-      physicalRelease < digitalRelease ? physicalRelease : digitalRelease;
-    releaseDateType = physicalRelease < digitalRelease ? 'Released' : 'Digital';
-  } else if (physicalRelease && !digitalRelease) {
-    releaseDate = physicalRelease;
-    releaseDateType = 'Released';
-  } else if (digitalRelease && !physicalRelease) {
-    releaseDate = digitalRelease;
-    releaseDateType = 'Digital';
-  }
-
   return (
     <div className={styles.content}>
       <div className={styles.posterContainer} title={title}>
@@ -262,10 +249,8 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       ) : null}
 
       {showReleaseDate && releaseDate ? (
-        <div className={styles.title}>
-          <Icon
-            name={releaseDateType === 'Digital' ? icons.MOVIE_FILE : icons.DISC}
-          />{' '}
+        <div className={styles.title} title={translate('ReleaseDate')}>
+          <Icon name={icons.CALENDAR} />{' '}
           {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, {
             timeFormat,
             timeForToday: false,
@@ -314,6 +299,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         inCinemas={inCinemas}
         physicalRelease={physicalRelease}
         digitalRelease={digitalRelease}
+        releaseDate={releaseDate}
         ratings={ratings}
         sizeOnDisk={sizeOnDisk}
         sortKey={sortKey}

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

@@ -23,6 +23,7 @@ interface MovieIndexPosterInfoProps {
   inCinemas?: string;
   digitalRelease?: string;
   physicalRelease?: string;
+  releaseDate?: string;
   path: string;
   ratings: Ratings;
   certification: string;
@@ -53,6 +54,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     inCinemas,
     digitalRelease,
     physicalRelease,
+    releaseDate,
     path,
     ratings,
     certification,
@@ -152,7 +154,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div className={styles.info} title={translate('DigitalRelease')}>
         <Icon name={icons.MOVIE_FILE} /> {digitalReleaseDate}
       </div>
     );
@@ -170,12 +172,24 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div className={styles.info} title={translate('PhysicalRelease')}>
         <Icon name={icons.DISC} /> {physicalReleaseDate}
       </div>
     );
   }
 
+  if (sortKey === 'releaseDate' && releaseDate && !showReleaseDate) {
+    return (
+      <div className={styles.info} title={translate('ReleaseDate')}>
+        <Icon name={icons.CALENDAR} />{' '}
+        {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, {
+          timeFormat,
+          timeForToday: false,
+        })}
+      </div>
+    );
+  }
+
   if (!showTmdbRating && sortKey === 'tmdbRating' && !!ratings.tmdb) {
     return (
       <div className={styles.info}>

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

@@ -218,6 +218,7 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
         break;
       case 'digitalRelease':
       case 'physicalRelease':
+      case 'releaseDate':
         if (!showReleaseDate) {
           heights.push(19);
         }

frontend/src/Movie/Index/Table/MovieIndexRow.css

@@ -42,6 +42,7 @@
 .inCinemas,
 .physicalRelease,
 .digitalRelease,
+.releaseDate,
 .genres {
   composes: cell;
 

frontend/src/Movie/Index/Table/MovieIndexRow.css.d.ts

@@ -20,6 +20,7 @@ interface CssExports {
   'physicalRelease': string;
   'popularity': string;
   'qualityProfileId': string;
+  'releaseDate': string;
   'releaseGroups': string;
   'rottenTomatoesRating': string;
   'runtime': string;

frontend/src/Movie/Index/Table/MovieIndexRow.tsx

@@ -66,6 +66,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
     inCinemas,
     digitalRelease,
     physicalRelease,
+    releaseDate,
     runtime,
     minimumAvailability,
     path,
@@ -278,6 +279,19 @@ function MovieIndexRow(props: MovieIndexRowProps) {
           );
         }
 
+        if (name === 'releaseDate') {
+          return (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore ts(2739)
+            <RelativeDateCellConnector
+              key={name}
+              className={styles[name]}
+              date={releaseDate}
+              component={VirtualTableRowCell}
+            />
+          );
+        }
+
         if (name === 'runtime') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css

@@ -35,6 +35,7 @@
 .inCinemas,
 .physicalRelease,
 .digitalRelease,
+.releaseDate,
 .genres {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Movie/Index/Table/MovieIndexTableHeader.css.d.ts

@@ -17,6 +17,7 @@ interface CssExports {
   'physicalRelease': string;
   'popularity': string;
   'qualityProfileId': string;
+  'releaseDate': string;
   'releaseGroups': string;
   'rottenTomatoesRating': string;
   'runtime': string;