Resolution toggle fix

Author: alyssaxuu

build/contentScript.bundle.js

@@ -1 +1 @@
-{"description":"__MSG_extDesc__","version":"3.1.15","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.16","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"]}

build/manifest.json

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

src/manifest.json

@@ -1028,30 +1028,20 @@ const ContentState = (props) => {
 
   // Check if user has enough RAM to record for each quality option
   useEffect(() => {
-    const checkQuality = () => {
-      const width = Math.round(window.screen.width * window.devicePixelRatio);
-      const height = Math.round(window.screen.height * window.devicePixelRatio);
-      const ram = Number(navigator.deviceMemory) || 4; // fallback to 4GB if unknown
+    const width = Math.round(window.screen.width * window.devicePixelRatio);
+    const height = Math.round(window.screen.height * window.devicePixelRatio);
+    const ram = Number(navigator.deviceMemory) || 4;
 
+    if (!contentState.qualityValue) {
       let suggested = "480p";
-      if (ram >= 8 && width >= 3840 && height >= 2160) {
-        suggested = "4k";
-      } else if (ram >= 4 && width >= 1920 && height >= 1080) {
-        suggested = "1080p";
-      } else if (ram >= 2 && width >= 1280 && height >= 720) {
-        suggested = "720p";
-      }
-
-      if (contentState.qualityValue !== suggested) {
-        setContentState((prev) => ({ ...prev, qualityValue: suggested }));
-        chrome.storage.local.set({ qualityValue: suggested });
-      }
-    };
+      if (ram >= 8 && width >= 3840 && height >= 2160) suggested = "4k";
+      else if (ram >= 4 && width >= 1920 && height >= 1080) suggested = "1080p";
+      else if (ram >= 2 && width >= 1280 && height >= 720) suggested = "720p";
 
-    checkQuality();
-    window.addEventListener("resize", checkQuality);
-    return () => window.removeEventListener("resize", checkQuality);
-  }, [contentState.qualityValue, setContentState]);
+      setContentState((prev) => ({ ...prev, qualityValue: suggested }));
+      chrome.storage.local.set({ qualityValue: suggested });
+    }
+  }, []);
 
   // Check recording start time
   useEffect(() => {

src/pages/Content/context/ContentState.jsx

@@ -33,36 +33,6 @@ const SettingsMenu = (props) => {
     }
   }, []);
 
-  // Check if user has enough RAM to record for each quality option
-  useEffect(() => {
-    if (width === 0 || height === 0) return;
-
-    const checkSpecs = () => {
-      const ram = navigator.deviceMemory || 4; // assume mid-range if unknown
-      let newQuality = contentState.qualityValue;
-
-      if (ram >= 8 && width >= 3840 && height >= 2160) {
-        newQuality = "4k";
-      } else if (ram >= 4 && width >= 1920 && height >= 1080) {
-        newQuality = "1080p";
-      } else if (ram >= 2 && width >= 1280 && height >= 720) {
-        newQuality = "720p";
-      } else {
-        newQuality = "480p";
-      }
-
-      // Only update if value changes
-      if (newQuality !== contentState.qualityValue) {
-        setContentState((prev) => ({ ...prev, qualityValue: newQuality }));
-        chrome.storage.local.set({ qualityValue: newQuality });
-      }
-
-      setRAM(ram);
-    };
-
-    checkSpecs();
-  }, [contentState.qualityValue, width, height]);
-
   const handleTroubleshooting = () => {
     if (typeof contentState.openModal === "function") {
       contentState.openModal(
@@ -137,10 +107,17 @@ const SettingsMenu = (props) => {
   };
 
   useEffect(() => {
-    setWidth(Math.round(window.screen.width * window.devicePixelRatio));
-    setHeight(Math.round(window.screen.height * window.devicePixelRatio));
-  }, []);
+    // More accurate screen detection
+    const w = window.screen.availWidth * window.devicePixelRatio;
+    const h = window.screen.availHeight * window.devicePixelRatio;
+    setWidth(Math.round(w));
+    setHeight(Math.round(h));
 
+    // Fix RAM detection on macOS
+    const isMac = navigator.userAgent.includes("Macintosh");
+    const ram = isMac ? 32 : Number(navigator.deviceMemory) || 4;
+    setRAM(ram);
+  }, []);
   return (
     <DropdownMenu.Root
       open={props.open}