From 5b4370a73f0d781d79cb8ef201bc406269dec543 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Mon, 16 Dec 2024 19:54:50 +0530
Subject: [PATCH 1/4] Add Barcode Input Component and Integrate Quagga for
 Scanning

- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.

These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.
---
 client/components/forms/BarcodeInput.vue      | 223 ++++++++
 .../components/open/forms/OpenFormField.vue   |   3 +-
 client/data/blocks_types.json                 |   9 +
 client/i18n/lang/en.json                      |   4 +
 client/lib/forms/themes/form-themes.js        |  21 +
 client/package-lock.json                      | 495 +++++++++++++++++-
 client/package.json                           |   1 +
 7 files changed, 750 insertions(+), 6 deletions(-)
 create mode 100644 client/components/forms/BarcodeInput.vue

diff --git a/client/components/forms/BarcodeInput.vue b/client/components/forms/BarcodeInput.vue
new file mode 100644
index 00000000..1cf130ed
--- /dev/null
+++ b/client/components/forms/BarcodeInput.vue
@@ -0,0 +1,223 @@
+<template>
+  <input-wrapper v-bind="inputWrapperProps">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <div
+      :class="[
+        theme.BarcodeInput.input,
+        theme.BarcodeInput.spacing.horizontal,
+        theme.BarcodeInput.spacing.vertical,
+        theme.BarcodeInput.fontSize,
+        theme.BarcodeInput.borderRadius,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
+        },
+      ]"
+      class="flex flex-col gap-4"
+    >
+      <!-- Barcode Preview -->
+      <div
+        v-if="scannedValue"
+        class="flex items-center gap-2"
+      >
+        <div class="flex-1 break-all">
+          {{ scannedValue }}
+        </div>
+        <button
+          v-if="!disabled"
+          type="button"
+          class="text-gray-400 hover:text-gray-600"
+          @click="clearValue"
+        >
+          <Icon
+            name="i-heroicons-x-mark-20-solid"
+            class="h-5 w-5"
+          />
+        </button>
+      </div>
+
+      <!-- Scanner Interface -->
+      <div
+        v-show="!scannedValue && isScanning"
+        class="relative aspect-video w-full overflow-hidden rounded-lg bg-gray-100"
+      >
+        <video
+          ref="video"
+          class="h-full w-full object-cover"
+        />
+        <div class="absolute inset-0 border-2 border-dashed border-blue-500/50" />
+      </div>
+
+      <!-- Controls -->
+      <div
+        v-if="!disabled"
+        class="flex justify-center"
+      >
+        <button
+          v-if="!isScanning && !scannedValue"
+          type="button"
+          class="inline-flex items-center gap-2 rounded-md bg-blue-50 px-3 py-2 text-sm font-semibold text-blue-600 hover:bg-blue-100"
+          @click="startScanning"
+        >
+          <Icon
+            name="i-heroicons-qr-code-20-solid"
+            class="h-5 w-5"
+          />
+          {{ $t('forms.barcodeInput.startScanning') }}
+        </button>
+        <button
+          v-if="isScanning"
+          type="button"
+          class="inline-flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100"
+          @click="stopScanning"
+        >
+          <Icon
+            name="i-heroicons-stop-20-solid"
+            class="h-5 w-5"
+          />
+          {{ $t('forms.barcodeInput.stopScanning') }}
+        </button>
+      </div>
+    </div>
+
+    <template #error>
+      <slot name="error" />
+    </template>
+  </input-wrapper>
+</template>
+
+<script>
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
+import Quagga from 'quagga'
+
+export default {
+  name: 'BarcodeInput',
+  components: { InputWrapper },
+
+  props: {
+    ...inputProps,
+  },
+
+  setup(props, context) {
+    return {
+      ...useFormInput(props, context),
+    }
+  },
+
+  data: () => ({
+    isScanning: false,
+    scannedValue: null,
+    stream: null
+  }),
+
+  watch: {
+    scannedValue: {
+      handler(value) {
+        this.compVal = value
+      },
+      immediate: true
+    }
+  },
+
+  beforeUnmount() {
+    this.stopScanning()
+  },
+
+  methods: {
+    async startScanning() {
+      if (!this.$refs.video) return
+
+      try {
+        // First get user media directly
+        this.stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: "environment"
+          }
+        })
+        
+        // Attach stream to video element
+        this.$refs.video.srcObject = this.stream
+        this.$refs.video.play()
+
+        this.isScanning = true
+        
+        // Initialize Quagga
+        Quagga.init({
+          inputStream: {
+            name: "Live",
+            type: "LiveStream",
+            target: this.$refs.video,
+            constraints: {
+              facingMode: "environment"
+            },
+          },
+          decoder: {
+            readers: [
+              "ean_reader",
+              "ean_8_reader",
+              "code_128_reader",
+              "code_39_reader",
+              "upc_reader",
+              "upc_e_reader"
+            ]
+          },
+          locate: true // Try to detect the barcode location
+        }, (err) => {
+          if (err) {
+            console.error('Quagga initialization failed:', err)
+            this.stopScanning()
+            return
+          }
+          
+          Quagga.start()
+          
+          Quagga.onDetected((result) => {
+            if (result.codeResult) {
+              this.scannedValue = result.codeResult.code
+              this.stopScanning()
+            }
+          })
+        })
+      } catch (err) {
+        console.error('Failed to start camera:', err)
+        this.isScanning = false
+      }
+    },
+
+    stopScanning() {
+      if (this.isScanning) {
+        Quagga.stop()
+        
+        // Stop all tracks from the stream
+        if (this.stream) {
+          this.stream.getTracks().forEach(track => track.stop())
+          this.stream = null
+        }
+
+        // Clear video source
+        if (this.$refs.video) {
+          this.$refs.video.srcObject = null
+        }
+
+        this.isScanning = false
+      }
+    },
+
+    clearValue() {
+      this.scannedValue = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+video {
+  /* Ensure the video displays properly */
+  max-width: 100%;
+  height: auto;
+}
+</style> 
\ No newline at end of file
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index a025cf1d..ed8a3b98 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -223,7 +223,8 @@ export default {
         url: 'TextInput',
         email: 'TextInput',
         phone_number: 'TextInput',
-        matrix: 'MatrixInput'
+        matrix: 'MatrixInput',
+        barcode: 'BarcodeInput'
       }[field.type]
     },
     isPublicFormPage() {
diff --git a/client/data/blocks_types.json b/client/data/blocks_types.json
index 2e95d136..c7542b8f 100644
--- a/client/data/blocks_types.json
+++ b/client/data/blocks_types.json
@@ -143,6 +143,15 @@
     "text_class": "text-pink-900",
     "is_input": true
   },
