diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 4580a00..60cde6d 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -170,9 +170,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // Pure modulo approach - no resets, just mathematical wrapping - const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth; - return -normalizedX; + // Simple boundary check without complex math + if (newX <= -totalWidth) { + return newX + totalWidth; + } else if (newX >= 0) { + return newX - totalWidth; + } + return newX; }); }, interval); } @@ -195,9 +199,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // Pure modulo approach - no resets, just mathematical wrapping - const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth; - return -normalizedX; + // Simple boundary check without complex math + if (newX <= -totalWidth) { + return newX + totalWidth; + } else if (newX >= 0) { + return newX - totalWidth; + } + return newX; }); }, 16); // Fixed interval - speed controlled by pixel movement only }; @@ -205,8 +213,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Initialize with first video on the left side useEffect(() => { if (category.videos.length > 0) { - // Start at position 0 for simple modulo math - setTranslateX(0); + // Start at middle position for seamless loop + const totalWidth = category.videos.length * videoWidth; + setTranslateX(-totalWidth / 2); } }, [category.videos.length]);