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

Improve infinite scrolling for smoother video navigation

Browse Source 
Refactors the `CategoryRow` component in `netflix-grid.tsx` to implement a more robust and seamless infinite scrolling mechanism. This involves adjusting the `currentIndex` logic to consistently move forward, even when simulating backward movement, and modifying the `useEffect` hook to handle seamless resets from the end of the sequence. The video rendering is updated to triple the array of videos, ensuring a continuous loop without visual interruptions.

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:00:09 +00:00
parent ed3142e721
commit 22d3f3b345
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -142,11 +142,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scroll = (direction: 'left' | 'right') => {
if (direction === 'right') {
// Always move forward, let infinite loop handle the reset
// Always move forward through the infinite sequence
setCurrentIndex(prev => prev + 1);
} else {
// Always move backward, let infinite loop handle the reset
setCurrentIndex(prev => prev - 1);
// For left, also move forward but in reverse visual order
// This creates the illusion of going backwards while maintaining forward movement
setCurrentIndex(prev => prev + 1);
}
};
@ -169,15 +170,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}
}, [category.videos.length]);
// Handle seamless infinite scroll
// Handle seamless infinite scroll - only forward movement
useEffect(() => {
const totalVideos = category.videos.length;
if (currentIndex >= totalVideos * 2) {
// Jump from end of 2nd section to start of 1st section
setCurrentIndex(totalVideos);
} else if (currentIndex < 0) {
// Jump from before 1st section to start of 2nd section
setCurrentIndex(totalVideos - 1);
// Seamlessly reset to beginning of sequence for true infinite loop
setCurrentIndex(currentIndex - totalVideos);
}
}, [currentIndex, category.videos.length]);
@ -293,10 +291,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}}
>
{/* Triple the videos for seamless infinite scroll */}
{[...category.videos, ...category.videos, ...category.videos].map((video, index) => {
const actualIndex = index % category.videos.length;
{Array.from({ length: category.videos.length * 3 }, (_, index) => {
const videoIndex = index % category.videos.length;
const video = category.videos[videoIndex];
return (
<div key={`${video.id}-${Math.floor(index / category.videos.length)}-${actualIndex}`} className="flex-shrink-0 w-28 md:w-52 relative group">
<div key={`${video.id}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group">
{/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && (
<div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
@ -306,7 +305,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
transform: 'none',
transition: 'none'
}}>
{actualIndex + 1}
{videoIndex + 1}
</div>
)}
<VideoCard