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

Improve scrolling responsiveness in the video grid component

Browse Source 
Adjust the scrolling logic in `netflix-grid.tsx` to allow for faster, more responsive scrolling with variable animation speeds based on a new `isFastScrolling` state, improving user interaction experience.

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:01:37 +00:00
parent e23fa462eb
commit 1db99fc5b3
1 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,34 +134,29 @@ 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) {
const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0; // Faster scroll
const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0;
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
let targetScroll;
console.log('Scroll debug:', { direction, currentScroll, maxScroll, scrollAmount });
if (direction === 'left') {
if (currentScroll <= 5) {
targetScroll = currentScroll - scrollAmount;
if (targetScroll <= 0) {
// Jump to end for infinite loop
targetScroll = maxScroll;
console.log('Jumping to end:', targetScroll);
} else {
targetScroll = Math.max(0, currentScroll - scrollAmount);
}
} else {
if (currentScroll >= maxScroll - 50) {
targetScroll = currentScroll + scrollAmount;
if (targetScroll >= maxScroll) {
// Jump to beginning for infinite loop
targetScroll = 0;
console.log('Jumping to beginning:', targetScroll);
} else {
targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
}
}
@ -180,19 +175,23 @@ 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' ? -3 : 3; // Faster scroll
const scrollAmount = direction === 'left' ?
(isFastScrolling ? -8 : -3) :
(isFastScrolling ? 8 : 3);
if (direction === 'left' && currentScroll <= 5) {
let newScroll = currentScroll + scrollAmount;
if (direction === 'left' && newScroll <= 0) {
// Jump to end for infinite loop
scrollRef.current.scrollLeft = maxScroll;
} else if (direction === 'right' && currentScroll >= maxScroll - 50) {
newScroll = maxScroll;
} else if (direction === 'right' && newScroll >= maxScroll) {
// Jump to beginning for infinite loop
scrollRef.current.scrollLeft = 0;
} else {
scrollRef.current.scrollLeft += scrollAmount;
newScroll = 0;
}
scrollRef.current.scrollLeft = newScroll;
}
}, 10); // Faster animation
}, isFastScrolling ? 5 : 12); // Variable speed
};
const stopAutoScroll = () => {
@ -213,6 +212,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<div
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
onClick={() => {
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"
>
<div className="flex items-center justify-center h-full">
@ -224,6 +227,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<div
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
onClick={() => {
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"
>
<div className="flex items-center justify-center h-full">
@ -234,12 +241,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Mobile touch areas for left/right navigation */}
<div
className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent"
onClick={() => scroll('left')}
onClick={() => {
setIsFastScrolling(!isFastScrolling);
scroll('left');
}}
style={{ touchAction: 'manipulation' }}
/>
<div
className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent"
onClick={() => scroll('right')}
onClick={() => {
setIsFastScrolling(!isFastScrolling);
scroll('right');
}}
style={{ touchAction: 'manipulation' }}
/>