npm - @oneblink/apps-react - Versions diffs - 5.3.1-beta.2 → 5.3.1-beta.3 - Mend

@oneblink/apps-react 5.3.1-beta.2 → 5.3.1-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/form-elements/FormElementBarcodeScanner.js +25 -238
package/dist/form-elements/FormElementBarcodeScanner.js.map +1 -1
package/package.json +2 -3

package/dist/form-elements/FormElementBarcodeScanner.js CHANGED Viewed

@@ -1,18 +1,10 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import jsQR from 'jsqr';
-import OnLoading from '../components/renderer/OnLoading';
+import { Html5QrcodeScanner } from 'html5-qrcode';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import quaggaReader from '../services/barcode-readers/quagger.js';
 import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import { Sentry } from '@oneblink/apps';
 import useLookupNotification, { LookupNotificationContext, } from '../hooks/useLookupNotification';
-const MS_BETWEEN_IMAGE_PROCESSING = 10;
-const fadedSquareWidthInPixels = 200;
-const fadedSquareHeightInPixels = 150;
-const redLineHeightInPixels = 1;
 function FormElementBarcodeScanner({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
     const [error, setError] = React.useState(null);
@@ -58,7 +50,7 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                     React.createElement("div", null,
                         React.createElement("h4", { className: "title is-4" }, "Whoops..."),
                         React.createElement("p", null, error.message))))),
