diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index 179c372..d6cd81a 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -51,18 +51,30 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP const videoRef = useRef(null); const hlsRef = useRef(null); - // Handle mouse scrubbing for video preview + // Handle mouse scrubbing for video preview with throttling for smoothness + const lastScrubTime = useRef(0); const handleMouseMove = (e: React.MouseEvent) => { if (!showPreview || !videoRef.current) return; + const now = Date.now(); + // Throttle scrubbing to ~60fps for smoother experience + if (now - lastScrubTime.current < 16) return; + lastScrubTime.current = now; + const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const progress = Math.max(0, Math.min(1, x / rect.width)); - // Scrub video based on mouse position - if (videoRef.current.duration) { + // Scrub video based on mouse position with smooth seeking + if (videoRef.current.duration && !isNaN(videoRef.current.duration)) { const targetTime = progress * videoRef.current.duration; - videoRef.current.currentTime = targetTime; + + // Use requestAnimationFrame for smoother seeking + requestAnimationFrame(() => { + if (videoRef.current) { + videoRef.current.currentTime = targetTime; + } + }); } };