Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-04 21:49:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix scroll to section

Browse source
This commit is contained in:
Pas 2025-03-09 14:34:53 -06:00
parent 32511c8f65
commit 2c38c31b5f
3 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/pages/discover/components/LazyMediaCarousel.tsx
View file

@ -52,6 +52,7 @@ export function LazyMediaCarousel({
}, [media, preloadedMedia]);
const categoryName = title || category?.name || genre?.name || "";
const categorySlug = categoryName.toLowerCase().replace(/[^a-z0-9]+/g, "-");
// Test intersection observer
// useEffect(() => {
@ -73,12 +74,14 @@ export function LazyMediaCarousel({
/>
) : (
<div className="relative overflow-hidden carousel-container">
<h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance">
{categoryName} {mediaType === "tv" ? "Shows" : "Movies"}
</h2>
<div className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden h-[300px] animate-pulse bg-background-secondary/20">
<div className="w-full text-center flex items-center justify-center">
{isLoading ? "Loading..." : ""}
<div id={`carousel-${categorySlug}`}>
<h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance">
{categoryName} {mediaType === "tv" ? "Shows" : "Movies"}
</h2>
<div className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden h-[300px] animate-pulse bg-background-secondary/20">
<div className="w-full text-center flex items-center justify-center">
{isLoading ? "Loading..." : ""}
</div>
</div>
</div>
</div>

2
src/pages/discover/components/MediaCarousel.tsx
View file

@ -31,7 +31,7 @@ export function MediaCarousel({
isMobile,
carouselRefs,
}: MediaCarouselProps) {
const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}`;
const categorySlug = category.toLowerCase().replace(/[^a-z0-9]+/g, "-");
const browser = !!window.chrome;
let isScrolling = false;

25
src/pages/discover/discoverContent.tsx
View file

@ -287,6 +287,18 @@ export function DiscoverContent() {
}
};
const handleCategoryClick = (id: string, name: string) => {
const categorySlug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
const element = document.getElementById(`carousel-${categorySlug}`);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
};
// Render Editor Picks content
const renderEditorPicksContent = () => {
return (
@ -444,18 +456,7 @@ export function DiscoverContent() {
? [...categories, ...genres]
: [...tvCategories, ...tvGenres]
}
onCategoryClick={(id, name) => {
const element = document.getElementById(
`carousel-${name.toLowerCase().replace(/ /g, "-")}`,
);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "center",
});
}
}}
onCategoryClick={handleCategoryClick}
categoryType="movies"
isMobile={isMobile}
showAlwaysScroll