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

Add variable speed scrolling to video carousel based on clicks

Browse Source 
Introduce a speed toggle for the video carousel. Clicking the navigation arrows now cycles between normal and fast scrolling speeds, adjusting the animation interval and step accordingly to enhance user interaction.

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:40:56 +00:00
parent fb91009414
commit 499c59d717
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,10 +139,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const [translateX, setTranslateX] = useState(0); const [translateX, setTranslateX] = useState(0);
const [isScrolling, setIsScrolling] = useState(false); const [isScrolling, setIsScrolling] = useState(false);
const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal');
const videosToShow = 5; // Show 5 videos at a time const videosToShow = 5; // Show 5 videos at a time
const videoWidth = 120; // Width including spacing const videoWidth = 120; // Width including spacing
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
// Toggle speed mode on click
setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
const step = direction === 'right' ? -videoWidth : videoWidth; const step = direction === 'right' ? -videoWidth : videoWidth;
setTranslateX(prev => prev + step); setTranslateX(prev => prev + step);
}; };
@ -155,10 +159,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsScrolling(true); setIsScrolling(true);
// Start continuous smooth scrolling with interval // Start continuous smooth scrolling with variable speed
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
setTranslateX(prev => { setTranslateX(prev => {
const speed = direction === 'right' ? -0.8 : 0.8; // Even smaller steps for ultra smooth motion // Speed changes based on mode: normal (0.8px) or fast (2.5px)
const baseSpeed = speedMode === 'fast' ? 2.5 : 0.8;
const speed = direction === 'right' ? -baseSpeed : baseSpeed;
const newX = prev + speed; const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth; const totalWidth = category.videos.length * videoWidth;
@ -171,7 +177,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
return newX; return newX;
}); });
}, 12); // Update every 12ms for buttery smooth flow }, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode
}; };
// Initialize with first video on the left side // Initialize with first video on the left side