@robotical/webapp-types 3.21.12 → 3.21.13

package/dist-types/package.json

@@ -1,7 +1,10 @@
 {
     "name": "marty-web-app",
-    "version": "3.21.12",
+    "version": "3.21.13",
     "private": true,
+    "engines": {
+        "node": ">=20"
+    },
     "dependencies": {
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-icons": "^1.3.2",
@@ -23,7 +26,7 @@
         "@robotical/skiing-game": "^0.1.24",
         "@robotical/space-shooter-game": "^0.1.15",
         "@sentry/react": "^8.55.2",
-        "@yudiel/react-qr-scanner": "2.5.1",
+        "@yudiel/react-qr-scanner": "2.6.0",
         "aws-sdk": "^2.1394.0",
         "bowser": "^2.11.0",
         "core-js": "^3.6.5",
@@ -44,20 +47,26 @@
         "semver": "^7.3.7",
         "styled-components": "^5.3.3",
         "typescript": "^4.6.2",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "zxing-wasm": "3.1.1"
     },
     "scripts": {
         "copy-space-shooter-assets": "node copy-space-shooter-assets.js",
+        "copy-qr-wasm": "shx rm -rf ./public/qr-scanner && shx mkdir -p ./public/qr-scanner && shx cp ./node_modules/zxing-wasm/dist/reader/zxing_reader.wasm ./public/qr-scanner/zxing_reader.wasm",
         "copy-mb": "shx rm -rf ./public/MartyBlocks && shx mkdir -p ./public/MartyBlocks && shx cp -r ./node_modules/@robotical/martyblocks/dist/. ./public/MartyBlocks/",
         "copy-mbjr": "shx rm -rf ./public/MartyBlocksJR && shx mkdir -p ./public/MartyBlocksJR && shx cp -r ./node_modules/@robotical/martyblocksjr/editions/free/src/. ./public/MartyBlocksJR/",
         "clean-mb": "shx rm -r ./node_modules/@robotical/martyblocks",
         "clean-mbjr": "shx rm -r ./node_modules/@robotical/martyblocksjr",
         "transpile-public-legacy": "node scripts/transpile-public-legacy.js",
-        "prepare": "npm run copy-mb && npm run copy-mbjr && npm run copy-space-shooter-assets && NODE_OPTIONS=\"--max-old-space-size=8192\" npm run transpile-public-legacy",
+        "prepare": "npm run copy-mb && npm run copy-mbjr && npm run copy-space-shooter-assets && npm run copy-qr-wasm && NODE_OPTIONS=\"--max-old-space-size=8192\" npm run transpile-public-legacy",
+        "prestart": "npm run copy-qr-wasm",
         "start": "react-scripts start",
         "start-pwa": "http-server build -c-1 -p 3001 --directory build",
+        "prebuild": "npm run copy-qr-wasm",
         "build": "react-scripts build",
+        "prebuild:prod": "npm run copy-qr-wasm",
         "build:prod": "GENERATE_SOURCEMAP=false react-scripts build && tsc --project tsconfig.prod.json",
+        "prebuild:sentry": "npm run copy-qr-wasm",
         "build:sentry": "GENERATE_SOURCEMAP=true react-scripts build && tsc --project tsconfig.prod.json",
         "sentry:upload-sourcemaps": "sentry-cli sourcemaps inject build/static/js && sentry-cli sourcemaps upload --release \"marty-web-app@$npm_package_version\" --validate --strict --wait build/static/js",
         "sentry:remove-sourcemaps": "find build/static/js -type f -name '*.map' -delete",

package/dist-types/src/components/disposables/SwitchableCameraScanner/configure-barcode-detector.d.ts

@@ -0,0 +1,2 @@
+export declare const locateBarcodeDetectorFile: (path: string, prefix: string) => string;
+export declare const resetBarcodeDetectorModule: () => void;

package/dist-types/src/components/disposables/SwitchableCameraScanner/configure-barcode-detector.js

@@ -0,0 +1,11 @@
+import { setZXingModuleOverrides } from "@yudiel/react-qr-scanner";
+var qrScannerAssetUrl = "".concat((process.env.PUBLIC_URL || "").replace(/\/$/, ""), "/qr-scanner/zxing_reader.wasm");
+export var locateBarcodeDetectorFile = function (path, prefix) {
+    return path === "zxing_reader.wasm" ? qrScannerAssetUrl : "".concat(prefix).concat(path);
+};
+// A fresh overrides object also drops zxing-wasm's cached module promise,
+// allowing a retry after a transient initialization failure.
+export var resetBarcodeDetectorModule = function () {
+    return setZXingModuleOverrides({ locateFile: locateBarcodeDetectorFile });
+};
+resetBarcodeDetectorModule();

package/dist-types/src/components/disposables/SwitchableCameraScanner/index.d.ts

@@ -1,4 +1,5 @@
 import { type IScannerProps } from "@yudiel/react-qr-scanner";
+import "./configure-barcode-detector";
 type Props = IScannerProps;
 export default function SwitchableCameraScanner({ constraints, ...scannerProps }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist-types/src/components/disposables/SwitchableCameraScanner/index.js

@@ -26,6 +26,7 @@ import { useTranslation } from "react-i18next";
 import { MdCameraswitch } from "react-icons/md";
 import { Scanner } from "@yudiel/react-qr-scanner";
 import isPhoneApp from "../../../utils/phone-app-communication/is-phone-app";
+import "./configure-barcode-detector";
 import { acquireCameraStreamLifecycleGuard, addCameraStreamLifecycleOwner, } from "./camera-stream-lifecycle-guard";
 import styles from "./styles.module.css";
 function LifecycleGuardedScanner(props) {

package/dist-types/src/components/modals/LEDLightsOrQRVerificationModal/index.d.ts

@@ -1,5 +1,7 @@
 import { RaftTypeE } from "../../../types/raft";
-export declare const reportQRScannerError: (error: unknown) => void;
+export type QRScannerErrorDisposition = "permission-denied" | "detector-unavailable" | "unexpected";
+export declare const classifyQRScannerError: (error: unknown) => QRScannerErrorDisposition;
+export declare const reportQRScannerError: (error: unknown) => QRScannerErrorDisposition;
 type Props = {
     targetRaftType: RaftTypeE.COG;
     allowSwitchToMarty?: boolean;

package/dist-types/src/components/modals/LEDLightsOrQRVerificationModal/index.js

@@ -46,33 +46,65 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import modalState from "../../../state-observables/modal/ModalState";
 import styles from "./styles.module.css";
 import { HiOutlineLightBulb } from "react-icons/hi";
 import { MdQrCode } from "react-icons/md";
 import { ReactComponent as BluetoothSVG } from "../../../assets/configuration/bluetooth.svg";
 import { MAIN_BLUE } from "../../../styles/colors";
-//@ts-ignore
-import { centerText } from '@yudiel/react-qr-scanner';
+import { centerText, } from "@yudiel/react-qr-scanner";
 import { ConnManager } from "@robotical/roboticaljs";
 import { useTranslation } from "react-i18next";
 import SwitchableCameraScanner from "../../disposables/SwitchableCameraScanner";
+import { resetBarcodeDetectorModule } from "../../disposables/SwitchableCameraScanner/configure-barcode-detector";
 import Logger from "../../../services/logger/Logger";
 var SHOW_LOGS = true;
 var TAG = "LEDLightsOrQRVerificationModal";
+var getErrorProperty = function (error, property) {
+    if (error === null || typeof error !== "object") {
+        return undefined;
+    }
+    var errorRecord = error;
+    return property in errorRecord ? errorRecord[property] : undefined;
+};
+export var classifyQRScannerError = function (error) {
+    var cause = getErrorProperty(error, "cause");
+    var errorKind = getErrorProperty(error, "kind");
+    var errorName = getErrorProperty(error, "name");
+    var causeName = getErrorProperty(cause, "name");
+    var errorMessage = getErrorProperty(error, "message");
+    var causeMessage = getErrorProperty(cause, "message");
+    if (errorKind === "permission-denied" ||
+        errorName === "NotAllowedError" ||
+        errorName === "PermissionDeniedError" ||
+        causeName === "NotAllowedError" ||
+        causeName === "PermissionDeniedError") {
+        return "permission-denied";
+    }
+    if ((errorName === "NotSupportedError" || causeName === "NotSupportedError") &&
+        [errorMessage, causeMessage].some(function (message) {
+            return typeof message === "string" &&
+                message.includes("Barcode detection service unavailable");
+        })) {
+        return "detector-unavailable";
+    }
+    return "unexpected";
+};
 export var reportQRScannerError = function (error) {
-    var errorName = error !== null &&
-        typeof error === "object" &&
-        "name" in error &&
-        typeof error.name === "string"
-        ? error.name
-        : "";
-    if (errorName === "NotAllowedError" || errorName === "PermissionDeniedError") {
+    var disposition = classifyQRScannerError(error);
+    if (disposition === "permission-denied") {
         Logger.warn(SHOW_LOGS, TAG, "QR camera permission was not granted", error);
-        return;
+        return disposition;
+    }
+    var cause = getErrorProperty(error, "cause");
+    if (cause !== undefined) {
+        Logger.error(SHOW_LOGS, TAG, "QR scanner failed", cause, error);
     }
-    Logger.error(SHOW_LOGS, TAG, error);
+    else {
+        Logger.error(SHOW_LOGS, TAG, error);
+    }
+    return disposition;
 };
 export default function LEDLightsOrQRVerificationModal(_a) {
     var _this = this;
@@ -134,12 +166,19 @@ export default function LEDLightsOrQRVerificationModal(_a) {
                             var id = _a.id, title = _a.title, subtitle = _a.subtitle, icon = _a.icon;
                             return (_jsxs("button", __assign({ type: "button", className: qrSelected && id === 'qr' ? [styles.card, styles.qrselected].join(" ") : styles.card, onClick: function () { return handleSelect(id); }, "aria-label": title, "aria-pressed": id === "qr" ? qrSelected : false }, { children: [_jsx("div", __assign({ className: styles.icon }, { children: icon })), _jsx("h3", __assign({ className: styles.title }, { children: title })), _jsx("p", __assign({ className: styles.subtitle }, { children: subtitle }))] }), id));
                         }) })) :
-                        _jsx("div", __assign({ className: styles.cogNote }, { children: _jsxs("strong", { children: ["Don't forget to ", _jsx("span", __assign({ className: styles.cogNoteHighlight }, { children: "turn on" })), " your Cog!"] }) }))] }), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ type: "button", className: styles.connectButton, onClick: handleConnect }, { children: t('connection.qr_connect_button') })), _jsx("button", __assign({ type: "button", className: styles.cancelButton, onClick: function () { return modalState.closeModal(cancelResult); } }, { children: t('connection.cancel') }))] }))] })));
+                        _jsx("div", __assign({ className: styles.cogNote }, { children: _jsxs("strong", { children: ["Don't forget to ", _jsx("span", __assign({ className: styles.cogNoteHighlight }, { children: "turn on" })), " your Cog!"] }) }))] }), qrSelected && (_jsx(QRContent, { setSerialNo: setSerialNoFromQR, onScannerUnavailable: function () { return setQRSelected(false); } })), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ type: "button", className: styles.connectButton, onClick: handleConnect }, { children: t('connection.qr_connect_button') })), _jsx("button", __assign({ type: "button", className: styles.cancelButton, onClick: function () { return modalState.closeModal(cancelResult); } }, { children: t('connection.cancel') }))] }))] })));
 }
 function QRContent(_a) {
     var _this = this;
     var _b;
-    var setSerialNo = _a.setSerialNo;
+    var setSerialNo = _a.setSerialNo, onScannerUnavailable = _a.onScannerUnavailable;
+    var isActiveRef = useRef(true);
+    useEffect(function () {
+        isActiveRef.current = true;
+        return function () {
+            isActiveRef.current = false;
+        };
+    }, []);
     var onQrCodeFound = function (result) { return __awaiter(_this, void 0, void 0, function () {
         var rawValue, serialNo;
         var _a;
@@ -154,8 +193,19 @@ function QRContent(_a) {
             return [2 /*return*/];
         });
     }); };
