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

Improve the video carousel scrolling and navigation experience

Browse Source 
Adjusts the scrolling behavior and replaces hover-activated scroll areas with dedicated buttons in the video carousel component to enhance usability on both desktop and mobile.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/fgCGOr7
This commit is contained in:
sebastjanartic 2025-08-29 14:23:14 +00:00
parent ebd7d8952e
commit 534527d233
1 changed files with 30 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,24 +139,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (scrollRef.current) {
const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0;
const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.6;
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
let targetScroll;
if (direction === 'left') {
targetScroll = currentScroll - scrollAmount;
if (targetScroll <= 0) {
// Jump to end for infinite loop
targetScroll = maxScroll;
}
targetScroll = Math.max(0, currentScroll - scrollAmount);
} else {
targetScroll = currentScroll + scrollAmount;
if (targetScroll >= maxScroll) {
// Jump to beginning for infinite loop
targetScroll = 0;
}
targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
}
scrollRef.current.scrollTo({
@ -209,41 +201,43 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
</h2>
<div className="relative">
{/* Left scroll area with transparent background - only on desktop */}
<div
{/* Left scroll button - always visible on desktop */}
<button
onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
onClick={() => scroll('left')}
className="hidden md:block absolute left-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer"
className="hidden md:flex absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 z-30 bg-black/70 hover:bg-black/90 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/20"
data-testid="button-scroll-left"
>
<div className="flex items-center justify-center h-full">
<ChevronLeft className="w-8 h-8 text-white drop-shadow-lg" />
</div>
</div>
<ChevronLeft className="w-6 h-6 text-white" />
</button>
{/* Right scroll area with transparent background - only on desktop */}
<div
{/* Right scroll button - always visible on desktop */}
<button
onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
onClick={() => scroll('right')}
className="hidden md:block absolute right-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer"
className="hidden md:flex absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 z-30 bg-black/70 hover:bg-black/90 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/20"
data-testid="button-scroll-right"
>
<div className="flex items-center justify-center h-full">
<ChevronRight className="w-8 h-8 text-white drop-shadow-lg" />
</div>
</div>
<ChevronRight className="w-6 h-6 text-white" />
</button>
{/* Mobile touch areas for left/right navigation */}
<div
className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent"
{/* Mobile scroll buttons */}
<button
onClick={() => scroll('left')}
style={{ touchAction: 'manipulation' }}
/>
<div
className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent"
className="md:hidden absolute left-1 top-1/2 -translate-y-1/2 w-10 h-10 z-40 bg-black/70 rounded-full flex items-center justify-center"
data-testid="button-mobile-scroll-left"
>
<ChevronLeft className="w-5 h-5 text-white" />
</button>
<button
onClick={() => scroll('right')}
style={{ touchAction: 'manipulation' }}
/>
className="md:hidden absolute right-1 top-1/2 -translate-y-1/2 w-10 h-10 z-40 bg-black/70 rounded-full flex items-center justify-center"
data-testid="button-mobile-scroll-right"
>
<ChevronRight className="w-5 h-5 text-white" />
</button>
{/* Scrollable video row - edge to edge */}
<div