mirror of
https://github.com/p-stream/p-stream.git
synced 2026-04-21 00:02:07 +00:00
only show selected type
This commit is contained in:
Ivan Evans
parent
67d54095dd
commit
703d7f79ab
1 changed files with 149 additions and 133 deletions
|
|
@ -1115,150 +1115,166 @@ export function DiscoverContent() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center mt-5">
|
{selectedCategory === "movies" && (
|
||||||
<Divider marginClass="mr-5" />
|
<>
|
||||||
<h1 className="text-4xl font-bold text-white mx-auto">Movies</h1>
|
<div className="flex items-center mt-5 mb-4">
|
||||||
<Divider marginClass="ml-5" />
|
<Divider marginClass="mr-5" />
|
||||||
</div>
|
<h1 className="text-4xl font-bold text-white mx-auto">Movies</h1>
|
||||||
<div className="grid grid-cols-1 gap-0 mt-4">
|
<Divider marginClass="ml-5" />
|
||||||
{" "}
|
|
||||||
{categories.map((category) => (
|
|
||||||
<div
|
|
||||||
key={category.name}
|
|
||||||
id={`carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
|
|
||||||
className=""
|
|
||||||
>
|
|
||||||
{renderMovies(categoryMovies[category.name] || [], category.name)}
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
<div className="flex justify-center overflow-x-auto">
|
||||||
{genres.map((genre) => (
|
{isMobile && (
|
||||||
<div
|
<div className="">
|
||||||
key={`${genre.id}|${genre.name}`}
|
{renderScrollButton("providers", "left")}
|
||||||
id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
|
</div>
|
||||||
className=""
|
)}
|
||||||
>
|
<div
|
||||||
{renderMovies(genreMovies[genre.id] || [], genre.name)}
|
id="button-carousel-providers"
|
||||||
</div>
|
className="flex mb-4 overflow-x-auto scroll-smooth"
|
||||||
))}
|
style={{
|
||||||
</div>
|
scrollbarWidth: "thin",
|
||||||
<div
|
scrollbarColor: "transparent transparent",
|
||||||
key={`carousel-providers-${selectedProvider.id}`}
|
}}
|
||||||
id="carousel-providers"
|
>
|
||||||
>
|
<div className="flex space-x-2 py-1">
|
||||||
<div className="flex justify-center overflow-x-auto">
|
{renderMovieProviderButtons()}
|
||||||
{isMobile && (
|
</div>
|
||||||
<div className="">{renderScrollButton("providers", "left")}</div>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
id="button-carousel-providers"
|
|
||||||
className="flex mb-4 overflow-x-auto scroll-smooth"
|
|
||||||
style={{
|
|
||||||
scrollbarWidth: "thin",
|
|
||||||
scrollbarColor: "transparent transparent",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="flex space-x-2 py-1">
|
|
||||||
{renderMovieProviderButtons()}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{isMobile && (
|
||||||
{isMobile && (
|
<div className="">
|
||||||
<div className="">{renderScrollButton("providers", "right")}</div>
|
{renderScrollButton("providers", "right")}
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
{selectedProvider.id ? (
|
|
||||||
providerMovies[selectedProvider.id] &&
|
|
||||||
providerMovies[selectedProvider.id].length > 0 ? (
|
|
||||||
renderMovies(
|
|
||||||
providerMovies[selectedProvider.id],
|
|
||||||
`Popular Movies on ${selectedProvider.name}`,
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<p className="text-center text-gray-600">
|
|
||||||
No movies available for {selectedProvider.name}.
|
|
||||||
</p>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<p className="text-center text-gray-600">
|
|
||||||
Please select a provider to view movies.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center mt-10">
|
|
||||||
<Divider marginClass="mr-5" />
|
|
||||||
<h1 className="text-4xl font-bold text-white mx-auto">Shows</h1>
|
|
||||||
<Divider marginClass="ml-5" />
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 gap-0 mt-4">
|
|
||||||
{" "}
|
|
||||||
{tvCategories.map((category) => (
|
|
||||||
<div
|
|
||||||
key={category.name}
|
|
||||||
id={`tv-carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
|
|
||||||
className=""
|
|
||||||
>
|
|
||||||
{renderMovies(
|
|
||||||
categoryShows[category.name] || [],
|
|
||||||
category.name,
|
|
||||||
true,
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
{tvGenres.map((genre) => (
|
|
||||||
<div
|
<div
|
||||||
key={`${genre.id}|${genre.name}`}
|
key={`carousel-providers-${selectedProvider.id}`}
|
||||||
id={`tv-carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
|
id="carousel-providers"
|
||||||
className=""
|
|
||||||
>
|
>
|
||||||
{renderMovies(tvShowGenres[genre.id] || [], genre.name, true)}
|
{selectedProvider.id ? (
|
||||||
|
providerMovies[selectedProvider.id] &&
|
||||||
|
providerMovies[selectedProvider.id].length > 0 ? (
|
||||||
|
renderMovies(
|
||||||
|
providerMovies[selectedProvider.id],
|
||||||
|
`Popular Movies on ${selectedProvider.name}`,
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<p className="text-center text-gray-600">
|
||||||
|
No movies available for {selectedProvider.name}.
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<p className="text-center text-gray-600">
|
||||||
|
Please select a provider to view movies.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
<div className="grid grid-cols-1 gap-0 mt-4">
|
||||||
</div>
|
{" "}
|
||||||
<div
|
{categories.map((category) => (
|
||||||
key={`carousel-tv-providers-${selectedProvider.id}`}
|
<div
|
||||||
id="carousel-tv-providers"
|
key={category.name}
|
||||||
>
|
id={`carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
|
||||||
<div className="flex justify-center overflow-x-auto">
|
className=""
|
||||||
{isMobile && (
|
>
|
||||||
<div className="">
|
{renderMovies(
|
||||||
{renderScrollButton("tv-providers", "left")}
|
categoryMovies[category.name] || [],
|
||||||
|
category.name,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{genres.map((genre) => (
|
||||||
|
<div
|
||||||
|
key={`${genre.id}|${genre.name}`}
|
||||||
|
id={`carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
|
||||||
|
className=""
|
||||||
|
>
|
||||||
|
{renderMovies(genreMovies[genre.id] || [], genre.name)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedCategory === "tvshows" && (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center mt-10 mb-4">
|
||||||
|
<Divider marginClass="mr-5" />
|
||||||
|
<h1 className="text-4xl font-bold text-white mx-auto">Shows</h1>
|
||||||
|
<Divider marginClass="ml-5" />
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center overflow-x-auto">
|
||||||
|
{isMobile && (
|
||||||
|
<div className="">
|
||||||
|
{renderScrollButton("tv-providers", "left")}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
id="button-carousel-tv-providers"
|
||||||
|
className="flex mb-0 overflow-x-auto scroll-smooth"
|
||||||
|
style={{
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
scrollbarColor: "transparent transparent",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex space-x-2 py-1">
|
||||||
|
{renderTvProviderButtons()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
{isMobile && (
|
||||||
|
<div className="">
|
||||||
|
{renderScrollButton("tv-providers", "right")}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
id="button-carousel-tv-providers"
|
key={`carousel-tv-providers-${selectedProvider.id}`}
|
||||||
className="flex mb-4 overflow-x-auto scroll-smooth"
|
id="carousel-tv-providers"
|
||||||
style={{
|
|
||||||
scrollbarWidth: "thin",
|
|
||||||
scrollbarColor: "transparent transparent",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div className="flex space-x-2 py-1">
|
{selectedTVProvider.id ? (
|
||||||
{renderTvProviderButtons()}
|
providerTVShows[selectedTVProvider.id] &&
|
||||||
</div>
|
providerTVShows[selectedTVProvider.id].length > 0 ? (
|
||||||
|
renderMovies(
|
||||||
|
providerTVShows[selectedTVProvider.id],
|
||||||
|
`Popular Shows on ${selectedTVProvider.name}`,
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<p className="text-center text-gray-600">
|
||||||
|
No shows available for {selectedTVProvider.name}.
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<p className="text-center text-gray-600">
|
||||||
|
Please select a provider to view shows.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isMobile && (
|
<div className="grid grid-cols-1 gap-0 mt-4">
|
||||||
<div className="">
|
{" "}
|
||||||
{renderScrollButton("tv-providers", "right")}
|
{tvCategories.map((category) => (
|
||||||
</div>
|
<div
|
||||||
)}
|
key={category.name}
|
||||||
</div>
|
id={`tv-carousel-${category.name.toLowerCase().replace(/ /g, "-")}`}
|
||||||
{selectedTVProvider.id ? (
|
className=""
|
||||||
providerTVShows[selectedTVProvider.id] &&
|
>
|
||||||
providerTVShows[selectedTVProvider.id].length > 0 ? (
|
{renderMovies(
|
||||||
renderMovies(
|
categoryShows[category.name] || [],
|
||||||
providerTVShows[selectedTVProvider.id],
|
category.name,
|
||||||
`Popular Shows on ${selectedTVProvider.name}`,
|
true,
|
||||||
)
|
)}
|
||||||
) : (
|
</div>
|
||||||
<p className="text-center text-gray-600">
|
))}
|
||||||
No shows available for {selectedTVProvider.name}.
|
{tvGenres.map((genre) => (
|
||||||
</p>
|
<div
|
||||||
)
|
key={`${genre.id}|${genre.name}`}
|
||||||
) : (
|
id={`tv-carousel-${genre.name.toLowerCase().replace(/ /g, "-")}`}
|
||||||
<p className="text-center text-gray-600">
|
className=""
|
||||||
Please select a provider to view shows.
|
>
|
||||||
</p>
|
{renderMovies(tvShowGenres[genre.id] || [], genre.name, true)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ScrollToTopButton />
|
<ScrollToTopButton />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue