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

Improve carousel behavior for smoother video navigation

Browse Source 
Refactor carousel logic in `netflix-grid.tsx` to correctly handle infinite scrolling by adjusting position within a three-copy layout, preventing jumps and ensuring a continuous flow.

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 15:59:54 +00:00
parent 7dd25fe393
commit ecbd67b5fe
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -168,18 +168,18 @@ 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;
// Seamless infinite carousel - no jumps, just continuous flow // Seamless infinite carousel - check if we need to wrap around
let adjustedX = newX; // We have 3 copies: [copy1][copy2][copy3]
// We want to stay in copy2 range: -totalWidth to -totalWidth*2
// Keep position within bounds using modulo for seamless loop if (newX >= 0) {
while (adjustedX <= -totalWidth) { // Went too far left, wrap to end of copy2
adjustedX += totalWidth; return newX - totalWidth;
} } else if (newX <= -totalWidth * 2) {
while (adjustedX > 0) { // Went too far right, wrap to start of copy2
adjustedX -= totalWidth; return newX + totalWidth;
} }
return adjustedX; return newX;
}); });
}, interval); }, interval);
} }
@ -202,18 +202,18 @@ 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;
// Seamless infinite carousel - no jumps, just continuous flow // Seamless infinite carousel - check if we need to wrap around
let adjustedX = newX; // We have 3 copies: [copy1][copy2][copy3]
// We want to stay in copy2 range: -totalWidth to -totalWidth*2
// Keep position within bounds using modulo for seamless loop if (newX >= 0) {
while (adjustedX <= -totalWidth) { // Went too far left, wrap to end of copy2
adjustedX += totalWidth; return newX - totalWidth;
} } else if (newX <= -totalWidth * 2) {
while (adjustedX > 0) { // Went too far right, wrap to start of copy2
adjustedX -= totalWidth; return newX + totalWidth;
} }
return adjustedX; return newX;
}); });
}, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation
}; };