sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve carousel behavior for seamless infinite scrolling

Browse Source 
Refactor the `CategoryRow` component in `netflix-grid.tsx` to use a pure modulo approach for infinite carousel scrolling, replacing the previous reset logic. The starting position is also adjusted to 0 for simplified calculations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/QCN70f2
This commit is contained in:
sebastjanartic 2025-08-29 16:02:31 +00:00
parent 008c0c1dac
commit 8ee1e0e4f6
1 changed files with 8 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/components/netflix-grid.tsx
View File

@ -168,22 +168,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
// True seamless infinite carousel - no visible jumps // Pure modulo approach - no resets, just mathematical wrapping
// Keep moving until we're in valid range, then make tiny adjustment const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth;
let finalX = newX; return -normalizedX;
// 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 finalX;
}); });
}, interval); }, interval);
} }
@ -206,22 +193,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
// True seamless infinite carousel - no visible jumps // Pure modulo approach - no resets, just mathematical wrapping
// Keep moving until we're in valid range, then make tiny adjustment const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth;
let finalX = newX; return -normalizedX;
// 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 finalX;
}); });
}, 16); // Fixed interval - speed controlled by pixel movement only }, 16); // Fixed interval - speed controlled by pixel movement only
}; };
@ -229,9 +203,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Initialize with first video on the left side // Initialize with first video on the left side
useEffect(() => { useEffect(() => {
if (category.videos.length > 0) { if (category.videos.length > 0) {
// Start in middle copy (segunda copia) so loop works in both directions // Start at position 0 for simple modulo math
const totalWidth = category.videos.length * videoWidth; setTranslateX(0);
setTranslateX(-totalWidth);
} }
}, [category.videos.length]); }, [category.videos.length]);