chrisryn/requestarr
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ui): Handle missing movie/series data (#862)

Browse Source
This commit is contained in:
TheCatLady
2021-02-07 22:37:22 -05:00
committed by GitHub
parent 53f6f59798
commit 7c0ddad653
2 changed files with 179 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/MovieDetails/index.tsx
View File

@@ -131,6 +131,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ 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 (
<div
className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
@@ -354,19 +366,12 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</div>
<h1 className="text-2xl lg:text-4xl">
{data.title}{' '}
{data.releaseDate && (
<span className="text-2xl">({data.releaseDate.slice(0, 4)})</span>
)}
</h1>
<span className="mt-1 text-xs lg:text-base lg:mt-0">
{(data.runtime ?? 0) > 0 && (
<>
<FormattedMessage
{...messages.runtime}
values={{ minutes: data.runtime }}
/>{' '}
|{' '}
</>
)}
{data.genres.map((g) => g.name).join(', ')}
{movieAttributes.join(' | ')}
</span>
</div>
<div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
@@ -568,10 +573,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</div>
)}
<div className="bg-gray-900 border border-gray-800 rounded-lg shadow">
{(data.voteCount > 0 || ratingData) && (
{(data.voteCount ||
(ratingData?.criticsRating && ratingData?.criticsScore) ||
(ratingData?.audienceRating && ratingData?.audienceScore)) && (
<div className="flex items-center justify-center px-4 py-2 border-b border-gray-800 last:border-b-0">
{ratingData?.criticsRating &&
(ratingData?.criticsScore ?? 0) > 0 && (
{ratingData?.criticsRating && ratingData?.criticsScore && (
<>
<span className="text-sm">
{ratingData.criticsRating === 'Rotten' ? (
@@ -585,8 +591,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</span>
</>
)}
{ratingData?.audienceRating &&
(ratingData?.audienceScore ?? 0) > 0 && (
{ratingData?.audienceRating && ratingData?.audienceScore && (
<>
<span className="text-sm">
{ratingData.audienceRating === 'Spilled' ? (
@@ -612,6 +617,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
)}
</div>
)}
{data.releaseDate && (
<div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
<span className="text-sm">
<FormattedMessage {...messages.releasedate} />
@@ -625,6 +631,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
/>
</span>
</div>
)}
<div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
<span className="text-sm">
<FormattedMessage {...messages.status} />
@@ -700,6 +707,8 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</div>
</div>
</div>
{data.credits.cast.length > 0 && (
<>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
<Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
@@ -729,7 +738,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
sliderKey="cast"
isLoading={false}
isEmpty={false}
items={data?.credits.cast.slice(0, 20).map((person) => (
items={data.credits.cast.slice(0, 20).map((person) => (
<PersonCard
key={`cast-item-${person.id}`}
personId={person.id}
@@ -739,6 +748,8 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
/>
))}
/>
</>
)}
<MediaSlider
sliderKey="recommendations"
title={intl.formatMessage(messages.recommendations)}

20
src/components/TvDetails/index.tsx
View File

@@ -386,9 +386,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</span>
</div>
<h1 className="text-2xl lg:text-4xl">
<span>{data.name}</span>
{data.name}{' '}
{data.firstAirDate && (
<span className="ml-2 text-2xl">
<span className="text-2xl">
({data.firstAirDate.slice(0, 4)})
</span>
)}
@@ -591,10 +591,11 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</div>
<div className="w-full mt-8 md:w-80 md:mt-0">
<div className="bg-gray-900 border border-gray-800 rounded-lg shadow">
{(data.voteCount > 0 || ratingData) && (
{(data.voteCount ||
(ratingData?.criticsRating && ratingData?.criticsScore) ||
(ratingData?.audienceRating && ratingData?.audienceScore)) && (
<div className="flex items-center justify-center px-4 py-2 border-b border-gray-800 last:border-b-0">
{ratingData?.criticsRating &&
(ratingData?.criticsScore ?? 0) > 0 && (
{ratingData?.criticsRating && ratingData?.criticsScore && (
<>
<span className="text-sm">
{ratingData.criticsRating === 'Rotten' ? (
@@ -608,8 +609,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</span>
</>
)}
{ratingData?.audienceRating &&
(ratingData?.audienceScore ?? 0) > 0 && (
{ratingData?.audienceRating && ratingData?.audienceScore && (
<>
<span className="text-sm">
{ratingData.audienceRating === 'Spilled' ? (
@@ -724,6 +724,8 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</div>
</div>
</div>
{data.credits.cast.length > 0 && (
<>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
<Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
@@ -753,7 +755,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
sliderKey="cast"
isLoading={false}
isEmpty={false}
items={data?.credits.cast.slice(0, 20).map((person) => (
items={data.credits.cast.slice(0, 20).map((person) => (
<PersonCard
key={`cast-item-${person.id}`}
personId={person.id}
@@ -763,6 +765,8 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
/>
))}
/>
</>
)}
<MediaSlider
sliderKey="recommendations"
title={intl.formatMessage(messages.recommendations)}