Streamlining the backup process, fixing issues

build/manifest.json

@@ -1 +1 @@
-{"description":"__MSG_extDesc__","version":"3.1.0","manifest_version":3,"name":"__MSG_extName__","default_locale":"en","background":{"service_worker":"background.bundle.js"},"action":{"default_icon":"assets/img/icon-34.png"},"icons":{"128":"assets/img/icon-128.png"},"host_permissions":["<all_urls>"],"content_scripts":[{"matches":["<all_urls>"],"js":["contentScript.bundle.js"],"css":["assets/fonts/fonts.css"]}],"web_accessible_resources":[{"resources":["content.styles.css","blank.mp4","playground.html","editor.html","assets/*","setup.html","worker.js","vendor/*","recorder.html","recorderoffscreen.html","sandbox.html","wrapper.html","camera.html","permissions.html","region.html","waveform.html","playground.html","editorfallback.html","download.html","*"],"matches":["<all_urls>"]}],"oauth2":{"client_id":"560517327251-m7n1k3kddknu7s9s4ejvrs1bj91gutd7.apps.googleusercontent.com","scopes":["https://www.googleapis.com/auth/drive.file"]},"cross_origin_embedder_policy":{"value":"require-corp"},"cross_origin_opener_policy":{"value":"same-origin"},"content_security_policy":{"sandbox":"sandbox allow-scripts allow-modals allow-popups; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; object-src 'self';worker-src 'self' blob: ;","extension_pages":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; media-src 'self' data: blob: *;"},"sandbox":{"pages":["editor.html"]},"commands":{"start-recording":{"suggested_key":{"default":"Alt+Shift+G"},"description":"Start recording"},"cancel-recording":{"suggested_key":{"default":"Alt+Shift+X"},"description":"Cancel recording"},"pause-recording":{"suggested_key":{"default":"Alt+Shift+M"},"description":"Pause/Resume recording"}},"permissions":["identity","activeTab","storage","unlimitedStorage","downloads","tabs","tabCapture","scripting"],"optional_permissions":["offscreen","desktopCapture","alarms"]}
+{"description":"__MSG_extDesc__","version":"3.1.1","manifest_version":3,"name":"__MSG_extName__","default_locale":"en","background":{"service_worker":"background.bundle.js"},"action":{"default_icon":"assets/img/icon-34.png"},"icons":{"128":"assets/img/icon-128.png"},"host_permissions":["<all_urls>"],"content_scripts":[{"matches":["<all_urls>"],"js":["contentScript.bundle.js"],"css":["assets/fonts/fonts.css"]}],"web_accessible_resources":[{"resources":["content.styles.css","blank.mp4","playground.html","editor.html","assets/*","setup.html","worker.js","vendor/*","recorder.html","recorderoffscreen.html","sandbox.html","wrapper.html","camera.html","permissions.html","region.html","waveform.html","playground.html","editorfallback.html","download.html","*"],"matches":["<all_urls>"]}],"oauth2":{"client_id":"560517327251-m7n1k3kddknu7s9s4ejvrs1bj91gutd7.apps.googleusercontent.com","scopes":["https://www.googleapis.com/auth/drive.file"]},"cross_origin_embedder_policy":{"value":"require-corp"},"cross_origin_opener_policy":{"value":"same-origin"},"content_security_policy":{"sandbox":"sandbox allow-scripts allow-modals allow-popups; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; object-src 'self';worker-src 'self' blob: ;","extension_pages":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; media-src 'self' data: blob: *;"},"sandbox":{"pages":["editor.html"]},"commands":{"start-recording":{"suggested_key":{"default":"Alt+Shift+G"},"description":"Start recording"},"cancel-recording":{"suggested_key":{"default":"Alt+Shift+X"},"description":"Cancel recording"},"pause-recording":{"suggested_key":{"default":"Alt+Shift+M"},"description":"Pause/Resume recording"}},"permissions":["identity","activeTab","storage","unlimitedStorage","downloads","tabs","tabCapture","scripting"],"optional_permissions":["offscreen","desktopCapture","alarms"]}

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_extName__",
   "description": "__MSG_extDesc__",
   "default_locale": "en",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "background": {
     "service_worker": "background.bundle.js"
   },

src/pages/Background/index.js

@@ -788,7 +788,11 @@ const offscreenDocument = async (request, tabId = null) => {
   if (tabId !== null) {
     activeTab = await chrome.tabs.get(tabId);
   }
-  chrome.storage.local.set({ activeTab: activeTab.id, tabRecordedID: null });
+  chrome.storage.local.set({
+    activeTab: activeTab.id,
+    tabRecordedID: null,
+    memoryError: false,
+  });
 
   // Check activeTab URL
   if (activeTab.url.includes(chrome.runtime.getURL("playground.html"))) {
@@ -1127,6 +1131,16 @@ chrome.runtime.onInstalled.addListener(async (details) => {
     }
   }
 
+  // Check if the backup tab is open, if so close it
+  const { backupTab } = await chrome.storage.local.get(["backupTab"]);
+  if (backupTab) {
+    chrome.tabs.get(backupTab, (tab) => {
+      if (tab) {
+        chrome.tabs.remove(tab.id);
+      }
+    });
+  }
+
   executeScripts();
 });
 
@@ -1629,7 +1643,28 @@ const handleMessage = async (request, sender, sendResponse) => {
   } else if (request.type === "force-processing") {
     forceProcessing();
   } else if (request.type === "focus-this-tab") {
-    chrome.tabs.update(sender.tab.id, { active: true });
+    chrome.windows.update(sender.tab.windowId, { focused: true }).then(() => {
+      chrome.tabs.update(sender.tab.id, { active: true });
+    });
+  } else if (request.type === "stop-recording-tab-backup") {
+    chrome.storage.local.set({
+      recording: false,
+      restarting: false,
+      tabRecordedID: null,
+      memoryError: true,
+    });
+    sendMessageRecord({ type: "stop-recording-tab" });
+
+    // Get active tab
+    const { activeTab } = await chrome.storage.local.get(["activeTab"]);
+    // Check if actual tab
+    chrome.tabs.get(activeTab, (t) => {
+      if (t) {
+        chrome.tabs.sendMessage(activeTab, { type: "stop-pending" });
+        // Focus tab
+        chrome.tabs.update(activeTab, { active: true });
+      }
+    });
   }
 };
 
@@ -1809,14 +1844,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   } else if (request.type === "request-download") {
     requestDownload(request.base64, request.title);
-  } else if (request.type === "stop-recording-tab-backup") {
-    chrome.storage.local.set({
-      recording: false,
-      restarting: false,
-      tabRecordedID: null,
-      memoryError: true,
-    });
-    sendMessageRecord({ type: "stop-recording-tab" });
   }
   handleMessage(request, sender, sendResponse);
 });

