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

Improve video browsing by allowing users to scroll four videos at a time

Browse Source 
Update the `CategoryRow` component in `netflix-grid.tsx` to adjust the scroll amount for video navigation buttons. The scroll amount is now calculated to move exactly four cards at a time (312px per card), ensuring a consistent browsing experience. Additionally, navigation arrows are now explicitly styled and positioned for better usability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/8e9f2b36-ec9c-4acc-b19b-5304fa9790c5/0CzYEcy
This commit is contained in:
sebastjanartic 2025-09-01 14:44:58 +00:00
parent 6e8e6d7167
commit 0956bbba7d
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,9 +188,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Viewport-based scroll amount for full-width cards // Scroll exactly 4 cards at a time (300px per card + 12px gap = 312px per card)
const containerWidth = scrollRef.current.clientWidth; const cardWidth = 300 + 12; // card width + gap
const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area const scrollAmount = cardWidth * 4; // 4 cards at once
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left' const targetScroll = direction === 'left'
@ -278,7 +278,18 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
))} ))}
</div> </div>
{/* Navigation arrow at the end of each row - small square with arrow */} {/* Navigation arrows - left and right */}
<div className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block">
<Button
onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-16 rounded transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm"
>
<ChevronLeft className="w-4 h-4" />
</Button>
</div>
<div className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block"> <div className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block">
<Button <Button
onClick={() => scroll('right')} onClick={() => scroll('right')}