feat: optimize video scrubbing performance by pre-computing max velocity and improving rendering logic

Author: tommyjtl

app/components/TrajectoryOverlay.tsx

@@ -248,6 +248,20 @@ export function TrajectoryOverlay({
 
         let frameId = 0;
 
+        // Pre-compute max velocity magnitude per track once per metadata load.
+        // Avoids an O(n) reduce across all samples on every rendered frame.
+        const maxVelocityByTrack = new Map<string, number>();
+        if (metadata) {
+            for (const [trackName, track] of Object.entries(metadata.tracks)) {
+                let max = 0;
+                for (const sample of track.samples) {
+                    const m = getVectorMagnitude(sample.velocityVector2DPerSecond);
+                    if (m > max) max = m;
+                }
+                maxVelocityByTrack.set(trackName, max);
+            }
+        }
+
         const resizeCanvas = () => {
             const rect = container.getBoundingClientRect();
             const devicePixelRatio = window.devicePixelRatio || 1;
@@ -308,9 +322,7 @@ export function TrajectoryOverlay({
                 }
 
                 const latestSample = track.samples[endIndex];
-                const maxVelocityMagnitude = track.samples.reduce((currentMax, sample) => (
-                    Math.max(currentMax, getVectorMagnitude(sample.velocityVector2DPerSecond))
-                ), 0);
+                const maxVelocityMagnitude = maxVelocityByTrack.get(trackName) ?? 0;
 
                 const startIndex = historyWindowSec == null
                     ? 1
@@ -438,25 +450,85 @@ export function TrajectoryOverlay({
             });
         };
 
-        const loop = () => {
+        // Type helper for the requestVideoFrameCallback API (not yet in lib.dom.d.ts everywhere)
+        type VideoWithRVFC = HTMLVideoElement & {
+            requestVideoFrameCallback: (cb: () => void) => number;
+            cancelVideoFrameCallback: (id: number) => void;
+        };
+
+        const video = videoRef.current;
+        const supportsRVFC = video != null && 'requestVideoFrameCallback' in HTMLVideoElement.prototype;
+        let rvcId = 0;
+
+        const renderOnce = () => {
             resizeCanvas();
             renderFrame();
-            frameId = window.requestAnimationFrame(loop);
         };
 
-        const resizeObserver = new ResizeObserver(() => {
-            resizeCanvas();
+        // When rVFC is supported, render exactly once per decoded video frame (perfectly
+        // GPU-synced, zero wasted work while paused or between frames).
+        const scheduleRVFC = () => {
+            if (!video) return;
+            rvcId = (video as VideoWithRVFC).requestVideoFrameCallback(() => {
+                renderOnce();
+                if (!video.paused) scheduleRVFC();
+            });
+        };
+
+        // Fallback: plain rAF loop (only runs while playing — see handlePlay/handlePause).
+        const fallbackLoop = () => {
             renderFrame();
-        });
+            frameId = window.requestAnimationFrame(fallbackLoop);
+        };
+
+        const startLoop = () => {
+            if (supportsRVFC) {
+                scheduleRVFC();
+            } else {
+                window.cancelAnimationFrame(frameId);
+                frameId = window.requestAnimationFrame(fallbackLoop);
+            }
+        };
+
+        const stopLoop = () => {
+            if (supportsRVFC) {
+                (video as VideoWithRVFC).cancelVideoFrameCallback(rvcId);
+            } else {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+
+        const handlePlay = () => startLoop();
+        const handlePause = () => { stopLoop(); renderOnce(); };
+        // Render once per completed seek (covers scrubbing while paused).
+        const handleSeeked = () => { renderOnce(); };
+
+        const resizeObserver = new ResizeObserver(() => { renderOnce(); });
+
+        if (video) {
+            video.addEventListener('play', handlePlay);
+            video.addEventListener('pause', handlePause);
+            video.addEventListener('seeked', handleSeeked);
+        }
 
         resizeObserver.observe(container);
         resizeCanvas();
-        renderFrame();
-        frameId = window.requestAnimationFrame(loop);
+        renderOnce();
+
+        // If the video is already playing when this effect runs, kick off the loop.
+        if (video && !video.paused) {
+            startLoop();
+        }
 
         return () => {
-            resizeObserver.disconnect();
+            if (video) {
+                video.removeEventListener('play', handlePlay);
+                video.removeEventListener('pause', handlePause);
+                video.removeEventListener('seeked', handleSeeked);
+                stopLoop();
+            }
             window.cancelAnimationFrame(frameId);
+            resizeObserver.disconnect();
         };
     }, [containerRef, enabled, historyWindowSec, metadata, poseColor.b, poseColor.g, poseColor.r, showBlackBackground, showPose, videoRef, visibleTrackNames]);
 

app/components/VideoControlPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { VideoPlaybackSection } from './VideoPlaybackSection';
-import { formatVideoTime, type KeyMoment } from '../lib/key-moments';
+import { type KeyMoment } from '../lib/key-moments';
 
 interface VideoControlPanelProps {
     hasVideos: boolean;
@@ -66,7 +66,6 @@ export function VideoControlPanel({
 }: VideoControlPanelProps) {
     if (!hasVideos) return null;
 
-    const maxDuration = Math.max(duration1, duration2);
     const selectedKeyMoment = selectedKeyMomentId
         ? keyMoments.find((keyMoment) => keyMoment.id === selectedKeyMomentId) ?? null
         : null;
@@ -79,12 +78,6 @@ export function VideoControlPanel({
                 Video Controls
             </h2>
             <div className="space-y-4">
-                <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">Max Duration:</span>
-                    <span className="font-mono text-gray-800 dark:text-gray-200">
-                        {formatVideoTime(maxDuration)}
-                    </span>
-                </div>
                 {showRemoveVideos && (onRemoveVideo1 || onRemoveVideo2) && (
                     <div>
                         <button