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

Improve video carousel behavior for smoother navigation

Browse Source 
Adjusted the logic for wrapping around video categories in the carousel to prevent jarring jumps and ensure a more fluid user experience. The carousel now initializes in a centered position to facilitate seamless looping.

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 17:00:47 +00:00
parent 9e185a1dfd
commit 3e6d01c2ac
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,8 +154,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (direction === 'right' && newX <= -singleSetWidth * 2) { if (direction === 'right' && newX <= -singleSetWidth * 2) {
// When moved past second copy, wrap to start of first copy // When moved past second copy, wrap to start of first copy
return newX + singleSetWidth; return newX + singleSetWidth;
} else if (direction === 'left' && newX >= singleSetWidth) { } else if (direction === 'left' && newX > 0) {
// When moved past first copy left boundary, wrap to second copy // When moving left past start, wrap to end of second copy
return newX - singleSetWidth; return newX - singleSetWidth;
} }
@ -233,8 +233,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 the beginning of first copy (0 position) // Start positioned to show middle copy for seamless wrapping
setTranslateX(0); const singleSetWidth = category.videos.length * 220;
setTranslateX(-singleSetWidth);
} }
}, [category.videos.length]); }, [category.videos.length]);