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

Improve carousel scrolling behavior for a smoother user experience

Browse Source 
Refactor the `CategoryRow` component in `netflix-grid.tsx` to improve the carousel scrolling logic. The changes include implementing instant jumps to the beginning or end of the carousel when reaching the boundaries during scrolling, and simplifying the click handlers for navigation buttons and touch areas to directly call the `scroll` function. This addresses the issue where scrolling functionality was not working correctly.

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/mZpi7Z1
This commit is contained in:
sebastjanartic 2025-08-29 11:04:50 +00:00
parent 887c15f111
commit fa5014cbf3
1 changed files with 16 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,18 +147,20 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
let targetScroll; let targetScroll;
if (direction === 'left') { if (direction === 'left') {
targetScroll = currentScroll - scrollAmount; if (currentScroll <= scrollAmount) {
if (targetScroll <= 0) { // Jump to end for infinite loop - instant
// Jump to end for infinite loop scrollRef.current.scrollLeft = maxScroll;
targetScroll = maxScroll; return;
console.log('Kroženje LEVO: skok na konec', { currentScroll, maxScroll, targetScroll }); } else {
targetScroll = currentScroll - scrollAmount;
} }
} else { } else {
targetScroll = currentScroll + scrollAmount; if (currentScroll >= maxScroll - scrollAmount) {
if (targetScroll >= maxScroll) { // Jump to beginning for infinite loop - instant
// Jump to beginning for infinite loop scrollRef.current.scrollLeft = 0;
targetScroll = 0; return;
console.log('Kroženje DESNO: skok na začetek', { currentScroll, maxScroll, targetScroll }); } else {
targetScroll = currentScroll + scrollAmount;
} }
} }
@ -186,11 +188,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (direction === 'left' && newScroll <= 0) { if (direction === 'left' && newScroll <= 0) {
// Jump to end for infinite loop // Jump to end for infinite loop
newScroll = maxScroll; newScroll = maxScroll;
console.log('Auto-scroll LEVO: skok na konec', { currentScroll, maxScroll, newScroll });
} else if (direction === 'right' && newScroll >= maxScroll) { } else if (direction === 'right' && newScroll >= maxScroll) {
// Jump to beginning for infinite loop // Jump to beginning for infinite loop
newScroll = 0; newScroll = 0;
console.log('Auto-scroll DESNO: skok na začetek', { currentScroll, maxScroll, newScroll });
} }
scrollRef.current.scrollLeft = newScroll; scrollRef.current.scrollLeft = newScroll;
@ -222,10 +222,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsFastScrolling(false); setIsFastScrolling(false);
stopAutoScroll(); stopAutoScroll();
}} }}
onClick={() => { onClick={() => scroll('left')}
setIsFastScrolling(!isFastScrolling);
scroll('left');
}}
className="hidden md:block absolute left-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer" className="hidden md:block absolute left-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer"
> >
<div className="flex items-center justify-center h-full"> <div className="flex items-center justify-center h-full">
@ -243,10 +240,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsFastScrolling(false); setIsFastScrolling(false);
stopAutoScroll(); stopAutoScroll();
}} }}
onClick={() => { onClick={() => scroll('right')}
setIsFastScrolling(!isFastScrolling);
scroll('right');
}}
className="hidden md:block absolute right-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer" className="hidden md:block absolute right-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer"
> >
<div className="flex items-center justify-center h-full"> <div className="flex items-center justify-center h-full">
@ -257,18 +251,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Mobile touch areas for left/right navigation */} {/* Mobile touch areas for left/right navigation */}
<div <div
className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent" className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent"
onClick={() => { onClick={() => scroll('left')}
setIsFastScrolling(!isFastScrolling);
scroll('left');
}}
style={{ touchAction: 'manipulation' }} style={{ touchAction: 'manipulation' }}
/> />
<div <div
className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent" className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent"
onClick={() => { onClick={() => scroll('right')}
setIsFastScrolling(!isFastScrolling);
scroll('right');
}}
style={{ touchAction: 'manipulation' }} style={{ touchAction: 'manipulation' }}
/> />