+    var onScannerError = function (error) {
+        if (!isActiveRef.current) {
+            return;
+        }
+        if (reportQRScannerError(error) !== "detector-unavailable") {
+            return;
+        }
+        resetBarcodeDetectorModule();
+        onScannerUnavailable();
+        window.applicationManager.toaster.error("QR scanning is unavailable. Please use LED verification or select QR Code Verification to try again.", { autoClose: false });
+    };
     var isWebapp = ((_b = window.applicationManager.deviceInfo) === null || _b === void 0 ? void 0 : _b.manufacturer) === "Webapp";
-    return (_jsx("div", __assign({ className: styles.QRcontainer }, { children: _jsx("div", __assign({ className: styles.QRscannerContainer }, { children: _jsx(SwitchableCameraScanner, { styles: { container: { transform: isWebapp ? 'scaleX(-1)' : 'none' } }, onError: reportQRScannerError, formats: [
+    return (_jsx("div", __assign({ className: styles.QRcontainer }, { children: _jsx("div", __assign({ className: styles.QRscannerContainer }, { children: _jsx(SwitchableCameraScanner, { styles: { container: { transform: isWebapp ? 'scaleX(-1)' : 'none' } }, onError: onScannerError, formats: [
                     "qr_code",
                     "micro_qr_code",
                     "rm_qr_code",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/webapp-types",
-  "version": "3.21.12",
+  "version": "3.21.13",
   "description": "Type definitions for the Application Manager",
   "main": "dist/application-manager.d.ts",
   "types": "dist/application-manager.d.ts",