diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index eae5150..9c0dd54 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -247,7 +247,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate onClick={() => scroll('left')} onMouseEnter={() => startAutoScroll('left')} onMouseLeave={stopAutoScroll} - className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex" + className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl" size="sm" > @@ -260,7 +260,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate onClick={() => scroll('right')} onMouseEnter={() => startAutoScroll('right')} onMouseLeave={stopAutoScroll} - className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex" + className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl" size="sm" > diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index 0053284..6ba3573 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -55,15 +55,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay // Delay preview start to avoid loading on quick mouse passes useEffect(() => { if (isHovered) { - // Disable preview on mobile devices - const isMobile = window.innerWidth < 768; - - if (!isMobile) { - const delay = 800; // Only on desktop - hoverTimeoutRef.current = setTimeout(() => { - setShowPreview(true); - }, delay); - } + // Enable preview on both mobile and desktop + const delay = 800; + hoverTimeoutRef.current = setTimeout(() => { + setShowPreview(true); + }, delay); } else { if (hoverTimeoutRef.current) { clearTimeout(hoverTimeoutRef.current); @@ -173,7 +169,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay objectFit: 'cover' }} autoPlay - muted={false} + muted={true} loop playsInline controls={false}