Merge pull request #216 from isd-sgcu/tee/add-zoom-to-qr

change: react qr reader lib tp html5 qr reader lib

package.json

@@ -45,6 +45,7 @@
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "html5-qrcode": "^2.3.8",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3"

src/components/rpkm/staff/home/qrscanner/QRScanner.tsx

@@ -1,7 +1,7 @@
 'use client';
-import React from 'react';
-import { QrReader } from 'react-qr-reader';
+import React, { useEffect } from 'react';
 import { motion } from 'framer-motion';
+import { Html5Qrcode } from 'html5-qrcode';
 
 interface ScanProps {
   sendCheckInRequest: (
@@ -10,30 +10,44 @@ interface ScanProps {
   ) => Promise<void>;
 }
 
+const id = 'reader';
+
 const Scan = ({ sendCheckInRequest }: ScanProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleScanResult = (scanRawData: any) => {
-    if (!scanRawData || !scanRawData.text) {
-      return;
-    }
-    sendCheckInRequest('userId', scanRawData.text);
-  };
+  useEffect(() => {
+    const reader = new Html5Qrcode(id);
+    reader
+      .start(
+        { facingMode: 'environment' },
+        {
+          fps: 10,
+          qrbox: { width: 500, height: 500 },
+          aspectRatio: 1,
+        },
+        (decodedText) => {
+          if (localStorage.getItem('enable') === 'false') return;
+          sendCheckInRequest('userId', decodedText);
+        },
+        (errorMessage) => {
+          console.log(errorMessage);
+        }
+      )
+      .then(() => {
+        reader.applyVideoConstraints({
+          //eslint-disable-next-line @typescript-eslint/no-explicit-any
+          advanced: [{ zoom: 2.5, focusMode: 'continuous' } as any],
+        });
+      });
+
+    return () => reader.clear();
+  }, []);
 
   return (
     <div className="flex flex-col items-center justify-center w-full">
       <div className="relative w-full h-full">
-        <div className="overflow-hidden aspect-square">
-          <QrReader
-            scanDelay={0}
-            className="bg-black w-[100vw] aspect-square -mt-[13vw] -ml-[14vw]"
-            onResult={handleScanResult}
-            constraints={{
-              facingMode: 'environment',
-              //eslint-disable-next-line @typescript-eslint/no-explicit-any
-              advanced: [{ zoom: 2.5, facingMode: 'continuous' } as any],
-            }}
-          />
-        </div>
+        <div
+          id={id}
+          className="w-full aspect-auto"
+        ></div>
 
         <motion.div
           className="absolute left-1/2 top-1/2 h-[50vw] w-[50vw] max-w-md -translate-x-1/2 -translate-y-1/2 transform rounded-3xl border-4 border-white"