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

Improve video scrolling behavior on mobile devices for smoother navigation

Browse Source 
Refactors the mobile scrolling logic in the Netflix grid component to accurately calculate the most visible video card. Implements a useCallback hook for the scroll handler and updates the pagination indicator styles for better visual feedback.

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:49:08 +00:00
parent 200a0884df
commit 699ed8ec59
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useState, useRef, useEffect, useMemo } from "react"; import { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { useLocation } from "wouter"; import { useLocation } from "wouter";
import { type Video } from "@shared/schema"; import { type Video } from "@shared/schema";
import VideoCard from "./video-card"; import VideoCard from "./video-card";
@ -270,10 +270,16 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
if (isMobile) { if (isMobile) {
// On mobile, one full card at a time - snap to exact position // On mobile, calculate which card is most visible
const cardWidth = containerWidth - 24; // Account for container margins (12px each side) const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
const newIndex = Math.round(scrollLeft / cardWidth); const scrollProgress = scrollLeft / cardWidth;
setCurrentIndex(Math.min(Math.max(newIndex, 0), 9)); // Ensure 0-9 range const newIndex = Math.round(scrollProgress);
const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
// Only update if index actually changed to prevent flickering
if (clampedIndex !== currentIndex) {
setCurrentIndex(clampedIndex);
}
} }
} }
}; };
@ -422,10 +428,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
setCurrentIndex(index); setCurrentIndex(index);
} }
}} }}
className={`rounded-full transition-all duration-200 ease-out ${ className={`rounded-full transition-colors duration-300 ease-in-out ${
index === currentIndex index === currentIndex
? 'bg-gradient-to-r from-purple-500 to-blue-500' ? 'bg-gradient-to-r from-purple-500 to-blue-500'
: 'bg-white/20 hover:bg-white/30' : 'bg-white/25 hover:bg-white/40'
}`} }`}
style={{ style={{
width: '8px', width: '8px',