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

Improve carousel scrolling for a smoother visual experience

Browse Source 
Fixes the issue where the carousel scrolling speed was inconsistent and introduced jarring jumps by adjusting the interval logic and refining the seamless infinite carousel wrapping mechanism within the CategoryRow component.

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:01:39 +00:00
parent ecbd67b5fe
commit 008c0c1dac
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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