Fix scanner stale error state

Author: akira69

client/src/components/qrCodeScanner.tsx

@@ -8,9 +8,26 @@ import { useNavigate } from "react-router";
 const QRCodeScannerModal = () => {
   const [visible, setVisible] = useState(false);
   const [lastError, setLastError] = useState<string | null>(null);
+  const [scannerSession, setScannerSession] = useState(0);
   const t = useTranslate();
   const navigate = useNavigate();
 
+  // Force a fresh scanner instance after each open/close cycle so stale camera errors do not persist.
+  const resetScanner = () => {
+    setLastError(null);
+    setScannerSession((current) => current + 1);
+  };
+
+  const openScanner = () => {
+    resetScanner();
+    setVisible(true);
+  };
+
+  const closeScanner = () => {
+    setVisible(false);
+    resetScanner();
+  };
+
   const onScan = (detectedCodes: IDetectedBarcode[]) => {
     if (detectedCodes.length === 0) {
       return;
@@ -20,25 +37,25 @@ const QRCodeScannerModal = () => {
     // Check for the spoolman ID format
     const spoolMatch = result.match(/^web\+spoolman:s-(?<id>[0-9]+)$/i);
     if (spoolMatch && spoolMatch.groups) {
-      setVisible(false);
+      closeScanner();
       navigate(`/spool/show/${spoolMatch.groups.id}`);
       return;
     }
     const filamentMatch = result.match(/^web\+spoolman:f-(?<id>[0-9]+)$/i);
     if (filamentMatch && filamentMatch.groups) {
-      setVisible(false);
+      closeScanner();
       navigate(`/filament/show/${filamentMatch.groups.id}`);
       return;
     }
     const spoolURLmatch = result.match(/^https?:\/\/[^/]+(?:\/[^/]+)*\/spool\/show\/(?<id>[0-9]+)$/i);
     if (spoolURLmatch && spoolURLmatch.groups) {
-      setVisible(false);
+      closeScanner();
       navigate(`/spool/show/${spoolURLmatch.groups.id}`);
       return;
     }
     const filamentURLmatch = result.match(/^https?:\/\/[^/]+(?:\/[^/]+)*\/filament\/show\/(?<id>[0-9]+)$/i);
     if (filamentURLmatch && filamentURLmatch.groups) {
-      setVisible(false);
+      closeScanner();
       navigate(`/filament/show/${filamentURLmatch.groups.id}`);
     }
   };
@@ -47,15 +64,16 @@ const QRCodeScannerModal = () => {
     <>
       <FloatButton
         type="primary"
-        onClick={() => setVisible(true)}
+        onClick={openScanner}
         icon={<CameraOutlined />}
         shape="circle"
         style={{ right: "var(--camera-button-right)", bottom: "var(--camera-button-bottom)" }}
       />
-      <Modal open={visible} destroyOnHidden onCancel={() => setVisible(false)} footer={null} title={t("scanner.title")}>
+      <Modal open={visible} destroyOnHidden onCancel={closeScanner} footer={null} title={t("scanner.title")}>
         <Space direction="vertical" style={{ width: "100%" }}>
           <p>{t("scanner.description")}</p>
           <Scanner
+            key={scannerSession}
             constraints={{
               facingMode: "environment",
             }}