-            isCameraOpen ? (React.createElement(BarcodeScanner, { element: element, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
+            isCameraOpen ? (React.createElement(BarcodeScanner, { id: `${id}==BARCODE_SCANNER`, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
                 React.createElement("div", { className: "field has-addons" },
                     React.createElement("div", { className: "control is-expanded has-icons-right" },
                         React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-barcode-scanner-control has-margin-bottom-8", value: text, onChange: (e) => onChange(element, {
@@ -74,239 +66,34 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }
 export default React.memo(FormElementBarcodeScanner);
-function BarcodeScanner({ element, onScan, onClose }) {
-    const videoElementRef = React.useRef(null);
-    const figureElementRef = React.useRef(null);
-    const [{ isLoading = false, selectedDeviceId, error }, setState] = React.useState({
-        isLoading: true,
-        selectedDeviceId: undefined,
-        error: undefined,
-    });
-    const [camera, setCamera] = React.useState(null);
-    const setError = React.useCallback((error) => {
-        setState({
-            error,
-            isLoading: false,
-            selectedDeviceId: undefined,
-        });
-    }, []);
-    // Create timeout using $timeout outside of the scan function so
-    // so that we can cancel it when navigating away from screen
-    const scanImageForBarcode = React.useCallback((videoElement, waitInMS, options, checkStop) => {
-        const restrictedBarcodeTypes = element.restrictedBarcodeTypes || [];
-        // Using $timeout here instead of $interval as we dont know
-        // exactly how long each processing of the image will take.
-        setTimeout(async () => {
-            if (checkStop())
-                return;
-            const canvasElement = document.createElement('canvas');
-            canvasElement.width = options.sourceWidth;
-            canvasElement.height = options.sourceHeight;
-            const canvasContext = canvasElement.getContext('2d');
-            if (canvasContext) {
-                canvasContext.drawImage(videoElement, options.sourceX, options.sourceY, canvasElement.width, canvasElement.height, 0, 0, canvasElement.width, canvasElement.height);
-                if (!element.restrictBarcodeTypes ||
-                    (element.restrictedBarcodeTypes || []).indexOf('qr_reader') > -1) {
-                    const imageData = canvasContext.getImageData(0, 0, canvasElement.width, canvasElement.height);
-                    const code = jsQR(imageData.data, imageData.width, imageData.height, {
-                        inversionAttempts: 'dontInvert',
-                    });
-                    if (code) {
-                        return onScan(code.data);
-                    }
-                }
-            }
-            if (!element.restrictBarcodeTypes ||
-                !(restrictedBarcodeTypes.length === 1 &&
-                    restrictedBarcodeTypes[0] === 'qr_reader')) {
-                const base64Image = canvasElement.toDataURL('image/png');
-                const quaggaResult = await quaggaReader(base64Image, restrictedBarcodeTypes);
-                if (quaggaResult) {
-                    return onScan(quaggaResult);
-                }
-            }
-            if (checkStop())
-                return;
-            scanImageForBarcode(videoElement, MS_BETWEEN_IMAGE_PROCESSING, options, checkStop);
-        }, waitInMS);
-    }, [element.restrictBarcodeTypes, element.restrictedBarcodeTypes, onScan]);
-    const switchCamera = React.useCallback(() => {
-        if (!camera) {
-            return;
-        }
-        // We will just be rotating between the available camera.
-        const nextDeviceIndex = camera.availableDevices.findIndex((mediaDeviceInfo) => mediaDeviceInfo.deviceId === camera.activeDeviceId) + 1;
-        const nextDevice = camera.availableDevices[nextDeviceIndex] || camera.availableDevices[0];
-        setState({
-            error: undefined,
-            isLoading: true,
-            selectedDeviceId: nextDevice.deviceId,
-        });
-    }, [camera]);
+function BarcodeScanner({ id, onScan, onClose }) {
+    const [html5QrcodeScanner, setHtml5QrcodeScanner] = React.useState(null);
     React.useEffect(() => {
-        if (!videoElementRef.current) {
-            return;
-        }
-        const newCamera = new HTML5Camera(videoElementRef.current);
-        setCamera(newCamera);
+        const verbose = true;
+        const newHtml5QrcodeScanner = new Html5QrcodeScanner(id, {
+            fps: 10,
+            qrbox: {
+                width: 250,
+                height: 250,
+            },
+        }, verbose);
+        setHtml5QrcodeScanner(newHtml5QrcodeScanner);
         return () => {
-            newCamera.close();
+            newHtml5QrcodeScanner.clear();
         };
-    }, []);
+    }, [id]);
     React.useEffect(() => {
-        if (!camera ||
-            error ||
-            // If attempting to open the device that is currently open,
-            // we will not attempt to open again.
-            (selectedDeviceId && camera.activeDeviceId === selectedDeviceId)) {
-            return;
-        }
-        let ignore = false;
-        (async () => {
-            try {
-                const videoElement = videoElementRef.current;
-                const figureElement = figureElementRef.current;
-                if (!videoElement || !figureElement) {
-                    return;
-                }
-                console.log('Opening camera with:', selectedDeviceId || 'UNKNOWN');
-                await camera.open(selectedDeviceId);
-                if (ignore) {
-                    return;
-                }
-                setState({
-                    error: undefined,
-                    isLoading: false,
-                    selectedDeviceId,
-                });
-                // @ts-expect-error ???
-                const fadedSquareElement = figureElement.getElementsByClassName('ob-barcode-scanner__square')[0];
-                // @ts-expect-error ???
-                const redLineElement = figureElement.getElementsByClassName('ob-barcode-scanner__line')[0];
-                console.log('videoElement Width pixels', videoElement.clientWidth);
-                console.log('videoElement Height pixels', videoElement.clientHeight);
-                console.log('videoElement Width', videoElement.videoWidth);
-                console.log('videoElement Height', videoElement.videoHeight);
-                // Faded Square needs its values set in pixels
-                const fadedSquareLeftInPixels = (videoElement.clientWidth - fadedSquareWidthInPixels) / 2;
-                console.log('fadedSquareLeftInPixels', fadedSquareLeftInPixels);
-                const fadedSquareTopInPixels = (videoElement.clientHeight - fadedSquareHeightInPixels) / 2;
-                console.log('fadedSquareTopInPixels', fadedSquareTopInPixels);
-                fadedSquareElement.style.borderBottom = `${fadedSquareTopInPixels}px`;
-                fadedSquareElement.style.borderTop = `${fadedSquareTopInPixels}px`;
-                fadedSquareElement.style.borderLeft = `${fadedSquareLeftInPixels}px`;
-                fadedSquareElement.style.borderRight = `${fadedSquareLeftInPixels}px`;
-                fadedSquareElement.style.borderColor = 'rgba(0, 0, 0, 0.25)';
-                fadedSquareElement.style.borderStyle = 'solid';
-                redLineElement.style.height = `${redLineHeightInPixels}px`;
-                redLineElement.style.top = `${(videoElement.clientHeight - redLineHeightInPixels) / 2}px`;
-                redLineElement.style.left = `${fadedSquareLeftInPixels}px`;
-                redLineElement.style.right = `${fadedSquareLeftInPixels}px`;
-                // Need to calculate the actual width, which is not in pixels
-                const ratio = videoElement.videoWidth / videoElement.clientWidth;
-                console.log('pixel to video Ratio', ratio);
-                const left = ratio * fadedSquareLeftInPixels;
-                console.log('left in video measurement', left);
-                const top = ratio * fadedSquareTopInPixels;
-                console.log('top in video measurement', top);
-                const fadedSquareWidth = fadedSquareWidthInPixels * ratio;
-                console.log('red square in video measurement', fadedSquareWidth);
-                // Wait a little before scanning the first image
-                // to prevent image processing staring before
-                // camera is ready.
-                scanImageForBarcode(videoElement, 250, {
-                    sourceX: left,
-                    sourceY: top,
-                    sourceWidth: fadedSquareWidth,
-                    sourceHeight: fadedSquareWidth,
-                }, () => ignore);
-            }
-            catch (error) {
-                if (ignore) {
-                    return;
-                }
-                console.warn('Error while attempting to open camera', error);
-                Sentry.captureException(error);
-                switch (error.name) {
-                    case 'NotSupportedError': {
-                        setError(new Error('Your browser does not support accessing your camera. Please click "Cancel" below and type in the barcode value manually.'));
-                        break;
-                    }
-                    case 'NotAllowedError': {
-                        setError(new Error('Cannot scan for barcodes without granting the application access to the camera. Please click "Cancel" below to try again.'));
-                        break;
-                    }
-                    default: {
-                        setError(new Error('An unknown error has occurred, please click "Cancel" below to try again. If the problem persists, please contact support.'));
-                    }
-                }
-            }
-        })();
-        return () => {
-            ignore = true;
-        };
-    }, [camera, error, scanImageForBarcode, selectedDeviceId, setError]);
+        html5QrcodeScanner === null || html5QrcodeScanner === void 0 ? void 0 : html5QrcodeScanner.render(function onScanSuccess(decodedText, decodedResult) {
+            console.log(`Code matched = ${decodedText}`, decodedResult);
+            onScan(decodedText);
+        }, function onScanFailure() {
+            // do nothing and keep scanning
+        });
+    }, [html5QrcodeScanner, onScan]);
     return (React.createElement("div", null,
-        React.createElement("figure", { className: "ob-figure", ref: figureElementRef },
-            React.createElement("div", { className: "figure-content has-text-centered" },
-                isLoading && React.createElement(OnLoading, { small: true }),
-                !!error && (React.createElement("div", null,
-                    React.createElement("h4", { className: "title is-4" }, "Whoops..."),
-                    React.createElement("p", null, error.message))),
-                React.createElement("div", { className: clsx('is-relative', {
-                        'is-hidden': isLoading || error,
-                    }) },
-                    React.createElement("div", { className: "ob-barcode-scanner__square" }),
-                    React.createElement("div", { className: "ob-barcode-scanner__line" }),
-                    React.createElement("video", { ref: videoElementRef, autoPlay: true, playsInline: true, className: "ob-barcode-scanner__video" })))),
+        React.createElement("figure", { className: "ob-figure" },
+            React.createElement("div", { id: id })),
         React.createElement("div", { className: "buttons ob-buttons" },
-            React.createElement("button", { type: "button", className: "button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button", onClick: onClose }, "Cancel"),
-            ((camera === null || camera === void 0 ? void 0 : camera.availableDevices.length) || 1) > 1 && (React.createElement("button", { type: "button", className: "button ob-button ob-button__switch-camera is-primary cypress-switch-camera-button", onClick: switchCamera }, "Switch Camera")))));
-}
-class HTML5Camera {
-    constructor(htmlVideoElement) {
-        this.htmlVideoElement = htmlVideoElement;
-        this.availableDevices = [];
-        this.mediaStream = undefined;
-    }
-    get activeDeviceId() {
-        var _a;
-        if (this.mediaStream) {
-            const [activeMediaStreamTrack] = this.mediaStream.getTracks();
-            return (_a = activeMediaStreamTrack === null || activeMediaStreamTrack === void 0 ? void 0 : activeMediaStreamTrack.getSettings()) === null || _a === void 0 ? void 0 : _a.deviceId;
-        }
-    }
-    async open(deviceId) {
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-            const error = new Error();
-            error.name = 'NotSupportedError';
-            throw error;
-        }
-        this.close();
-        const constraints = {
-            video: {
-                facingMode: deviceId ? undefined : 'environment',
-                deviceId: deviceId ? { exact: deviceId } : undefined,
-            },
-        };
-        const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
-        this.mediaStream = mediaStream;
-        this.htmlVideoElement.srcObject = mediaStream;
-        if (!this.availableDevices.length) {
-            const availableDevices = await navigator.mediaDevices.enumerateDevices();
-            this.availableDevices = availableDevices.filter((mediaDeviceInfo) => mediaDeviceInfo.kind === 'videoinput' && !!mediaDeviceInfo.deviceId);
-        }
-        await new Promise((resolve) => this.htmlVideoElement.addEventListener('canplay', resolve, {
-            once: true,
-        }));
-    }
-    close() {
-        if (this.mediaStream) {
-            this.mediaStream.getTracks().forEach((track) => {
-                track.stop();
-            });
-            this.mediaStream = undefined;
-        }
-    }
+            React.createElement("button", { type: "button", className: "button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button", onClick: onClose }, "Cancel"))));
 }
 //# sourceMappingURL=FormElementBarcodeScanner.js.map