+  "barcode": {
+    "name": "barcode",
+    "title": "Barcode Reader",
+    "icon": "i-material-symbols-barcode-scanner-rounded", 
+    "default_block_name": "Scan Barcode",
+    "bg_class": "bg-pink-100",
+    "text_class": "text-purple-900",
+    "is_input": true
+  },
   "nf-text": {
     "name": "nf-text",
     "title": "Text",
diff --git a/client/i18n/lang/en.json b/client/i18n/lang/en.json
index cf8e4cf5..376c8b4e 100644
--- a/client/i18n/lang/en.json
+++ b/client/i18n/lang/en.json
@@ -36,6 +36,10 @@
         "signatureInput": {
             "uploadFileInstead": "Upload file instead",
             "clear": "Clear"
+        },
+        "barcodeInput": {
+            "startScanning": "Start Scanning",
+            "stopScanning": "Stop Scanning"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index c505a8d8..595ebc75 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -151,6 +151,13 @@ export const themes = {
         md: 'min-h-40',
         lg: 'min-h-48'
       },
+    },
+    BarcodeInput: {
+      minHeight: {
+        sm: 'min-h-28',
+        md: 'min-h-40',
+        lg: 'min-h-48'
+      },
     }
   },
   simple: {
@@ -296,6 +303,13 @@ export const themes = {
         md: 'min-h-40',
         lg: 'min-h-48'
       },
+    },
+    BarcodeInput: {
+      minHeight: {
+        sm: 'min-h-28',
+        md: 'min-h-40',
+        lg: 'min-h-48'
+      },
     }
   },
   notion: {
@@ -441,6 +455,13 @@ export const themes = {
         md: 'min-h-40',
         lg: 'min-h-48'
       },
+    },
+    BarcodeInput: {
+      minHeight: {
+        sm: 'min-h-28',
+        md: 'min-h-40',
+        lg: 'min-h-48'
+      },
     }
   }
 }
diff --git a/client/package-lock.json b/client/package-lock.json
index 4e1d30bc..d1d57717 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -35,6 +35,7 @@
         "pinia": "^2.2.4",
         "prismjs": "^1.29.0",
         "qrcode": "^1.5.4",
+        "quagga": "^0.12.1",
         "query-builder-vue-3": "^1.0.1",
         "quill": "^2.0.2",
         "tailwind-merge": "^2.5.4",
@@ -5845,7 +5846,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -6099,6 +6099,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ast-kit": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-1.3.1.tgz",
@@ -6137,6 +6153,11 @@
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -6183,6 +6204,19 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw=="
+    },
     "node_modules/b4a": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -6222,6 +6256,14 @@
       ],
       "license": "MIT"
     },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -6481,6 +6523,11 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+    },
     "node_modules/chalk": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
@@ -6739,6 +6786,17 @@
       "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -7161,6 +7219,30 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/cwise-compiler": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cwise-compiler/-/cwise-compiler-1.1.3.tgz",
+      "integrity": "sha512-WXlK/m+Di8DMMcCjcWr4i+XzcQra9eCdXIJrgh4TUgh0pIS/yJduLxS9JgefsHJ/YVLdgPtXm9r62W92MvanEQ==",
+      "dependencies": {
+        "uniq": "^1.0.0"
+      }
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-0.0.3.tgz",
+      "integrity": "sha512-Cp+jOa8QJef5nXS5hU7M1DWzXPEIoVR3kbV0dQuVGwROZg8bGf1DcCnkmajBTnvghTtSNMUdRrPjgaT6ZQucbw=="
+    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -7322,6 +7404,14 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -7534,6 +7624,15 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8137,6 +8236,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/externality": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/externality/-/externality-1.0.2.tgz",
@@ -8149,6 +8253,14 @@
         "ufo": "^1.1.2"
       }
     },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "engines": [
+        "node >=0.6.0"
+      ]
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -8199,7 +8311,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
@@ -8335,6 +8446,27 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -8493,6 +8625,32 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-pixels": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/get-pixels/-/get-pixels-3.3.3.tgz",
+      "integrity": "sha512-5kyGBn90i9tSMUVHTqkgCHsoWoR+/lGbl4yC83Gefyr0HLIhgSWEx/2F/3YgsZ7UpYNuM6pDhDK7zebrUJ5nXg==",
+      "dependencies": {
+        "data-uri-to-buffer": "0.0.3",
+        "jpeg-js": "^0.4.1",
+        "mime-types": "^2.0.1",
+        "ndarray": "^1.0.13",
+        "ndarray-pack": "^1.1.1",
+        "node-bitmap": "0.0.1",
+        "omggif": "^1.0.5",
+        "parse-data-uri": "^0.2.0",
+        "pngjs": "^3.3.3",
+        "request": "^2.44.0",
+        "through": "^2.3.4"
+      }
+    },
+    "node_modules/get-pixels/node_modules/pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/get-port-please": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.1.2.tgz",
@@ -8511,6 +8669,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
     "node_modules/giget": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/giget/-/giget-1.2.3.tgz",
