Improvements to movie index sorting fields

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

@@ -47,9 +47,8 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+  const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
 
   const {
     title,
@@ -63,12 +62,17 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     isAvailable,
     studio,
     added,
+    year,
     inCinemas,
     physicalRelease,
     digitalRelease,
     path,
     movieFile,
+    ratings,
+    sizeOnDisk,
     certification,
+    originalTitle,
+    originalLanguage,
   } = movie;
 
   const dispatch = useDispatch();
@@ -226,11 +230,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       ) : null}
 
       {showQualityProfile ? (
-        <div className={styles.title}>{qualityProfile.name}</div>
+        <div className={styles.title} title={translate('QualityProfile')}>
+          {qualityProfile.name}
+        </div>
       ) : null}
 
       {showCinemaRelease && inCinemas ? (
-        <div className={styles.title}>
+        <div className={styles.title} title={translate('InCinemas')}>
           <Icon name={icons.IN_CINEMAS} />{' '}
           {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, {
             timeFormat,
@@ -255,18 +261,24 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         studio={studio}
         qualityProfile={qualityProfile}
         added={added}
+        year={year}
         showQualityProfile={showQualityProfile}
         showCinemaRelease={showCinemaRelease}
         showReleaseDate={showReleaseDate}
         showRelativeDates={showRelativeDates}
         shortDateFormat={shortDateFormat}
+        longDateFormat={longDateFormat}
         timeFormat={timeFormat}
         inCinemas={inCinemas}
         physicalRelease={physicalRelease}
         digitalRelease={digitalRelease}
+        ratings={ratings}
+        sizeOnDisk={sizeOnDisk}
         sortKey={sortKey}
         path={path}
         certification={certification}
+        originalTitle={originalTitle}
+        originalLanguage={originalLanguage}
       />
 
       <EditMovieModalConnector

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

@@ -3,3 +3,9 @@
   text-align: center;
   font-size: $smallFontSize;
 }
+
+.title {
+  @add-mixin truncate;
+
+  composes: info;
+}

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

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'title': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import Icon from 'Components/Icon';
+import ImdbRating from 'Components/ImdbRating';
+import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
+import { Language, Ratings } from 'Movie/Movie';
 import QualityProfile from 'typings/QualityProfile';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -12,17 +16,22 @@ interface MovieIndexPosterInfoProps {
   showQualityProfile: boolean;
   qualityProfile: QualityProfile;
   added?: string;
+  year: number;
   inCinemas?: string;
   digitalRelease?: string;
   physicalRelease?: string;
   path: string;
+  ratings: Ratings;
   certification: string;
+  originalTitle: string;
+  originalLanguage: Language;
   sizeOnDisk?: number;
   sortKey: string;
   showRelativeDates: boolean;
   showCinemaRelease: boolean;
   showReleaseDate: boolean;
   shortDateFormat: string;
+  longDateFormat: string;
   timeFormat: string;
 }
 
@@ -32,26 +41,39 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     showQualityProfile,
     qualityProfile,
     added,
+    year,
     inCinemas,
     digitalRelease,
     physicalRelease,
     path,
+    ratings,
     certification,
+    originalTitle,
+    originalLanguage,
     sizeOnDisk,
     sortKey,
     showRelativeDates,
     showCinemaRelease,
     showReleaseDate,
     shortDateFormat,
+    longDateFormat,
     timeFormat,
   } = props;
 
   if (sortKey === 'studio' && studio) {
-    return <div className={styles.info}>{studio}</div>;
+    return (
+      <div className={styles.info} title={translate('Studio')}>
+        {studio}
+      </div>
+    );
   }
 
   if (sortKey === 'qualityProfileId' && !showQualityProfile) {
-    return <div className={styles.info}>{qualityProfile.name}</div>;
+    return (
+      <div className={styles.info} title={translate('QualityProfile')}>
+        {qualityProfile.name}
+      </div>
+    );
   }
 
   if (sortKey === 'added' && added) {
@@ -66,12 +88,23 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div
+        className={styles.info}
+        title={formatDateTime(added, longDateFormat, timeFormat)}
+      >
         {translate('Added')}: {addedDate}
       </div>
     );
   }
 
+  if (sortKey === 'year' && year) {
+    return (
+      <div className={styles.info} title={translate('Year')}>
+        {year}
+      </div>
+    );
+  }
+
   if (sortKey === 'inCinemas' && inCinemas && !showCinemaRelease) {
     const inCinemasDate = getRelativeDate(
       inCinemas,
@@ -84,7 +117,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
 
     return (
-      <div className={styles.info}>
+      <div className={styles.info} title={translate('InCinemas')}>
         <Icon name={icons.IN_CINEMAS} /> {inCinemasDate}
       </div>
     );
@@ -126,18 +159,58 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
+  if (sortKey === 'imdbRating' && !!ratings.imdb) {
+    return (
+      <div className={styles.info}>
+        <ImdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
+  if (sortKey === 'tmdbRating' && !!ratings.tmdb) {
+    return (
+      <div className={styles.info}>
+        <TmdbRating ratings={ratings} iconSize={12} />
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
-    return <div className={styles.info}>{path}</div>;
+    return (
+      <div className={styles.info} title={translate('Path')}>
+        {path}
+      </div>
+    );
   }
 
   if (sortKey === 'sizeOnDisk') {
-    return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
+    return (
+      <div className={styles.info} title={translate('SizeOnDisk')}>
+        {formatBytes(sizeOnDisk)}
+      </div>
+    );
   }
 
   if (sortKey === 'certification') {
     return <div className={styles.info}>{certification}</div>;
   }
 
+  if (sortKey === 'originalTitle' && originalTitle) {
+    return (
+      <div className={styles.title} title={originalTitle}>
+        {originalTitle}
+      </div>
+    );
+  }
+
+  if (sortKey === 'originalLanguage' && originalLanguage) {
+    return (
+      <div className={styles.info} title={translate('OriginalLanguage')}>
+        {originalLanguage.name}
+      </div>
+    );
+  }
+
   return null;
 }
 

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

@@ -143,6 +143,7 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       showTitle,
       showMonitored,
       showQualityProfile,
+      showCinemaRelease,
       showReleaseDate,
     } = posterOptions;
 
@@ -167,6 +168,10 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
       heights.push(19);
     }
 
+    if (showCinemaRelease) {
+      heights.push(19);
+    }
+
     if (showReleaseDate) {
       heights.push(19);
     }
@@ -174,8 +179,13 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
     switch (sortKey) {
       case 'studio':
       case 'added':
+      case 'year':
+      case 'imdbRating':
+      case 'tmdbRating':
       case 'path':
       case 'sizeOnDisk':
+      case 'originalTitle':
+      case 'originalLanguage':
         heights.push(19);
         break;
       case 'qualityProfileId':
@@ -183,6 +193,17 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) {
           heights.push(19);
         }
         break;
+      case 'inCinemas':
+        if (!showCinemaRelease) {
+          heights.push(19);
+        }
+        break;
+      case 'digitalRelease':
+      case 'physicalRelease':
+        if (!showReleaseDate) {
+          heights.push(19);
+        }
+        break;
       default:
       // No need to add a height of 0
     }

frontend/src/Movie/Movie.ts

@@ -16,6 +16,13 @@ export interface Collection {
   title: string;
 }
 
+export interface Ratings {
+  imdb: object;
+  tmdb: object;
+  metacritic: object;
+  rottenTomatoes: object;
+}
+
 interface Movie extends ModelBase {
   tmdbId: number;
   imdbId: string;
@@ -41,7 +48,7 @@ interface Movie extends ModelBase {
   path: string;
   sizeOnDisk: number;
   genres: string[];
-  ratings: object;
+  ratings: Ratings;
   certification: string;
   tags: number[];
   images: Image[];