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

Ensure only one video card displays at a time on mobile screens

Browse Source 
Refactors the `CategoryRow` component to implement snap-to-start scroll behavior on mobile devices, ensuring that only one full video card is visible at a time. This change adjusts scroll calculations and introduces `scrollSnapType: 'x mandatory'` to the container.

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:42:05 +00:00
parent 4fcf1e104f
commit 7894ecb255
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -270,10 +270,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
if (isMobile) { if (isMobile) {
// On mobile, cards snap to left edge // On mobile, one full card at a time
const cardWidth = containerWidth - 24; // Account for container margins (12px each side) const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
const gap = 12; const newIndex = Math.round(scrollLeft / cardWidth);
const newIndex = Math.round(scrollLeft / (cardWidth + gap));
setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed) setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
} }
} }
@ -302,10 +301,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for container margins const cardWidth = containerWidth - 24; // Account for container margins
const gap = 12; // Scroll so only one full card is visible
// Scroll so next card aligns to left edge (accounting for container padding)
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: nextIndex * (cardWidth + gap) + 12, // +12 for left container padding left: nextIndex * cardWidth,
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(nextIndex); setCurrentIndex(nextIndex);
@ -318,10 +316,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for container margins const cardWidth = containerWidth - 24; // Account for container margins
const gap = 12; // Scroll so only one full card is visible
// Scroll so previous card aligns to left edge (accounting for container padding)
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: prevIndex * (cardWidth + gap) + 12, // +12 for left container padding left: prevIndex * cardWidth,
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(prevIndex); setCurrentIndex(prevIndex);
@ -367,8 +364,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - in container */} {/* Scrollable video row - in container */}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide py-4 px-2" 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' }} style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', scrollSnapType: 'x mandatory' }}
onScroll={handleScroll} onScroll={handleScroll}
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
@ -377,7 +374,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div <div
key={video.id} key={video.id}
className="flex-shrink-0 w-[calc(100vw-3rem)] sm:w-[330px] relative hover:z-50" className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
onMouseEnter={() => setClickedVideoId(video.id)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}
@ -397,6 +394,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onVideoClick(video); 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" 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> </div>
))} ))}
@ -411,9 +409,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins const cardWidth = containerWidth - 24; // Account for margins
const gap = 12;
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: index * (cardWidth + gap), left: index * cardWidth,
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(index); setCurrentIndex(index);