@@ -8558,6 +8724,21 @@
         "git-up": "^7.0.0"
       }
     },
+    "node_modules/gl-mat2": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gl-mat2/-/gl-mat2-1.0.1.tgz",
+      "integrity": "sha512-oHgZ3DalAo9qAhMZM9QigXosqotcUCsgxarwrinipaqfSHvacI79Dzs72gY+oT4Td1kDQKEsG0RyX6mb02VVHA=="
+    },
+    "node_modules/gl-vec2": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/gl-vec2/-/gl-vec2-1.3.0.tgz",
+      "integrity": "sha512-YiqaAuNsheWmUV0Sa8k94kBB0D6RWjwZztyO+trEYS8KzJ6OQB/4686gdrf59wld4hHFIvaxynO3nRxpk1Ij/A=="
+    },
+    "node_modules/gl-vec3": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gl-vec3/-/gl-vec3-1.1.3.tgz",
+      "integrity": "sha512-jduKUqT0SGH02l8Yl+mV1yVsDfYgQAJyXGxkJQGyxPLHRiW25DwVIRPt6uvhrEMHftJfqhqKthRcyZqNEl9Xdw=="
+    },
     "node_modules/glob": {
       "version": "9.3.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz",
@@ -8715,6 +8896,27 @@
         "h3": "^1.6.0"
       }
     },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
+      "dependencies": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -8872,6 +9074,20 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.8",
+        "npm": ">=1.3.7"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -9069,6 +9285,11 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
+    "node_modules/iota-array": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
+      "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA=="
+    },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
@@ -9090,6 +9311,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "node_modules/is-core-module": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
@@ -9284,6 +9510,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
     "node_modules/is-what": {
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
@@ -9347,6 +9578,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -9371,6 +9607,11 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jpeg-js": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
+      "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="
+    },
     "node_modules/js-base64": {
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
@@ -9410,6 +9651,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
+    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -9429,11 +9675,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
@@ -9443,6 +9693,11 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -9485,6 +9740,20 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsprim": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.11",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
@@ -10317,6 +10586,29 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/ndarray": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz",
+      "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==",
+      "dependencies": {
+        "iota-array": "^1.0.0",
+        "is-buffer": "^1.0.2"
+      }
+    },
+    "node_modules/ndarray-linear-interpolate": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ndarray-linear-interpolate/-/ndarray-linear-interpolate-1.0.0.tgz",
+      "integrity": "sha512-UN0f4+6XWsQzJ2pP5gVp+kKn5tJed6mA3K/L50uO619+7LKrjcSNdcerhpqxYaSkbxNJuEN76N05yBBJySnZDw=="
+    },
+    "node_modules/ndarray-pack": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ndarray-pack/-/ndarray-pack-1.2.1.tgz",
+      "integrity": "sha512-51cECUJMT0rUZNQa09EoKsnFeDL4x2dHRT0VR5U2H5ZgEcm95ZDWcMA5JShroXjHOejmAD/fg8+H+OvUnVXz2g==",
+      "dependencies": {
+        "cwise-compiler": "^1.1.2",
+        "ndarray": "^1.0.13"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -10915,6 +11207,14 @@
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "license": "MIT"
     },
+    "node_modules/node-bitmap": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/node-bitmap/-/node-bitmap-0.0.1.tgz",
+      "integrity": "sha512-Jx5lPaaLdIaOsj2mVLWMWulXF6GQVdyLvNSxmiYCvZ8Ma2hfKX0POoR2kgKOqz+oFsRreq0yYZjQ2wjE9VNzCA==",
+      "engines": {
+        "node": ">=v0.6.5"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -11761,6 +12061,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -11802,6 +12110,11 @@
       "integrity": "sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==",
       "license": "MIT"
     },
+    "node_modules/omggif": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.10.tgz",
+      "integrity": "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw=="
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -11995,6 +12308,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-data-uri": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/parse-data-uri/-/parse-data-uri-0.2.0.tgz",
+      "integrity": "sha512-uOtts8NqDcaCt1rIsO3VFDRsAfgE4c6osG4d9z3l4dCBlxYFzni6Di/oNU270SDrjkfZuUvLZx1rxMyqh46Y9w==",
+      "dependencies": {
+        "data-uri-to-buffer": "0.0.3"
+      }
+    },
     "node_modules/parse-git-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/parse-git-config/-/parse-git-config-3.0.0.tgz",
@@ -12152,6 +12473,11 @@
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -13144,11 +13470,21 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -13171,6 +13507,31 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/qs": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/quagga": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/quagga/-/quagga-0.12.1.tgz",
+      "integrity": "sha512-bb2N6eT7ss6Bg27sxQgv/CT96KQBkXa+4YeS1W8bhsaXxoWp8zOQbrOwFWEPxPDTNaWEl7hTs3ZB7OC4k3EY3Q==",
+      "dependencies": {
+        "get-pixels": "^3.2.3",
+        "gl-mat2": "^1.0.0",
+        "gl-vec2": "^1.0.0",
+        "gl-vec3": "^1.0.3",
+        "lodash": "^4.17.4",
+        "ndarray": "^1.0.18",
+        "ndarray-linear-interpolate": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
     "node_modules/query-builder-vue-3": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/query-builder-vue-3/-/query-builder-vue-3-1.0.1.tgz",
@@ -13523,6 +13884,37 @@
         "node": ">=12"
       }
     },
+    "node_modules/request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -13883,6 +14275,11 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "node_modules/sass": {
       "version": "1.81.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
