From 272f2a91a675d226fcd0ada950bc56d37b0bf461 Mon Sep 17 00:00:00 2001
From: Matt Raymer <matthew.raymer@anomalistdesign.com>
Date: Fri, 25 Apr 2025 06:31:18 -0400
Subject: [PATCH] refactor(QRScanner): improve camera handling and UI feedback

- Add detailed camera status and initialization feedback\n- Implement proper error handling with specific error messages\n- Add camera switching functionality with visual indicator\n- Improve TypeScript types with DetectionResult interface\n- Fix duplicate onError method with consolidated error handling\n- Add version display (v1.1.0)\n- Enhance UI with better status indicators and debug info\n- Clean up code formatting and improve maintainability
---
 src/components/QRScanner/QRScannerDialog.vue | 274 +++++++++++++++----
 1 file changed, 217 insertions(+), 57 deletions(-)

diff --git a/src/components/QRScanner/QRScannerDialog.vue b/src/components/QRScanner/QRScannerDialog.vue
index 11ed0d12..8b5814b8 100644
--- a/src/components/QRScanner/QRScannerDialog.vue
+++ b/src/components/QRScanner/QRScannerDialog.vue
@@ -8,10 +8,15 @@
       class="dialog relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-4"
     >
       <!-- Header -->
-      <div class="p-4 border-b border-gray-200">
-        <h3 class="text-lg font-medium text-gray-900">Scan QR Code</h3>
+      <div
+        class="p-4 border-b border-gray-200 flex justify-between items-center"
+      >
+        <div>
+          <h3 class="text-lg font-medium text-gray-900">Scan QR Code</h3>
+          <span class="text-xs text-gray-500">v1.1.0</span>
+        </div>
         <button
-          class="absolute top-4 right-4 text-gray-400 hover:text-gray-500"
+          class="text-gray-400 hover:text-gray-500"
           aria-label="Close dialog"
           @click="close"
         >
@@ -38,39 +43,89 @@
           class="relative aspect-square"
         >
           <!-- Status Message -->
-          <div 
+          <div
             class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-center py-2 z-10"
           >
-            <p v-if="isInitializing">Initializing camera...</p>
-            <p v-else-if="isScanning">Position QR code in the frame</p>
-            <p v-else-if="error" class="text-red-300">{{ error }}</p>
-            <p v-else>Ready to scan</p>
+            <div
+              v-if="isInitializing"
+              class="flex items-center justify-center space-x-2"
+            >
+              <svg
+                class="animate-spin h-5 w-5 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  class="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="4"
+                ></circle>
+                <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              <span>{{ initializationStatus }}</span>
+            </div>
+            <p
+              v-else-if="isScanning"
+              class="flex items-center justify-center space-x-2"
+            >
+              <span
+                class="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"
+              ></span>
+              <span>Position QR code in the frame</span>
+            </p>
+            <p v-else-if="error" class="text-red-300">
+              <span class="font-medium">Error:</span> {{ error }}
+            </p>
+            <p v-else class="flex items-center justify-center space-x-2">
+              <span
+                class="inline-block w-2 h-2 bg-blue-500 rounded-full"
+              ></span>
+              <span>Ready to scan</span>
+            </p>
           </div>
 
           <qrcode-stream
-            :camera="options?.camera === 'front' ? 'user' : 'environment'"
+            :camera="preferredCamera"
             @decode="onDecode"
             @init="onInit"
             @detect="onDetect"
             @error="onError"
+            @camera-on="onCameraOn"
+            @camera-off="onCameraOff"
           />
-          
+
           <!-- Scanning Frame -->
           <div
             class="absolute inset-0 border-2"
             :class="{
               'border-blue-500': !error && !isScanning,
               'border-green-500 animate-pulse': isScanning,
-              'border-red-500': error
+              'border-red-500': error,
             }"
-            style="opacity: 0.5; pointer-events: none;"
+            style="opacity: 0.5; pointer-events: none"
           ></div>
 
+          <!-- Debug Info -->
+          <div
+            class="absolute bottom-16 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center py-1"
+          >
+            Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} |
+            Status: {{ cameraStatus }}
+          </div>
+
           <!-- Camera Switch Button -->
           <button
