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