Merge branch 'main' of https://github.com/sussy-code/smov

sussy-code · Jun 7, 2024 · 1e494f0 · 1e494f0
2 parents c80ca63 + e59529a
commit 1e494f0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 35 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
@@ -226,7 +226,6 @@ export function Discover() {
     genres.forEach((genre) => fetchMoviesForGenre(genre.id));
   }, [genres]);
 
-  // Update the scrollCarousel function to use the new ref map
   function scrollCarousel(categorySlug: string, direction: string) {
     const carousel = carouselRefs.current[categorySlug];
     if (carousel) {
@@ -237,22 +236,7 @@ export function Discover() {
         const scrollAmount = movieWidth * visibleMovies * 0.69; // Silly number :3
 
         if (direction === "left") {
-          if (carousel.scrollLeft <= 5) {
-            carousel.scrollBy({
-              left: carousel.scrollWidth,
-              behavior: "smooth",
-            }); // Scroll to the end
-          } else {
-            carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
-          }
-        } else if (
-          carousel.scrollLeft + carousel.offsetWidth + 5 >=
-          carousel.scrollWidth
-        ) {
-          carousel.scrollBy({
-            left: -carousel.scrollWidth,
-            behavior: "smooth",
-          }); // Scroll to the beginning
+          carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" });
         } else {
           carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
         }
@@ -284,42 +268,39 @@ export function Discover() {
     }
   }, [movieWidth]);
 
+  const browser = !!window.chrome; // detect chromium browser
   let isScrolling = false;
+
   function handleWheel(e: React.WheelEvent, categorySlug: string) {
     if (isScrolling) {
       return;
     }
 
     isScrolling = true;
-
     const carousel = carouselRefs.current[categorySlug];
-    if (carousel && !e.deltaX) {
+    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" });
+          scrollCarousel(categorySlug, "left");
         } else {
-          carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
+          scrollCarousel(categorySlug, "right");
         }
       }
     }
 
-    setTimeout(() => {
+    if (browser) {
+      setTimeout(() => {
+        isScrolling = false;
+      }, 345); // disable scrolling after 345 milliseconds for chromium-based browsers
+    } else {
+      // immediately reset isScrolling for non-chromium browsers
       isScrolling = false;
-    }, 345); // Disable scrolling every 3 milliseconds after interaction (only for mouse wheel doe)
+    }
   }
 
   const [isHovered, setIsHovered] = useState(false);
 
-  useEffect(() => {
-    if (!isHovered) {
-      document.body.style.overflow = "auto";
-    }
-  }, [isHovered]);
-
   const handleMouseEnter = () => {
     document.body.style.overflow = "hidden";
     setIsHovered(true);
@@ -329,6 +310,12 @@ export function Discover() {
     setIsHovered(false);
   };
 
+  useEffect(() => {
+    if (!isHovered) {
+      document.body.style.overflow = "auto";
+    }
+  }, [isHovered]);
+
   function renderMovies(medias: Media[], category: string, isTVShow = false) {
     const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}${Math.random()}`; // Convert the category to a slug
     const displayCategory =