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 scroll = (direction: 'left' | 'right') => {
// Smooth movement with seamless wrapping
const step = direction === 'right' ? -200 : 200;
setTranslateX(prev => {
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;
});
// SUPER SIMPLE - just move without any wrapping
const step = direction === 'right' ? -250 : 250;
setTranslateX(prev => prev + step);
};
const toggleSpeed = (direction: 'left' | 'right') => {
@ -233,9 +219,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Initialize with first video on the left side
useEffect(() => {
if (category.videos.length > 0) {
// Start positioned to show middle copy for seamless wrapping
const singleSetWidth = category.videos.length * 220;
setTranslateX(-singleSetWidth);
// Start at position 0
setTranslateX(0);
}
}, [category.videos.length]);
@ -351,12 +336,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
willChange: 'transform'
}}
>
{/* Triple copy for seamless infinite scroll */}
{[...category.videos, ...category.videos, ...category.videos].map((video, index) => {
const originalIndex = index % category.videos.length;
const copyNumber = Math.floor(index / category.videos.length) + 1;
return (
<div key={`${video.id}-copy${copyNumber}-${originalIndex}`} className="flex-shrink-0 w-28 md:w-52 relative group">
{/* ULTRA SIMPLE - just many copies */}
{Array.from({ length: 50 }).map((_, copyIndex) =>
category.videos.map((video, videoIndex) => (
<div key={`${video.id}-${copyIndex}-${videoIndex}`} 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"
@ -366,7 +349,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
transform: 'none',
transition: 'none'
}}>
{originalIndex + 1}
{videoIndex + 1}
</div>
)}
<VideoCard
@ -374,13 +357,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
onClick={onVideoClick}
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 */}
<div className="absolute bottom-0 right-0 bg-red-500 text-white text-xs px-1 rounded">
{copyNumber}.{originalIndex + 1}
{/* Simple debug number */}
<div className="absolute bottom-0 right-0 bg-green-500 text-white text-xs px-1 rounded">
{videoIndex + 1}
</div>
</div>
);
})}
))
).flat()}
</div>
</div>
</div>