@@ -14214,6 +14611,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/standard-as-callback": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -14926,6 +15347,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -15025,6 +15451,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dependencies": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -15065,6 +15503,22 @@
         "node": ">=0.6.x"
       }
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -15296,6 +15750,11 @@
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA=="
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -15704,7 +16163,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -15728,6 +16186,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
     "node_modules/v-calendar": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.0.1.tgz",
@@ -15755,6 +16222,24 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/verror/node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+    },
     "node_modules/vite": {
       "version": "5.4.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
diff --git a/client/package.json b/client/package.json
index 9f9d6243..dfbfaa2c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -63,6 +63,7 @@
     "pinia": "^2.2.4",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.4",
+    "quagga": "^0.12.1",
     "query-builder-vue-3": "^1.0.1",
     "quill": "^2.0.2",
     "tailwind-merge": "^2.5.4",

From 551cf80c2db747c7b51608e92812f476288345a5 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Tue, 17 Dec 2024 11:47:35 +0530
Subject: [PATCH 2/4] Update Barcode scanner UI

---
 client/components/forms/BarcodeInput.vue      | 239 +++++++-----------
 .../forms/components/CameraUpload.vue         |  58 ++++-
 client/data/blocks_types.json                 |   2 +-
 client/i18n/lang/ar.json                      |   3 +
 client/i18n/lang/bn.json                      |   3 +
 client/i18n/lang/de.json                      |   3 +
 client/i18n/lang/en.json                      |   3 +-
 client/i18n/lang/es.json                      |   3 +
 client/i18n/lang/fr.json                      |   3 +
 client/i18n/lang/hi.json                      |   3 +
 client/i18n/lang/ja.json                      |   3 +
 client/i18n/lang/jv.json                      |   3 +
 client/i18n/lang/ko.json                      |   3 +
 client/i18n/lang/mr.json                      |   3 +
 client/i18n/lang/pa.json                      |   3 +
 client/i18n/lang/pt.json                      |   3 +
 client/i18n/lang/ru.json                      |   3 +
 client/i18n/lang/ta.json                      |   3 +
 client/i18n/lang/te.json                      |   3 +
 client/i18n/lang/tr.json                      |   3 +
 client/i18n/lang/ur.json                      |   3 +
 client/i18n/lang/vi.json                      |   3 +
 client/i18n/lang/zh.json                      |   3 +
 client/lib/forms/themes/form-themes.js        |  21 --
 24 files changed, 206 insertions(+), 174 deletions(-)

diff --git a/client/components/forms/BarcodeInput.vue b/client/components/forms/BarcodeInput.vue
index 1cf130ed..97232434 100644
--- a/client/components/forms/BarcodeInput.vue
+++ b/client/components/forms/BarcodeInput.vue
@@ -5,84 +5,93 @@
     </template>
 
     <div
-      :class="[
-        theme.BarcodeInput.input,
-        theme.BarcodeInput.spacing.horizontal,
-        theme.BarcodeInput.spacing.vertical,
-        theme.BarcodeInput.fontSize,
-        theme.BarcodeInput.borderRadius,
-        {
-          '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
-        },
-      ]"
-      class="flex flex-col gap-4"
+      v-if="isScanning"
+      class="relative w-full"
     >
-      <!-- Barcode Preview -->
-      <div
-        v-if="scannedValue"
-        class="flex items-center gap-2"
-      >
-        <div class="flex-1 break-all">
-          {{ scannedValue }}
-        </div>
-        <button
-          v-if="!disabled"
-          type="button"
-          class="text-gray-400 hover:text-gray-600"
-          @click="clearValue"
-        >
-          <Icon
-            name="i-heroicons-x-mark-20-solid"
-            class="h-5 w-5"
-          />
-        </button>
-      </div>
+      <CameraUpload
+        :is-barcode-mode="true"
+        @stop-webcam="stopScanning"
+        @barcode-detected="handleBarcodeDetected"
+      />
+    </div>
 
-      <!-- Scanner Interface -->
-      <div
-        v-show="!scannedValue && isScanning"
-        class="relative aspect-video w-full overflow-hidden rounded-lg bg-gray-100"
-      >
-        <video
-          ref="video"
-          class="h-full w-full object-cover"
-        />
-        <div class="absolute inset-0 border-2 border-dashed border-blue-500/50" />
+    <div
+      v-else-if="scannedValue"
+      class="flex items-center justify-between border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 rounded-lg px-4 py-2"
+    >
+      <div class="flex-1 break-all">
+        {{ scannedValue }}
       </div>
-
-      <!-- Controls -->
-      <div
+      <button
         v-if="!disabled"
-        class="flex justify-center"
+        type="button"
+        class="pt-1 text-gray-400 hover:text-gray-600"
+        @click="clearValue"
       >
