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 scroll = (direction: 'left' | 'right') => {
const totalVideos = category.videos.length;
if (direction === 'right') {
// Always move forward through the infinite sequence
setCurrentIndex(prev => prev + 1);
// Move to next video in circle: 1→2→3...→10→1
setCurrentIndex(prev => (prev + 1) % totalVideos);
} else {
// 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);
// Move to previous video in circle: 1→10→9...→2→1
setCurrentIndex(prev => prev === 0 ? totalVideos - 1 : prev - 1);
}
};
@ -163,22 +164,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}, 800); // Auto scroll every 800ms
};
// Initialize in middle section for true infinite scroll
// Always start with video 1 at first position
useEffect(() => {
if (category.videos.length > 0) {
setCurrentIndex(category.videos.length); // Start in middle section
}
setCurrentIndex(0);
}, [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
useEffect(() => {
setShowLeftButton(true);
@ -281,42 +271,33 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<ChevronRight className="w-5 h-5 text-white" />
</button>
{/* Carousel video row - overflow hidden for seamless loop */}
<div className="overflow-hidden">
<div
className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
style={{
transform: `translateX(-${currentIndex * (112 + 8)}px)`, // Mobile: 112px + 8px spacing
willChange: 'transform'
}}
>
{/* Triple the videos for seamless infinite scroll */}
{Array.from({ length: category.videos.length * 3 }, (_, index) => {
const videoIndex = index % category.videos.length;
const video = category.videos[videoIndex];
return (
<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"
style={{
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
WebkitTextStroke: '2px rgba(0,0,0,0.8)',
transform: 'none',
transition: 'none'
}}>
{videoIndex + 1}
</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>
{/* Simple carousel that shows current videos */}
<div className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0">
{Array.from({ length: videosToShow }, (_, index) => {
const videoIndex = (currentIndex + index) % category.videos.length;
const video = category.videos[videoIndex];
return (
<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") && (
<div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none"
style={{
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
WebkitTextStroke: '2px rgba(0,0,0,0.8)',
transform: 'none',
transition: 'none'
}}>
{videoIndex + 1}
</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>