diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index d38f355..dd1a802 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -160,7 +160,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Start new interval with updated speed immediately const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8; - const interval = newSpeed === 'fast' ? 10 : 16; + const interval = 16; // Fixed interval - speed controlled by pixel movement only scrollIntervalRef.current = setInterval(() => { setTranslateX(prev => { @@ -168,18 +168,22 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // 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; + // True seamless infinite carousel - no visible jumps + // Keep moving until we're in valid range, then make tiny adjustment + let finalX = newX; + + // If we've moved past the end of middle section, reset seamlessly + if (finalX <= -totalWidth * 2) { + // We're past the end, bring back to equivalent position in middle + finalX = finalX + totalWidth; + } + // If we've moved past the beginning of middle section, reset seamlessly + else if (finalX >= 0) { + // We're past the beginning, bring back to equivalent position in middle + finalX = finalX - totalWidth; } - return newX; + return finalX; }); }, interval); } @@ -202,20 +206,24 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // 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; + // True seamless infinite carousel - no visible jumps + // Keep moving until we're in valid range, then make tiny adjustment + let finalX = newX; + + // If we've moved past the end of middle section, reset seamlessly + if (finalX <= -totalWidth * 2) { + // We're past the end, bring back to equivalent position in middle + finalX = finalX + totalWidth; + } + // If we've moved past the beginning of middle section, reset seamlessly + else if (finalX >= 0) { + // We're past the beginning, bring back to equivalent position in middle + finalX = finalX - totalWidth; } - return newX; + return finalX; }); - }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation + }, 16); // Fixed interval - speed controlled by pixel movement only }; // Initialize with first video on the left side