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

Improve scrolling behavior in video category rows for smoother navigation

Browse Source 
Refactors the scrolling logic in `netflix-grid.tsx` by replacing the modulo-based wrapping with a simpler boundary check. This change aims to fix issues where the scrolling might not be functioning as expected and adjusts the initial offset to a middle position for a more seamless looping effect.

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:04:02 +00:00
parent 3b363cdd58
commit 91b03a95bb
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -170,9 +170,13 @@ 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;
// Pure modulo approach - no resets, just mathematical wrapping // Simple boundary check without complex math
const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth; if (newX <= -totalWidth) {
return -normalizedX; return newX + totalWidth;
} else if (newX >= 0) {
return newX - totalWidth;
}
return newX;
}); });
}, interval); }, interval);
} }
@ -195,9 +199,13 @@ 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;
// Pure modulo approach - no resets, just mathematical wrapping // Simple boundary check without complex math
const normalizedX = ((newX % totalWidth) + totalWidth) % totalWidth; if (newX <= -totalWidth) {
return -normalizedX; return newX + totalWidth;
} else if (newX >= 0) {
return newX - totalWidth;
}
return newX;
}); });
}, 16); // Fixed interval - speed controlled by pixel movement only }, 16); // Fixed interval - speed controlled by pixel movement only
}; };
@ -205,8 +213,9 @@ 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 at position 0 for simple modulo math // Start at middle position for seamless loop
setTranslateX(0); const totalWidth = category.videos.length * videoWidth;
setTranslateX(-totalWidth / 2);
} }
}, [category.videos.length]); }, [category.videos.length]);