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

Improve video carousel to allow smooth scrolling between videos

Browse Source 
Update the video carousel to use a smooth sliding animation, allowing videos to move one by one. Adjust initial rendering and wrapping logic for seamless infinite scrolling.

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:03:05 +00:00
parent 6fd79c9f27
commit 5ca4daa1e9
1 changed files with 55 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -141,14 +141,12 @@ 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') {
// Move to next video in circle: 1→2→3...→10→1 // Move one video to the right - smooth sliding like geese
setCurrentIndex(prev => (prev + 1) % totalVideos); setCurrentIndex(prev => prev + 1);
} else { } else {
// Move to previous video in circle: 1→10→9...→2→1 // Move one video to the left - smooth sliding like geese
setCurrentIndex(prev => prev === 0 ? totalVideos - 1 : prev - 1); setCurrentIndex(prev => prev - 1);
} }
}; };
@ -164,11 +162,25 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}, 800); // Auto scroll every 800ms }, 800); // Auto scroll every 800ms
}; };
// Always start with video 1 at first position // Initialize in middle section for smooth infinite scroll
useEffect(() => { useEffect(() => {
setCurrentIndex(0); if (category.videos.length > 0) {
setCurrentIndex(category.videos.length); // Start in middle section for smooth wrapping
}
}, [category.videos.length]); }, [category.videos.length]);
// Handle seamless infinite scroll wrapping
useEffect(() => {
const totalVideos = category.videos.length;
if (currentIndex >= totalVideos * 2) {
// Seamlessly jump from end to middle
setCurrentIndex(totalVideos);
} else if (currentIndex < 0) {
// Seamlessly jump from beginning to middle
setCurrentIndex(totalVideos - 1);
}
}, [currentIndex, category.videos.length]);
// Always show both buttons // Always show both buttons
useEffect(() => { useEffect(() => {
setShowLeftButton(true); setShowLeftButton(true);
@ -271,33 +283,41 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<ChevronRight className="w-5 h-5 text-white" /> <ChevronRight className="w-5 h-5 text-white" />
</button> </button>
{/* Simple carousel that shows current videos */} {/* Smooth sliding carousel - videos move like geese one by one */}
<div className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0"> <div className="overflow-hidden">
{Array.from({ length: videosToShow }, (_, index) => { <div
const videoIndex = (currentIndex + index) % category.videos.length; className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
const video = category.videos[videoIndex]; style={{
return ( transform: `translateX(-${currentIndex * (112 + 8)}px)`, // Mobile: 112px width + 8px spacing
<div key={`${videoIndex}-${index}`} className="flex-shrink-0 w-28 md:w-52 relative group transition-all duration-300"> willChange: 'transform'
{/* 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" {/* Create infinite loop by tripling the videos */}
style={{ {[...category.videos, ...category.videos, ...category.videos].map((video, index) => {
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)', const actualIndex = index % category.videos.length;
WebkitTextStroke: '2px rgba(0,0,0,0.8)', return (
transform: 'none', <div key={`${video.id}-${Math.floor(index / category.videos.length)}-${actualIndex}`} 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" }}>
/> {actualIndex + 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>