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

Improve scrolling speed and behavior in video category grids

Browse Source 
Adjust scroll amount and remove infinite looping for category rows to enhance user navigation.

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/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:54:50 +00:00
parent 26bd63a2f4
commit 10079f756b
1 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,27 +139,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (scrollRef.current) {
const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75;
const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0; // Faster scroll
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
let targetScroll;
if (direction === 'left') {
if (currentScroll <= 0) {
// If at the beginning, jump to the end (infinite loop)
targetScroll = maxScroll;
} else {
targetScroll = Math.max(0, currentScroll - scrollAmount);
}
} else {
if (currentScroll >= maxScroll - 10) {
// If at the end, jump to the beginning (infinite loop)
targetScroll = 0;
} else {
targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
}
}
const targetScroll = direction === 'left'
? Math.max(0, currentScroll - scrollAmount)
: Math.min(maxScroll, currentScroll + scrollAmount);
scrollRef.current.scrollTo({
left: targetScroll,
@ -176,19 +162,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (scrollRef.current) {
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
const scrollAmount = direction === 'left' ? -2 : 2;
const scrollAmount = direction === 'left' ? -3 : 3; // Faster scroll
// Stop at edges, don't loop
if (direction === 'left' && currentScroll <= 0) {
// Jump to end for infinite loop
scrollRef.current.scrollLeft = maxScroll;
} else if (direction === 'right' && currentScroll >= maxScroll - 5) {
// Jump to beginning for infinite loop
scrollRef.current.scrollLeft = 0;
} else {
scrollRef.current.scrollLeft += scrollAmount;
stopAutoScroll();
return;
}
if (direction === 'right' && currentScroll >= maxScroll - 5) {
stopAutoScroll();
return;
}
scrollRef.current.scrollLeft += scrollAmount;
}
}, 12); // Smooth 60fps animation
}, 10); // Faster animation
};
const stopAutoScroll = () => {