diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index c4c27ca4..3faf2363 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -1,8 +1,10 @@ import { ArrowCircleRightIcon, + CloudIcon, CogIcon, FilmIcon, PlayIcon, + TicketIcon, } from '@heroicons/react/outline'; import { CheckCircleIcon, @@ -12,6 +14,7 @@ import { ExternalLinkIcon, } from '@heroicons/react/solid'; import axios from 'axios'; +import { uniqBy } from 'lodash'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { useMemo, useState } from 'react'; @@ -49,7 +52,8 @@ import StatusBadge from '../StatusBadge'; const messages = defineMessages({ originaltitle: 'Original Title', - releasedate: 'Release Date', + releasedate: + '{releaseCount, plural, one {Release Date} other {Release Dates}}', revenue: 'Revenue', budget: 'Budget', watchtrailer: 'Watch Trailer', @@ -179,20 +183,29 @@ const MovieDetails: React.FC = ({ movie }) => { : settings.currentSettings.region ? settings.currentSettings.region : 'US'; + + const releases = data.releases.results.find( + (r) => r.iso_3166_1 === region + )?.release_dates; + + // Release date types: + // 1. Premiere + // 2. Theatrical (limited) + // 3. Theatrical + // 4. Digital + // 5. Physical + // 6. TV + const filteredReleases = uniqBy( + releases?.filter((r) => r.type > 2 && r.type < 6), + 'type' + ); + const movieAttributes: React.ReactNode[] = []; - if ( - data.releases.results.length && - (data.releases.results.find((r) => r.iso_3166_1 === region) - ?.release_dates[0].certification || - data.releases.results[0].release_dates[0].certification) - ) { + const certification = releases?.find((r) => r.certification)?.certification; + if (certification) { movieAttributes.push( - - {data.releases.results.find((r) => r.iso_3166_1 === region) - ?.release_dates[0].certification || - data.releases.results[0].release_dates[0].certification} - + {certification} ); } @@ -577,17 +590,66 @@ const MovieDetails: React.FC = ({ movie }) => { {intl.formatMessage(globalMessages.status)} {data.status} - {data.releaseDate && ( + {filteredReleases && filteredReleases.length > 0 ? (
- {intl.formatMessage(messages.releasedate)} - - {intl.formatDate(data.releaseDate, { - year: 'numeric', - month: 'long', - day: 'numeric', + + {intl.formatMessage(messages.releasedate, { + releaseCount: filteredReleases.length, })} + + {filteredReleases.map((r, i) => ( + + {r.type === 3 ? ( + // Theatrical + + ) : r.type === 4 ? ( + // Digital + + ) : ( + // Physical + + + + )} + + {intl.formatDate(r.release_date, { + year: 'numeric', + month: 'long', + day: 'numeric', + })} + + + ))} +
+ ) : ( + data.releaseDate && ( +
+ + {intl.formatMessage(messages.releasedate, { + releaseCount: 1, + })} + + + {intl.formatDate(data.releaseDate, { + year: 'numeric', + month: 'long', + day: 'numeric', + })} + +
+ ) )} {data.revenue > 0 && (
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index 73a82c69..44554ba5 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -177,17 +177,12 @@ const TvDetails: React.FC = ({ tv }) => { : 'US'; const seriesAttributes: React.ReactNode[] = []; - if ( - data.contentRatings.results.length && - data.contentRatings.results.find( - (r) => r.iso_3166_1 === region || data.contentRatings.results[0].rating - ) - ) { + const contentRating = data.contentRatings.results.find( + (r) => r.iso_3166_1 === region + )?.rating; + if (contentRating) { seriesAttributes.push( - - {data.contentRatings.results.find((r) => r.iso_3166_1 === region) - ?.rating || data.contentRatings.results[0].rating} - + {contentRating} ); } diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index fb03c1af..0ea70344 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -80,7 +80,7 @@ "components.MovieDetails.play4konplex": "Play in 4K on Plex", "components.MovieDetails.playonplex": "Play on Plex", "components.MovieDetails.recommendations": "Recommendations", - "components.MovieDetails.releasedate": "Release Date", + "components.MovieDetails.releasedate": "{releaseCount, plural, one {Release Date} other {Release Dates}}", "components.MovieDetails.revenue": "Revenue", "components.MovieDetails.runtime": "{minutes} minutes", "components.MovieDetails.showless": "Show Less",