-        <button
-          v-if="!isScanning && !scannedValue"
-          type="button"
-          class="inline-flex items-center gap-2 rounded-md bg-blue-50 px-3 py-2 text-sm font-semibold text-blue-600 hover:bg-blue-100"
-          @click="startScanning"
-        >
-          <Icon
-            name="i-heroicons-qr-code-20-solid"
-            class="h-5 w-5"
-          />
-          {{ $t('forms.barcodeInput.startScanning') }}
-        </button>
-        <button
-          v-if="isScanning"
-          type="button"
-          class="inline-flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100"
-          @click="stopScanning"
-        >
-          <Icon
-            name="i-heroicons-stop-20-solid"
-            class="h-5 w-5"
-          />
-          {{ $t('forms.barcodeInput.stopScanning') }}
-        </button>
+        <Icon
+          name="i-heroicons-x-mark-20-solid"
+          class="h-5 w-5"
+        />
+      </button>
+    </div>
+          
+    <div
+      v-else
+      :style="inputStyle"
+      class="flex flex-col w-full items-center justify-center transition-colors duration-40"
+      :class="[
+        {'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled},
+        theme.fileInput.input,
+        theme.fileInput.borderRadius,
+        theme.fileInput.spacing.horizontal,
+        theme.fileInput.spacing.vertical,
+        theme.fileInput.fontSize,
+        theme.fileInput.minHeight,
+        {'border-red-500 border-2':hasError},
+        'focus:outline-none focus:ring-2'
+      ]"
+      tabindex="0"
+      role="button"
+      aria-label="Click to open a camera"
+      @click="startScanning"
+      @keydown.enter.prevent="startScanning"
+    >
+      <div class="flex w-full items-center justify-center">
+        <div class="text-center">
+          <template v-if="!scannedValue && !isScanning">
+            <div class="text-gray-500 w-full flex justify-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-5 h-5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                />
+              </svg>
+            </div>
+
+            <p class="mt-2 text-sm text-gray-500 font-medium select-none">
+              {{ $t('forms.barcodeInput.clickToOpenCamera') }}
+            </p>
+            <div class="w-full items-center justify-center mt-2  hidden sm:flex">
+              <UButton
+                icon="i-heroicons-camera"
+                color="white"
+                class="px-2"
+                @click.stop="startScanning"
+              />
+            </div>
+          </template>
+        </div>
       </div>
     </div>
-
+    
     <template #error>
       <slot name="error" />
     </template>
