From b7d3a9883d123552538111bfe41ae07b62a34f6c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 22:22:54 +0000
Subject: [PATCH] Improve video playback and navigation on mobile devices
Adjusted scroll button styling for better mobile visibility and enabled autoplay for video previews on mobile devices, fixing issues with user navigation and playback.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
---
client/src/components/netflix-grid.tsx | 4 ++--
client/src/components/video-card.tsx | 16 ++++++----------
2 files changed, 8 insertions(+), 12 deletions(-)
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}