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

Improve mobile video browsing by ensuring cards snap perfectly into view

Browse Source 
Adjusts horizontal scrolling on mobile devices to enforce precise snapping of video cards to the screen edge, enhancing user experience and aligning with user expectations for card transitions.

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:44:03 +00:00
parent 7894ecb255
commit d2c46814fa
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -270,10 +270,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const isMobile = window.innerWidth < 768;
if (isMobile) {
// On mobile, one full card at a time
// On mobile, one full card at a time - snap to exact position
const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
const newIndex = Math.round(scrollLeft / cardWidth);
setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
setCurrentIndex(Math.min(Math.max(newIndex, 0), 9)); // Ensure 0-9 range
}
}
};
@ -364,8 +364,12 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - in container */}
<div
ref={scrollRef}
className="flex gap-3 md:gap-3 gap-0 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', scrollSnapType: 'x mandatory' }}
className="flex gap-0 md:gap-3 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2"
style={{
scrollbarWidth: 'none',
msOverflowStyle: 'none',
scrollSnapType: window.innerWidth < 768 ? 'x mandatory' : 'none'
}}
onScroll={handleScroll}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
@ -375,6 +379,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
<div
key={video.id}
className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
style={{
scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
}}
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* Top 10 Number overlay for first category */}
@ -394,7 +401,6 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onVideoClick(video);
}}
className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
style={{ scrollSnapAlign: 'start' }}
/>
</div>
))}