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

Enable automatic scrolling of video rows on hover

Browse Source 
Implement automatic left and right scrolling for video rows when the mouse hovers over designated areas, replacing the previous click-based navigation buttons with a more intuitive hover-activated system.

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/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:27:30 +00:00
parent 645ac19776
commit 8fea0f2c76
1 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,6 +133,7 @@ interface CategoryRowProps {
function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) {
@ -153,39 +154,62 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
}
};
const startAutoScroll = (direction: 'left' | 'right') => {
if (scrollIntervalRef.current) {
clearInterval(scrollIntervalRef.current);
}
scrollIntervalRef.current = setInterval(() => {
if (scrollRef.current) {
const scrollAmount = direction === 'left' ? -3 : 3;
scrollRef.current.scrollLeft += scrollAmount;
}
}, 16); // ~60fps
};
const stopAutoScroll = () => {
if (scrollIntervalRef.current) {
clearInterval(scrollIntervalRef.current);
scrollIntervalRef.current = null;
}
};
return (
<div className="relative group mb-8">
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title}
</h2>
<div className="relative px-0 md:px-16">
{/* Left scroll button - only on desktop */}
<Button
onClick={() => scroll('left')}
className="hidden md:flex absolute -left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 items-center justify-center shadow-xl"
size="sm"
<div className="relative">
{/* Left scroll area with transparent background - only on desktop */}
<div
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
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"
>
<ChevronLeft className="w-5 h-5" />
</Button>
<div className="flex items-center justify-center h-full">
<ChevronLeft className="w-8 h-8 text-white drop-shadow-lg" />
</div>
</div>
{/* Right scroll button - only on desktop */}
<Button
onClick={() => scroll('right')}
className="hidden md:flex absolute -right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 items-center justify-center shadow-xl"
size="sm"
{/* Right scroll area with transparent background - only on desktop */}
<div
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
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"
>
<ChevronRight className="w-5 h-5" />
</Button>
<div className="flex items-center justify-center h-full">
<ChevronRight className="w-8 h-8 text-white drop-shadow-lg" />
</div>
</div>
{/* Mobile touch areas for left/right navigation */}
<div className="md:hidden absolute left-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('left')} />
<div className="md:hidden absolute right-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('right')} />
{/* Scrollable video row */}
{/* Scrollable video row - edge to edge */}
<div
ref={scrollRef}
className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4 scroll-smooth"
className="flex space-x-2 md:space-x-3 overflow-x-auto scrollbar-hide pb-4 scroll-smooth px-4 md:px-0"
style={{
scrollbarWidth: 'none',
msOverflowStyle: 'none',