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

Improve scrolling behavior for video carousels by increasing speed

Browse Source 
Update the `netflix-grid.tsx` component to implement faster horizontal scrolling for video categories. The scrolling logic has been modified to jump to the opposite end when reaching the boundaries, creating a continuous loop. The scrolling interval has been reduced to 8ms for a more rapid movement, and the hover functionality now directly triggers faster scrolling without a separate state variable.

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:06:21 +00:00
parent fa5014cbf3
commit 57287e7ec3
1 changed files with 18 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,7 +134,6 @@ interface CategoryRowProps {
function CategoryRow({ category, onVideoClick }: CategoryRowProps) { function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null); const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const [isFastScrolling, setIsFastScrolling] = useState(false);
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
@ -147,20 +146,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
let targetScroll; let targetScroll;
if (direction === 'left') { if (direction === 'left') {
if (currentScroll <= scrollAmount) { targetScroll = currentScroll - scrollAmount;
// Jump to end for infinite loop - instant if (targetScroll <= 0) {
scrollRef.current.scrollLeft = maxScroll; // Jump to end for infinite loop
return; targetScroll = maxScroll;
} else {
targetScroll = currentScroll - scrollAmount;
} }
} else { } else {
if (currentScroll >= maxScroll - scrollAmount) { targetScroll = currentScroll + scrollAmount;
// Jump to beginning for infinite loop - instant if (targetScroll >= maxScroll) {
scrollRef.current.scrollLeft = 0; // Jump to beginning for infinite loop
return; targetScroll = 0;
} else {
targetScroll = currentScroll + scrollAmount;
} }
} }
@ -175,13 +170,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (scrollIntervalRef.current) { if (scrollIntervalRef.current) {
clearInterval(scrollIntervalRef.current); clearInterval(scrollIntervalRef.current);
} }
// Force fast scrolling when hovering
const isHovering = true;
scrollIntervalRef.current = setInterval(() => { scrollIntervalRef.current = setInterval(() => {
if (scrollRef.current) { if (scrollRef.current) {
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
const scrollAmount = direction === 'left' ? const scrollAmount = direction === 'left' ? -10 : 10; // Much faster scroll
(isFastScrolling ? -8 : -3) :
(isFastScrolling ? 8 : 3);
let newScroll = currentScroll + scrollAmount; let newScroll = currentScroll + scrollAmount;
@ -195,7 +192,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
scrollRef.current.scrollLeft = newScroll; scrollRef.current.scrollLeft = newScroll;
} }
}, isFastScrolling ? 5 : 12); // Variable speed }, 8); // Fast interval
}; };
const stopAutoScroll = () => { const stopAutoScroll = () => {
@ -214,14 +211,8 @@ 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={() => { onMouseEnter={() => startAutoScroll('left')}
setIsFastScrolling(true); onMouseLeave={stopAutoScroll}
startAutoScroll('left');
}}
onMouseLeave={() => {
setIsFastScrolling(false);
stopAutoScroll();
}}
onClick={() => scroll('left')} onClick={() => 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"
> >
@ -232,14 +223,8 @@ 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={() => { onMouseEnter={() => startAutoScroll('right')}
setIsFastScrolling(true); onMouseLeave={stopAutoScroll}
startAutoScroll('right');
}}
onMouseLeave={() => {
setIsFastScrolling(false);
stopAutoScroll();
}}
onClick={() => scroll('right')} onClick={() => 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"
> >