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') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Responsive scroll amount based on viewport // Scroll exactly 4 cards (300px + 12px gap = 312px per card)
const containerWidth = scrollRef.current.clientWidth; const cardWidth = 300 + 12; // card width + gap
const scrollAmount = containerWidth * 0.85; // Scroll 85% 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'
@ -249,7 +249,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
ref={scrollRef} ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4" className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
style={{ style={{
maxWidth: '1200px', maxWidth: '1300px',
margin: '0 auto', margin: '0 auto',
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none' msOverflowStyle: 'none'
@ -258,7 +258,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div <div
key={video.id} 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)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}
@ -286,8 +286,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Navigation arrows - black circles */} {/* Navigation arrows - black circles */}
<div className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block"> <div className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block">
<Button <Button
onMouseEnter={() => startAutoScroll('left')} onClick={() => scroll('left')}
onMouseLeave={stopAutoScroll}
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" 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" size="sm"
> >
@ -296,8 +295,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
</div> </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
onMouseEnter={() => startAutoScroll('right')} onClick={() => scroll('right')}
onMouseLeave={stopAutoScroll}
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" 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" size="sm"
> >