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