Global state fixes + other improvements

alyssaxuu · Feb 14, 2024 · ae5cd3f · ae5cd3f
1 parent 4b81e1c
commit ae5cd3f
Show file tree

Hide file tree

Showing 26 changed files with 368 additions and 131 deletions.
diff --git a/build/background.bundle.js b/build/background.bundle.js
diff --git a/build/contentScript.bundle.js b/build/contentScript.bundle.js
diff --git a/build/manifest.json b/build/manifest.json
@@ -1 +1 @@
-{"description":"__MSG_extDesc__","version":"3.1.6","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.7","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"]}
diff --git a/build/sandbox.bundle.js b/build/sandbox.bundle.js
diff --git a/patches/plyr+3.7.8.patch b/patches/plyr+3.7.8.patch
diff --git a/src/manifest.json b/src/manifest.json
@@ -3,7 +3,7 @@
   "name": "__MSG_extName__",
   "description": "__MSG_extDesc__",
   "default_locale": "en",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "background": {
     "service_worker": "background.bundle.js"
   },

diff --git a/src/pages/Background/index.js b/src/pages/Background/index.js
@@ -1384,33 +1384,6 @@ const checkRestore = async (sendResponse) => {
   sendResponse({ restore: true });
 };
 
-const checkCapturePermissions = (sendResponse) => {
-  chrome.permissions.contains(
-    {
-      permissions: ["desktopCapture", "alarms", "offscreen"],
-    },
-    (result) => {
-      if (!result) {
-        chrome.permissions.request(
-          {
-            permissions: ["desktopCapture", "alarms", "offscreen"],
-          },
-          (granted) => {
-            if (!granted) {
-              sendResponse({ status: "error" });
-            } else {
-              addAlarmListener();
-              sendResponse({ status: "ok" });
-            }
-          }
-        );
-      } else {
-        sendResponse({ status: "ok" });
-      }
-    }
-  );
-};
-
 const base64ToUint8Array = (base64) => {
   const dataUrlRegex = /^data:(.*?);base64,/;
   const matches = base64.match(dataUrlRegex);
@@ -1549,6 +1522,12 @@ const handleStopRecordingTab = async (request) => {
       memoryError: true,
     });
   }
+  // sendMessageRecord({
+  //   type: "loaded",
+  //   request: request,
+  //   backup: backup,
+  //   region: true,
+  // });
   sendMessageRecord({ type: "stop-recording-tab" });
 };
 
