diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 5fd3acfca..f23130a14 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -131,6 +131,18 @@ const MovieDetails: React.FC = ({ movie }) => { revalidate(); }; + const movieAttributes = []; + + if (data.runtime) { + movieAttributes.push( + intl.formatMessage({ ...messages.runtime }, { minutes: data.runtime }) + ); + } + + if (data.genres.length) { + movieAttributes.push(data.genres.map((g) => g.name).join(', ')); + } + return (
= ({ movie }) => {

{data.title}{' '} - ({data.releaseDate.slice(0, 4)}) + {data.releaseDate && ( + ({data.releaseDate.slice(0, 4)}) + )}

- {(data.runtime ?? 0) > 0 && ( - <> - {' '} - |{' '} - - )} - {data.genres.map((g) => g.name).join(', ')} + {movieAttributes.join(' | ')}
@@ -568,38 +573,38 @@ const MovieDetails: React.FC = ({ movie }) => {
)}
- {(data.voteCount > 0 || ratingData) && ( + {(data.voteCount || + (ratingData?.criticsRating && ratingData?.criticsScore) || + (ratingData?.audienceRating && ratingData?.audienceScore)) && (
- {ratingData?.criticsRating && - (ratingData?.criticsScore ?? 0) > 0 && ( - <> - - {ratingData.criticsRating === 'Rotten' ? ( - - ) : ( - - )} - - - {ratingData.criticsScore}% - - - )} - {ratingData?.audienceRating && - (ratingData?.audienceScore ?? 0) > 0 && ( - <> - - {ratingData.audienceRating === 'Spilled' ? ( - - ) : ( - - )} - - - {ratingData.audienceScore}% - - - )} + {ratingData?.criticsRating && ratingData?.criticsScore && ( + <> + + {ratingData.criticsRating === 'Rotten' ? ( + + ) : ( + + )} + + + {ratingData.criticsScore}% + + + )} + {ratingData?.audienceRating && ratingData?.audienceScore && ( + <> + + {ratingData.audienceRating === 'Spilled' ? ( + + ) : ( + + )} + + + {ratingData.audienceScore}% + + + )} {data.voteCount > 0 && ( <> @@ -612,19 +617,21 @@ const MovieDetails: React.FC = ({ movie }) => { )}
)} -
- - - - - - -
+ {data.releaseDate && ( +
+ + + + + + +
+ )}
@@ -700,45 +707,49 @@ const MovieDetails: React.FC = ({ movie }) => {
-
-
- - - - - - - - - - -
-
- ( - 0 && ( + <> +
+
+ + + + + + + + + + +
+
+ ( + + ))} /> - ))} - /> + + )} = ({ tv }) => {

- {data.name} + {data.name}{' '} {data.firstAirDate && ( - + ({data.firstAirDate.slice(0, 4)}) )} @@ -591,38 +591,38 @@ const TvDetails: React.FC = ({ tv }) => {
- {(data.voteCount > 0 || ratingData) && ( + {(data.voteCount || + (ratingData?.criticsRating && ratingData?.criticsScore) || + (ratingData?.audienceRating && ratingData?.audienceScore)) && (
- {ratingData?.criticsRating && - (ratingData?.criticsScore ?? 0) > 0 && ( - <> - - {ratingData.criticsRating === 'Rotten' ? ( - - ) : ( - - )} - - - {ratingData.criticsScore}% - - - )} - {ratingData?.audienceRating && - (ratingData?.audienceScore ?? 0) > 0 && ( - <> - - {ratingData.audienceRating === 'Spilled' ? ( - - ) : ( - - )} - - - {ratingData.audienceScore}% - - - )} + {ratingData?.criticsRating && ratingData?.criticsScore && ( + <> + + {ratingData.criticsRating === 'Rotten' ? ( + + ) : ( + + )} + + + {ratingData.criticsScore}% + + + )} + {ratingData?.audienceRating && ratingData?.audienceScore && ( + <> + + {ratingData.audienceRating === 'Spilled' ? ( + + ) : ( + + )} + + + {ratingData.audienceScore}% + + + )} {data.voteCount > 0 && ( <> @@ -724,45 +724,49 @@ const TvDetails: React.FC = ({ tv }) => {
-
- -
- ( - 0 && ( + <> +
+ +
+ ( + + ))} /> - ))} - /> + + )}