Refactor QR code reader (#3762)

* Introduce new QrReader component with quircs

* Try zxing-wasm library

* Allow selecting different cameras and modes

* Add options to scan from image or clipboard

* Remove handleError from camera to avoid reloading

* Use pointer cursor on qr code dialog tabs

* Use zbar-wasm

* Add CHANGELOG.md entry

* Make icon a little larger, improve styling

* Remove selecting facing mode, bring cameras into root of context menu

* Read image from clipboard

* Move handling scan results into own method

* Use translation strings

* Hide camera selection when only one camera is given

* Update CHANGELOG.md

* Bring back former styling

* Adjust button position a little

* Do not show hint on error

* Remove unused npm dependency

* Improve error message

* Handle empty base64 string when reading clipboard image from electron

* Remove duplicate button

* Docstring for readClipboardImage method

* Use checkmark icon which works in darkmode as well

* Flip video horizontally

* Improve styling for longer error message

* Add a whole bunch of comments

* Automatically select first available video device

* Reset input element to still receive onChange when selecting same image

* Always flip processing flag, in error or success cases

* Fix removed subtitle prop in other components

* Fix confirm dialog not returning callback on ESC-key events

* Use isEmpty method on NativeImage

* Show error when no data was found in selected image file

* Leave a note to change translation string

* Correct JSX comment syntax

* Use jsqr for now as zbar-wasm seems to be too unstable

* Already use untranslated string

* Increase scan interval to 250ms

* Close dialog after cancelling

* Better name for method

* Make stopping stream logic more robust for different cases

* Use worker

* Keep showing QR reader when cancelling dialogs

* Do not display progress bar when processing code

* Update src/renderer/components/QrReader/index.tsx

Co-authored-by: Simon Laux <Simon-Laux@users.noreply.github.com>

---------

Co-authored-by: Simon Laux <Simon-Laux@users.noreply.github.com>

CHANGELOG.md

@@ -7,7 +7,7 @@
 - add quick-key CtrlOrCmd+q for submenu quit #3758
 - add window titlebar for html_email- and help window #3770 #3778
 - add quick key `Cmd+W`/`Ctrl+W` to close webxdc-, html_email- and help-window #3770 #3778
-
+- Accept images from clipboard in QR reader #3762
 
 ### Changed
 - Update translations (2024-04-04) #3746
@@ -18,6 +18,7 @@
 - Improve security: restrict file protocol #3769
 - Update `deltachat-node` and `deltachat/jsonrpc-client` to `v1.137.3`
 - Change chatlist to use new chatlist changed event from core #3268
+- Refactor QR code reader #3762
 
 ### Fixed
 - fix chat audit dialog was going out of viewport on smaller screens #3736
@@ -31,6 +32,7 @@
 - fix translation keys in keybindings cheat sheet dialog #3779
 - fix random scroll position and missing redraws when opening "Archive" #3268
 - fix: clear notifications for a contact request when blocking it #3268
+- Unmount QR scanner and disable camera correctly on abort or exit #3762
 
 <a id="1_44_1"></a>
 

_locales/_untranslated_en.json

@@ -23,5 +23,11 @@
   },
   "pref_current_account": {
     "message": "Current Account"
+  },
+  "qrscan_hint_desktop": {
+    "message": "Move the QR code to the camera"
+  },
+  "camera_access_failed": {
+    "message": "Could not access video camera. You might want to check your video permissions or if the camera is used already by another program"
   }
 }

bin/build-frontend-ts.mjs

@@ -2,6 +2,7 @@ import path from 'path'
 import { copyFile, readFile } from 'fs/promises'
 
 import esbuild from 'esbuild'
+import inlineWorkerPlugin from 'esbuild-plugin-inline-worker'
 import { ESLint } from 'eslint'
 import { compile } from 'sass'
 
@@ -12,7 +13,7 @@ import { compile } from 'sass'
 function config(options) {
   const { isProduction, isMinify, isWatch } = options
 
-  const plugins = [wasmPlugin, sassPlugin]
+  const plugins = [wasmPlugin, sassPlugin, inlineWorkerPlugin()]
   if (isWatch || isProduction) {
     // Make eslint optional as it affects build times significantly
     plugins.push(eslintPlugin)

package.json

@@ -79,7 +79,6 @@
     "@blueprintjs/core": "^4.1.2",
     "@deltachat/jsonrpc-client": "^1.137.3",
     "@deltachat/message_parser_wasm": "^0.9.0",
-    "@deltachat/react-qr-reader": "^4.0.0",
     "@emoji-mart/data": "1.1.2",
     "@emoji-mart/react": "1.1.1",
     "@mapbox/geojson-extent": "^1.0.0",
@@ -92,6 +91,7 @@
     "error-stack-parser": "^2.0.7",
     "filesize": "^10.1.0",
     "immutable": "^4.0.0",
+    "jsqr": "^1.4.0",
     "mapbox-gl": "^1.12.0",
     "mime-types": "^2.1.31",
     "moment": "^2.29.2",
@@ -132,6 +132,7 @@
     "electron": "^28.2.3",
     "electron-builder": "^24.6.4",
     "esbuild": "^0.19.8",
+    "esbuild-plugin-inline-worker": "^0.1.1",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",

scss/dialogs/_qr-code.scss

@@ -4,6 +4,7 @@
 
   p {
     width: 50%;
+    cursor: pointer;
 
     margin: 0;
     padding: 17px 0px;
@@ -24,45 +25,3 @@
     }
   }
 }
-
-.scan-qr-description {
-  position: relative;
-  z-index: map-get($z-index, import-qr-code-dialog-scope-scan-qr-description);
-  top: -18px;
-  margin-top: -18px;
-  margin: 0;
-  color: #fff;
-}
-
-.scan-qr-red-line {
-  @keyframes scan-qr-red-line {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  position: relative;
-  top: -225px;
-  margin-top: -225px;
-  margin: 0;
-
-  border-bottom-color: #ff00005c;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-
-  margin: 0px 50px;
-
-  animation-name: scan-qr-red-line;
-  animation-duration: 0.6s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  animation-timing-function: ease-in;
-}
-
-.import-qr-code-dialog > div > div > section > section > div {
-  border: 50px solid rgba(0, 0, 0, 0.2);
-  box-shadow: unset !important;
-}