Rewrite choose images #251

Levminer · Mar 7, 2023 · 7b10507 · 7b10507
1 parent 5b99ca4
commit 7b10507
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 27 deletions.
diff --git a/interface/windows/import/index.ts b/interface/windows/import/index.ts
@@ -1,4 +1,4 @@
-import QrcodeDecoder from "qrcode-decoder"
+import { BarcodeDetectorPolyfill } from "@undecaf/barcode-detector-polyfill"
 import { fs, dialog } from "@tauri-apps/api"
 import { getState, setState } from "../../stores/state"
 import { totpImageConverter, migrationImageConverter } from "../../utils/convert"
@@ -15,49 +15,54 @@ export const chooseImages = async () => {
 		return
 	}
 
-	const images: string[] = []
+	const images: ImageBitmap[] = []
 
+	// Read images
 	for (let i = 0; i < filePaths.length; i++) {
 		const file = await fs.readBinaryFile(filePaths[i])
 
 		const blob = new Blob([file], { type: "application/octet-binary" })
-		const url = URL.createObjectURL(blob)
+		const img = await createImageBitmap(blob)
 
-		images.push(url)
+		images.push(img)
 	}
 
 	let importString = ""
 
+	// Read QR codes from images
 	for (let i = 0; i < images.length; i++) {
 		const processImages = async () => {
-			const qr = new QrcodeDecoder()
+			try {
+				const detector = new BarcodeDetectorPolyfill()
+				const res = (await detector.detect(images[i]))[0]
+
+				if (res.rawValue.startsWith("otpauth://totp/") || res.rawValue.startsWith("otpauth-migration://")) {
+					if (res.rawValue.startsWith("otpauth://totp/")) {
+						importString += totpImageConverter(res.rawValue)
+					} else {
+						const converted = await migrationImageConverter(res.rawValue)
+						importString += converted
+					}
 
-			// Decode image
-			const res = await qr.decodeFromImage(images[i])
-
-			if (res === false) {
-				// No qr code found on the picture
-				dialog.message(`No QR code found on the #${i + 1} picture! \n\nPlease try again with another picture!`, { type: "error" })
-			} else if (res.data.startsWith("otpauth://totp/") || res.data.startsWith("otpauth-migration://")) {
-				if (res.data.startsWith("otpauth://totp/")) {
-					importString += totpImageConverter(res.data)
-				} else {
-					importString += migrationImageConverter(res.data)
-				}
-
-				if (images.length === i + 1) {
 					// QR codes found on all images
-					dialog.message("Codes imported. \n\nYou can edit your codes on the edit page.")
+					if (images.length === i + 1) {
+						dialog.message("Codes imported. \n\nYou can edit your codes on the edit page.")
 
-					const state = getState()
-					state.importData += importString
-					setState(state)
+						const state = getState()
+						state.importData += importString
+						setState(state)
 
-					navigate("codes")
+						navigate("codes")
+					}
+				} else {
+					// Wrong QR code found
+					logger.error(`Error while reading QR code: ${res.rawValue}}`)
+					dialog.message(`Wrong QR code found on the #${i + 1} picture! \n\nPlease try again with another picture!`, { type: "error" })
 				}
-			} else {
-				// Wrong QR code found
-				dialog.message(`Wrong QR code found on the #${i + 1} picture! \n\nPlease try again with another picture!`, { type: "error" })
+			} catch (error) {
+				// Error while reading QR code
+				logger.error(`Error while reading QR code: ${error}}`)
+				dialog.message(`No QR code found on the #${i + 1} picture! \n\nPlease try again with another picture!`, { type: "error" })
 			}
 		}
 

diff --git a/scripts/build.js b/scripts/build.js
@@ -7,6 +7,9 @@ import tw from "tailwindcss"
 import ap from "autoprefixer"
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill"
 import { existsSync, copyFileSync, mkdirSync } from "fs"
+import { copy } from "esbuild-plugin-copy"
+import { replace } from "esbuild-plugin-replace"
+import { ZBAR_WASM_REPOSITORY } from "@undecaf/barcode-detector-polyfill/zbar-wasm"
 
 if (existsSync("./dist/index.html") === false) {
 	mkdirSync("./dist")
@@ -35,6 +38,20 @@ esbuild
 			NodeGlobalsPolyfillPlugin({
 				buffer: true,
 			}),
+			replace({
+				values: {
+					[ZBAR_WASM_REPOSITORY]: "@undecaf/zbar-wasm",
+					"/dist/main.js": "",
+					"/dist/index.js": "",
+				},
+			}),
+
+			copy({
+				assets: {
+					from: ["node_modules/@undecaf/zbar-wasm/dist/zbar.wasm"],
+					to: ["."],
+				},
+			}),
 		],
 	})
 	.catch(() => process.exit(1))
diff --git a/scripts/server.js b/scripts/server.js
@@ -6,6 +6,9 @@ import postCssPlugin from "esbuild-style-plugin"
 import tw from "tailwindcss"
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill"
 import { createServer, request } from "http"
+import { copy } from "esbuild-plugin-copy"
+import { replace } from "esbuild-plugin-replace"
+import { ZBAR_WASM_REPOSITORY } from "@undecaf/barcode-detector-polyfill/zbar-wasm"
 
 const clients = []
 
@@ -31,6 +34,20 @@ esbuild
 			NodeGlobalsPolyfillPlugin({
 				buffer: true,
 			}),
+			replace({
+				values: {
+					[ZBAR_WASM_REPOSITORY]: "@undecaf/zbar-wasm",
+					"/dist/main.js": "",
+					"/dist/index.js": "",
+				},
+			}),
+
+			copy({
+				assets: {
+					from: ["node_modules/@undecaf/zbar-wasm/dist/zbar.wasm"],
+					to: ["."],
+				},
+			}),
 		],
 		banner: { js: " (() => new EventSource('/esbuild').onmessage = () => location.reload())();" },
 		watch: {