From aa0fa618b970de987e9671ab8d1996f6fbf8f54c Mon Sep 17 00:00:00 2001 From: rakadu1 Date: Mon, 10 Nov 2025 18:11:01 +0530 Subject: [PATCH] Request video callback used for display refresh rate synchronization. --- steps/src/main.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/steps/src/main.js b/steps/src/main.js index 13ce244..ad048ec 100644 --- a/steps/src/main.js +++ b/steps/src/main.js @@ -521,12 +521,17 @@ saveSessionBtn.addEventListener("click", () => { }); function videoFrameCallback(now, metadata) { - // 'now' is a high-resolution timestamp provided by the browser - if (appState.lastVideoFrameTime > 0) { - const delta = now - appState.lastVideoFrameTime; - appState.videoFrameRenderTime = delta; + // If the video is no longer playing, stop the callback loop. + if (!appState.isPlaying || videoPlayer.paused) { + return; } - appState.lastVideoFrameTime = now; + + // This is now the main animation driver during playback. + // It's perfectly synced with the video's frame presentation. + const currentTime = metadata.mediaTime; + const frameIndex = findRadarFrameIndexForTime(currentTime * 1000); + + updateFrame(frameIndex, false); // Update radar, but don't seek video. // Re-register the callback for the next frame to create a loop videoPlayer.requestVideoFrameCallback(videoFrameCallback); @@ -685,8 +690,9 @@ playPauseBtn.addEventListener("click", () => { appState.mediaTimeStart = videoPlayer.currentTime; appState.lastSyncTime = appState.masterClockStart; videoPlayer.play(); + videoPlayer.requestVideoFrameCallback(videoFrameCallback); // Start the high-precision loop } - requestAnimationFrame(animationLoop); + requestAnimationFrame(animationLoop); // Keep rAF for non-video sync (e.g. scrubbing) } else { if (videoPlayer.src) videoPlayer.pause(); }