diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx index 7f7724703..5472faa8b 100644 --- a/src/pages/Discover.tsx +++ b/src/pages/Discover.tsx @@ -224,6 +224,49 @@ export function Discover() { } }, [movieWidth]); + let isScrolling = false; + function handleWheel(e: React.WheelEvent, categorySlug: string) { + if (isScrolling) { + return; + } + + isScrolling = true; + + const carousel = carouselRefs.current[categorySlug]; + if (carousel && !e.deltaX) { + const movieElements = carousel.getElementsByTagName("a"); + if (movieElements.length > 0) { + const posterWidth = movieElements[0].offsetWidth; + const visibleMovies = Math.floor(carousel.offsetWidth / posterWidth); + const scrollAmount = posterWidth * visibleMovies * 0.62; + if (e.deltaY < 5) { + carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" }); + } else { + carousel.scrollBy({ left: scrollAmount, behavior: "smooth" }); + } + } + } + + setTimeout(() => { + isScrolling = false; + }, 345); // Disable scrolling every 3 milliseconds after interaction (only for mouse wheel doe) + } + + const handleMouseEnter = () => { + document.body.style.overflow = "hidden"; + }; + + const handleMouseLeave = () => { + document.body.style.overflow = "auto"; + }; + + useEffect(() => { + window.addEventListener("mouseleave", handleMouseLeave); + return () => { + window.removeEventListener("mouseleave", handleMouseLeave); + }; + }, []); + function renderMovies(medias: Media[], category: string, isTVShow = false) { const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}${Math.random()}`; // Convert the category to a slug const displayCategory =