-            @click="toggleCamera"
             class="absolute bottom-4 right-4 bg-white rounded-full p-2 shadow-lg"
             title="Switch camera"
+            @click="toggleCamera"
           >
             <svg
               class="h-6 w-6 text-gray-600"
@@ -157,6 +212,16 @@ interface ScanProps {
   options?: QRScannerOptions;
 }
 
+interface DetectionResult {
+  content?: string;
+  location?: {
+    topLeft: { x: number; y: number };
+    topRight: { x: number; y: number };
+    bottomLeft: { x: number; y: number };
+    bottomRight: { x: number; y: number };
+  };
+}
+
 @Component({
   components: {
     QrcodeStream,
@@ -167,6 +232,9 @@ export default class QRScannerDialog extends Vue {
   @Prop({ type: Function }) onError?: ScanProps["onError"];
   @Prop({ type: Object }) options?: ScanProps["options"];
 
+  // Version
+  readonly version = "1.1.0";
+
   visible = true;
   error: string | null = null;
   useQRReader = __USE_QR_READER__;
@@ -175,10 +243,12 @@ export default class QRScannerDialog extends Vue {
     __IS_MOBILE__ ||
     Capacitor.getPlatform() === "android" ||
     Capacitor.getPlatform() === "ios";
-  
+
   isInitializing = true;
   isScanning = false;
-  preferredCamera: 'user' | 'environment' = 'environment';
+  preferredCamera: "user" | "environment" = "environment";
+  initializationStatus = "Checking camera access...";
+  cameraStatus = "Initializing";
 
   created() {
     logger.log("QRScannerDialog platform detection:", {
@@ -189,7 +259,9 @@ export default class QRScannerDialog extends Vue {
       isNativePlatform: this.isNativePlatform,
       userAgent: navigator.userAgent,
       mediaDevices: !!navigator.mediaDevices,
-      getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
+      getUserMedia: !!(
+        navigator.mediaDevices && navigator.mediaDevices.getUserMedia
+      ),
     });
 
     // If on native platform, close immediately and don't initialize web scanner
@@ -200,7 +272,6 @@ export default class QRScannerDialog extends Vue {
   }
 
   async onInit(promise: Promise<void>): Promise<void> {
-    // Don't initialize on mobile platforms
     if (this.isNativePlatform) {
       logger.log("Skipping web scanner initialization on native platform");
       return;
@@ -208,16 +279,85 @@ export default class QRScannerDialog extends Vue {
 
     this.isInitializing = true;
     this.error = null;
-    logger.log("Initializing QR scanner...");
-    
+    this.initializationStatus = "Checking camera access...";
+
     try {
+      // First check if mediaDevices API is available
+      if (!navigator.mediaDevices) {
+        throw new Error(
+          "Camera API not available. Please ensure you're using HTTPS.",
+        );
+      }
+
+      logger.log("Starting QR scanner initialization...", {
+        mediaDevices: !!navigator.mediaDevices,
+        getUserMedia: !!(
+          navigator.mediaDevices && navigator.mediaDevices.getUserMedia
+        ),
+        constraints: {
+          video: true,
+          facingMode: this.preferredCamera,
+        },
+      });
+
+      // Explicitly request camera permission first
+      this.initializationStatus = "Requesting camera permission...";
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: this.preferredCamera,
+          },
+        });
+
+        // Stop the test stream immediately
+        stream.getTracks().forEach((track) => track.stop());
+
+        this.initializationStatus = "Camera permission granted...";
+        logger.log("Camera permission granted");
+      } catch (permissionError) {
+        const error = permissionError as Error;
+        logger.error("Camera permission error:", {
+          name: error.name,
+          message: error.message,
+        });
+
+        if (
+          error.name === "NotAllowedError" ||
+          error.name === "PermissionDeniedError"
+        ) {
+          throw new Error(
+            "Camera access denied. Please grant camera permission and try again.",
+          );
+        } else if (
+          error.name === "NotFoundError" ||
+          error.name === "DevicesNotFoundError"
+        ) {
+          throw new Error(
+            "No camera found. Please ensure your device has a camera.",
+          );
+        } else if (
+          error.name === "NotReadableError" ||
+          error.name === "TrackStartError"
+        ) {
+          throw new Error("Camera is in use by another application.");
+        } else {
+          throw new Error(`Camera error: ${error.message}`);
+        }
+      }
+
+      // Now initialize the QR scanner
+      this.initializationStatus = "Starting QR scanner...";
+      logger.log("Initializing QR scanner...");
       await promise;
+
       this.isInitializing = false;
+      this.cameraStatus = "Ready";
       logger.log("QR scanner initialized successfully");
     } catch (error) {
       const wrappedError =
         error instanceof Error ? error : new Error(String(error));
       this.error = wrappedError.message;
+      this.cameraStatus = "Error";
       if (this.onError) {
         this.onError(wrappedError);
       }
@@ -225,28 +365,70 @@ export default class QRScannerDialog extends Vue {
         error: wrappedError.message,
         stack: wrappedError.stack,
         name: wrappedError.name,
+        type: wrappedError.constructor.name,
       });
     } finally {
       this.isInitializing = false;
     }
   }
 
-  onDetect(promise: Promise<any>): void {
+  onCameraOn(): void {
+    this.cameraStatus = "Active";
+    logger.log("Camera turned on successfully");
+  }
+
+  onCameraOff(): void {
+    this.cameraStatus = "Off";
+    logger.log("Camera turned off");
+  }
+
+  onDetect(result: DetectionResult | Promise<DetectionResult>): void {
     this.isScanning = true;
+    this.cameraStatus = "Detecting";
     logger.log("QR code detected, processing...");
-    promise
-      .then((result) => {
-        logger.log("QR code processed successfully:", result);
-      })
-      .catch((error) => {
-        logger.error("Error processing QR code:", {
-          error: error instanceof Error ? error.message : String(error),
-          stack: error instanceof Error ? error.stack : undefined,
-        });
-      })
-      .finally(() => {
+
+    // Handle both promise and direct value cases
+    const processResult = (detection: DetectionResult) => {
+      try {
+        logger.log("QR code processed successfully:", detection);
+      } catch (error) {
+        this.handleError(error);
+      } finally {
         this.isScanning = false;
-      });
+        this.cameraStatus = "Active";
+      }
+    };
+
+    // Handle both promise and non-promise results
+    if (result && typeof result.then === "function") {
+      result
+        .then(processResult)
+        .catch((error: Error) => this.handleError(error))
+        .finally(() => {
+          this.isScanning = false;
+          this.cameraStatus = "Active";
+        });
+    } else {
+      processResult(result);
+    }
+  }
+
+  private handleError(error: unknown): void {
+    const wrappedError =
+      error instanceof Error ? error : new Error(String(error));
+    this.error = wrappedError.message;
+    this.cameraStatus = "Error";
+
+    if (this.onError) {
+      this.onError(wrappedError);
+    }
+
+    logger.error("QR scanner error:", {
+      error: wrappedError.message,
+      stack: wrappedError.stack,
+      name: wrappedError.name,
+      type: wrappedError.constructor.name,
+    });
   }
 
   onDecode(result: string): void {
@@ -255,35 +437,13 @@ export default class QRScannerDialog extends Vue {
       this.onScan(result);
       this.close();
     } catch (error) {
-      const wrappedError =
-        error instanceof Error ? error : new Error(String(error));
-      this.error = wrappedError.message;
-      if (this.onError) {
-        this.onError(wrappedError);
-      }
-      logger.error("Error handling QR scan result:", {
-        error: wrappedError.message,
-        stack: wrappedError.stack,
-        name: wrappedError.name,
-      });
-    }
-  }
-
-  onError(error: Error): void {
-    this.isScanning = false;
-    logger.error("QR scanner error:", {
-      error: error.message,
-      stack: error.stack,
-      name: error.name,
-    });
-    this.error = error.message;
-    if (this.onError) {
-      this.onError(error);
+      this.handleError(error);
     }
   }
 
   toggleCamera(): void {
-    this.preferredCamera = this.preferredCamera === 'user' ? 'environment' : 'user';
+    this.preferredCamera =
+      this.preferredCamera === "user" ? "environment" : "user";
   }
 
   retryScanning(): void {