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

Improve scrolling behavior and initial positioning in video grids

Browse Source 
Refactor the `CategoryRow` component in `netflix-grid.tsx` to adjust the logic for seamless infinite scrolling. The changes modify how the component wraps around when scrolling left or right past the initial set of videos, ensuring a smoother transition. Additionally, the initial positioning of the carousel has been reset to the beginning of the first set of videos (0 position), improving the starting experience for users.

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/yexZbDm
This commit is contained in:
sebastjanartic 2025-08-29 16:59:33 +00:00
parent ba2856ede7
commit 9e185a1dfd
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -150,12 +150,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const newX = prev + step; const newX = prev + step;
const singleSetWidth = category.videos.length * 220; // One complete set const singleSetWidth = category.videos.length * 220; // One complete set
// Seamless infinite scroll - when in middle copy, wrap smoothly // Seamless infinite scroll with smooth wrapping
if (direction === 'right' && newX <= -singleSetWidth * 2) { if (direction === 'right' && newX <= -singleSetWidth * 2) {
// When moved past second copy, jump back to first copy position // When moved past second copy, wrap to start of first copy
return newX + singleSetWidth; return newX + singleSetWidth;
} else if (direction === 'left' && newX >= 0) { } else if (direction === 'left' && newX >= singleSetWidth) {
// When moved past first copy, jump back to second copy position // When moved past first copy left boundary, wrap to second copy
return newX - singleSetWidth; return newX - singleSetWidth;
} }
@ -233,9 +233,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 for seamless wrapping // Start at the beginning of first copy (0 position)
const singleSetWidth = category.videos.length * 220; setTranslateX(0);
setTranslateX(-singleSetWidth);
} }
}, [category.videos.length]); }, [category.videos.length]);