From f1528b84304113f671f69a99365e1f743a33bb8f Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Thu, 13 Nov 2025 09:37:56 +0530
Subject: [PATCH] Moving the manual offset enter and resync logic into sync.js
 file for better seperation.

---
 steps/src/main.js | 35 ++++++++++-------------------------
 steps/src/sync.js | 23 ++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/steps/src/main.js b/steps/src/main.js
index ed8ad8c..e11c9d7 100644
--- a/steps/src/main.js
+++ b/steps/src/main.js
@@ -32,6 +32,7 @@ import {
   startPlayback,
   pausePlayback,
   stopPlayback,
+  forceResyncWithOffset,
 } from "./sync.js";
 import { radarSketch } from "./p5/radarSketch.js";
 import { speedGraphSketch } from "./p5/speedGraphSketch.js";
@@ -1052,6 +1053,15 @@ function calculateAndSetOffset() {
     }
   }
 }
+offsetInput.addEventListener("keydown", (event) => {
+  // Check if the key pressed was 'Enter'
+  if (event.key === "Enter") {
+    // Prevent the default browser action for the Enter key (like submitting a form)
+    event.preventDefault();
+    // Call the new centralized function from sync.js
+    forceResyncWithOffset();
+  }
+});
 
 // --- [START] CORRECTED INITIALIZATION LOGIC ---
 document.addEventListener("DOMContentLoaded", () => {
@@ -1097,28 +1107,3 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 // --- [END] CORRECTED INITIALIZATION LOGIC ---
-
-// In src/main.js, add this new event listener
-offsetInput.addEventListener("keydown", (event) => {
-  // Check if the key pressed was 'Enter'
-  if (event.key === "Enter") {
-    // Prevent the default browser action for the Enter key (like submitting a form)
-    event.preventDefault();
-
-    // Make sure visualization data is loaded before proceeding
-    if (!appState.vizData) return;
-
-    console.log(
-      `Enter pressed. Forcing resync with new offset: ${offsetInput.value}`
-    );
-
-    // If the video is playing, pause it to allow for precise frame tuning.
-    if (appState.isPlaying) {
-      playPauseBtn.click();
-    }
-
-    // Call updateFrame, forcing it to resync the video to the current radar frame
-    // using the new offset value from the input box.
-    updateFrame(appState.currentFrame, true);
-  }
-});
diff --git a/steps/src/sync.js b/steps/src/sync.js
index 11d18db..48e96d4 100644
--- a/steps/src/sync.js
+++ b/steps/src/sync.js
@@ -1,6 +1,5 @@
 import { appState } from "./state.js";
 import {
-  videoPlayer,
   speedSlider,
   offsetInput,
   stopBtn,
@@ -8,6 +7,7 @@ import {
   updateFrame,
   updateDebugOverlay,
   updatePersistentOverlays,
+  videoPlayer,
 } from "./dom.js";
 import { findRadarFrameIndexForTime } from "./utils.js";
 
@@ -30,6 +30,27 @@ export function pausePlayback() {
   }
 }
 
+export function forceResyncWithOffset() {
+  // Make sure visualization data is loaded before proceeding
+  if (!appState.vizData) return;
+
+  console.log(
+    `Forcing resync with new offset: ${offsetInput.value}`
+  );
+
+  // If the video is playing, pause it to allow for precise frame tuning.
+  if (appState.isPlaying) {
+    // Directly pause playback and update state, avoiding a synthetic click.
+    pausePlayback();
+    appState.isPlaying = false;
+    playPauseBtn.textContent = "Play";
+  }
+
+  // Call updateFrame, forcing it to resync the video to the current radar frame
+  // using the new offset value from the input box.
+  updateFrame(appState.currentFrame, true);
+}
+
 export function stopPlayback() {
   videoPlayer.pause();
   if (appState.vizData) {