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

Improve video carousel functionality with smooth transitions and auto-scrolling

Browse Source 
Refactors the video carousel component to use `currentIndex` state for smoother transitions and implements `setInterval` for auto-scrolling. Changes `NodeJS.Timeout` to `number` for `scrollIntervalRef`.

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:06:03 +00:00
parent c85660e529
commit 685729c258
1 changed files with 28 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,18 +133,19 @@ interface CategoryRowProps {
function CategoryRow({ category, onVideoClick }: CategoryRowProps) { function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null); const scrollIntervalRef = useRef<number | null>(null);
const [showLeftButton, setShowLeftButton] = useState(false); const [showLeftButton, setShowLeftButton] = useState(false);
const [showRightButton, setShowRightButton] = useState(true); const [showRightButton, setShowRightButton] = useState(true);
const [translateX, setTranslateX] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
const [isScrolling, setIsScrolling] = useState(false);
const videosToShow = 5; // Show 5 videos at a time const videosToShow = 5; // Show 5 videos at a time
const videoWidth = 120; // Width + spacing
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
const speed = direction === 'right' ? videoWidth : -videoWidth; if (direction === 'right') {
setTranslateX(prev => prev - speed); setCurrentIndex(prev => prev + 1);
} else {
setCurrentIndex(prev => prev - 1);
}
}; };
const startAutoScroll = (direction: 'left' | 'right') => { const startAutoScroll = (direction: 'left' | 'right') => {
@ -153,41 +154,29 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
clearInterval(scrollIntervalRef.current); clearInterval(scrollIntervalRef.current);
} }
setIsScrolling(true); // Start continuous scrolling
scrollIntervalRef.current = setInterval(() => {
// Continuous smooth flowing animation scroll(direction);
const speed = direction === 'right' ? 2 : -2; // pixels per frame }, 800); // Auto scroll every 800ms
const animate = () => {
setTranslateX(prev => {
const newValue = prev - speed;
const totalWidth = category.videos.length * videoWidth;
// Reset position for infinite loop
if (direction === 'right' && newValue <= -totalWidth) {
return 0;
} else if (direction === 'left' && newValue >= 0) {
return -totalWidth + videoWidth;
}
return newValue;
});
if (isScrolling) {
scrollIntervalRef.current = requestAnimationFrame(animate);
}
};
animate();
}; };
// Initialize starting position // Always start with video 1 visible at first position
useEffect(() => { useEffect(() => {
if (category.videos.length > 0) { if (category.videos.length > 0) {
setTranslateX(-category.videos.length * videoWidth); // Start in middle section setCurrentIndex(0); // Start with video 1 at first position
} }
}, [category.videos.length]); }, [category.videos.length]);
// Handle seamless infinite scroll
useEffect(() => {
const totalVideos = category.videos.length;
if (currentIndex >= totalVideos * 2) {
setCurrentIndex(totalVideos);
} else if (currentIndex < 0) {
setCurrentIndex(totalVideos - 1);
}
}, [currentIndex, category.videos.length]);
// Always show both buttons // Always show both buttons
useEffect(() => { useEffect(() => {
setShowLeftButton(true); setShowLeftButton(true);
@ -195,9 +184,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}, []); }, []);
const stopAutoScroll = () => { const stopAutoScroll = () => {
setIsScrolling(false);
if (scrollIntervalRef.current) { if (scrollIntervalRef.current) {
cancelAnimationFrame(scrollIntervalRef.current); clearInterval(scrollIntervalRef.current);
scrollIntervalRef.current = null; scrollIntervalRef.current = null;
} }
}; };
@ -291,14 +279,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<ChevronRight className="w-5 h-5 text-white" /> <ChevronRight className="w-5 h-5 text-white" />
</button> </button>
{/* Continuously flowing carousel - videos flow like water */} {/* Working carousel with smooth transitions */}
<div className="overflow-hidden"> <div className="overflow-hidden">
<div <div
className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0" className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0 transition-transform duration-500 ease-in-out"
style={{ style={{
transform: `translateX(${translateX}px)`, transform: `translateX(-${currentIndex * (112 + 8)}px)`,
willChange: 'transform', willChange: 'transform'
transition: isScrolling ? 'none' : 'transform 0.3s ease-out'
}} }}
> >
{/* Create infinite loop by tripling the videos */} {/* Create infinite loop by tripling the videos */}