src/pages/Backup/Backup.jsx

@@ -15,6 +15,8 @@ const Backup = () => {
   const writingFile = useRef(false);
   const titleRef = useRef(null);
   const [override, setOverride] = useState(false);
+  const waitWrite = useRef(false);
+  const closeRequest = useRef(false);
 
   useEffect(() => {
     backupRef.current = backupAgain;
@@ -24,8 +26,12 @@ const Backup = () => {
     const opts = {
       mode: "readwrite",
     };
-    if ((await fileHandle.queryPermission(opts)) === "granted") {
+    const permission = await fileHandle.queryPermission(opts);
+    if (permission === "granted") {
       return true;
+    } else if (permission === "prompt") {
+      chrome.runtime.sendMessage({ type: "focus-this-tab" });
+      return false;
     } else if ((await fileHandle.requestPermission(opts)) === "granted") {
       chrome.runtime.sendMessage({ type: "focus-this-tab" });
       return true;
@@ -69,6 +75,7 @@ const Backup = () => {
       }
       writingFile.current = true;
     } else if (repeatRef.current < 3) {
+      chrome.runtime.sendMessage({ type: "focus-this-tab" });
       repeatRef.current = repeatRef.current + 1;
       db.collection("localDirectory").delete();
       localSaving(prompt);
@@ -139,8 +146,11 @@ const Backup = () => {
   };
 
   const localSaving = async (prompt = true) => {
+    waitWrite.current = false;
+    closeRequest.current = false;
     // Check if user gesture has happened with UserActivation API
     if (!navigator.userActivation.isActive) {
+      chrome.runtime.sendMessage({ type: "focus-this-tab" });
       return;
     }
 
@@ -191,19 +201,36 @@ const Backup = () => {
   const writeFile = async (index) => {
     if (!writable.current) return;
     if (!writingFile.current) return;
+    waitWrite.current = true;
     try {
       db.collection("chunks")
         .get()
-        .then((chunks) => {
+        .then(async (chunks) => {
           if (chunks && chunks.length > 0) {
             const chunk = chunks.find((chunk) => chunk.index === index);
 
             if (chunk) {
-              writable.current.write(chunk.chunk);
+              await writable.current.write(chunk.chunk);
+              waitWrite.current = false;
+              if (closeRequest.current) {
+                closeRequest.current = false;
+                writable.current.close();
+              }
+            } else {
+              waitWrite.current = false;
+              if (closeRequest.current) {
+                closeRequest.current = false;
+                writable.current.close();
+              }
             }
           }
         });
     } catch {
+      waitWrite.current = false;
+      if (closeRequest.current) {
+        closeRequest.current = false;
+        writable.current.close();
+      }
       chrome.storage.local.set({
         recording: false,
         restarting: false,
@@ -248,6 +275,8 @@ const Backup = () => {
       request: request.current,
       tabId: tabId.current,
     });
+    setOverride(true);
+    window.close();
   };
 
   const stopBackup = () => {
@@ -278,7 +307,11 @@ const Backup = () => {
     } else if (message.type === "write-file") {
       writeFile(message.index);
     } else if (message.type === "close-writable") {
-      writable.current.close();
+      if (!waitWrite.current) {
+        writable.current.close();
+      } else {
+        closeRequest.current = true;
+      }
     } else if (
       message.type === "discard-backup" ||
       message.type === "recording-error"
@@ -291,13 +324,6 @@ const Backup = () => {
       window.close();
     }
   };
-
-  const beforeUnload = (e) => {
-    if (setupComplete) return;
-    e.preventDefault();
-    e.returnValue = "";
-  };
-
   const closeTab = () => {
     chrome.runtime.sendMessage({
       type: "stop-recording-tab-backup",
@@ -306,22 +332,6 @@ const Backup = () => {
     window.close();
   };
 
-  useEffect(() => {
-    // Prevent closing the tab if the backup is in progress
-    if (!override) {
-      window.addEventListener("beforeunload", (e) => {
-        if (override) return;
-        beforeUnload(e);
-      });
-    }
-
-    return () => {
-      window.removeEventListener("beforeunload", (e) => {
-        beforeUnload(e);
-      });
-    };
-  }, [setupComplete, override]);
-
   useEffect(() => {
     chrome.runtime.onMessage.addListener(onMessage);
 

src/pages/Content/context/ContentState.jsx

@@ -946,6 +946,11 @@ const ContentState = (props) => {
       if (!contentStateRef.showExtension && !contentStateRef.recording) {
         updateFromStorage();
       }
+    } else if (request.type === "stop-pending") {
+      setContentState((prevContentState) => ({
+        ...prevContentState,
+        pendingRecording: false,
+      }));
     }
   });
 

src/pages/Recorder/Recorder.jsx

@@ -176,8 +176,21 @@ const Recorder = () => {
     };
 
     liveStream.current.getVideoTracks()[0].onended = () => {
-      chrome.storage.local.set({ recording: false });
-      recorder.current.stop();
+      chrome.storage.local.set({
+        recording: false,
+        restarting: false,
+        tabRecordedID: null,
+      });
+      chrome.runtime.sendMessage({ type: "stop-recording-tab" });
+    };
+
+    helperVideoStream.current.getVideoTracks()[0].onended = () => {
+      chrome.storage.local.set({
+        recording: false,
+        restarting: false,
+        tabRecordedID: null,
+      });
+      chrome.runtime.sendMessage({ type: "stop-recording-tab" });
     };
   }
 

src/pages/RecorderOffscreen/RecorderOffscreen.jsx

@@ -152,8 +152,11 @@ const RecorderOffscreen = () => {
     };
 
     liveStream.current.getVideoTracks()[0].onended = () => {
-      chrome.storage.local.set({ recording: false });
-      recorder.current.stop();
+      chrome.runtime.sendMessage({ type: "stop-recording-tab" });
+    };
+
+    helperVideoStream.current.getVideoTracks()[0].onended = () => {
+      chrome.runtime.sendMessage({ type: "stop-recording-tab" });
     };
   }
 

src/pages/Region/Recorder.jsx

@@ -208,8 +208,21 @@ const Recorder = () => {
     };
 
     liveStream.current.getVideoTracks()[0].onended = () => {
-      chrome.storage.local.set({ recording: false });
-      recorder.current.stop();
+      chrome.storage.local.set({
+        recording: false,
+        restarting: false,
+        tabRecordedID: null,
+      });
+      chrome.runtime.sendMessage({ type: "stop-recording-tab" });
+    };
+
+    helperVideoStream.current.getVideoTracks()[0].onended = () => {
+      chrome.storage.local.set({
+        recording: false,
+        restarting: false,
+        tabRecordedID: null,
+      });
+      chrome.runtime.sendMessage({ type: "stop-recording-tab" });
     };
   }
 

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,10 +17,19 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "noEmit": false,
-		"checkJs": false,
-		"types": ["node"],
-    "jsx": "react"
+    "checkJs": false,
+    "types": [
+      "node"
+    ],
+    "jsx": "preserve",
+    "incremental": true,
+    "isolatedModules": true
   },
-  "include": ["src"],
-  "exclude": ["build", "node_modules"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "build",
+    "node_modules"
+  ]
 }