fix: camera black screen UI

cardano-foundation · Feb 25, 2025 · 9a28a01 · 9a28a01
1 parent ae2bc08
commit 9a28a01
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 42 deletions.
diff --git a/src/ui/components/Scanner/Scanner.scss b/src/ui/components/Scanner/Scanner.scss
@@ -79,6 +79,12 @@ ion-grid.qr-code-scanner {
     background: rgba(var(--ion-color-neutral-700-rgb), 0.2);
   }
 
+  &.transitioning {
+    .scanner-spinner-container {
+      background: #000000;
+    }
+  }
+
   .page-footer .secondary-button {
     opacity: 0.5;
     backdrop-filter: blur(0.33rem);

diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -103,7 +103,9 @@ const Scanner = forwardRef(
     const [groupIdentifierOpen, setGroupIdentifierOpen] = useState(false);
     const [resumeMultiSig, setResumeMultiSig] =
       useState<IdentifierShortDetails | null>(null);
+    const [isTransitioning, setIsTransitioning] = useState(false);
     const isHandlingQR = useRef(false);
+    const scannerState = useRef<"stopped" | "starting" | "running">("stopped");
 
     useEffect(() => {
       if (platforms.includes("mobileweb")) {
@@ -125,11 +127,16 @@ const Scanner = forwardRef(
     };
 
     const stopScan = async () => {
-      if (permission) {
-        await BarcodeScanner.stopScan();
-        await BarcodeScanner.removeAllListeners();
+      if (!permission || !Capacitor.isNativePlatform()) {
+        setScanning(false);
+        document?.querySelector("body")?.classList.remove("scanner-active");
+        scannerState.current = "stopped";
+        return;
       }
 
+      await BarcodeScanner.stopScan();
+      await BarcodeScanner.removeAllListeners();
+      scannerState.current = "stopped";
       setScanning(false);
       document?.querySelector("body")?.classList.remove("scanner-active");
       setGroupId("");
@@ -139,6 +146,26 @@ const Scanner = forwardRef(
       stopScan,
     }));
 
+    useEffect(() => {
+      const handleCameraChange = async () => {
+        if (
+          !scanning ||
+          !Capacitor.isNativePlatform() ||
+          isTransitioning ||
+          scannerState.current === "starting"
+        )
+          return;
+
+        setIsTransitioning(true);
+        await stopScan();
+
+        await initScan();
+        setIsTransitioning(false);
+      };
+
+      handleCameraChange();
+    }, [cameraDirection]);
+
     const handleConnectWallet = (id: string) => {
       if (/^b[1-9A-HJ-NP-Za-km-z]{33}/.test(id)) {
         dispatch(setToastMsg(ToastMsgType.PEER_ID_SUCCESS));
@@ -418,47 +445,42 @@ const Scanner = forwardRef(
     };
 
     const initScan = async () => {
-      if (Capacitor.isNativePlatform()) {
-        const allowed = await checkPermission();
-        setPermisson(!!allowed);
-        onCheckPermissionFinish?.(!!allowed);
-
-        if (allowed) {
-          await BarcodeScanner.removeAllListeners();
-          const listener = await BarcodeScanner.addListener(
-            "barcodesScanned",
-            async (result) => {
-              await listener.remove();
-              if (isHandlingQR.current) return;
-              isHandlingQR.current = true;
-              if (!result.barcodes?.length) return;
-              await processValue(result.barcodes[0].rawValue);
-            }
-          );
-          const listenerError = await BarcodeScanner.addListener(
-            "scanError",
-            async (result) => {
-              await listenerError.remove();
-            }
-          );
-          try {
-            await BarcodeScanner.startScan({
-              formats: [BarcodeFormat.QrCode],
-              lensFacing: cameraDirection,
-            });
-          } catch (error) {
-            showError("Error starting barcode scan:", error);
-            setScanUnavailable(true);
-            stopScan();
+      if (!Capacitor.isNativePlatform() || mobileweb) return;
+
+      const allowed = await checkPermission();
+      setPermisson(!!allowed);
+      onCheckPermissionFinish?.(!!allowed);
+
+      if (!allowed) return;
+
+      if (scannerState.current !== "stopped") {
+        await stopScan();
+      }
+
+      try {
+        scannerState.current = "starting";
+        const listener = await BarcodeScanner.addListener(
+          "barcodesScanned",
+          async (result) => {
+            await listener.remove();
+            if (isHandlingQR.current || !result.barcodes?.length) return;
+            isHandlingQR.current = true;
+            await processValue(result.barcodes[0].rawValue);
           }
-        }
+        );
 
-        document?.querySelector("body")?.classList.add("scanner-active");
+        await BarcodeScanner.startScan({
+          formats: [BarcodeFormat.QrCode],
+          lensFacing: cameraDirection,
+        });
+
+        scannerState.current = "running";
         setScanning(true);
         document?.querySelector("body")?.classList.add("scanner-active");
-        document
-          ?.querySelector("body.scanner-active > div:last-child")
-          ?.classList.remove("hide");
+      } catch (error) {
+        setScanUnavailable(true);
+        await stopScan();
+        showError("Error starting barcode scan:", error, dispatch);
       }
     };
 
@@ -507,7 +529,6 @@ const Scanner = forwardRef(
     }, [
       currentOperation,
       routePath,
-      cameraDirection,
       isShowConnectionsModal,
       createIdentifierModalIsOpen,
       currentToastMsgs,
@@ -594,6 +615,7 @@ const Scanner = forwardRef(
     const containerClass = combineClassNames("qr-code-scanner", {
       "no-permission": !permission || mobileweb,
       "scan-unavailable": scanUnavailable,
+      transitioning: isTransitioning,
     });
 
     return (
@@ -602,7 +624,12 @@ const Scanner = forwardRef(
           className={containerClass}
           data-testid="qr-code-scanner"
         >
-          {scanning || mobileweb || scanUnavailable ? (
+          {isTransitioning ? (
+            <div
+              className="scanner-spinner-container"
+              data-testid="scanner-spinner-container"
+            />
+          ) : scanning || mobileweb || scanUnavailable ? (
             <>
               <IonRow>
                 <IonCol size="12">