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

Improve video carousel scrolling to create a perpetual motion effect

Browse Source 
Refactor the `CategoryRow` component in `netflix-grid.tsx` to use a continuous forward scrolling mechanism for the video carousel, simulating perpetual motion by resetting the index when it reaches the end of the visible range.

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:04:20 +00:00
parent 5ca4daa1e9
commit bc53d99ff0
1 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -142,11 +142,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scroll = (direction: 'left' | 'right') => {
if (direction === 'right') {
// Move one video to the right - smooth sliding like geese
// Always move forward in the circle - perpetual motion
setCurrentIndex(prev => prev + 1);
} else {
// Move one video to the left - smooth sliding like geese
setCurrentIndex(prev => prev - 1);
// For left arrow, also move forward but faster to create illusion of reverse
setCurrentIndex(prev => prev + 1);
}
};
@ -156,10 +156,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
clearInterval(scrollIntervalRef.current);
}
// Start continuous scrolling
// Both directions move forward - true perpetual motion carousel
scrollIntervalRef.current = setInterval(() => {
scroll(direction);
}, 800); // Auto scroll every 800ms
setCurrentIndex(prev => prev + 1);
}, direction === 'left' ? 600 : 800); // Left moves slightly faster for effect
};
// Initialize in middle section for smooth infinite scroll
@ -169,15 +169,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}
}, [category.videos.length]);
// Handle seamless infinite scroll wrapping
// Handle seamless infinite scroll - only forward movement
useEffect(() => {
const totalVideos = category.videos.length;
if (currentIndex >= totalVideos * 2) {
// Seamlessly jump from end to middle
setCurrentIndex(totalVideos);
} else if (currentIndex < 0) {
// Seamlessly jump from beginning to middle
setCurrentIndex(totalVideos - 1);
// When we reach the end, seamlessly jump back to start of middle section
// This creates the illusion of infinite forward movement
setCurrentIndex(currentIndex - totalVideos);
}
}, [currentIndex, category.videos.length]);