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

Simplify video carousel to allow easier scrolling and reduce complexity

Browse Source 
Remove seamless infinite scroll logic from the video carousel and replace it with a simpler implementation that renders multiple copies of videos, along with adjusted scrolling functionality.

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:05:15 +00:00
parent 75e3d4b1f9
commit e554b8a346
1 changed files with 15 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -144,23 +144,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const videoWidth = 120; // Width including spacing const videoWidth = 120; // Width including spacing
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
// Smooth movement with seamless wrapping // SUPER SIMPLE - just move without any wrapping
const step = direction === 'right' ? -200 : 200; const step = direction === 'right' ? -250 : 250;
setTranslateX(prev => { setTranslateX(prev => prev + step);
const newX = prev + step;
const singleSetWidth = category.videos.length * 220; // One complete set
// Seamless infinite scroll with smooth wrapping
if (direction === 'right' && newX <= -singleSetWidth * 2) {
// When moved past second copy, wrap to start of first copy
return newX + singleSetWidth;
} else if (direction === 'left' && newX >= 0) {
// When moving left past first copy, wrap to end of second copy
return newX - singleSetWidth;
}
return newX;
});
}; };
const toggleSpeed = (direction: 'left' | 'right') => { const toggleSpeed = (direction: 'left' | 'right') => {
@ -233,9 +219,8 @@ 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 positioned to show middle copy for seamless wrapping // Start at position 0
const singleSetWidth = category.videos.length * 220; setTranslateX(0);
setTranslateX(-singleSetWidth);
} }
}, [category.videos.length]); }, [category.videos.length]);
@ -351,12 +336,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
willChange: 'transform' willChange: 'transform'
}} }}
> >
{/* Triple copy for seamless infinite scroll */} {/* ULTRA SIMPLE - just many copies */}
{[...category.videos, ...category.videos, ...category.videos].map((video, index) => { {Array.from({ length: 50 }).map((_, copyIndex) =>
const originalIndex = index % category.videos.length; category.videos.map((video, videoIndex) => (
const copyNumber = Math.floor(index / category.videos.length) + 1; <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-28 md:w-52 relative group">
return (
<div key={`${video.id}-copy${copyNumber}-${originalIndex}`} className="flex-shrink-0 w-28 md:w-52 relative group">
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && ( {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" <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
@ -366,7 +349,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
transform: 'none', transform: 'none',
transition: 'none' transition: 'none'
}}> }}>
{originalIndex + 1} {videoIndex + 1}
</div> </div>
)} )}
<VideoCard <VideoCard
@ -374,13 +357,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
onClick={onVideoClick} onClick={onVideoClick}
className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden" className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
/> />
{/* Debug number to see movement - shows copy and original position */} {/* Simple debug number */}
<div className="absolute bottom-0 right-0 bg-red-500 text-white text-xs px-1 rounded"> <div className="absolute bottom-0 right-0 bg-green-500 text-white text-xs px-1 rounded">
{copyNumber}.{originalIndex + 1} {videoIndex + 1}
</div> </div>
</div> </div>
); ))
})} ).flat()}
</div> </div>
</div> </div>
</div> </div>