trying camera barcode reader

Author: functora

ghcjs/lightning-verifier/package-lock.json

@@ -17,7 +17,8 @@
     "@capacitor/share": "^6.0.1",
     "@capacitor/toast": "^6.0.2",
     "@ionic/pwa-elements": "^3.3.0",
-    "capacitor-webview-print": "^6.0.1"
+    "capacitor-webview-print": "^6.0.1",
+    "html5-qrcode": "^2.3.8"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.4",

ghcjs/lightning-verifier/package.json

@@ -178,7 +178,19 @@ screenWidget st@Model {modelState = St {stScreen = Converter}} =
               { Field.optsFilledOrOutlined = Outlined,
                 Field.optsPlaceholder = "Invoice",
                 Field.optsLeadingWidget =
-                  pasteWidget $ #modelState . #stDoc . #stDocLnInvoice
+                  pasteWidget
+                    "content_paste"
+                    Jsm.selectClipboard
+                    $ #modelState
+                    . #stDoc
+                    . #stDocLnInvoice,
+                Field.optsTrailingWidget =
+                  pasteWidget
+                    "qr_code_scanner"
+                    Jsm.selectBarcode
+                    $ #modelState
+                    . #stDoc
+                    . #stDocLnInvoice
               }
           ),
          Field.textField
@@ -191,29 +203,44 @@ screenWidget st@Model {modelState = St {stScreen = Converter}} =
             { Field.optsFilledOrOutlined = Outlined,
               Field.optsPlaceholder = "Preimage",
               Field.optsLeadingWidget =
-                pasteWidget $ #modelState . #stDoc . #stDocLnPreimage
+                pasteWidget
+                  "content_paste"
+                  Jsm.selectClipboard
+                  $ #modelState
+                  . #stDoc
+                  . #stDocLnPreimage,
+              Field.optsTrailingWidget =
+                pasteWidget
+                  "qr_code_scanner"
+                  Jsm.selectBarcode
+                  $ #modelState
+                  . #stDoc
+                  . #stDocLnPreimage
             }
        ]
     <> Bolt11.bolt11 st
 
 pasteWidget ::
+  MisoString ->
+  ((Maybe MisoString -> JSM ()) -> JSM ()) ->
   ATraversal' Model (Field MisoString Unique) ->
   Maybe (Field.OptsWidget Model Action)
-pasteWidget optic =
+pasteWidget icon selector optic =
   Just
-    . Field.ActionWidget "content_paste" mempty
+    . Field.ActionWidget icon mempty
     . PushUpdate
     . Instant
     $ \prev -> do
-      Jsm.selectClipboard $ \case
+      selector $ \case
         Nothing ->
-          Jsm.popupText @MisoString "Failed to paste!"
-        Just clip ->
+          Jsm.popupText @MisoString "Failure!"
+        Just res -> do
           Misc.pushActionQueue prev
             . Instant
             $ pure
-            . (& cloneTraversal optic . #fieldOutput .~ clip)
-            . (& cloneTraversal optic . #fieldInput . #uniqueValue .~ clip)
+            . (& cloneTraversal optic . #fieldOutput .~ res)
+            . (& cloneTraversal optic . #fieldInput . #uniqueValue .~ res)
+          Jsm.popupText @MisoString "Success!"
       pure prev
 
 tosWidget :: View Action

ghcjs/lightning-verifier/src/App/Widgets/Main.hs

@@ -40,21 +40,13 @@ textarea {
   justify-content: center;
 }
 
-.app-success > span > div > .mdc-icon-button {
-  color: white !important;
-}
-
 .app-failure > span {
   color: white;
   background-color: #b00020 !important;
   display: flex;
   justify-content: center;
 }
 
-.app-failure > span > div > .mdc-icon-button {
-  color: white !important;
-}
-
 @media print {
   body {
     color-adjust: exact !important;

ghcjs/lightning-verifier/static/app.css

@@ -1,11 +1,16 @@
-import { CapacitorBarcodeScanner } from "@capacitor/barcode-scanner";
 import { defineCustomElements } from "@ionic/pwa-elements/loader";
 import { WebviewPrint } from "capacitor-webview-print";
 import { Preferences } from "@capacitor/preferences";
 import { Clipboard } from "@capacitor/clipboard";
 import { Browser } from "@capacitor/browser";
 import { Share } from "@capacitor/share";
 import { Toast } from "@capacitor/toast";
+import { Capacitor } from "@capacitor/core";
+import { Html5Qrcode } from "html5-qrcode";
+import {
+  CapacitorBarcodeScanner,
+  CapacitorBarcodeScannerTypeHint,
+} from "@capacitor/barcode-scanner";
 
 async function printCurrentPage(name) {
   return await WebviewPrint.print({ name: name });
@@ -46,8 +51,16 @@ async function popupText(text) {
   return await Toast.show({ text: text });
 }
 
-async function scanBarcode() {
-  const { ScanResult } = await CapacitorBarcodeScanner.scanBarcode({});
+async function selectBarcode() {
+  if (!Capacitor.isNativePlatform()) {
+    const devices = await Html5Qrcode.getCameras();
+    if (!(devices && devices.length)) {
+      throw new Error("Camera not found!");
+    }
+  }
+  const { ScanResult } = await CapacitorBarcodeScanner.scanBarcode({
+    hint: CapacitorBarcodeScannerTypeHint.ALL,
+  });
   return ScanResult;
 }
 
@@ -59,4 +72,4 @@ globalThis.selectClipboard = selectClipboard;
 globalThis.openBrowserPage = openBrowserPage;
 globalThis.shareText = shareText;
 globalThis.popupText = popupText;
-globalThis.scanBarcode = scanBarcode;
+globalThis.selectBarcode = selectBarcode;