FIXED CLUES! all that needs to be done is manually adding circle buttons and hiding/showing feature through API.. maybe fixing QR scanner

components/QRScanner.js

@@ -1,71 +1,138 @@
 "use client";
-import { useState, useRef, useEffect } from "react";
-import { Html5QrcodeScanner } from "html5-qrcode";
+import { useState, useEffect } from "react";
+import { Scanner } from "@yudiel/react-qr-scanner";
 
 export default function QRScanner({ onScan, width = 300, height = 300 }) {
-  const [scanning, setScanning] = useState(false);
   const [error, setError] = useState(null);
-  const scannerRef = useRef(null);
+  const [isSecureContext, setIsSecureContext] = useState(true);
+  const [initialized, setInitialized] = useState(false);
 
+  // Check if we're in a secure context
   useEffect(() => {
-    // Initialize scanner
-    if (!scanning && typeof window !== "undefined") {
+    // Check if we're in a secure context (https or localhost)
+    const secure = window.isSecureContext;
+    setIsSecureContext(secure);
+
+    // Check if camera can be accessed
+    async function checkCameraAccess() {
       try {
-        const qrScanner = new Html5QrcodeScanner(
-          "qr-reader",
-          {
-            fps: 10,
-            qrbox: { width: width * 0.7, height: height * 0.7 },
-            aspectRatio: 1,
-            disableFlip: false,
-            formatsToSupport: ["QR_CODE"],
-          },
-          false // don't start scanning immediately
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
         );
 
-        // Store the scanner instance
-        scannerRef.current = qrScanner;
-
-        // If onScan is provided, set up the success callback
-        if (onScan) {
-          qrScanner.render(
-            (decodedText) => {
-              if (onScan) {
-                onScan(decodedText);
-              }
-              setScanning(false);
-            },
-            (errorMessage) => {
-              // No need to show decode errors to user as they're expected during scanning
-              console.log(errorMessage);
-            }
+        if (videoDevices.length === 0) {
+          setError(
+            "No camera detected. Please make sure your device has a camera."
           );
-          setScanning(true);
         }
+
+        setInitialized(true);
       } catch (err) {
-        console.error("QR Scanner initialization error:", err);
-        setError(
-          "Could not initialize QR scanner. Please make sure you have camera access."
-        );
+        console.error("Error checking camera devices:", err);
+        setError(`Camera initialization error: ${err.message}`);
+        setInitialized(true);
       }
     }
 
-    // Cleanup function
-    return () => {
-      if (scannerRef.current) {
-        try {
-          scannerRef.current.clear();
-        } catch (err) {
-          console.error("Failed to clear QR scanner:", err);
-        }
-      }
-    };
-  }, [onScan, width, height, scanning]);
+    checkCameraAccess();
+  }, []);
+
+  const handleDecode = (result) => {
+    if (onScan && result) {
+      onScan(result);
+    }
+  };
+
+  const handleError = (error) => {
+    console.error("QR Scanner error:", error);
+
+    // More descriptive error messages
+    let errorMessage = "Camera access error. ";
+
+    if (!isSecureContext) {
+      errorMessage +=
+        "Your browser requires HTTPS for camera access. When running locally, use http://localhost instead of your IP address.";
+    } else if (
+      error.name === "NotAllowedError" ||
+      error.name === "PermissionDeniedError"
+    ) {
+      errorMessage +=
+        "Camera permission denied. Please allow camera access in your browser settings.";
+    } else if (
+      error.name === "NotFoundError" ||
+      error.name === "DevicesNotFoundError"
+    ) {
+      errorMessage +=
+        "No camera found. Please ensure your device has a working camera.";
+    } else if (
+      error.name === "NotReadableError" ||
+      error.name === "TrackStartError"
+    ) {
+      errorMessage +=
+        "Camera is already in use by another application or encountered a hardware error.";
+    } else {
+      errorMessage += `${
+        error.message ||
+        "Please check your camera permissions and refresh the page."
+      }`;
+    }
+
+    setError(errorMessage);
+  };
+
+  if (!isSecureContext) {
+    return (
+      <div className="qr-scanner">
+        <div className="qr-error">
+          <p>Camera access requires a secure context (HTTPS or localhost).</p>
+          <p>
+            When running locally, use http://localhost:3000 instead of your
+            network IP.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!initialized) {
+    return (
+      <div className="qr-scanner">
+        <div className="scanner-loading">Initializing camera...</div>
+      </div>
+    );
+  }
 
   return (
     <div className="qr-scanner">
-      {error && <div className="qr-error">{error}</div>}
-      <div id="qr-reader" style={{ width, height }}></div>
+      {error && (
+        <div className="qr-error">
+          <p>{error}</p>
+        </div>
+      )}
+
+      <div className="scanner-container" style={{ width, height }}>
+        <Scanner
+          onResult={handleDecode}
+          onError={handleError}
+          constraints={{
+            facingMode: "environment",
+            width: { min: 640, ideal: 1280, max: 1920 },
+            height: { min: 480, ideal: 720, max: 1080 },
+          }}
+          containerStyle={{
+            width: "100%",
+            height: "100%",
+            borderRadius: "8px",
+            overflow: "hidden",
+          }}
+          videoStyle={{
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </div>
 
       <style jsx>{`
         .qr-scanner {
@@ -85,16 +152,24 @@ export default function QRScanner({ onScan, width = 300, height = 300 }) {
           width: 100%;
         }
 
-        #qr-reader {
-          border: 2px solid #ddd;
+        .scanner-loading {
+          text-align: center;
+          padding: 12px;
+          background-color: #e8f5e9;
           border-radius: 8px;
-          overflow: hidden;
-          background-color: #f5f5f5;
+          width: 100%;
+          margin-bottom: 15px;
         }
 
-        #qr-reader video {
-          object-fit: cover;
-          border-radius: 6px;
+        .scanner-container {
+          position: relative;
+          width: 100%;
+          max-width: ${width}px;
+          height: ${height}px;
+          border-radius: 8px;
+          overflow: hidden;
+          border: 2px solid #ddd;
+          background-color: #f5f5f5;
         }
       `}</style>
     </div>