mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
fix(frontend): fixed similar/recommendations showing when empty (#180)
This commit is contained in:
Brandon Cohen
@@ -491,98 +491,106 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
/>
|
/>
|
||||||
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
{(recommended?.results ?? []).length > 0 && (
|
||||||
<div className="flex-1 min-w-0">
|
<>
|
||||||
<Link
|
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
||||||
href="/movie/[movieId]/recommendations"
|
<div className="flex-1 min-w-0">
|
||||||
as={`/movie/${data.id}/recommendations`}
|
<Link
|
||||||
>
|
href="/movie/[movieId]/recommendations"
|
||||||
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
as={`/movie/${data.id}/recommendations`}
|
||||||
<span>
|
|
||||||
<FormattedMessage {...messages.recommendations} />
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6 ml-2"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
>
|
||||||
<path
|
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
||||||
strokeLinecap="round"
|
<span>
|
||||||
strokeLinejoin="round"
|
<FormattedMessage {...messages.recommendations} />
|
||||||
strokeWidth={2}
|
</span>
|
||||||
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
<svg
|
||||||
/>
|
className="w-6 h-6 ml-2"
|
||||||
</svg>
|
fill="none"
|
||||||
</a>
|
stroke="currentColor"
|
||||||
</Link>
|
viewBox="0 0 24 24"
|
||||||
</div>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</div>
|
>
|
||||||
<Slider
|
<path
|
||||||
sliderKey="recommendations"
|
strokeLinecap="round"
|
||||||
isLoading={!recommended && !recommendedError}
|
strokeLinejoin="round"
|
||||||
isEmpty={false}
|
strokeWidth={2}
|
||||||
items={recommended?.results.map((title) => (
|
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
<TitleCard
|
/>
|
||||||
key={`recommended-${title.id}`}
|
</svg>
|
||||||
id={title.id}
|
</a>
|
||||||
image={title.posterPath}
|
</Link>
|
||||||
status={title.mediaInfo?.status}
|
</div>
|
||||||
summary={title.overview}
|
</div>
|
||||||
title={title.title}
|
<Slider
|
||||||
userScore={title.voteAverage}
|
sliderKey="recommendations"
|
||||||
year={title.releaseDate}
|
isLoading={!recommended && !recommendedError}
|
||||||
mediaType={title.mediaType}
|
isEmpty={false}
|
||||||
|
items={recommended?.results.map((title) => (
|
||||||
|
<TitleCard
|
||||||
|
key={`recommended-${title.id}`}
|
||||||
|
id={title.id}
|
||||||
|
image={title.posterPath}
|
||||||
|
status={title.mediaInfo?.status}
|
||||||
|
summary={title.overview}
|
||||||
|
title={title.title}
|
||||||
|
userScore={title.voteAverage}
|
||||||
|
year={title.releaseDate}
|
||||||
|
mediaType={title.mediaType}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
/>
|
)}
|
||||||
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
{(similar?.results ?? []).length > 0 && (
|
||||||
<div className="flex-1 min-w-0">
|
<>
|
||||||
<Link
|
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
||||||
href="/movie/[movieId]/similar"
|
<div className="flex-1 min-w-0">
|
||||||
as={`/movie/${data.id}/similar`}
|
<Link
|
||||||
>
|
href="/movie/[movieId]/similar"
|
||||||
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
as={`/movie/${data.id}/similar`}
|
||||||
<span>
|
|
||||||
<FormattedMessage {...messages.similar} />
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6 ml-2"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
>
|
||||||
<path
|
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
||||||
strokeLinecap="round"
|
<span>
|
||||||
strokeLinejoin="round"
|
<FormattedMessage {...messages.similar} />
|
||||||
strokeWidth={2}
|
</span>
|
||||||
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
<svg
|
||||||
/>
|
className="w-6 h-6 ml-2"
|
||||||
</svg>
|
fill="none"
|
||||||
</a>
|
stroke="currentColor"
|
||||||
</Link>
|
viewBox="0 0 24 24"
|
||||||
</div>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</div>
|
>
|
||||||
<Slider
|
<path
|
||||||
sliderKey="similar"
|
strokeLinecap="round"
|
||||||
isLoading={!similar && !similarError}
|
strokeLinejoin="round"
|
||||||
isEmpty={false}
|
strokeWidth={2}
|
||||||
items={similar?.results.map((title) => (
|
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
<TitleCard
|
/>
|
||||||
key={`recommended-${title.id}`}
|
</svg>
|
||||||
id={title.id}
|
</a>
|
||||||
image={title.posterPath}
|
</Link>
|
||||||
status={title.mediaInfo?.status}
|
</div>
|
||||||
summary={title.overview}
|
</div>
|
||||||
title={title.title}
|
<Slider
|
||||||
userScore={title.voteAverage}
|
sliderKey="similar"
|
||||||
year={title.releaseDate}
|
isLoading={!similar && !similarError}
|
||||||
mediaType={title.mediaType}
|
isEmpty={false}
|
||||||
|
items={similar?.results.map((title) => (
|
||||||
|
<TitleCard
|
||||||
|
key={`recommended-${title.id}`}
|
||||||
|
id={title.id}
|
||||||
|
image={title.posterPath}
|
||||||
|
status={title.mediaInfo?.status}
|
||||||
|
summary={title.overview}
|
||||||
|
title={title.title}
|
||||||
|
userScore={title.voteAverage}
|
||||||
|
year={title.releaseDate}
|
||||||
|
mediaType={title.mediaType}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
/>
|
)}
|
||||||
<div className="pb-8" />
|
<div className="pb-8" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -440,95 +440,103 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
/>
|
/>
|
||||||
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
{(recommended?.results ?? []).length > 0 && (
|
||||||
<div className="flex-1 min-w-0">
|
<>
|
||||||
<Link
|
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
||||||
href="/tv/[tvId]/recommendations"
|
<div className="flex-1 min-w-0">
|
||||||
as={`/tv/${data.id}/recommendations`}
|
<Link
|
||||||
>
|
href="/tv/[tvId]/recommendations"
|
||||||
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
as={`/tv/${data.id}/recommendations`}
|
||||||
<span>
|
|
||||||
<FormattedMessage {...messages.recommendations} />
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6 ml-2"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
>
|
||||||
<path
|
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
||||||
strokeLinecap="round"
|
<span>
|
||||||
strokeLinejoin="round"
|
<FormattedMessage {...messages.recommendations} />
|
||||||
strokeWidth={2}
|
</span>
|
||||||
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
<svg
|
||||||
/>
|
className="w-6 h-6 ml-2"
|
||||||
</svg>
|
fill="none"
|
||||||
</a>
|
stroke="currentColor"
|
||||||
</Link>
|
viewBox="0 0 24 24"
|
||||||
</div>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</div>
|
>
|
||||||
<Slider
|
<path
|
||||||
sliderKey="recommendations"
|
strokeLinecap="round"
|
||||||
isLoading={!recommended && !recommendedError}
|
strokeLinejoin="round"
|
||||||
isEmpty={false}
|
strokeWidth={2}
|
||||||
items={recommended?.results.map((title) => (
|
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
<TitleCard
|
/>
|
||||||
key={`recommended-${title.id}`}
|
</svg>
|
||||||
id={title.id}
|
</a>
|
||||||
image={title.posterPath}
|
</Link>
|
||||||
status={title.mediaInfo?.status}
|
</div>
|
||||||
summary={title.overview}
|
</div>
|
||||||
title={title.name}
|
<Slider
|
||||||
userScore={title.voteAverage}
|
sliderKey="recommendations"
|
||||||
year={title.firstAirDate}
|
isLoading={!recommended && !recommendedError}
|
||||||
mediaType={title.mediaType}
|
isEmpty={false}
|
||||||
|
items={recommended?.results.map((title) => (
|
||||||
|
<TitleCard
|
||||||
|
key={`recommended-${title.id}`}
|
||||||
|
id={title.id}
|
||||||
|
image={title.posterPath}
|
||||||
|
status={title.mediaInfo?.status}
|
||||||
|
summary={title.overview}
|
||||||
|
title={title.name}
|
||||||
|
userScore={title.voteAverage}
|
||||||
|
year={title.firstAirDate}
|
||||||
|
mediaType={title.mediaType}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
/>
|
)}
|
||||||
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
{(similar?.results ?? []).length > 0 && (
|
||||||
<div className="flex-1 min-w-0">
|
<>
|
||||||
<Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/similar`}>
|
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
||||||
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
<div className="flex-1 min-w-0">
|
||||||
<span>
|
<Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/similar`}>
|
||||||
<FormattedMessage {...messages.similar} />
|
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
|
||||||
</span>
|
<span>
|
||||||
<svg
|
<FormattedMessage {...messages.similar} />
|
||||||
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="similar"
|
</div>
|
||||||
isLoading={!similar && !similarError}
|
<Slider
|
||||||
isEmpty={false}
|
sliderKey="similar"
|
||||||
items={similar?.results.map((title) => (
|
isLoading={!similar && !similarError}
|
||||||
<TitleCard
|
isEmpty={false}
|
||||||
key={`recommended-${title.id}`}
|
items={similar?.results.map((title) => (
|
||||||
id={title.id}
|
<TitleCard
|
||||||
image={title.posterPath}
|
key={`recommended-${title.id}`}
|
||||||
status={title.mediaInfo?.status}
|
id={title.id}
|
||||||
summary={title.overview}
|
image={title.posterPath}
|
||||||
title={title.name}
|
status={title.mediaInfo?.status}
|
||||||
userScore={title.voteAverage}
|
summary={title.overview}
|
||||||
year={title.firstAirDate}
|
title={title.name}
|
||||||
mediaType={title.mediaType}
|
userScore={title.voteAverage}
|
||||||
|
year={title.firstAirDate}
|
||||||
|
mediaType={title.mediaType}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
/>
|
)}
|
||||||
<div className="pb-8" />
|
<div className="pb-8" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user