From a52d63eafe504c0e813f14bf8b387e2d5b98bfb5 Mon Sep 17 00:00:00 2001
From: Leo Denham <leo@index.inc>
Date: Sat, 11 May 2024 09:21:24 +1000
Subject: [PATCH 1/2] Fix scrolling on discover page

---
 src/pages/Discover.tsx | 50 ------------------------------------------
 1 file changed, 50 deletions(-)

diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
index 66e149715..7f7724703 100644
--- a/src/pages/Discover.tsx
+++ b/src/pages/Discover.tsx
@@ -224,53 +224,6 @@ 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) {
-      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 [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseEnter = () => {
-    document.body.style.overflow = "hidden";
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    document.body.style.overflow = "auto";
-    setIsHovered(false);
-  };
-
-  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 =
@@ -298,9 +251,6 @@ export function Discover() {
           ref={(el) => {
             carouselRefs.current[categorySlug] = el;
           }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          onWheel={(e) => handleWheel(e, categorySlug)}
         >
           {medias.slice(0, 20).map((media) => (
             <a

From b67fc998ff40f3d7294e029aa94bf0a49bccc7ee Mon Sep 17 00:00:00 2001
From: Leo Denham <leo@index.inc>
Date: Sun, 12 May 2024 08:11:14 +1000
Subject: [PATCH 2/2] Fix scrolling again

---
 src/pages/Discover.tsx | 43 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

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 =