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

Improve video carousel scrolling by using native scroll functionality

Browse Source 
Refactors the `CategoryRow` component in `netflix-grid.tsx` to utilize the browser's native `scrollBy` method for smoother and more performant horizontal scrolling of video categories, replacing the previous manual translation logic.

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/yexZbDm
This commit is contained in:
sebastjanartic 2025-08-29 17:13:36 +00:00
parent 91617c8835
commit 95cc839838
2 changed files with 17 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756487569961.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

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

@ -164,25 +164,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const interval = 16; // Fixed interval - speed controlled by pixel movement only const interval = 16; // Fixed interval - speed controlled by pixel movement only
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
setTranslateX(prev => { if (!scrollContainerRef.current) return;
// Use the NEW speed that was just set
const currentSpeed = newSpeed === 'fast' ? 3.5 : 2.0;
const speed = direction === 'right' ? -currentSpeed : currentSpeed;
const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth;
// TRUE INFINITE SCROLL - wrap around seamlessly const currentSpeed = newSpeed === 'fast' ? 5 : 2;
if (direction === 'right' && newX <= -totalWidth) { const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed;
// When moved one full cycle to the right, wrap back to start scrollContainerRef.current.scrollBy({
return newX + totalWidth; left: scrollAmount,
} else if (direction === 'left' && newX >= totalWidth) { behavior: 'auto'
// When moved one full cycle to the left, wrap back to end
return newX - totalWidth;
}
return newX;
}); });
}, interval); }, 16);
} }
}; };
@ -196,33 +186,20 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Start continuous smooth scrolling with variable speed // Start continuous smooth scrolling with variable speed
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
setTranslateX(prev => { if (!scrollContainerRef.current) return;
// Faster speed for better movement
const baseSpeed = 2.0; // Faster speed on hover
const speed = direction === 'right' ? -baseSpeed : baseSpeed;
const newX = prev + speed;
const totalWidth = category.videos.length * videoWidth;
// TRUE INFINITE SCROLL - wrap around seamlessly const baseSpeed = 3; // Faster speed on hover
if (direction === 'right' && newX <= -totalWidth) { const scrollAmount = direction === 'right' ? baseSpeed : -baseSpeed;
// When moved one full cycle to the right, wrap back to start scrollContainerRef.current.scrollBy({
return newX + totalWidth; left: scrollAmount,
} else if (direction === 'left' && newX >= totalWidth) { behavior: 'auto'
// When moved one full cycle to the left, wrap back to end
return newX - totalWidth;
}
return newX;
}); });
}, 16); // Fixed interval - speed controlled by pixel movement only }, 16);
}; };
// Initialize with first video on the left side // Initialize with first video on the left side
useEffect(() => { useEffect(() => {
if (category.videos.length > 0) { // No need to set initial position for scroll - browser handles it
// Start at position 0
setTranslateX(0);
}
}, [category.videos.length]); }, [category.videos.length]);
// Always show both buttons // Always show both buttons