From 1a6a351b9f5fa4d9c512755c1b0c4b751d0cfc50 Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Wed, 12 Nov 2025 14:51:28 +0530
Subject: [PATCH] Moved videoframeCallback into sync.js

---
 steps/src/main.js | 19 ++-----------------
 steps/src/sync.js | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/steps/src/main.js b/steps/src/main.js
index 03cc315..953d39d 100644
--- a/steps/src/main.js
+++ b/steps/src/main.js
@@ -26,7 +26,7 @@ import {
   updateLoadingModal,
   showLoadingModal,
 } from "./modal.js"; // Modify this import
-import { animationLoop } from "./sync.js";
+import { animationLoop, videoFrameCallback } from "./sync.js";
 import { radarSketch } from "./p5/radarSketch.js";
 import { speedGraphSketch } from "./p5/speedGraphSketch.js";
 import { parseVisualizationJson, parseJsonWithOboe } from "./fileParsers.js";
@@ -521,22 +521,7 @@ saveSessionBtn.addEventListener("click", () => {
   URL.revokeObjectURL(url);
 });
 
-function videoFrameCallback(now, metadata) {
-  // If the video is no longer playing, stop the callback loop.
-  if (!appState.isPlaying || videoPlayer.paused) {
-    return;
-  }
-
-  // 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);
-}
+//videoframecallback exported from sync.js
 
 // When "Load Session" is clicked, it triggers the hidden file input.
 loadSessionBtn.addEventListener("click", () => {
diff --git a/steps/src/sync.js b/steps/src/sync.js
index 4461f60..3e2970b 100644
--- a/steps/src/sync.js
+++ b/steps/src/sync.js
@@ -4,6 +4,7 @@ import {
   speedSlider,
   offsetInput,
   stopBtn,
+  playPauseBtn,
   updateFrame,
   updateDebugOverlay,
   updatePersistentOverlays,
@@ -11,6 +12,23 @@ import {
 import { findRadarFrameIndexForTime } from "./utils.js";
 
 
+export function videoFrameCallback(now, metadata) {
+  // If the video is no longer playing, stop the callback loop.
+  if (!appState.isPlaying || videoPlayer.paused) {
+    return;
+  }
+
+  // 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);
+}
+
 export function animationLoop() {
   if (!appState.isPlaying) return;