From e79a04c2040e3abaed526ee3d711a2631b711751 Mon Sep 17 00:00:00 2001 From: Pas <74743263+Pasithea0@users.noreply.github.com> Date: Mon, 1 Sep 2025 09:51:50 -0600 Subject: [PATCH] Revert hide/show carousel buttons based on carousel length --- src/pages/discover/AllMovieLists.tsx | 45 +------------ .../components/CarouselNavButtons.tsx | 7 -- .../discover/components/MediaCarousel.tsx | 51 ++------------ src/pages/parts/home/BookmarksCarousel.tsx | 66 ++----------------- src/pages/parts/home/WatchingCarousel.tsx | 42 ++---------- 5 files changed, 20 insertions(+), 191 deletions(-) diff --git a/src/pages/discover/AllMovieLists.tsx b/src/pages/discover/AllMovieLists.tsx index 90ebd394..c2ff5c87 100644 --- a/src/pages/discover/AllMovieLists.tsx +++ b/src/pages/discover/AllMovieLists.tsx @@ -34,11 +34,6 @@ export function DiscoverMore() { const { lastView } = useDiscoverStore(); const { isMobile } = useIsMobile(); - // Track overflow states for curated lists - const [overflowStates, setOverflowStates] = useState<{ - [key: string]: boolean; - }>({}); - useEffect(() => { const fetchCuratedLists = async () => { try { @@ -93,41 +88,6 @@ export function DiscoverMore() { } }; - // Function to check overflow for a carousel - const checkOverflow = (element: HTMLDivElement | null, key: string) => { - if (!element) { - setOverflowStates((prev) => ({ ...prev, [key]: false })); - return; - } - - const hasOverflow = element.scrollWidth > element.clientWidth; - setOverflowStates((prev) => ({ ...prev, [key]: hasOverflow })); - }; - - // Function to set carousel ref and check overflow - const setCarouselRef = (element: HTMLDivElement | null, key: string) => { - carouselRefs.current[key] = element; - - // Check overflow after a short delay to ensure content is rendered - setTimeout(() => checkOverflow(element, key), 100); - }; - - // Effect to recheck overflow on window resize - useEffect(() => { - const handleResize = () => { - // Recheck overflow for all carousels - Object.keys(carouselRefs.current).forEach((key) => { - const element = carouselRefs.current[key]; - if (element) { - checkOverflow(element, key); - } - }); - }; - - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); - return ( @@ -183,7 +143,9 @@ export function DiscoverMore() {
setCarouselRef(el, list.listSlug)} + ref={(el) => { + carouselRefs.current[list.listSlug] = el; + }} onWheel={handleWheel} >
@@ -215,7 +177,6 @@ export function DiscoverMore() { )}
diff --git a/src/pages/discover/components/CarouselNavButtons.tsx b/src/pages/discover/components/CarouselNavButtons.tsx index 7b6030aa..bd9d3261 100644 --- a/src/pages/discover/components/CarouselNavButtons.tsx +++ b/src/pages/discover/components/CarouselNavButtons.tsx @@ -6,7 +6,6 @@ interface CarouselNavButtonsProps { carouselRefs: React.MutableRefObject<{ [key: string]: HTMLDivElement | null; }>; - hasOverflow?: boolean; } interface NavButtonProps { @@ -43,7 +42,6 @@ function NavButton({ direction, onClick }: NavButtonProps) { export function CarouselNavButtons({ categorySlug, carouselRefs, - hasOverflow = true, }: CarouselNavButtonsProps) { const handleScroll = (direction: "left" | "right") => { const carousel = carouselRefs.current[categorySlug]; @@ -76,11 +74,6 @@ export function CarouselNavButtons({ }); }; - // Don't render buttons if there's no overflow - if (!hasOverflow) { - return null; - } - return ( <> handleScroll("left")} /> diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx index e9f4e214..27d47ba5 100644 --- a/src/pages/discover/components/MediaCarousel.tsx +++ b/src/pages/discover/components/MediaCarousel.tsx @@ -1,5 +1,5 @@ import { Listbox } from "@headlessui/react"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { useWindowSize } from "react-use"; @@ -110,9 +110,6 @@ export function MediaCarousel({ const { isMobile } = useIsMobile(); const browser = !!window.chrome; - // Track overflow state - const [hasOverflow, setHasOverflow] = useState(false); - // State for selected options const [selectedProviderId, setSelectedProviderId] = useState(""); const [selectedProviderName, setSelectedProviderName] = useState(""); @@ -275,45 +272,8 @@ export function MediaCarousel({ } }, [showRecommendations, recommendationSources, selectedRecommendationId]); - const categorySlug = React.useMemo(() => { - return `${sectionTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${isTVShow ? "tv" : "movie"}`; - }, [sectionTitle, isTVShow]); - - // Function to check overflow for the carousel - const checkOverflow = React.useCallback((element: HTMLDivElement | null) => { - if (!element) { - setHasOverflow(false); - return; - } - - const hasHorizontalOverflow = element.scrollWidth > element.clientWidth; - setHasOverflow(hasHorizontalOverflow); - }, []); - - // Function to set carousel ref and check overflow - const setCarouselRef = React.useCallback( - (element: HTMLDivElement | null) => { - carouselRefs.current[categorySlug] = element; - - // Check overflow after a short delay to ensure content is rendered - setTimeout(() => checkOverflow(element), 100); - }, - [carouselRefs, categorySlug, checkOverflow], - ); - - // Effect to recheck overflow on window resize - useEffect(() => { - const handleResize = () => { - const element = carouselRefs.current[categorySlug]; - if (element) { - checkOverflow(element); - } - }; - - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, [carouselRefs, categorySlug, checkOverflow]); - const isScrollingRef = React.useRef(false); + const categorySlug = `${sectionTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-")}-${isTVShow ? "tv" : "movie"}`; + const isScrollingRef = useRef(false); const handleWheel = React.useCallback( (e: React.WheelEvent) => { @@ -568,7 +528,9 @@ export function MediaCarousel({
{ + carouselRefs.current[categorySlug] = el; + }} onWheel={handleWheel} >
@@ -623,7 +585,6 @@ export function MediaCarousel({ )}
diff --git a/src/pages/parts/home/BookmarksCarousel.tsx b/src/pages/parts/home/BookmarksCarousel.tsx index baa1912f..45c92183 100644 --- a/src/pages/parts/home/BookmarksCarousel.tsx +++ b/src/pages/parts/home/BookmarksCarousel.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; @@ -96,17 +96,6 @@ export function BookmarksCarousel({ const backendUrl = useBackendUrl(); const account = useAuthStore((s) => s.account); - // Create refs for overflow detection - const groupedCarouselRefs = useRef<{ - [key: string]: HTMLDivElement | null; - }>({}); - const regularCarouselRef = useRef(null); - - // Track overflow state for each section - const [overflowStates, setOverflowStates] = useState<{ - [key: string]: boolean; - }>({}); - // Group order editing state const groupOrder = useGroupOrderStore((s) => s.groupOrder); const setGroupOrder = useGroupOrderStore((s) => s.setGroupOrder); @@ -376,49 +365,6 @@ export function BookmarksCarousel({ } }; - // Function to check overflow for a carousel - const checkOverflow = (element: HTMLDivElement | null, key: string) => { - if (!element) { - setOverflowStates((prev) => ({ ...prev, [key]: false })); - return; - } - - const hasOverflow = element.scrollWidth > element.clientWidth; - setOverflowStates((prev) => ({ ...prev, [key]: hasOverflow })); - }; - - // Function to set carousel ref and check overflow - const setCarouselRef = (element: HTMLDivElement | null, key: string) => { - // Set the ref for the main carousel refs - carouselRefs.current[key] = element; - - // Set the ref for overflow detection - if (key === "bookmarks") { - regularCarouselRef.current = element; - } else { - groupedCarouselRefs.current[key] = element; - } - - // Check overflow after a short delay to ensure content is rendered - setTimeout(() => checkOverflow(element, key), 100); - }; - - // Effect to recheck overflow on window resize - useEffect(() => { - const handleResize = () => { - // Recheck overflow for all carousels - Object.keys(carouselRefs.current).forEach((key) => { - const element = carouselRefs.current[key]; - if (element) { - checkOverflow(element, key); - } - }); - }; - - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, [carouselRefs]); - const categorySlug = "bookmarks"; const SKELETON_COUNT = 10; @@ -462,7 +408,9 @@ export function BookmarksCarousel({
setCarouselRef(el, section.group || "bookmarks")} + ref={(el) => { + carouselRefs.current[section.group || "bookmarks"] = el; + }} onWheel={handleWheel} >
@@ -503,7 +451,6 @@ export function BookmarksCarousel({ )}
@@ -538,7 +485,9 @@ export function BookmarksCarousel({
setCarouselRef(el, categorySlug)} + ref={(el) => { + carouselRefs.current[categorySlug] = el; + }} onWheel={handleWheel} >
@@ -585,7 +534,6 @@ export function BookmarksCarousel({ )}
diff --git a/src/pages/parts/home/WatchingCarousel.tsx b/src/pages/parts/home/WatchingCarousel.tsx index 3cb18906..2c9d7f46 100644 --- a/src/pages/parts/home/WatchingCarousel.tsx +++ b/src/pages/parts/home/WatchingCarousel.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { EditButton } from "@/components/buttons/EditButton"; @@ -42,9 +42,6 @@ export function WatchingCarousel({ const removeItem = useProgressStore((s) => s.removeItem); const pressTimerRef = useRef(null); - // Track overflow state - const [hasOverflow, setHasOverflow] = useState(false); - const { isMobile } = useIsMobile(); const itemsLength = useProgressStore((state) => { @@ -125,38 +122,6 @@ export function WatchingCarousel({ } }; - // Function to check overflow for the carousel - const checkOverflow = (element: HTMLDivElement | null) => { - if (!element) { - setHasOverflow(false); - return; - } - - const hasHorizontalOverflow = element.scrollWidth > element.clientWidth; - setHasOverflow(hasHorizontalOverflow); - }; - - // Function to set carousel ref and check overflow - const setCarouselRef = (element: HTMLDivElement | null) => { - carouselRefs.current[categorySlug] = element; - - // Check overflow after a short delay to ensure content is rendered - setTimeout(() => checkOverflow(element), 100); - }; - - // Effect to recheck overflow on window resize - useEffect(() => { - const handleResize = () => { - const element = carouselRefs.current[categorySlug]; - if (element) { - checkOverflow(element); - } - }; - - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, [carouselRefs, categorySlug]); - if (itemsLength === 0) return null; return ( @@ -178,7 +143,9 @@ export function WatchingCarousel({
{ + carouselRefs.current[categorySlug] = el; + }} onWheel={handleWheel} >
@@ -219,7 +186,6 @@ export function WatchingCarousel({ )}