diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 1a9ceb6..d38f355 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -168,18 +168,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // Seamless infinite carousel - no jumps, just continuous flow - let adjustedX = newX; - - // Keep position within bounds using modulo for seamless loop - while (adjustedX <= -totalWidth) { - adjustedX += totalWidth; - } - while (adjustedX > 0) { - adjustedX -= totalWidth; + // Seamless infinite carousel - check if we need to wrap around + // We have 3 copies: [copy1][copy2][copy3] + // We want to stay in copy2 range: -totalWidth to -totalWidth*2 + if (newX >= 0) { + // Went too far left, wrap to end of copy2 + return newX - totalWidth; + } else if (newX <= -totalWidth * 2) { + // Went too far right, wrap to start of copy2 + return newX + totalWidth; } - return adjustedX; + return newX; }); }, interval); } @@ -202,18 +202,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // Seamless infinite carousel - no jumps, just continuous flow - let adjustedX = newX; - - // Keep position within bounds using modulo for seamless loop - while (adjustedX <= -totalWidth) { - adjustedX += totalWidth; - } - while (adjustedX > 0) { - adjustedX -= totalWidth; + // Seamless infinite carousel - check if we need to wrap around + // We have 3 copies: [copy1][copy2][copy3] + // We want to stay in copy2 range: -totalWidth to -totalWidth*2 + if (newX >= 0) { + // Went too far left, wrap to end of copy2 + return newX - totalWidth; + } else if (newX <= -totalWidth * 2) { + // Went too far right, wrap to start of copy2 + return newX + totalWidth; } - return adjustedX; + return newX; }); }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation };