fix(scanner): scanner component added Camera click

opensrc0 · Mar 5, 2024 · ffd46e2 · ffd46e2
1 parent 38bab9a
commit ffd46e2
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 4 deletions.
diff --git a/__app/component/Scanner/CameraClick.js b/__app/component/Scanner/CameraClick.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import { handleSuccess, handleError } from '../services/handler';
+
+function CameraClick({
+  disbaleToast,
+  successCb,
+  successMsg,
+  failureCb,
+  failureMsg,
+  children,
+  zIndex,
+  top,
+  bottom,
+  left,
+  right,
+  color,
+  position,
+}) {
+  const onClickImage = async (event) => {
+    const file = event.target.files[0];
+    if ('BarcodeDetector' in globalThis) {
+      const WindowBarcodeDetector = window.BarcodeDetector;
+      const barcodeDetector = new WindowBarcodeDetector();
+
+      createImageBitmap(file)
+        .then((image) => barcodeDetector.detect(image))
+        .then((results) => {
+          const barcode = results[0];
+          if (barcode) {
+            handleSuccess({
+              disbaleToast,
+              msgType: 'SUCCESS',
+              msg: successMsg,
+              successCb,
+              data: { barCodeValue: barcode.rawValue, barCodeType: barcode.format },
+            });
+          } else {
+            handleError({ disbaleToast, msgType: 'INVALID_IMAGE', msg: failureMsg.invalidImage, failureCb });
+          }
+        })
+        .catch((error) => {
+          handleError({ disbaleToast, msgType: 'UNABLE_TO_SCAN', msg: failureMsg.unableToScan || error, failureCb });
+        });
+    }
+  };
+
+  return (
+    <label
+      htmlFor="click-photo"
+      style={{
+        top,
+        bottom,
+        left,
+        right,
+        zIndex,
+        color,
+        position,
+      }}
+    >
+      {children || 'Camera'}
+      <input
+        id="click-photo"
+        type="file"
+        accept="*"
+        capture="filesystem"
+        onChange={onClickImage}
+        onSelect={onClickImage}
+        style={{ display: 'none' }}
+      />
+    </label>
+  );
+}
+
+CameraClick.propTypes = {
+
+};
+
+CameraClick.defaultProps = {
+  disbaleToast: false,
+  successCb: () => {},
+  failureCb: () => {},
+  successMsg: '',
+  failureMsg: {
+    unSupported: '',
+    streaming: '',
+    barCodeDetection: '',
+    invalidImage: '',
+    flash: '',
+    unableToScan: '',
+  },
+  zIndex: 9,
+  color: 'white',
+  top: 'auto',
+  bottom: '18%',
+  left: 'auto',
+  right: '25%',
+  position: 'absolute',
+};
+
+export default CameraClick;
diff --git a/__app/component/Scanner/PhoneGallery.js b/__app/component/Scanner/PhoneGallery.js
@@ -47,7 +47,7 @@ function PhoneGallery({
 
   return (
     <label
-      htmlFor="upload-photo"
+      htmlFor="upload-gallery-photo"
       style={{
         top,
         bottom,
@@ -60,9 +60,9 @@ function PhoneGallery({
     >
       {children || 'Gallery'}
       <input
-        id="upload-photo"
+        id="upload-gallery-photo"
         type="file"
-        accept="image/png,image/jpeg"
+        accept="image/*"
         onChange={onSelectGalleryImage}
         onSelect={onSelectGalleryImage}
         style={{ display: 'none' }}

diff --git a/__app/component/Scanner/Scanner.js b/__app/component/Scanner/Scanner.js
@@ -4,6 +4,7 @@ import CameraClose from './CameraClose';
 import CameraScanBox from './CameraScanBox';
 import CameraFacing from './CameraFacing';
 import PhoneGallery from './PhoneGallery';
+import CameraClick from './CameraClick';
 
 export default {
   StartCamera,
@@ -12,4 +13,5 @@ export default {
   CameraScanBox,
   CameraFacing,
   PhoneGallery,
+  CameraClick,
 };
diff --git a/__app/component/Scanner/StartCamera.js b/__app/component/Scanner/StartCamera.js
@@ -123,7 +123,6 @@ function StartCamera({
   };
 
   const allClear = () => {
-    console.log('unmount');
     cancelAnimationFrame(videoUnmount);
     stopStreaming();
     clearTimeout(unmoutRenderLoop);