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

Improve video row scrolling functionality for faster navigation

Browse Source 
Add fast scrolling capability to video category rows and implement infinite looping for seamless horizontal 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/mZpi7Z1
This commit is contained in:
sebastjanartic 2025-08-29 11:03:23 +00:00
parent 1db99fc5b3
commit 887c15f111
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -151,12 +151,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (targetScroll <= 0) { if (targetScroll <= 0) {
// Jump to end for infinite loop // Jump to end for infinite loop
targetScroll = maxScroll; targetScroll = maxScroll;
console.log('Kroženje LEVO: skok na konec', { currentScroll, maxScroll, targetScroll });
} }
} else { } else {
targetScroll = currentScroll + scrollAmount; targetScroll = currentScroll + scrollAmount;
if (targetScroll >= maxScroll) { if (targetScroll >= maxScroll) {
// Jump to beginning for infinite loop // Jump to beginning for infinite loop
targetScroll = 0; targetScroll = 0;
console.log('Kroženje DESNO: skok na začetek', { currentScroll, maxScroll, targetScroll });
} }
} }
@ -184,9 +186,11 @@ 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;
@ -210,8 +214,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<div className="relative"> <div className="relative">
{/* Left scroll area with transparent background - only on desktop */} {/* Left scroll area with transparent background - only on desktop */}
<div <div
onMouseEnter={() => startAutoScroll('left')} onMouseEnter={() => {
onMouseLeave={stopAutoScroll} setIsFastScrolling(true);
startAutoScroll('left');
}}
onMouseLeave={() => {
setIsFastScrolling(false);
stopAutoScroll();
}}
onClick={() => { onClick={() => {
setIsFastScrolling(!isFastScrolling); setIsFastScrolling(!isFastScrolling);
scroll('left'); scroll('left');
@ -225,8 +235,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Right scroll area with transparent background - only on desktop */} {/* Right scroll area with transparent background - only on desktop */}
<div <div
onMouseEnter={() => startAutoScroll('right')} onMouseEnter={() => {
onMouseLeave={stopAutoScroll} setIsFastScrolling(true);
startAutoScroll('right');
}}
onMouseLeave={() => {
setIsFastScrolling(false);
stopAutoScroll();
}}
onClick={() => { onClick={() => {
setIsFastScrolling(!isFastScrolling); setIsFastScrolling(!isFastScrolling);
scroll('right'); scroll('right');