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

Improve mobile scrolling behavior by debouncing category index updates

Browse Source 
Add a scroll timer to debounce the calculation and update of the current category index on mobile devices, preventing visual flickering during scrolling.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
This commit is contained in:
sebastjanartic 2025-09-03 08:52:46 +00:00
parent c89bd4a1be
commit aaf1231ed0
1 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -195,6 +195,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const [currentIndex, setCurrentIndex] = useState(0);
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const [scrollTimer, setScrollTimer] = useState<NodeJS.Timeout | null>(null);
const checkScrollButtons = () => {
if (scrollRef.current) {
@ -260,26 +261,44 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
};
}, [category.videos]);
// Cleanup timer on unmount
useEffect(() => {
return () => {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
};
}, [scrollTimer]);
const handleScroll = () => {
checkScrollButtons();
// Calculate current index for mobile dots
// Clear existing timer
if (scrollTimer) {
clearTimeout(scrollTimer);
}
// Calculate current index for mobile dots with delay
if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth;
const scrollLeft = scrollRef.current.scrollLeft;
const isMobile = window.innerWidth < 768;
if (isMobile) {
// On mobile, calculate which card is most visible
const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
const scrollProgress = scrollLeft / cardWidth;
const newIndex = Math.round(scrollProgress);
const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
// Debounce the dot update to prevent flickering during scroll
const timer = setTimeout(() => {
const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
const scrollProgress = scrollLeft / cardWidth;
const newIndex = Math.round(scrollProgress);
const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
// Only update if index actually changed
if (clampedIndex !== currentIndex) {
setCurrentIndex(clampedIndex);
}
}, 100); // 100ms delay for stable positioning
// Only update if index actually changed to prevent flickering
if (clampedIndex !== currentIndex) {
setCurrentIndex(clampedIndex);
}
setScrollTimer(timer);
}
}
};