From 93d1859fe1cfdd5fc9b47e038ceb362075c21932 Mon Sep 17 00:00:00 2001
From: Huy Nguyen <huy.nguyenkim.h@gmail.com>
Date: Mon, 15 Jul 2024 11:09:32 +0700
Subject: [PATCH] Fix: unable to scan the long barcodes on mobile devices (#82)

* fix: unable to scan the long barcodes on mobile devices

* fix: reduce too many requests in the scanning app
---
 packages/mock-app/src/components/Scanner/Scanner.tsx | 2 ++
 packages/mock-app/src/pages/Scanning.tsx             | 6 ++++--
 packages/mock-app/src/types/scanner.types.ts         | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/mock-app/src/components/Scanner/Scanner.tsx b/packages/mock-app/src/components/Scanner/Scanner.tsx
index 0247d329..ba7d29dc 100644
--- a/packages/mock-app/src/components/Scanner/Scanner.tsx
+++ b/packages/mock-app/src/components/Scanner/Scanner.tsx
@@ -19,6 +19,8 @@ const Scanner = forwardRef((props: IHtml5QrcodePluginProps, ref: ForwardedRef<IS
     fps: props.fps || 10,
     qrbox: props.qrbox || { width: 250, height: 150 },
     disableFlip: props.disableFlip || false,
+    useBarCodeDetectorIfSupported: props.useBarCodeDetectorIfSupported || true,
+    focusMode: props.focusMode || 'continuous'
   }), [props.fps, props.qrbox, props.disableFlip]);
 
   /**
diff --git a/packages/mock-app/src/pages/Scanning.tsx b/packages/mock-app/src/pages/Scanning.tsx
index 0f34b29f..28786455 100644
--- a/packages/mock-app/src/pages/Scanning.tsx
+++ b/packages/mock-app/src/pages/Scanning.tsx
@@ -50,7 +50,7 @@ const Scanning = () => {
   };
 
   React.useEffect(() => {
-    if (!scannedCode || !identityProvider) {
+    if (!scannedCode || !identityProvider || isLoading) {
       return;
     }
 
@@ -92,8 +92,10 @@ const Scanning = () => {
       <Scanner
         ref={scannerRef}
         fps={30}
-        qrbox={{ width: 250, height: 150 }}
+        qrbox={{ width: 500, height: 300 }}
         disableFlip={false}
+        useBarCodeDetectorIfSupported={true}
+        focusMode= 'continuous'
         qrCodeSuccessCallback={onScanResult}
         qrCodeErrorCallback={onScanError}
       />
diff --git a/packages/mock-app/src/types/scanner.types.ts b/packages/mock-app/src/types/scanner.types.ts
index f06d30e4..a9031529 100644
--- a/packages/mock-app/src/types/scanner.types.ts
+++ b/packages/mock-app/src/types/scanner.types.ts
@@ -9,6 +9,8 @@ export interface IHtml5QrcodePluginProps {
   qrbox?: { width: number; height: number };
   aspectRatio?: number;
   disableFlip?: boolean;
+  useBarCodeDetectorIfSupported?: boolean;
+  focusMode?: string;
   qrCodeSuccessCallback: (decodedText: string, result: Html5QrcodeResult) => void;
   qrCodeErrorCallback?: (error: unknown) => void;
 };