diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 89abb35..1417481 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -144,23 +144,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const videoWidth = 120; // Width including spacing const scroll = (direction: 'left' | 'right') => { - // Smooth movement with seamless wrapping - const step = direction === 'right' ? -200 : 200; - setTranslateX(prev => { - const newX = prev + step; - const singleSetWidth = category.videos.length * 220; // One complete set - - // Seamless infinite scroll with smooth wrapping - if (direction === 'right' && newX <= -singleSetWidth * 2) { - // When moved past second copy, wrap to start of first copy - return newX + singleSetWidth; - } else if (direction === 'left' && newX >= 0) { - // When moving left past first copy, wrap to end of second copy - return newX - singleSetWidth; - } - - return newX; - }); + // SUPER SIMPLE - just move without any wrapping + const step = direction === 'right' ? -250 : 250; + setTranslateX(prev => prev + step); }; const toggleSpeed = (direction: 'left' | 'right') => { @@ -233,9 +219,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Initialize with first video on the left side useEffect(() => { if (category.videos.length > 0) { - // Start positioned to show middle copy for seamless wrapping - const singleSetWidth = category.videos.length * 220; - setTranslateX(-singleSetWidth); + // Start at position 0 + setTranslateX(0); } }, [category.videos.length]); @@ -351,12 +336,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { willChange: 'transform' }} > - {/* Triple copy for seamless infinite scroll */} - {[...category.videos, ...category.videos, ...category.videos].map((video, index) => { - const originalIndex = index % category.videos.length; - const copyNumber = Math.floor(index / category.videos.length) + 1; - return ( -
+ {/* ULTRA SIMPLE - just many copies */} + {Array.from({ length: 50 }).map((_, copyIndex) => + category.videos.map((video, videoIndex) => ( +
{/* Top 10 Number overlay for first category */} {category.title.includes("Top 10") && (
- {originalIndex + 1} + {videoIndex + 1}
)} - {/* Debug number to see movement - shows copy and original position */} -
- {copyNumber}.{originalIndex + 1} + {/* Simple debug number */} +
+ {videoIndex + 1}
- ); - })} + )) + ).flat()}