@@ -1830,7 +1809,30 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     checkRestore(sendResponse);
     return true;
   } else if (request.type === "check-capture-permissions") {
-    checkCapturePermissions(sendResponse);
+    chrome.permissions.contains(
+      {
+        permissions: ["desktopCapture", "alarms", "offscreen"],
+      },
+      (result) => {
+        if (!result) {
+          chrome.permissions.request(
+            {
+              permissions: ["desktopCapture", "alarms", "offscreen"],
+            },
+            (granted) => {
+              if (!granted) {
+                sendResponse({ status: "error" });
+              } else {
+                addAlarmListener();
+                sendResponse({ status: "ok" });
+              }
+            }
+          );
+        } else {
+          sendResponse({ status: "ok" });
+        }
+      }
+    );
     return true;
   } else if (request.type === "is-pinned") {
     isPinned(sendResponse);

diff --git a/src/pages/Content/Wrapper.jsx b/src/pages/Content/Wrapper.jsx
@@ -84,26 +84,31 @@ const Wrapper = () => {
 
   return (
     <div ref={parentRef}>
-      <iframe
-        style={{
-          // all: "unset",
-          display: "none",
-          visibility: "hidden",
-        }}
-        ref={permissionsRef}
-        src={chrome.runtime.getURL("permissions.html")}
-        allow="camera *; microphone *"
-      ></iframe>
-      <iframe
-        style={{
-          // all: "unset",
-          display: "none",
-          visibility: "hidden",
-        }}
-        ref={regionCaptureRef}
-        src={chrome.runtime.getURL("region.html")}
-        allow="camera *; microphone *; display-capture *"
-      ></iframe>
+      {contentState.showExtension && (
+        <iframe
+          style={{
+            // all: "unset",
+            display: "none",
+            visibility: "hidden",
+          }}
+          ref={permissionsRef}
+          src={chrome.runtime.getURL("permissions.html")}
+          allow="camera *; microphone *"
+        ></iframe>
+      )}
+      {contentState.hasOpenedBefore && (
+        <iframe
+          style={{
+            // all: "unset",
+            display: "none",
+            visibility: "hidden",
+          }}
+          ref={regionCaptureRef}
+          src={chrome.runtime.getURL("region.html")}
+          allow="camera *; microphone *; display-capture *"
+        ></iframe>
+      )}
+
       {contentState.zoomEnabled && <ZoomContainer />}
       <BlurTool />
       {contentState.showExtension || contentState.recording ? (
@@ -143,11 +148,11 @@ const Wrapper = () => {
                     !contentState.pendingRecording &&
                     !contentState.customRegion
                   ) {
-                    setContentState({
-                      ...contentState,
+                    setContentState((prevContentState) => ({
+                      ...prevContentState,
                       showExtension: false,
                       showPopup: false,
-                    });
+                    }));
                   }
                 }}
               ></div>

diff --git a/src/pages/Content/camera/layout/CameraToolbar.jsx b/src/pages/Content/camera/layout/CameraToolbar.jsx
@@ -17,10 +17,10 @@ const CameraToolbar = () => {
       <Toolbar.Button
         className="CameraToolbarButton"
         onClick={() => {
-          setContentState({
-            ...contentState,
+          setContentState((prevContentState) => ({
+            ...prevContentState,
             cameraActive: false,
-          });
+          }));
           chrome.storage.local.set({ cameraActive: false });
         }}
       >

diff --git a/src/pages/Content/camera/layout/CameraWrap.jsx b/src/pages/Content/camera/layout/CameraWrap.jsx
@@ -62,14 +62,14 @@ const CameraWrap = (props) => {
     const ref =
       props.shadowRef.current.shadowRoot.querySelector(".camera-draggable");
 
-    setContentState({
-      ...contentState,
+    setContentState((prevContentState) => ({
+      ...prevContentState,
       cameraDimensions: {
         size: ref.getBoundingClientRect().width,
         x: ref.getBoundingClientRect().x,
         y: ref.getBoundingClientRect().y,
       },
-    });
+    }));
     chrome.storage.local.set({
       cameraDimensions: {
         size: ref.getBoundingClientRect().width,

diff --git a/src/pages/Content/canvas/layout/CanvasWrap.jsx b/src/pages/Content/canvas/layout/CanvasWrap.jsx
@@ -60,10 +60,10 @@ const CanvasWrap = (props) => {
 
     canvas.renderAll();
 
-    setContentState({
-      ...contentState,
+    setContentState((prevContentState) => ({
+      ...prevContentState,
       canvas: canvas,
-    });
+    }));
 
     CustomControls(canvas);
     saveCanvas(

diff --git a/src/pages/Content/context/ContentState.jsx b/src/pages/Content/context/ContentState.jsx
@@ -298,7 +298,8 @@ const ContentState = (props) => {
               chrome.i18n.getMessage("chromePermissionsModalDescription"),
               chrome.i18n.getMessage("chromePermissionsModalAction"),
               chrome.i18n.getMessage("chromePermissionsModalCancel"),
-              () => {
+              async () => {
+                await checkChromeCapturePermissionsSW();
                 startStreaming();
               },
               () => {},
@@ -685,6 +686,7 @@ const ContentState = (props) => {
     backup: false,
     backupSetup: false,
     openWarning: false,
+    hasOpenedBefore: false,
     qualityValue: "720p",
     fpsValue: "30",
   });
@@ -853,6 +855,7 @@ const ContentState = (props) => {
         setContentState((prevContentState) => ({
           ...prevContentState,
           showExtension: !prevContentState.showExtension,
+          hasOpenedBefore: true,
           showPopup: true,
         }));
         setTimer(0);
@@ -1004,6 +1007,7 @@ const ContentState = (props) => {
             showExtension: true,
             recording: true,
           }));
+          //checkRecording(sender.tab.id);
           updateFromStorage(false, sender.tab.id);
         }
       } else if (request.type === "stop-pending") {

diff --git a/src/pages/Content/popup/PopupContainer.jsx b/src/pages/Content/popup/PopupContainer.jsx
@@ -322,10 +322,10 @@ const PopupContainer = (props) => {
             <div
               className="popup-control popup-close"
               onClick={() => {
-                setContentState({
-                  ...contentState,
+                setContentState((prevContentState) => ({
+                  ...prevContentState,
                   showExtension: false,
-                });
+                }));
               }}
             >
               <CloseIconPopup />

diff --git a/src/pages/Content/popup/layout/RecordingType.jsx b/src/pages/Content/popup/layout/RecordingType.jsx
@@ -153,23 +153,25 @@ const RecordingType = (props) => {
         <button
           className="permission-button"
           onClick={() => {
-            contentState.openModal(
-              chrome.i18n.getMessage("permissionsModalTitle"),
-              chrome.i18n.getMessage("permissionsModalDescription"),
-              chrome.i18n.getMessage("permissionsModalReview"),
-              chrome.i18n.getMessage("permissionsModalDismiss"),
-              () => {
-                chrome.runtime.sendMessage({
-                  type: "extension-media-permissions",
-                });
-              },
-              () => {},
-              chrome.runtime.getURL("assets/helper/permissions.webp"),
-              chrome.i18n.getMessage("learnMoreDot"),
-              URL2,
-              true,
-              false
-            );
+            if (typeof contentState.openModal === "function") {
+              contentState.openModal(
+                chrome.i18n.getMessage("permissionsModalTitle"),
+                chrome.i18n.getMessage("permissionsModalDescription"),
+                chrome.i18n.getMessage("permissionsModalReview"),
+                chrome.i18n.getMessage("permissionsModalDismiss"),
+                () => {
+                  chrome.runtime.sendMessage({
+                    type: "extension-media-permissions",
+                  });
+                },
+                () => {},
+                chrome.runtime.getURL("assets/helper/permissions.webp"),
+                chrome.i18n.getMessage("learnMoreDot"),
+                URL2,
+                true,
+                false
+              );
+            }
           }}
         >
           <img src={CameraOffBlue} />
@@ -200,25 +202,27 @@ const RecordingType = (props) => {
       {!contentState.microphonePermission && (
         <button
           className="permission-button"
-          onClick={() =>
-            contentState.openModal(
-              chrome.i18n.getMessage("permissionsModalTitle"),
-              chrome.i18n.getMessage("permissionsModalDescription"),
-              chrome.i18n.getMessage("permissionsModalReview"),
-              chrome.i18n.getMessage("permissionsModalDismiss"),
-              () => {
-                chrome.runtime.sendMessage({
-                  type: "extension-media-permissions",
-                });
-              },
-              () => {},
-              chrome.runtime.getURL("assets/helper/permissions.webp"),
-              chrome.i18n.getMessage("learnMoreDot"),
-              URL2,
-              true,
-              false
-            )
-          }
+          onClick={() => {
+            if (typeof contentState.openModal === "function") {
+              contentState.openModal(
+                chrome.i18n.getMessage("permissionsModalTitle"),
+                chrome.i18n.getMessage("permissionsModalDescription"),
+                chrome.i18n.getMessage("permissionsModalReview"),
+                chrome.i18n.getMessage("permissionsModalDismiss"),
+                () => {
+                  chrome.runtime.sendMessage({
+                    type: "extension-media-permissions",
+                  });
+                },
+                () => {},
+                chrome.runtime.getURL("assets/helper/permissions.webp"),
+                chrome.i18n.getMessage("learnMoreDot"),
+                URL2,
+                true,
+                false
+              );
+            }
+          }}
         >
           <img src={MicOffBlue} />
           <span>{chrome.i18n.getMessage("allowMicrophoneAccessButton")}</span>

diff --git a/src/pages/Content/popup/layout/SettingsMenu.jsx b/src/pages/Content/popup/layout/SettingsMenu.jsx
@@ -91,8 +91,6 @@ const SettingsMenu = (props) => {
               platformInfo = response;
               const manifestInfo = chrome.runtime.getManifest().version;
 
-              //const contentStateData = JSON.stringify({ ...contentState });
-
               // Now we need to create a file with all of this data
               const data = {
                 userAgent: userAgent,

diff --git a/src/pages/Content/region/Region.jsx b/src/pages/Content/region/Region.jsx
@@ -17,6 +17,8 @@ const ResizableBox = () => {
 
   // Check for contentState.regionDimensions to update the Rnd component width and height
   useEffect(() => {
+    if (contentState.recordingType != "region") return;
+    if (!contentState.customRegion) return;
     if (regionRef.current === null) return;
     if (
       contentState.regionWidth === 0 ||
@@ -63,6 +65,8 @@ const ResizableBox = () => {
     });
     setCropTarget();
   }, [
+    contentState.recordingType,
+    contentState.customRegion,
     contentState.regionWidth,
     contentState.regionHeight,
     contentState.regionX,

diff --git a/src/pages/Content/region/layout/CameraToolbar.jsx b/src/pages/Content/region/layout/CameraToolbar.jsx
@@ -15,10 +15,10 @@ const CameraToolbar = () => {
       <Toolbar.Button
         className="CameraToolbarButton"
         onClick={() => {
-          setContentState({
-            ...contentState,
+          setContentState((prevContentState) => ({
+            ...prevContentState,
             cameraActive: false,
-          });
+          }));
           chrome.storage.local.set({ cameraActive: false });
         }}
       >