chore: style amends and add a validation

opencrvs · Nov 20, 2024 · 952dbee · 952dbee
1 parent bda1f8f
commit 952dbee
Showing 1 changed file with 21 additions and 9 deletions.
diff --git a/packages/client/src/components/form/QRCodeScanner/variants/Scanner2.tsx b/packages/client/src/components/form/QRCodeScanner/variants/Scanner2.tsx
@@ -30,8 +30,8 @@ const QRReader = styled.div`
   }
 `
 const Video = styled.video`
-  width: 100%;
-  height: 100%;
+  width: 518px;
+  height: 518px;
   object-fit: cover;
 `
 
@@ -47,6 +47,14 @@ const QRFrame = styled.img`
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
 `
+const withValidation = (callback: (data: any) => void) => {
+  return (data: any) => {
+    if (Boolean(data)) {
+      callback(data)
+    }
+  }
+}
+
 const Scanner2 = (props: ScannerProps) => {
   const scanner = useRef<QRScanner>()
   const videoElement = useRef<HTMLVideoElement>(null)
@@ -61,13 +69,17 @@ const Scanner2 = (props: ScannerProps) => {
   useEffect(() => {
     const currentVideoElement = videoElement?.current
     if (currentVideoElement && !scanner.current) {
-      scanner.current = new QRScanner(currentVideoElement, onScanSuccess, {
-        onDecodeError: onScanFail,
-        preferredCamera: 'environment',
-        highlightCodeOutline: true,
-        highlightScanRegion: true,
-        overlay: qrBoxElement?.current || undefined
-      })
+      scanner.current = new QRScanner(
+        currentVideoElement,
+        withValidation(onScanSuccess),
+        {
+          onDecodeError: onScanFail,
+          preferredCamera: 'environment',
+          highlightCodeOutline: true,
+          highlightScanRegion: true,
+          overlay: qrBoxElement?.current || undefined
+        }
+      )
 
       scanner?.current
         ?.start()