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

Improve video scrolling speed control and responsiveness

Browse Source 
Update the video grid component to allow toggling between normal and fast scrolling speeds, with immediate animation restarts and seamless looping for an enhanced user experience.

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:44:28 +00:00
parent f2fcea005b
commit 84c2c98df5
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,9 +149,36 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setTranslateX(prev => prev + step);
};
const toggleSpeed = () => {
// Toggle speed mode without moving
setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal');
const toggleSpeed = (direction: 'left' | 'right') => {
// Toggle speed mode and restart animation with new speed
const newSpeed = speedMode === 'normal' ? 'fast' : 'normal';
setSpeedMode(newSpeed);
// Restart the animation with new speed
if (isScrolling && scrollIntervalRef.current) {
clearInterval(scrollIntervalRef.current);
// Start new interval with updated speed immediately
const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8;
const interval = newSpeed === 'fast' ? 8 : 12;
scrollIntervalRef.current = setInterval(() => {
setTranslateX(prev => {
const speed = direction === 'right' ? -baseSpeed : baseSpeed;
const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth;
// Infinite loop - seamless reset
if (direction === 'right' && newX <= -totalWidth * 2) {
return -totalWidth;
} else if (direction === 'left' && newX >= 0) {
return -totalWidth;
}
return newX;
});
}, interval);
}
};
const startAutoScroll = (direction: 'left' | 'right') => {
@ -219,7 +246,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.stopPropagation();
// If already scrolling, just toggle speed, otherwise do single scroll
if (isScrolling) {
toggleSpeed();
toggleSpeed('left');
} else {
scroll('left');
}
@ -245,7 +272,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.stopPropagation();
// If already scrolling, just toggle speed, otherwise do single scroll
if (isScrolling) {
toggleSpeed();
toggleSpeed('right');
} else {
scroll('right');
}