Fixed pause / resume sync on separate tabs + timer

Author: alyssaxuu

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_extName__",
   "description": "__MSG_extDesc__",
   "default_locale": "en",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "background": {
     "service_worker": "background.bundle.js"
   },
@@ -101,7 +101,7 @@
     "managed_schema": "schema.json"
   },
   "externally_connectable": {
-    "matches": ["https://app.screenity.io/*", "http://localhost:3000/*"]
+    "matches": ["https://app.screenity.io/*"]
   },
   "optional_permissions": [
     "offscreen",

src/pages/Background/listeners/onTabActivatedListener.js

@@ -5,18 +5,21 @@ export const handleTabActivation = async (activeInfo) => {
     const {
       recordingStartTime,
       recording,
+      paused,
+      pausedAt,
+      totalPausedMs,
       restarting,
       pendingRecording,
       recorderSession,
     } = await chrome.storage.local.get([
       "recordingStartTime",
       "recording",
-      "restarting",
-      "pendingRecording",
-      "recorderSession",
       "paused",
       "pausedAt",
       "totalPausedMs",
+      "restarting",
+      "pendingRecording",
+      "recorderSession",
     ]);
 
     // Get the activated tab

src/pages/Background/listeners/onTabUpdatedListener.js

@@ -5,21 +5,24 @@ export const handleTabUpdate = async (tabId, changeInfo, tab) => {
     if (changeInfo.status === "complete") {
       const {
         recording,
+        paused,
+        pausedAt,
+        totalPausedMs,
         restarting,
         tabRecordedID,
         pendingRecording,
         recordingStartTime,
         recorderSession,
       } = await chrome.storage.local.get([
         "recording",
+        "paused",
+        "pausedAt",
+        "totalPausedMs",
         "restarting",
         "tabRecordedID",
         "pendingRecording",
         "recordingStartTime",
         "recorderSession",
-        "paused",
-        "pausedAt",
-        "totalPausedMs",
       ]);
 
       // Check both recording flag AND recorderSession to avoid race conditions
@@ -60,9 +63,9 @@ export const handleTabUpdate = async (tabId, changeInfo, tab) => {
         if (alarm) {
           const { alarmTime } = await chrome.storage.local.get(["alarmTime"]);
           const remaining = Math.max(0, Math.floor(alarmTime - elapsed));
-          sendMessageTab(activeInfo.tabId, { type: "time", time: remaining });
+          sendMessageTab(tabId, { type: "time", time: remaining });
         } else {
-          sendMessageTab(activeInfo.tabId, { type: "time", time: elapsed });
+          sendMessageTab(tabId, { type: "time", time: elapsed });
         }
       }
 

src/pages/Background/messaging/handlers.js

@@ -959,17 +959,27 @@ export const setupHandlers = () => {
     return await loginWithWebsite();
   });
   registerMessage("sync-recording-state", async (message, sendResponse) => {
-    const { recording, paused, recordingStartTime, pendingRecording } =
-      await chrome.storage.local.get([
-        "recording",
-        "paused",
-        "recordingStartTime",
-        "pendingRecording",
-      ]);
+    const {
+      recording,
+      paused,
+      recordingStartTime,
+      pausedAt,
+      totalPausedMs,
+      pendingRecording,
+    } = await chrome.storage.local.get([
+      "recording",
+      "paused",
+      "recordingStartTime",
+      "pausedAt",
+      "totalPausedMs",
+      "pendingRecording",
+    ]);
     sendResponse({
       recording: Boolean(recording),
       paused: Boolean(paused),
       recordingStartTime: recordingStartTime || null,
+      pausedAt: pausedAt || null,
+      totalPausedMs: totalPausedMs || 0,
       pendingRecording: Boolean(pendingRecording),
     });
     return true;

src/pages/Background/recording/startRecording.js

@@ -2,9 +2,7 @@ import { sendMessageRecord } from "./sendMessageRecord";
 
 export const startRecording = async () => {
   chrome.storage.local.set({
-    recordingStartTime: Date.now(),
     restarting: false,
-    recording: true,
   });
 
   // Check if customRegion is set
@@ -57,7 +55,6 @@ export const startAfterCountdown = async () => {
 
     // If there is an active recording tab or offscreen document, begin recording
     if (recordingTab !== null || offscreen) {
-      await chrome.storage.local.set({ recording: true });
       startRecording();
     }
   } catch (error) {

src/pages/CloudRecorder/CloudRecorder.jsx

@@ -92,6 +92,7 @@ const CloudRecorder = () => {
   const recoveryAttempted = useRef(false);
   const screenTrackLostRef = useRef(false);
   const screenTrackMonitor = useRef(null);
+  const pausedStateRef = useRef(false);
 
   // This checks if the recording was previously initialized
   const isInit = useRef(false);
@@ -557,6 +558,14 @@ const CloudRecorder = () => {
     }
   };
 
+  const setRecordingTimingState = async (nextState) => {
+    try {
+      await chrome.storage.local.set(nextState);
+    } catch (err) {
+      console.warn("Failed to persist recording timing state:", err);
+    }
+  };
+
   const flushPendingChunks = async () => {
     if (screenUploader.current) {
       try {
@@ -627,6 +636,14 @@ const CloudRecorder = () => {
 
     // Stop the silent audio keep-alive
     stopTabKeepAlive();
+    await setRecordingTimingState({
+      recording: false,
+      paused: false,
+      recordingStartTime: null,
+      pausedAt: null,
+      totalPausedMs: 0,
+    });
+    pausedStateRef.current = false;
 
     const { projectId, multiMode, multiSceneCount, recordingToScene } =
       await chrome.storage.local.get([
@@ -1184,7 +1201,15 @@ const CloudRecorder = () => {
       screenTimer.current.notificationInterval = timerInterval;
       screenTimer.current.warned = warned;
 
-      chrome.storage.local.set({ recording: true });
+      const recordingStartTime = Date.now();
+      await setRecordingTimingState({
+        recording: true,
+        paused: false,
+        recordingStartTime,
+        pausedAt: null,
+        totalPausedMs: 0,
+      });
+      pausedStateRef.current = false;
       persistSessionState({ status: "recording" });
       setStarted(true);
     } catch (err) {
@@ -1623,7 +1648,14 @@ const CloudRecorder = () => {
       }
     }
     isFinishing.current = true;
-    chrome.storage.local.set({ recording: false });
+    await setRecordingTimingState({
+      recording: false,
+      paused: false,
+      recordingStartTime: null,
+      pausedAt: null,
+      totalPausedMs: 0,
+    });
+    pausedStateRef.current = false;
     stopAllIntervals();
 
     await stopAllRecorders();
@@ -2357,6 +2389,7 @@ const CloudRecorder = () => {
       return true;
     } else if (request.type === "pause-recording-tab") {
       if (!isInit.current) return;
+      if (pausedStateRef.current) return;
 
       // Pause all active recorders
       if (
@@ -2387,8 +2420,14 @@ const CloudRecorder = () => {
         cameraTimer.current.total += now - cameraTimer.current.start;
         cameraTimer.current.paused = true;
       }
+      pausedStateRef.current = true;
+      void setRecordingTimingState({
+        paused: true,
+        pausedAt: now,
+      });
     } else if (request.type === "resume-recording-tab") {
       if (!isInit.current) return;
+      if (!pausedStateRef.current) return;
 
       // Resume all paused recorders
       if (screenRecorder.current && screenRecorder.current.state === "paused") {
@@ -2410,6 +2449,23 @@ const CloudRecorder = () => {
         cameraTimer.current.start = now;
         cameraTimer.current.paused = false;
       }
+      pausedStateRef.current = false;
+      void (async () => {
+        try {
+          const { pausedAt, totalPausedMs } = await chrome.storage.local.get([
+            "pausedAt",
+            "totalPausedMs",
+          ]);
+          const additional = pausedAt ? Math.max(0, now - pausedAt) : 0;
+          await setRecordingTimingState({
+            paused: false,
+            pausedAt: null,
+            totalPausedMs: (totalPausedMs || 0) + additional,
+          });
+        } catch (err) {
+          console.warn("Failed to update resume timing state:", err);
+        }
+      })();
     } else if (request.type === "dismiss-recording") {
       if (!isInit.current) return;
       dismissRecording();