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

Improve video grid scrolling behavior when modal is open

Browse Source 
Introduce a `hideScrollButtons` prop to `CategoryRow` in `netflix-grid.tsx` to conditionally render scroll buttons based on the `isModalOpen` state, preventing scroll button interference when a modal is active.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/DVZN4Rp
This commit is contained in:
sebastjanartic 2025-08-30 14:39:17 +00:00
parent 971f3aadb0
commit f10c46f0d8
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756564625261.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

@ -111,6 +111,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
<CategoryRow <CategoryRow
category={category} category={category}
onVideoClick={handleVideoClick} onVideoClick={handleVideoClick}
hideScrollButtons={isModalOpen}
/> />
</div> </div>
))} ))}
@ -130,9 +131,10 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
interface CategoryRowProps { interface CategoryRowProps {
category: VideoCategory; category: VideoCategory;
onVideoClick: (video: Video) => void; onVideoClick: (video: Video) => void;
hideScrollButtons?: boolean;
} }
function CategoryRow({ category, onVideoClick }: CategoryRowProps) { function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const [isScrolling, setIsScrolling] = useState(false); const [isScrolling, setIsScrolling] = useState(false);
const scrollIntervalRef = useRef<NodeJS.Timeout>(); const scrollIntervalRef = useRef<NodeJS.Timeout>();
@ -195,27 +197,31 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{category.title} {category.title}
</h2> </h2>
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Left scroll button - only on desktop */} {/* Left scroll button - only on desktop and not hidden */}
<Button {!hideScrollButtons && (
onClick={() => scroll('left')} <Button
onMouseEnter={() => startAutoScroll('left')} onClick={() => scroll('left')}
onMouseLeave={stopAutoScroll} onMouseEnter={() => startAutoScroll('left')}
className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex" onMouseLeave={stopAutoScroll}
size="sm" className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
> size="sm"
<ChevronLeft className="w-5 h-5" /> >
</Button> <ChevronLeft className="w-5 h-5" />
</Button>
)}
{/* Right scroll button - only on desktop */} {/* Right scroll button - only on desktop and not hidden */}
<Button {!hideScrollButtons && (
onClick={() => scroll('right')} <Button
onMouseEnter={() => startAutoScroll('right')} onClick={() => scroll('right')}
onMouseLeave={stopAutoScroll} onMouseEnter={() => startAutoScroll('right')}
className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex" onMouseLeave={stopAutoScroll}
size="sm" className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
> size="sm"
<ChevronRight className="w-5 h-5" /> >
</Button> <ChevronRight className="w-5 h-5" />
</Button>
)}
{/* Scrollable video row - true edge to edge */} {/* Scrollable video row - true edge to edge */}
<div <div