package/dist/form-elements/FormElementBarcodeScanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport jsQR from 'jsqr'\n\nimport OnLoading from '../components/renderer/OnLoading'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport quaggaReader from '../services/barcode-readers/quagger.js'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\nimport useLookupNotification, {\n LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\nconst MS_BETWEEN_IMAGE_PROCESSING = 10\nconst fadedSquareWidthInPixels = 200\nconst fadedSquareHeightInPixels = 150\nconst redLineHeightInPixels = 1\n\ntype Props = {\n id: string\n element: FormTypes.BarcodeScannerElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n useBooleanState(false)\n const [error, setError] = React.useState<Error \| null>(null)\n const { onLookup } = useLookupNotification(value)\n const handleScan = React.useCallback(\n (newValue: string \| undefined) => {\n setIsDirty()\n onChange(element, {\n value: newValue,\n })\n stopBarcodeScanner()\n onLookup()\n },\n [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n )\n\n const openBarcodeScanner = React.useCallback(() => {\n if (window.cordova) {\n setError(null)\n // @ts-expect-error ???\n window.cordova.plugins.barcodeScanner.scan(\n // @ts-expect-error ???\n (result) => {\n if (!result.cancelled) {\n handleScan(result.text)\n }\n },\n // @ts-expect-error ???\n (error) => {\n setError(\n new Error(\n `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n ),\n )\n },\n {\n showFlipCameraButton: true,\n showTorchButton: true,\n },\n )\n } else {\n startBarcodeScanner()\n }\n }, [handleScan, startBarcodeScanner])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n const text = typeof value === 'string' ? value : ''\n return (\n <div className=\"cypress-barcode-scanner-element\">\n <FormElementLabelContainer\n className=\"ob-barcode-scanner\"\n element={element}\n id={id}\n required={element.required}\n >\n {error && (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <div>\n <h4 className=\"title is-4\">Whoops...</h4>\n <p>{error.message}</p>\n </div>\n </div>\n </figure>\n )}\n\n {isCameraOpen ? (\n <BarcodeScanner\n element={element}\n onScan={handleScan}\n onClose={stopBarcodeScanner}\n />\n ) : (\n <div>\n <div className=\"field has-addons\">\n <div className=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={element.readOnly}\n onBlur={setIsDirty}\n />\n <span className=\"ob-input-icon icon is-small is-right\">\n <i className=\"material-icons is-size-5\">document_scanner</i>\n </span>\n </div>\n {!!element.readOnly && !!value && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </div>\n\n <button\n type=\"button\"\n className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n disabled={element.readOnly}\n onClick={openBarcodeScanner}\n >\n Scan Barcode\n </button>\n </div>\n )}\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n element: FormTypes.BarcodeScannerElement\n onScan: (barcode: string \| undefined) => void\n onClose: () => void\n}\n\nfunction BarcodeScanner({ element, onScan, onClose }: BarcodeScannerProps) {\n const videoElementRef = React.useRef<HTMLVideoElement>(null)\n const figureElementRef = React.useRef<HTMLDivElement>(null)\n\n const [{ isLoading = false, selectedDeviceId, error }, setState] =\n React.useState<{\n isLoading: boolean\n selectedDeviceId: string \| undefined\n error: Error \| undefined\n }>({\n isLoading: true,\n selectedDeviceId: undefined,\n error: undefined,\n })\n const [camera, setCamera] = React.useState<HTML5Camera \| null>(null)\n\n const setError = React.useCallback((error: Error) => {\n setState({\n error,\n isLoading: false,\n selectedDeviceId: undefined,\n })\n }, [])\n\n // Create timeout using $timeout outside of the scan function so\n // so that we can cancel it when navigating away from screen\n const scanImageForBarcode = React.useCallback(\n (\n videoElement: HTMLVideoElement,\n waitInMS: number,\n options: {\n sourceX: number\n sourceY: number\n sourceWidth: number\n sourceHeight: number\n },\n checkStop: () => boolean,\n ) => {\n const restrictedBarcodeTypes = element.restrictedBarcodeTypes \|\| []\n // Using $timeout here instead of $interval as we dont know\n // exactly how long each processing of the image will take.\n setTimeout(async () => {\n if (checkStop()) return\n const canvasElement = document.createElement('canvas')\n\n canvasElement.width = options.sourceWidth\n canvasElement.height = options.sourceHeight\n\n const canvasContext = canvasElement.getContext('2d')\n if (canvasContext) {\n canvasContext.drawImage(\n videoElement,\n options.sourceX,\n options.sourceY,\n canvasElement.width,\n canvasElement.height,\n 0,\n 0,\n canvasElement.width,\n canvasElement.height,\n )\n\n if (\n !element.restrictBarcodeTypes \|\|\n (element.restrictedBarcodeTypes \|\| []).indexOf('qr_reader') > -1\n ) {\n const imageData = canvasContext.getImageData(\n 0,\n 0,\n canvasElement.width,\n canvasElement.height,\n )\n\n const code = jsQR(\n imageData.data,\n imageData.width,\n imageData.height,\n {\n inversionAttempts: 'dontInvert',\n },\n )\n\n if (code) {\n return onScan(code.data)\n }\n }\n }\n\n if (\n !element.restrictBarcodeTypes \|\|\n !(\n restrictedBarcodeTypes.length === 1 &&\n restrictedBarcodeTypes[0] === 'qr_reader'\n )\n ) {\n const base64Image = canvasElement.toDataURL('image/png')\n const quaggaResult = await quaggaReader(\n base64Image,\n restrictedBarcodeTypes,\n )\n if (quaggaResult) {\n return onScan(quaggaResult)\n }\n }\n\n if (checkStop()) return\n\n scanImageForBarcode(\n videoElement,\n MS_BETWEEN_IMAGE_PROCESSING,\n options,\n checkStop,\n )\n }, waitInMS)\n },\n [element.restrictBarcodeTypes, element.restrictedBarcodeTypes, onScan],\n )\n\n const switchCamera = React.useCallback(() => {\n if (!camera) {\n return\n }\n\n // We will just be rotating between the available camera.\n const nextDeviceIndex =\n camera.availableDevices.findIndex(\n (mediaDeviceInfo) => mediaDeviceInfo.deviceId === camera.activeDeviceId,\n ) + 1\n const nextDevice =\n camera.availableDevices[nextDeviceIndex] \|\| camera.availableDevices[0]\n setState({\n error: undefined,\n isLoading: true,\n selectedDeviceId: nextDevice.deviceId,\n })\n }, [camera])\n\n React.useEffect(() => {\n if (!videoElementRef.current) {\n return\n }\n\n const newCamera = new HTML5Camera(videoElementRef.current)\n setCamera(newCamera)\n\n return () => {\n newCamera.close()\n }\n }, [])\n\n React.useEffect(() => {\n if (\n !camera \|\|\n error \|\|\n // If attempting to open the device that is currently open,\n // we will not attempt to open again.\n (selectedDeviceId && camera.activeDeviceId === selectedDeviceId)\n ) {\n return\n }\n\n let ignore = false\n\n ;(async () => {\n try {\n const videoElement = videoElementRef.current\n const figureElement = figureElementRef.current\n if (!videoElement \|\| !figureElement) {\n return\n }\n\n console.log('Opening camera with:', selectedDeviceId \|\| 'UNKNOWN')\n await camera.open(selectedDeviceId)\n\n if (ignore) {\n return\n }\n\n setState({\n error: undefined,\n isLoading: false,\n selectedDeviceId,\n })\n\n // @ts-expect-error ???\n const fadedSquareElement: HTMLDivElement =\n figureElement.getElementsByClassName('ob-barcode-scanner__square')[0]\n // @ts-expect-error ???\n const redLineElement: HTMLDivElement =\n figureElement.getElementsByClassName('ob-barcode-scanner__line')[0]\n console.log('videoElement Width pixels', videoElement.clientWidth)\n console.log('videoElement Height pixels', videoElement.clientHeight)\n console.log('videoElement Width', videoElement.videoWidth)\n console.log('videoElement Height', videoElement.videoHeight)\n\n // Faded Square needs its values set in pixels\n const fadedSquareLeftInPixels =\n (videoElement.clientWidth - fadedSquareWidthInPixels) / 2\n console.log('fadedSquareLeftInPixels', fadedSquareLeftInPixels)\n const fadedSquareTopInPixels =\n (videoElement.clientHeight - fadedSquareHeightInPixels) / 2\n console.log('fadedSquareTopInPixels', fadedSquareTopInPixels)\n\n fadedSquareElement.style.borderBottom = `${fadedSquareTopInPixels}px`\n fadedSquareElement.style.borderTop = `${fadedSquareTopInPixels}px`\n fadedSquareElement.style.borderLeft = `${fadedSquareLeftInPixels}px`\n fadedSquareElement.style.borderRight = `${fadedSquareLeftInPixels}px`\n fadedSquareElement.style.borderColor = 'rgba(0, 0, 0, 0.25)'\n fadedSquareElement.style.borderStyle = 'solid'\n\n redLineElement.style.height = `${redLineHeightInPixels}px`\n redLineElement.style.top = `${\n (videoElement.clientHeight - redLineHeightInPixels) / 2\n }px`\n redLineElement.style.left = `${fadedSquareLeftInPixels}px`\n redLineElement.style.right = `${fadedSquareLeftInPixels}px`\n\n // Need to calculate the actual width, which is not in pixels\n const ratio = videoElement.videoWidth / videoElement.clientWidth\n console.log('pixel to video Ratio', ratio)\n\n const left = ratio * fadedSquareLeftInPixels\n console.log('left in video measurement', left)\n const top = ratio * fadedSquareTopInPixels\n console.log('top in video measurement', top)\n\n const fadedSquareWidth = fadedSquareWidthInPixels * ratio\n console.log('red square in video measurement', fadedSquareWidth)\n\n // Wait a little before scanning the first image\n // to prevent image processing staring before\n // camera is ready.\n scanImageForBarcode(\n videoElement,\n 250,\n {\n sourceX: left,\n sourceY: top,\n sourceWidth: fadedSquareWidth,\n sourceHeight: fadedSquareWidth,\n },\n () => ignore,\n )\n } catch (error) {\n if (ignore) {\n return\n }\n console.warn('Error while attempting to open camera', error)\n Sentry.captureException(error)\n switch ((error as Error).name) {\n case 'NotSupportedError': {\n setError(\n new Error(\n 'Your browser does not support accessing your camera. Please click \"Cancel\" below and type in the barcode value manually.',\n ),\n )\n break\n }\n case 'NotAllowedError': {\n setError(\n new Error(\n 'Cannot scan for barcodes without granting the application access to the camera. Please click \"Cancel\" below to try again.',\n ),\n )\n break\n }\n default: {\n setError(\n new Error(\n 'An unknown error has occurred, please click \"Cancel\" below to try again. If the problem persists, please contact support.',\n ),\n )\n }\n }\n }\n })()\n\n return () => {\n ignore = true\n }\n }, [camera, error, scanImageForBarcode, selectedDeviceId, setError])\n\n return (\n <div>\n <figure className=\"ob-figure\" ref={figureElementRef}>\n <div className=\"figure-content has-text-centered\">\n {isLoading && <OnLoading small />}\n\n {!!error && (\n <div>\n <h4 className=\"title is-4\">Whoops...</h4>\n <p>{error.message}</p>\n </div>\n )}\n\n <div\n className={clsx('is-relative', {\n 'is-hidden': isLoading \|\| error,\n })}\n >\n <div className=\"ob-barcode-scanner__square\"></div>\n <div className=\"ob-barcode-scanner__line\"></div>\n <video\n ref={videoElementRef}\n autoPlay\n playsInline\n className=\"ob-barcode-scanner__video\"\n />\n </div>\n </div>\n </figure>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n onClick={onClose}\n >\n Cancel\n </button>\n {(camera?.availableDevices.length \|\| 1) > 1 && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__switch-camera is-primary cypress-switch-camera-button\"\n onClick={switchCamera}\n >\n Switch Camera\n </button>\n )}\n </div>\n </div>\n )\n}\n\nclass HTML5Camera {\n availableDevices: MediaDeviceInfo[]\n htmlVideoElement: HTMLVideoElement\n mediaStream: MediaStream \| undefined\n\n constructor(htmlVideoElement: HTMLVideoElement) {\n this.htmlVideoElement = htmlVideoElement\n this.availableDevices = []\n this.mediaStream = undefined\n }\n\n get activeDeviceId(): string \| undefined {\n if (this.mediaStream) {\n const [activeMediaStreamTrack] = this.mediaStream.getTracks()\n return activeMediaStreamTrack?.getSettings()?.deviceId\n }\n }\n\n async open(deviceId?: string) {\n if (!navigator.mediaDevices \|\| !navigator.mediaDevices.getUserMedia) {\n const error = new Error()\n error.name = 'NotSupportedError'\n throw error\n }\n\n this.close()\n\n const constraints = {\n video: {\n facingMode: deviceId ? undefined : 'environment',\n deviceId: deviceId ? { exact: deviceId } : undefined,\n },\n }\n const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)\n this.mediaStream = mediaStream\n this.htmlVideoElement.srcObject = mediaStream\n\n if (!this.availableDevices.length) {\n const availableDevices = await navigator.mediaDevices.enumerateDevices()\n this.availableDevices = availableDevices.filter(\n (mediaDeviceInfo) =>\n mediaDeviceInfo.kind === 'videoinput' && !!mediaDeviceInfo.deviceId,\n )\n }\n\n await new Promise((resolve) =>\n this.htmlVideoElement.addEventListener('canplay', resolve, {\n once: true,\n }),\n )\n }\n\n close() {\n if (this.mediaStream) {\n this.mediaStream.getTracks().forEach((track) => {\n track.stop()\n })\n this.mediaStream = undefined\n }\n }\n}\n"]}
1	+ {"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Html5QrcodeScanner } from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n id: string\n element: FormTypes.BarcodeScannerElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n useBooleanState(false)\n const [error, setError] = React.useState<Error \| null>(null)\n const { onLookup } = useLookupNotification(value)\n const handleScan = React.useCallback(\n (newValue: string \| undefined) => {\n setIsDirty()\n onChange(element, {\n value: newValue,\n })\n stopBarcodeScanner()\n onLookup()\n },\n [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n )\n\n const openBarcodeScanner = React.useCallback(() => {\n if (window.cordova) {\n setError(null)\n // @ts-expect-error ???\n window.cordova.plugins.barcodeScanner.scan(\n // @ts-expect-error ???\n (result) => {\n if (!result.cancelled) {\n handleScan(result.text)\n }\n },\n // @ts-expect-error ???\n (error) => {\n setError(\n new Error(\n `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n ),\n )\n },\n {\n showFlipCameraButton: true,\n showTorchButton: true,\n },\n )\n } else {\n startBarcodeScanner()\n }\n }, [handleScan, startBarcodeScanner])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n const text = typeof value === 'string' ? value : ''\n return (\n <div className=\"cypress-barcode-scanner-element\">\n <FormElementLabelContainer\n className=\"ob-barcode-scanner\"\n element={element}\n id={id}\n required={element.required}\n >\n {error && (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <div>\n <h4 className=\"title is-4\">Whoops...</h4>\n <p>{error.message}</p>\n </div>\n </div>\n </figure>\n )}\n\n {isCameraOpen ? (\n <BarcodeScanner\n id={`${id}==BARCODE_SCANNER`}\n onScan={handleScan}\n onClose={stopBarcodeScanner}\n />\n ) : (\n <div>\n <div className=\"field has-addons\">\n <div className=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\n })\n }\n required={element.required}\n disabled={element.readOnly}\n onBlur={setIsDirty}\n />\n <span className=\"ob-input-icon icon is-small is-right\">\n <i className=\"material-icons is-size-5\">document_scanner</i>\n </span>\n </div>\n {!!element.readOnly && !!value && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </div>\n\n <button\n type=\"button\"\n className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n disabled={element.readOnly}\n onClick={openBarcodeScanner}\n >\n Scan Barcode\n </button>\n </div>\n )}\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n id: string\n onScan: (barcode: string \| undefined) => void\n onClose: () => void\n}\n\nfunction BarcodeScanner({ id, onScan, onClose }: BarcodeScannerProps) {\n const [html5QrcodeScanner, setHtml5QrcodeScanner] =\n React.useState<Html5QrcodeScanner \| null>(null)\n\n React.useEffect(() => {\n const verbose = true\n const newHtml5QrcodeScanner = new Html5QrcodeScanner(\n id,\n {\n fps: 10,\n qrbox: {\n width: 250,\n height: 250,\n },\n },\n verbose,\n )\n setHtml5QrcodeScanner(newHtml5QrcodeScanner)\n return () => {\n newHtml5QrcodeScanner.clear()\n }\n }, [id])\n\n React.useEffect(() => {\n html5QrcodeScanner?.render(\n function onScanSuccess(decodedText, decodedResult) {\n console.log(`Code matched = ${decodedText}`, decodedResult)\n onScan(decodedText)\n },\n function onScanFailure() {\n // do nothing and keep scanning\n },\n )\n }, [html5QrcodeScanner, onScan])\n\n return (\n <div>\n <figure className=\"ob-figure\">\n <div id={id} />\n </figure>\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n onClick={onClose}\n >\n Cancel\n </button>\n </div>\n </div>\n )\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "5.3.1-beta.2",
+  "version": "5.3.1-beta.3",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -24,12 +24,11 @@
     "escape-string-regexp": "^5.0.0",
     "file-saver": "^2.0.5",
     "flatpickr": "^4.6.13",
-    "jsqr": "^1.4.0",
+    "html5-qrcode": "^2.3.8",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "morph-expressions": "^1.1.1",
-    "quagga": "^0.12.1",
     "query-string": "^8.1.0",
     "react-google-recaptcha": "^3.1.0",
     "react-input-mask": "^2.0.4",