mirror of
https://github.com/fallenbagel/jellyseerr.git
synced 2026-01-01 04:08:45 -05:00
fix(ui): Handle missing movie/series data (#862)
This commit is contained in:
TheCatLady
@@ -131,6 +131,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
revalidate();
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
|
className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
|
||||||
@@ -354,19 +366,12 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl lg:text-4xl">
|
<h1 className="text-2xl lg:text-4xl">
|
||||||
{data.title}{' '}
|
{data.title}{' '}
|
||||||
<span className="text-2xl">({data.releaseDate.slice(0, 4)})</span>
|
{data.releaseDate && (
|
||||||
|
<span className="text-2xl">({data.releaseDate.slice(0, 4)})</span>
|
||||||
|
)}
|
||||||
</h1>
|
</h1>
|
||||||
<span className="mt-1 text-xs lg:text-base lg:mt-0">
|
<span className="mt-1 text-xs lg:text-base lg:mt-0">
|
||||||
{(data.runtime ?? 0) > 0 && (
|
{movieAttributes.join(' | ')}
|
||||||
<>
|
|
||||||
<FormattedMessage
|
|
||||||
{...messages.runtime}
|
|
||||||
values={{ minutes: data.runtime }}
|
|
||||||
/>{' '}
|
|
||||||
|{' '}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{data.genres.map((g) => g.name).join(', ')}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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">
|
<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,38 +573,38 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="bg-gray-900 border border-gray-800 rounded-lg shadow">
|
<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">
|
<div className="flex items-center justify-center px-4 py-2 border-b border-gray-800 last:border-b-0">
|
||||||
{ratingData?.criticsRating &&
|
{ratingData?.criticsRating && ratingData?.criticsScore && (
|
||||||
(ratingData?.criticsScore ?? 0) > 0 && (
|
<>
|
||||||
<>
|
<span className="text-sm">
|
||||||
<span className="text-sm">
|
{ratingData.criticsRating === 'Rotten' ? (
|
||||||
{ratingData.criticsRating === 'Rotten' ? (
|
<RTRotten className="w-6 mr-1" />
|
||||||
<RTRotten className="w-6 mr-1" />
|
) : (
|
||||||
) : (
|
<RTFresh className="w-6 mr-1" />
|
||||||
<RTFresh className="w-6 mr-1" />
|
)}
|
||||||
)}
|
</span>
|
||||||
</span>
|
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
||||||
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
{ratingData.criticsScore}%
|
||||||
{ratingData.criticsScore}%
|
</span>
|
||||||
</span>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
{ratingData?.audienceRating && ratingData?.audienceScore && (
|
||||||
{ratingData?.audienceRating &&
|
<>
|
||||||
(ratingData?.audienceScore ?? 0) > 0 && (
|
<span className="text-sm">
|
||||||
<>
|
{ratingData.audienceRating === 'Spilled' ? (
|
||||||
<span className="text-sm">
|
<RTAudRotten className="w-6 mr-1" />
|
||||||
{ratingData.audienceRating === 'Spilled' ? (
|
) : (
|
||||||
<RTAudRotten className="w-6 mr-1" />
|
<RTAudFresh className="w-6 mr-1" />
|
||||||
) : (
|
)}
|
||||||
<RTAudFresh className="w-6 mr-1" />
|
</span>
|
||||||
)}
|
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
||||||
</span>
|
{ratingData.audienceScore}%
|
||||||
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
</span>
|
||||||
{ratingData.audienceScore}%
|
</>
|
||||||
</span>
|
)}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{data.voteCount > 0 && (
|
{data.voteCount > 0 && (
|
||||||
<>
|
<>
|
||||||
<span className="text-sm">
|
<span className="text-sm">
|
||||||
@@ -612,19 +617,21 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
|
{data.releaseDate && (
|
||||||
<span className="text-sm">
|
<div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
|
||||||
<FormattedMessage {...messages.releasedate} />
|
<span className="text-sm">
|
||||||
</span>
|
<FormattedMessage {...messages.releasedate} />
|
||||||
<span className="flex-1 text-sm text-right text-gray-400">
|
</span>
|
||||||
<FormattedDate
|
<span className="flex-1 text-sm text-right text-gray-400">
|
||||||
value={new Date(data.releaseDate)}
|
<FormattedDate
|
||||||
year="numeric"
|
value={new Date(data.releaseDate)}
|
||||||
month="long"
|
year="numeric"
|
||||||
day="numeric"
|
month="long"
|
||||||
/>
|
day="numeric"
|
||||||
</span>
|
/>
|
||||||
</div>
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
|
<div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
|
||||||
<span className="text-sm">
|
<span className="text-sm">
|
||||||
<FormattedMessage {...messages.status} />
|
<FormattedMessage {...messages.status} />
|
||||||
@@ -700,45 +707,49 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
|
{data.credits.cast.length > 0 && (
|
||||||
<div className="flex-1 min-w-0">
|
<>
|
||||||
<Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
|
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
|
||||||
<a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
|
<div className="flex-1 min-w-0">
|
||||||
<span>
|
<Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
|
||||||
<FormattedMessage {...messages.cast} />
|
<a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
|
||||||
</span>
|
<span>
|
||||||
<svg
|
<FormattedMessage {...messages.cast} />
|
||||||
className="w-6 h-6 ml-2"
|
</span>
|
||||||
fill="none"
|
<svg
|
||||||
stroke="currentColor"
|
className="w-6 h-6 ml-2"
|
||||||
viewBox="0 0 24 24"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
stroke="currentColor"
|
||||||
>
|
viewBox="0 0 24 24"
|
||||||
<path
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
strokeLinecap="round"
|
>
|
||||||
strokeLinejoin="round"
|
<path
|
||||||
strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
strokeLinejoin="round"
|
||||||
/>
|
strokeWidth={2}
|
||||||
</svg>
|
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
</a>
|
/>
|
||||||
</Link>
|
</svg>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</Link>
|
||||||
<Slider
|
</div>
|
||||||
sliderKey="cast"
|
</div>
|
||||||
isLoading={false}
|
<Slider
|
||||||
isEmpty={false}
|
sliderKey="cast"
|
||||||
items={data?.credits.cast.slice(0, 20).map((person) => (
|
isLoading={false}
|
||||||
<PersonCard
|
isEmpty={false}
|
||||||
key={`cast-item-${person.id}`}
|
items={data.credits.cast.slice(0, 20).map((person) => (
|
||||||
personId={person.id}
|
<PersonCard
|
||||||
name={person.name}
|
key={`cast-item-${person.id}`}
|
||||||
subName={person.character}
|
personId={person.id}
|
||||||
profilePath={person.profilePath}
|
name={person.name}
|
||||||
|
subName={person.character}
|
||||||
|
profilePath={person.profilePath}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
/>
|
)}
|
||||||
<MediaSlider
|
<MediaSlider
|
||||||
sliderKey="recommendations"
|
sliderKey="recommendations"
|
||||||
title={intl.formatMessage(messages.recommendations)}
|
title={intl.formatMessage(messages.recommendations)}
|
||||||
|
|||||||
@@ -386,9 +386,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl lg:text-4xl">
|
<h1 className="text-2xl lg:text-4xl">
|
||||||
<span>{data.name}</span>
|
{data.name}{' '}
|
||||||
{data.firstAirDate && (
|
{data.firstAirDate && (
|
||||||
<span className="ml-2 text-2xl">
|
<span className="text-2xl">
|
||||||
({data.firstAirDate.slice(0, 4)})
|
({data.firstAirDate.slice(0, 4)})
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@@ -591,38 +591,38 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="w-full mt-8 md:w-80 md:mt-0">
|
<div className="w-full mt-8 md:w-80 md:mt-0">
|
||||||
<div className="bg-gray-900 border border-gray-800 rounded-lg shadow">
|
<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">
|
<div className="flex items-center justify-center px-4 py-2 border-b border-gray-800 last:border-b-0">
|
||||||
{ratingData?.criticsRating &&
|
{ratingData?.criticsRating && ratingData?.criticsScore && (
|
||||||
(ratingData?.criticsScore ?? 0) > 0 && (
|
<>
|
||||||
<>
|
<span className="text-sm">
|
||||||
<span className="text-sm">
|
{ratingData.criticsRating === 'Rotten' ? (
|
||||||
{ratingData.criticsRating === 'Rotten' ? (
|
<RTRotten className="w-6 mr-1" />
|
||||||
<RTRotten className="w-6 mr-1" />
|
) : (
|
||||||
) : (
|
<RTFresh className="w-6 mr-1" />
|
||||||
<RTFresh className="w-6 mr-1" />
|
)}
|
||||||
)}
|
</span>
|
||||||
</span>
|
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
||||||
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
{ratingData.criticsScore}%
|
||||||
{ratingData.criticsScore}%
|
</span>
|
||||||
</span>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
{ratingData?.audienceRating && ratingData?.audienceScore && (
|
||||||
{ratingData?.audienceRating &&
|
<>
|
||||||
(ratingData?.audienceScore ?? 0) > 0 && (
|
<span className="text-sm">
|
||||||
<>
|
{ratingData.audienceRating === 'Spilled' ? (
|
||||||
<span className="text-sm">
|
<RTAudRotten className="w-6 mr-1" />
|
||||||
{ratingData.audienceRating === 'Spilled' ? (
|
) : (
|
||||||
<RTAudRotten className="w-6 mr-1" />
|
<RTAudFresh className="w-6 mr-1" />
|
||||||
) : (
|
)}
|
||||||
<RTAudFresh className="w-6 mr-1" />
|
</span>
|
||||||
)}
|
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
||||||
</span>
|
{ratingData.audienceScore}%
|
||||||
<span className="mr-4 text-sm text-gray-400 last:mr-0">
|
</span>
|
||||||
{ratingData.audienceScore}%
|
</>
|
||||||
</span>
|
)}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{data.voteCount > 0 && (
|
{data.voteCount > 0 && (
|
||||||
<>
|
<>
|
||||||
<span className="text-sm">
|
<span className="text-sm">
|
||||||
@@ -724,45 +724,49 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
|
{data.credits.cast.length > 0 && (
|
||||||
<div className="flex-1 min-w-0">
|
<>
|
||||||
<Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
|
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
|
||||||
<a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
|
<div className="flex-1 min-w-0">
|
||||||
<span>
|
<Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
|
||||||
<FormattedMessage {...messages.cast} />
|
<a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
|
||||||
</span>
|
<span>
|
||||||
<svg
|
<FormattedMessage {...messages.cast} />
|
||||||
className="w-6 h-6 ml-2"
|
</span>
|
||||||
fill="none"
|
<svg
|
||||||
stroke="currentColor"
|
className="w-6 h-6 ml-2"
|
||||||
viewBox="0 0 24 24"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
stroke="currentColor"
|
||||||
>
|
viewBox="0 0 24 24"
|
||||||
<path
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
strokeLinecap="round"
|
>
|
||||||
strokeLinejoin="round"
|
<path
|
||||||
strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
strokeLinejoin="round"
|
||||||
/>
|
strokeWidth={2}
|
||||||
</svg>
|
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
</a>
|
/>
|
||||||
</Link>
|
</svg>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</Link>
|
||||||
<Slider
|
</div>
|
||||||
sliderKey="cast"
|
</div>
|
||||||
isLoading={false}
|
<Slider
|
||||||
isEmpty={false}
|
sliderKey="cast"
|
||||||
items={data?.credits.cast.slice(0, 20).map((person) => (
|
isLoading={false}
|
||||||
<PersonCard
|
isEmpty={false}
|
||||||
key={`cast-item-${person.id}`}
|
items={data.credits.cast.slice(0, 20).map((person) => (
|
||||||
personId={person.id}
|
<PersonCard
|
||||||
name={person.name}
|
key={`cast-item-${person.id}`}
|
||||||
subName={person.character}
|
personId={person.id}
|
||||||
profilePath={person.profilePath}
|
name={person.name}
|
||||||
|
subName={person.character}
|
||||||
|
profilePath={person.profilePath}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
/>
|
)}
|
||||||
<MediaSlider
|
<MediaSlider
|
||||||
sliderKey="recommendations"
|
sliderKey="recommendations"
|
||||||
title={intl.formatMessage(messages.recommendations)}
|
title={intl.formatMessage(messages.recommendations)}
|
||||||
|
|||||||
Reference in New Issue
Block a user