One hook, two sources. The bars are written straight to the DOM from onProgress, so they animate at 60fps without re-rendering — with react-scan on, notice the bars never flash. The panels re-render only on a play/pause/complete transition.
Duration
useProgress(4000)No media — the engine advances a timeline off the shared frame loop and reports progress each frame.
0%
Paused
Media
useProgress(videoRef)Same hook, fed a <video> ref. Progress tracks currentTime; the buttons drive playback, and scrubbing the native controls updates the bar too.
0%
Paused