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

Improve video carousel to loop seamlessly and display numbers

Browse Source 
Adjust the video carousel to implement a circular scrolling behavior, allowing users to navigate through videos in a continuous loop. Additionally, the change ensures that the "Top 10" category displays the correct ranking numbers for each video.

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:01:59 +00:00
parent 22d3f3b345
commit 6fd79c9f27
1 changed files with 35 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -141,13 +141,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const videosToShow = 5; // Show 5 videos at a time const videosToShow = 5; // Show 5 videos at a time
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
const totalVideos = category.videos.length;
if (direction === 'right') { if (direction === 'right') {
// Always move forward through the infinite sequence // Move to next video in circle: 1→2→3...→10→1
setCurrentIndex(prev => prev + 1); setCurrentIndex(prev => (prev + 1) % totalVideos);
} else { } else {
// For left, also move forward but in reverse visual order // Move to previous video in circle: 1→10→9...→2→1
// This creates the illusion of going backwards while maintaining forward movement setCurrentIndex(prev => prev === 0 ? totalVideos - 1 : prev - 1);
setCurrentIndex(prev => prev + 1);
} }
}; };
@ -163,22 +164,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}, 800); // Auto scroll every 800ms }, 800); // Auto scroll every 800ms
}; };
// Initialize in middle section for true infinite scroll // Always start with video 1 at first position
useEffect(() => { useEffect(() => {
if (category.videos.length > 0) { setCurrentIndex(0);
setCurrentIndex(category.videos.length); // Start in middle section
}
}, [category.videos.length]); }, [category.videos.length]);
// Handle seamless infinite scroll - only forward movement
useEffect(() => {
const totalVideos = category.videos.length;
if (currentIndex >= totalVideos * 2) {
// Seamlessly reset to beginning of sequence for true infinite loop
setCurrentIndex(currentIndex - totalVideos);
}
}, [currentIndex, category.videos.length]);
// Always show both buttons // Always show both buttons
useEffect(() => { useEffect(() => {
setShowLeftButton(true); setShowLeftButton(true);
@ -281,42 +271,33 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<ChevronRight className="w-5 h-5 text-white" /> <ChevronRight className="w-5 h-5 text-white" />
</button> </button>
{/* Carousel video row - overflow hidden for seamless loop */} {/* Simple carousel that shows current videos */}
<div className="overflow-hidden"> <div className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0">
<div {Array.from({ length: videosToShow }, (_, index) => {
className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out" const videoIndex = (currentIndex + index) % category.videos.length;
style={{ const video = category.videos[videoIndex];
transform: `translateX(-${currentIndex * (112 + 8)}px)`, // Mobile: 112px + 8px spacing return (
willChange: 'transform' <div key={`${videoIndex}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group transition-all duration-300">
}} {/* Top 10 Number overlay for first category */}
> {category.title.includes("Top 10") && (
{/* Triple the videos for seamless infinite scroll */} <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
{Array.from({ length: category.videos.length * 3 }, (_, index) => { style={{
const videoIndex = index % category.videos.length; textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
const video = category.videos[videoIndex]; WebkitTextStroke: '2px rgba(0,0,0,0.8)',
return ( transform: 'none',
<div key={`${video.id}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group"> transition: 'none'
{/* Top 10 Number overlay for first category */} }}>
{category.title.includes("Top 10") && ( {videoIndex + 1}
<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>
style={{ )}
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)', <VideoCard
WebkitTextStroke: '2px rgba(0,0,0,0.8)', video={video}
transform: 'none', onClick={onVideoClick}
transition: 'none' className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
}}> />
{videoIndex + 1} </div>
</div> );
)} })}
<VideoCard
video={video}
onClick={onVideoClick}
className="w-full hover:scale-105 hover:z-10 transition-all duration-300 group-hover:shadow-xl rounded-md overflow-hidden"
/>
</div>
);
})}
</div>
</div> </div>
</div> </div>
</div> </div>