open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
pull/875/head
TheCatLady 4 years ago committed by GitHub
parent 53f6f59798
commit 7c0ddad653
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 179 additions and 164 deletions
Show Stats Download Patch File Download Diff File

197
src/components/MovieDetails/index.tsx
Unescape View File

@ -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)}

146
src/components/TvDetails/index.tsx
Unescape View File

@ -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)}

Write Preview
Loading…
Cancel
Save