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

Improve video playback and navigation on mobile devices

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 22:22:54 +00:00
parent af4284cb37
commit b7d3a9883d
2 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -247,7 +247,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => scroll('left')} onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')} onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll} 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" size="sm"
> >
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />
@ -260,7 +260,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => scroll('right')} onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')} onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll} 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" size="sm"
> >
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />

16
client/src/components/video-card.tsx
View File

@ -55,15 +55,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
// Delay preview start to avoid loading on quick mouse passes // Delay preview start to avoid loading on quick mouse passes
useEffect(() => { useEffect(() => {
if (isHovered) { if (isHovered) {
// Disable preview on mobile devices // Enable preview on both mobile and desktop
const isMobile = window.innerWidth < 768; const delay = 800;
hoverTimeoutRef.current = setTimeout(() => {
if (!isMobile) { setShowPreview(true);
const delay = 800; // Only on desktop }, delay);
hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true);
}, delay);
}
} else { } else {
if (hoverTimeoutRef.current) { if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current); clearTimeout(hoverTimeoutRef.current);
@ -173,7 +169,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
objectFit: 'cover' objectFit: 'cover'
}} }}
autoPlay autoPlay
muted={false} muted={true}
loop loop
playsInline playsInline
controls={false} controls={false}