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

Improve video grid navigation and display for better user experience

Browse Source 
Update the Netflix grid component to display videos in groups of four with updated card widths, container max-width, and implemented click-based scrolling for navigation arrows.

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/fyyFszO
This commit is contained in:
sebastjanartic 2025-09-01 15:25:30 +00:00
parent 31b0f41dee
commit 7969211351
1 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,9 +188,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) {
// Responsive scroll amount based on viewport
const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = containerWidth * 0.85; // Scroll 85% of visible area
// Scroll exactly 4 cards (300px + 12px gap = 312px per card)
const cardWidth = 300 + 12; // card width + gap
const scrollAmount = cardWidth * 4; // 4 cards at once
const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left'
@ -249,7 +249,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
style={{
maxWidth: '1200px',
maxWidth: '1300px',
margin: '0 auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
@ -258,7 +258,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[285px] md:w-[285px] lg:w-[285px] xl:w-[285px] relative group hover:z-30"
className="flex-shrink-0 w-[300px] md:w-[300px] lg:w-[300px] xl:w-[300px] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* Top 10 Number overlay for first category */}
@ -286,8 +286,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Navigation arrows - black circles */}
<div className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block">
<Button
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
onClick={() => scroll('left')}
className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm"
>
@ -296,8 +295,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
</div>
<div className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block">
<Button
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
onClick={() => scroll('right')}
className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm"
>