diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx index 7f73251423..2ea560e367 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx +++ b/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 ? ( -
{qualityProfile.name}
+
+ {qualityProfile.name} +
) : null} {showCinemaRelease && inCinemas ? ( -
+
{' '} {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} /> {studio}
; + return ( +
+ {studio} +
+ ); } if (sortKey === 'qualityProfileId' && !showQualityProfile) { - return
{qualityProfile.name}
; + return ( +
+ {qualityProfile.name} +
+ ); } if (sortKey === 'added' && added) { @@ -66,12 +88,23 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { ); return ( -
+
{translate('Added')}: {addedDate}
); } + if (sortKey === 'year' && year) { + return ( +
+ {year} +
+ ); + } + if (sortKey === 'inCinemas' && inCinemas && !showCinemaRelease) { const inCinemasDate = getRelativeDate( inCinemas, @@ -84,7 +117,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { ); return ( -
+
{inCinemasDate}
); @@ -126,18 +159,58 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { ); } + if (sortKey === 'imdbRating' && !!ratings.imdb) { + return ( +
+ +
+ ); + } + + if (sortKey === 'tmdbRating' && !!ratings.tmdb) { + return ( +
+ +
+ ); + } + if (sortKey === 'path') { - return
{path}
; + return ( +
+ {path} +
+ ); } if (sortKey === 'sizeOnDisk') { - return
{formatBytes(sizeOnDisk)}
; + return ( +
+ {formatBytes(sizeOnDisk)} +
+ ); } if (sortKey === 'certification') { return
{certification}
; } + if (sortKey === 'originalTitle' && originalTitle) { + return ( +
+ {originalTitle} +
+ ); + } + + if (sortKey === 'originalLanguage' && originalLanguage) { + return ( +
+ {originalLanguage.name} +
+ ); + } + return null; } diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx index 3354c7a3e9..b866daef6c 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx +++ b/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 } diff --git a/frontend/src/Movie/Movie.ts b/frontend/src/Movie/Movie.ts index 4f1993068f..d1abf81b9b 100644 --- a/frontend/src/Movie/Movie.ts +++ b/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[];