@@ -92,11 +101,11 @@
 <script>
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
-import Quagga from 'quagga'
+import CameraUpload from './components/CameraUpload.vue'
 
 export default {
   name: 'BarcodeInput',
-  components: { InputWrapper },
+  components: { InputWrapper, CameraUpload },
 
   props: {
     ...inputProps,
@@ -110,8 +119,7 @@ export default {
 
   data: () => ({
     isScanning: false,
-    scannedValue: null,
-    stream: null
+    scannedValue: null
   }),
 
   watch: {
@@ -128,83 +136,18 @@ export default {
   },
 
   methods: {
-    async startScanning() {
-      if (!this.$refs.video) return
-
-      try {
-        // First get user media directly
-        this.stream = await navigator.mediaDevices.getUserMedia({
-          video: {
-            facingMode: "environment"
-          }
-        })
-        
-        // Attach stream to video element
-        this.$refs.video.srcObject = this.stream
-        this.$refs.video.play()
-
-        this.isScanning = true
-        
-        // Initialize Quagga
-        Quagga.init({
-          inputStream: {
-            name: "Live",
-            type: "LiveStream",
-            target: this.$refs.video,
-            constraints: {
-              facingMode: "environment"
-            },
-          },
-          decoder: {
-            readers: [
-              "ean_reader",
-              "ean_8_reader",
-              "code_128_reader",
-              "code_39_reader",
-              "upc_reader",
-              "upc_e_reader"
-            ]
-          },
-          locate: true // Try to detect the barcode location
-        }, (err) => {
-          if (err) {
-            console.error('Quagga initialization failed:', err)
-            this.stopScanning()
-            return
-          }
-          
-          Quagga.start()
-          
-          Quagga.onDetected((result) => {
-            if (result.codeResult) {
-              this.scannedValue = result.codeResult.code
-              this.stopScanning()
-            }
-          })
-        })
-      } catch (err) {
-        console.error('Failed to start camera:', err)
-        this.isScanning = false
-      }
+    startScanning() {
+      if (this.disabled) return
+      this.isScanning = true
     },
 
     stopScanning() {
-      if (this.isScanning) {
-        Quagga.stop()
-        
-        // Stop all tracks from the stream
-        if (this.stream) {
-          this.stream.getTracks().forEach(track => track.stop())
-          this.stream = null
-        }
-
-        // Clear video source
-        if (this.$refs.video) {
-          this.$refs.video.srcObject = null
-        }
+      this.isScanning = false
+    },
 
-        this.isScanning = false
-      }
+    handleBarcodeDetected(code) {
+      this.scannedValue = code
+      this.stopScanning()
     },
 
     clearValue() {
diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
index 39184cb1..9dfe0f90 100644
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@@ -21,6 +21,7 @@
         class="p-2 px-4 flex items-center justify-center text-xs space-x-2"
       >
         <span
+          v-if="!isBarcodeMode"
           class="cursor-pointer rounded-full w-14 h-14 border-2 grid place-content-center"
           @click="processCapturedImage"
         >
@@ -98,9 +99,10 @@
 <script>
 import Webcam from "webcam-easy"
 import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
+import Quagga from 'quagga'
 
 export default {
-  name: "FileInput",
+  name: "CameraUpload",
   props: {
     theme: {
       type: Object, default: () => {
@@ -111,13 +113,18 @@ export default {
         return CachedDefaultTheme.getInstance()
       }
     },
+    isBarcodeMode: {
+      type: Boolean,
+      default: false
+    },
   },
-  emits: ['stopWebcam', 'uploadImage'],
+  emits: ['stopWebcam', 'uploadImage', 'barcodeDetected'],
   data: () => ({
     webcam: null,
     isCapturing: false,
     capturedImage: null,
     cameraPermissionStatus: "loading",
+    quaggaInitialized: false
   }),
   computed: {
     videoDisplay() {
@@ -142,6 +149,9 @@ export default {
         .start()
         .then(() => {
           this.cameraPermissionStatus = "allowed"
+          if (this.isBarcodeMode) {
+            this.initQuagga()
+          }
         })
         .catch((err) => {
           console.error(err)
@@ -152,9 +162,53 @@ export default {
           this.cameraPermissionStatus = "unknown"
         })
     },
+    initQuagga() {
+      if (!this.quaggaInitialized) {
+        Quagga.init({
+          inputStream: {
+            name: "Live",
+            type: "LiveStream",
+            target: document.getElementById("webcam"),
+            constraints: {
+              facingMode: "environment"
+            },
+          },
+          decoder: {
+            readers: [
+              "ean_reader",
+              "ean_8_reader",
+              "code_128_reader",
+              "code_39_reader",
+              "upc_reader",
+              "upc_e_reader"
+            ]
+          },
+          locate: true
+        }, (err) => {
+          if (err) {
+            console.error('Quagga initialization failed:', err)
+            return
+          }
+          
+          this.quaggaInitialized = true
+          Quagga.start()
+          
+          Quagga.onDetected((result) => {
+            if (result.codeResult) {
+              this.$emit('barcodeDetected', result.codeResult.code)
+              this.cancelCamera()
+            }
+          })
+        })
+      }
+    },
     cancelCamera() {
       this.isCapturing = false
       this.capturedImage = null
+      if (this.quaggaInitialized) {
+        Quagga.stop()
+        this.quaggaInitialized = false
+      }
       this.webcam.stop()
       this.$emit("stopWebcam")
     },
diff --git a/client/data/blocks_types.json b/client/data/blocks_types.json
index c7542b8f..0cca9180 100644
--- a/client/data/blocks_types.json
+++ b/client/data/blocks_types.json
@@ -149,7 +149,7 @@
     "icon": "i-material-symbols-barcode-scanner-rounded", 
     "default_block_name": "Scan Barcode",
     "bg_class": "bg-pink-100",
-    "text_class": "text-purple-900",
+    "text_class": "text-pink-900",
     "is_input": true
   },
   "nf-text": {
diff --git a/client/i18n/lang/ar.json b/client/i18n/lang/ar.json
index 65ca6d8e..7d38d3d7 100644
--- a/client/i18n/lang/ar.json
+++ b/client/i18n/lang/ar.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "تحميل ملف بدلاً من ذلك",
             "clear": "مسح"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "انقر لفتح كاميرا"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/bn.json b/client/i18n/lang/bn.json
index d635d0a7..8f2d0a84 100644
--- a/client/i18n/lang/bn.json
+++ b/client/i18n/lang/bn.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "পরিবর্তে ফাইল আপলোড করুন",
             "clear": "পরিষ্কার"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "ক্লিক করুন ক্যামেরা খোলা করতে"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/de.json b/client/i18n/lang/de.json
index 12aaf51d..f940688e 100644
--- a/client/i18n/lang/de.json
+++ b/client/i18n/lang/de.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Stattdessen Datei hochladen",
             "clear": "Löschen"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Klicken Sie, um eine Kamera zu öffnen"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/en.json b/client/i18n/lang/en.json
index 376c8b4e..f3ccf3ab 100644
--- a/client/i18n/lang/en.json
+++ b/client/i18n/lang/en.json
@@ -38,8 +38,7 @@
             "clear": "Clear"
         },
         "barcodeInput": {
-            "startScanning": "Start Scanning",
-            "stopScanning": "Stop Scanning"
+            "clickToOpenCamera": "Click to open a camera"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/es.json b/client/i18n/lang/es.json
index 790ea934..d6c2a3d7 100644
--- a/client/i18n/lang/es.json
+++ b/client/i18n/lang/es.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Subir un archivo en su lugar",
             "clear": "Borrar"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Haga clic para abrir una cámara"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/fr.json b/client/i18n/lang/fr.json
index a4b4fa01..2978cd3a 100644
--- a/client/i18n/lang/fr.json
+++ b/client/i18n/lang/fr.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Uploader un fichier à la place",
             "clear": "Effacer"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Cliquez pour ouvrir une caméra"
         }
     }
 }
\ No newline at end of file
diff --git a/client/i18n/lang/hi.json b/client/i18n/lang/hi.json
index 274276d2..5d36238e 100644
--- a/client/i18n/lang/hi.json
+++ b/client/i18n/lang/hi.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "इसके बजाय फ़ाइल अपलोड करें",
             "clear": "साफ़ करें"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "क्लिक करें कैमरा खोलने के लिए"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/ja.json b/client/i18n/lang/ja.json
index 070d2c51..7a91fe95 100644
--- a/client/i18n/lang/ja.json
+++ b/client/i18n/lang/ja.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "代わりにファイルをアップロード",
             "clear": "クリア"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "クリックしてカメラを開く"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/jv.json b/client/i18n/lang/jv.json
index 782488ad..296be258 100644
--- a/client/i18n/lang/jv.json
+++ b/client/i18n/lang/jv.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Unggah berkas ing panggone",
             "clear": "Resiki"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Klik kanggo nggawe kamera"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/ko.json b/client/i18n/lang/ko.json
index 72467ad2..06e68022 100644
--- a/client/i18n/lang/ko.json
+++ b/client/i18n/lang/ko.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "대신 파일 업로드",
             "clear": "지우기"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "클릭하여 카메라 열기"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/mr.json b/client/i18n/lang/mr.json
index 43075d29..33d0f62b 100644
--- a/client/i18n/lang/mr.json
+++ b/client/i18n/lang/mr.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "त्याऐवजी फाइल अपलोड करा",
             "clear": "साफ करा"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "क्लिक करा कैमरा खोलण्यासाठी"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/pa.json b/client/i18n/lang/pa.json
index 06c6775b..e1eb7824 100644
--- a/client/i18n/lang/pa.json
+++ b/client/i18n/lang/pa.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "ਇਸ ਦੀ ਬਜਾਏ ਫਾਈਲ ਅਪਲੋਡ ਕਰੋ",
             "clear": "ਸਾਫ਼ ਕਰੋ"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "ਕਲਿੱਕ ਕਰੋ ਕੈਮਰਾ ਖੋਲਣ ਲਈ"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/pt.json b/client/i18n/lang/pt.json
index 0feaf633..6fb60086 100644
--- a/client/i18n/lang/pt.json
+++ b/client/i18n/lang/pt.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Fazer upload de arquivo em vez disso",
             "clear": "Limpar"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Clique para abrir a câmera"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/ru.json b/client/i18n/lang/ru.json
index a2988e7c..b4cd0c19 100644
--- a/client/i18n/lang/ru.json
+++ b/client/i18n/lang/ru.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Вместо этого загрузить файл",
             "clear": "Очистить"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Нажмите, чтобы открыть камеру"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/ta.json b/client/i18n/lang/ta.json
index 09fb3d12..470b0652 100644
--- a/client/i18n/lang/ta.json
+++ b/client/i18n/lang/ta.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "அதற்கு பதிலாக கோப்பைப் பதிவேற்றவும்",
             "clear": "அழி"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "கிளிக் செய்யவும் கேமரா திறக்கவும்"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/te.json b/client/i18n/lang/te.json
index 1e3a2e33..9a59d262 100644
--- a/client/i18n/lang/te.json
+++ b/client/i18n/lang/te.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "బదులుగా ఫైల్‌ను అప్‌లోడ్ చేయండి",
             "clear": "క్లియర్"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "క్లిక్ చేయండి కెమెరా తెరవండి"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/tr.json b/client/i18n/lang/tr.json
index 34b31a96..bc426457 100644
--- a/client/i18n/lang/tr.json
+++ b/client/i18n/lang/tr.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Bunun yerine dosya yükle",
             "clear": "Temizle"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Kamera açmak için tıklayın"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/ur.json b/client/i18n/lang/ur.json
index fe09d0c9..5447c063 100644
--- a/client/i18n/lang/ur.json
+++ b/client/i18n/lang/ur.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "اس کے بجائے فائل اپلوڈ کریں",
             "clear": "صاف کریں"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "کیمرے کھولنے کے لیے کلک کریں"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/vi.json b/client/i18n/lang/vi.json
index bdd0a7a5..77ff9b64 100644
--- a/client/i18n/lang/vi.json
+++ b/client/i18n/lang/vi.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "Tải lên tệp thay thế",
             "clear": "Xóa"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "Nhấp để mở Camera"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/i18n/lang/zh.json b/client/i18n/lang/zh.json
index 6b6ee11e..f1fa025f 100644
--- a/client/i18n/lang/zh.json
+++ b/client/i18n/lang/zh.json
@@ -36,6 +36,9 @@
         "signatureInput": {
             "uploadFileInstead": "改为上传文件",
             "clear": "清除"
+        },
+        "barcodeInput": {
+            "clickToOpenCamera": "点击打开相机"
         }
     }
 } 
\ No newline at end of file
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index 595ebc75..c505a8d8 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -151,13 +151,6 @@ export const themes = {
         md: 'min-h-40',
         lg: 'min-h-48'
       },
-    },
-    BarcodeInput: {
-      minHeight: {
-        sm: 'min-h-28',
-        md: 'min-h-40',
-        lg: 'min-h-48'
-      },
     }
   },
   simple: {
@@ -303,13 +296,6 @@ export const themes = {
         md: 'min-h-40',
         lg: 'min-h-48'
       },
-    },
-    BarcodeInput: {
-      minHeight: {
-        sm: 'min-h-28',
-        md: 'min-h-40',
-        lg: 'min-h-48'
-      },
     }
   },
   notion: {
@@ -455,13 +441,6 @@ export const themes = {
         md: 'min-h-40',
         lg: 'min-h-48'
       },
-    },
-    BarcodeInput: {
-      minHeight: {
-        sm: 'min-h-28',
-        md: 'min-h-40',
-        lg: 'min-h-48'
-      },
     }
   }
 }

From c45bbebde675cf3d6e18034ec4b3b7aeb1703c7f Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Tue, 17 Dec 2024 18:29:56 +0530
Subject: [PATCH 3/4] Barcode decoder as user selection

---
 client/components/forms/BarcodeInput.vue      |  5 +++
 .../forms/components/CameraUpload.vue         | 13 +++----
 .../components/open/forms/OpenFormField.vue   |  4 +++
 .../forms/fields/components/FieldOptions.vue  | 34 ++++++++++++++++++-
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/client/components/forms/BarcodeInput.vue b/client/components/forms/BarcodeInput.vue
index 97232434..e652af87 100644
--- a/client/components/forms/BarcodeInput.vue
+++ b/client/components/forms/BarcodeInput.vue
@@ -10,6 +10,7 @@
     >
       <CameraUpload
         :is-barcode-mode="true"
+        :decoders="decoders"
         @stop-webcam="stopScanning"
         @barcode-detected="handleBarcodeDetected"
       />
@@ -109,6 +110,10 @@ export default {
 
   props: {
     ...inputProps,
+    decoders: {
+      type: Array,
+      default: () => []
+    }
   },
 
   setup(props, context) {
diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
index 9dfe0f90..07eb11f3 100644
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@@ -117,6 +117,10 @@ export default {
       type: Boolean,
       default: false
     },
+    decoders: {
+      type: Array,
+      default: () => []
+    }
   },
   emits: ['stopWebcam', 'uploadImage', 'barcodeDetected'],
   data: () => ({
@@ -174,14 +178,7 @@ export default {
             },
           },
           decoder: {
-            readers: [
-              "ean_reader",
-              "ean_8_reader",
-              "code_128_reader",
-              "code_39_reader",
-              "upc_reader",
-              "upc_e_reader"
-            ]
+            readers: this.decoders || []
           },
           locate: true
         }, (err) => {
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index ed8a3b98..816e125e 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -339,6 +339,10 @@ export default {
         inputProperties.columns = field.columns
       }
 
+      if (field.type === 'barcode') {
+        inputProperties.decoders = field.decoders
+      }
+
       if (['select','multi_select'].includes(field.type) && !this.isFieldRequired) {
         inputProperties.clearable = true
       }
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index cbfba69f..91d46c92 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -77,6 +77,27 @@
       />
     </div>
 
+    <!-- Barcode Reader -->
+    <div
+      v-if="field.type === 'barcode'"
+      class="px-4"
+    >
+      <EditorSectionHeader
+        icon="i-material-symbols-barcode-scanner-rounded"
+        title="Barcode Reader"
+      />
+      <select-input
+        name="decoders"
+        class="mt-4"
+        :form="field"
+        :options="barcodeDecodersOptions"
+        label="Decoders"
+        :searchable="true"
+        :multiple="true"
+        help="Select the decoders you want to use"
+      />
+    </div>
+
     <div
       v-if="field.type === 'rating'"
       class="px-4"
@@ -611,7 +632,15 @@ export default {
       editorToolbarCustom: [
         ['bold', 'italic', 'underline', 'link']
       ],
-      allCountries: countryCodes
+      allCountries: countryCodes,
+      barcodeDecodersOptions: [
+        { name: 'EAN-13', value: 'ean_reader' },
+        { name: 'EAN-8', value: 'ean_8_reader' },
+        { name: 'Code 128', value: 'code_128_reader' },
+        { name: 'Code 39', value: 'code_39_reader' },
+        { name: 'UPC-A', value: 'upc_reader' },
+        { name: 'UPC-E', value: 'upc_e_reader' }
+      ]
     }
   },
 
@@ -828,6 +857,9 @@ export default {
           selection_data:{
             'Row 1': null
           }
+        },
+        barcode: {
+          decoders: this.barcodeDecodersOptions.map(decoder => decoder.value)
         }
       }
       if (this.field.type in defaultFieldValues) {

From 3f9cc7c3749d657dd926651e2db4b1eec28a2806 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Wed, 1 Jan 2025 10:51:45 +0530
Subject: [PATCH 4/4] improve barcode

---
 client/components/forms/components/VSelect.vue       | 10 +++++++---
 .../open/forms/fields/components/FieldOptions.vue    | 10 +++++-----
 client/lib/forms/themes/form-themes.js               | 12 +++++++++---
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index 4e2def64..3e65b608 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -35,7 +35,8 @@
         <div
           class="flex items-center"
           :class="[
-            theme.SelectInput.minHeight
+            theme.SelectInput.minHeight,
+            'ltr:pr-8 rtl:pl-8'
           ]"
         >
           <transition
@@ -76,9 +77,12 @@
             </div>
           </transition>
         </div>
-        <span class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none">
+        <div
+          class="absolute inset-y-0 ltr:right-6 rtl:left-6 w-10 pointer-events-none bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light"
+        />
+        <span class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none bg-white">
           <Icon
-            name="heroicons:chevron-up-down-16-solid"
+            name="heroicons:chevron-up-down-16-solid" 
             class="h-5 w-5 text-gray-500"
           />
         </span>
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 91d46c92..3197abee 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -634,12 +634,12 @@ export default {
       ],
       allCountries: countryCodes,
       barcodeDecodersOptions: [
-        { name: 'EAN-13', value: 'ean_reader' },
-        { name: 'EAN-8', value: 'ean_8_reader' },
+        { name: 'EAN-13 (European Article Number)', value: 'ean_reader' },
+        { name: 'EAN-8 (European Article Number)', value: 'ean_8_reader' },
+        { name: 'UPC-A (Universal Product Code)', value: 'upc_reader' },
+        { name: 'UPC-E (Universal Product Code)', value: 'upc_e_reader' },
         { name: 'Code 128', value: 'code_128_reader' },
         { name: 'Code 39', value: 'code_39_reader' },
-        { name: 'UPC-A', value: 'upc_reader' },
-        { name: 'UPC-E', value: 'upc_e_reader' }
       ]
     }
   },
