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

Improve video scrolling behavior on mobile devices

Browse Source 
Adjust card width calculation in `netflix-grid.tsx` to use `window.innerWidth` for more accurate horizontal scrolling and snapping behavior on mobile, addressing issues where videos might stop prematurely.

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:54:35 +00:00
parent aaf1231ed0
commit a057b27607
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -287,7 +287,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
if (isMobile) {
// Debounce the dot update to prevent flickering during scroll
const timer = setTimeout(() => {
const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
// Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
const cardWidth = window.innerWidth - 24;
const scrollProgress = scrollLeft / cardWidth;
const newIndex = Math.round(scrollProgress);
const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
@ -324,8 +325,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
// Navigate to next card - snap to left edge of screen
const nextIndex = currentIndex + 1;
if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for container margins
// Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
const cardWidth = window.innerWidth - 24;
// Scroll so only one full card is visible
scrollRef.current.scrollTo({
left: nextIndex * cardWidth,
@ -339,8 +340,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
// Navigate to previous card - snap to left edge of screen
const prevIndex = currentIndex - 1;
if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for container margins
// Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
const cardWidth = window.innerWidth - 24;
// Scroll so only one full card is visible
scrollRef.current.scrollTo({
left: prevIndex * cardWidth,
@ -438,8 +439,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
key={`dot-${category.title}-${index}`}
onClick={() => {
if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins
// Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
const cardWidth = window.innerWidth - 24;
scrollRef.current.scrollTo({
left: index * cardWidth,
behavior: 'smooth'