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

Improve video grid scrolling with seamless infinite loop functionality

Browse Source 
Implement true infinite scrolling for video categories, allowing seamless wrap-around when navigating left or right.

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/oSbWwS4
This commit is contained in:
sebastjanartic 2025-08-29 16:28:41 +00:00
parent 72ed9af25c
commit 67a10a16d4
1 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,24 +102,17 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
} }
const categories = getCategories(); const categories = getCategories();
// Debug logging
console.log('Videos count:', videos.length);
console.log('Categories:', categories.map(c => ({ title: c.title, videoCount: c.videos.length })));
return ( return (
<> <>
<div className="space-y-12 relative z-10"> <div className="space-y-12 relative z-10">
{categories.map((category, categoryIndex) => { {categories.map((category, categoryIndex) => (
console.log(`Rendering category ${categoryIndex}: ${category.title} with ${category.videos.length} videos`); <CategoryRow
return ( key={categoryIndex}
<CategoryRow category={category}
key={categoryIndex} onVideoClick={handleVideoClick}
category={category} />
onVideoClick={handleVideoClick} ))}
/>
);
})}
</div> </div>
<BunnyVideoModal <BunnyVideoModal
@ -177,8 +170,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
// Pure continuous flow - NO RESETS AT ALL // TRUE INFINITE SCROLL - wrap around seamlessly
// Let it move freely, browser will handle infinite scroll if (direction === 'right' && newX <= -totalWidth) {
// When moved one full cycle to the right, wrap back to start
return newX + totalWidth;
} else if (direction === 'left' && newX >= totalWidth) {
// When moved one full cycle to the left, wrap back to end
return newX - totalWidth;
}
return newX; return newX;
}); });
}, interval); }, interval);
@ -202,8 +202,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
// Pure continuous flow - NO RESETS AT ALL // TRUE INFINITE SCROLL - wrap around seamlessly
// Let it move freely, browser will handle infinite scroll if (direction === 'right' && newX <= -totalWidth) {
// When moved one full cycle to the right, wrap back to start
return newX + totalWidth;
} else if (direction === 'left' && newX >= totalWidth) {
// When moved one full cycle to the left, wrap back to end
return newX - totalWidth;
}
return newX; return newX;
}); });
}, 16); // Fixed interval - speed controlled by pixel movement only }, 16); // Fixed interval - speed controlled by pixel movement only