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

Improve video scrubbing for a smoother user experience

Browse Source 
Refactor `VideoCard` component to throttle mouse scrubbing events and utilize `requestAnimationFrame` for smoother video seeking, enhancing preview responsiveness.

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:39:30 +00:00
parent 05355d44fe
commit 9579c54ae4
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,18 +51,30 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<any>(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<HTMLDivElement>) => {
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;
}
});
}
};