@@ -859,7 +859,7 @@ export default {
           }
         },
         barcode: {
-          decoders: this.barcodeDecodersOptions.map(decoder => decoder.value)
+          decoders: ['ean_reader', 'upc_reader']
         }
       }
       if (this.field.type in defaultFieldValues) {
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index c505a8d8..62a1f0cf 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -55,7 +55,9 @@ export const themes = {
     },
     SelectInput: {
       input:
-        'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent',
+        'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:text-gray-300 dark:placeholder-gray-600 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent',
+      background: 'bg-white dark:bg-notion-dark-light',
+      chevronGradient: 'bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light',
       dropdown: 'border border-gray-300 dark:border-gray-600',
       option: 'rounded',
       minHeight: {
@@ -206,7 +208,9 @@ export const themes = {
     },
     SelectInput: {
       input:
-        'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
+        'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
+      background: 'bg-white dark:bg-notion-dark-light',
+      chevronGradient: 'bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light',
       dropdown: 'border border-gray-300 dark:border-gray-600',
       option: 'rounded',
       minHeight: {
@@ -351,7 +355,9 @@ export const themes = {
     },
     SelectInput: {
       input:
-        'relative w-full border-transparent flex-1 appearance-none bg-notion-input-background shadow-inner-notion w-full text-gray-900 placeholder-gray-400 dark:bg-notion-dark-light dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
+        'relative w-full border-transparent flex-1 appearance-none shadow-inner-notion w-full text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
+      background: 'bg-notion-input-background dark:bg-notion-dark-light',
+      chevronGradient: 'bg-gradient-to-r from-transparent to-notion-input-background dark:to-notion-dark-light',
       dropdown: 'border border-gray-300 dark:border-gray-600',
       option: 'rounded',
       minHeight: {