Implement a frame-by-frame browser media controller with drift-proof scheduling
Context
You are given a skeleton for a frame-by-frame browser media player. Assume you have:
-
A renderFrame(index) callback that draws frame index onto the UI (e.g., a canvas or an image element).
-
A known total number of frames: frameCount.
Your job is to implement a JavaScript controller that manages playback precisely by frames.
Requirements
Implement a controller that:
-
Jumps to any frame by index.
-
Starts and pauses autoplay at a configurable frames-per-second (FPS).
-
Exposes methods:
-
play()
-
pause()
-
seek(frameIndex)
-
setFPS(fps)
-
currentFrame()
-
isPlaying()
-
Uses setTimeout or setInterval correctly to schedule frames, handles timer drift, and prevents overlapping timers.
-
Encapsulates internal state via closures and cleans up timers/listeners to avoid memory leaks.
Deliverables
-
A working design and explanation of your time-scheduling strategy.
-
A comparison of setTimeout vs setInterval (and optionally requestAnimationFrame) for this use case.
-
Pseudocode or tests showing expected behavior and edge cases.