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

Improve scrolling behavior for video grids on mobile devices

Browse Source 
Adjusts the calculation of scroll amounts and card indices in the `CategoryRow` component for mobile views. It now correctly accounts for margins and gaps between cards, ensuring smoother and more accurate horizontal scrolling. The logic for determining the current card index and navigating between cards has been refined to handle the specific layout of full-width cards on smaller screens, preventing overlapping or skipped items.

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:38:52 +00:00
parent d1ba445592
commit 95ad3e6e34
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,13 +206,16 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Viewport-based scroll amount for full-width cards // Calculate card width with gap for precise scrolling
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area const isMobile = window.innerWidth < 768;
const cardWidth = isMobile ? containerWidth - 24 : 330; // 24px for mobile margins (3rem - 1.5rem each side)
const gap = 12; // 3 * 0.25rem = 12px gap
const scrollAmount = cardWidth + gap;
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left' const targetScroll = direction === 'left'
? currentScroll - scrollAmount ? Math.max(0, currentScroll - scrollAmount)
: currentScroll + scrollAmount; : currentScroll + scrollAmount;
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
@ -264,9 +267,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const scrollLeft = scrollRef.current.scrollLeft; const scrollLeft = scrollRef.current.scrollLeft;
const cardWidth = containerWidth; // Full width cards on mobile const isMobile = window.innerWidth < 768;
const newIndex = Math.round(scrollLeft / cardWidth);
setCurrentIndex(newIndex); if (isMobile) {
// On mobile, cards are full width
const cardWidth = containerWidth - 24; // Account for margins
const gap = 12;
const newIndex = Math.round(scrollLeft / (cardWidth + gap));
setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
}
} }
}; };
@ -287,13 +296,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const isLeftSwipe = distance > 50; // Swipe left (next) const isLeftSwipe = distance > 50; // Swipe left (next)
const isRightSwipe = distance < -50; // Swipe right (previous) const isRightSwipe = distance < -50; // Swipe right (previous)
if (isLeftSwipe && currentIndex < Math.min(10, category.videos.length) - 1) { if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards
// Navigate to next card // Navigate to next card
const nextIndex = currentIndex + 1; const nextIndex = currentIndex + 1;
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins
const gap = 12;
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: nextIndex * containerWidth, left: nextIndex * (cardWidth + gap),
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(nextIndex); setCurrentIndex(nextIndex);
@ -305,8 +316,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const prevIndex = currentIndex - 1; const prevIndex = currentIndex - 1;
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins
const gap = 12;
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: prevIndex * containerWidth, left: prevIndex * (cardWidth + gap),
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(prevIndex); setCurrentIndex(prevIndex);
@ -395,8 +408,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => { onClick={() => {
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins
const gap = 12;
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: index * containerWidth, left: index * (cardWidth + gap),
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(index); setCurrentIndex(index);