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

package/dist/form-elements/FormElementBarcodeScanner.js

@@ -1,307 +1,307 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import jsQR from 'jsqr';
-import OnLoading from '../components/renderer/OnLoading';
-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 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, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
-    const [error, setError] = React.useState(null);
-    const { onLookup } = useLookupNotification();
-    const handleScan = React.useCallback((newValue) => {
-        setIsDirty();
-        onChange(element, newValue);
-        stopBarcodeScanner();
-        onLookup(newValue);
-    }, [element, onChange, onLookup, setIsDirty, stopBarcodeScanner]);
-    const openBarcodeScanner = React.useCallback(() => {
-        if (window.cordova) {
-            setError(null);
-            // @ts-expect-error ???
-            window.cordova.plugins.barcodeScanner.scan(
-            // @ts-expect-error ???
-            (result) => {
-                if (!result.cancelled) {
-                    handleScan(result.text);
-                }
-            }, 
-            // @ts-expect-error ???
-            (error) => {
-                setError(new Error(`An error has occurred: "${error}". Please click "Cancel" below to try again. If the problem persists, please contact support.`));
-            }, {
-                showFlipCameraButton: true,
-                showTorchButton: true,
-            });
-        }
-        else {
-            startBarcodeScanner();
-        }
-    }, [handleScan, startBarcodeScanner]);
-    const text = typeof value === 'string' ? value : '';
-    return (React.createElement("div", { className: "cypress-barcode-scanner-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-barcode-scanner", element: element, id: id, required: element.required },
-            error && (React.createElement("figure", { className: "ob-figure" },
-                React.createElement("div", { className: "figure-content has-text-centered" },
-                    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,
-                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, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty }),
-                        React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                            React.createElement("i", { className: "material-icons is-size-5" }, "document_scanner"))),
-                    !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
-                        React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                    React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
-                React.createElement("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: element.readOnly, onClick: openBarcodeScanner }, "Scan Barcode"))),
-            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                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]);
-    React.useEffect(() => {
-        if (!videoElementRef.current) {
-            return;
-        }
-        const newCamera = new HTML5Camera(videoElementRef.current);
-        setCamera(newCamera);
-        return () => {
-            newCamera.close();
-        };
-    }, []);
-    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]);
-    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("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;
-        }
-    }
-}
+import * as React from 'react';
+import clsx from 'clsx';
+import jsQR from 'jsqr';
+import OnLoading from '../components/renderer/OnLoading';
+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 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, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
+    const [error, setError] = React.useState(null);
+    const { onLookup } = useLookupNotification();
+    const handleScan = React.useCallback((newValue) => {
+        setIsDirty();
+        onChange(element, newValue);
+        stopBarcodeScanner();
+        onLookup(newValue);
+    }, [element, onChange, onLookup, setIsDirty, stopBarcodeScanner]);
+    const openBarcodeScanner = React.useCallback(() => {
+        if (window.cordova) {
+            setError(null);
+            // @ts-expect-error ???
+            window.cordova.plugins.barcodeScanner.scan(
+            // @ts-expect-error ???
+            (result) => {
+                if (!result.cancelled) {
+                    handleScan(result.text);
+                }
+            }, 
+            // @ts-expect-error ???
+            (error) => {
+                setError(new Error(`An error has occurred: "${error}". Please click "Cancel" below to try again. If the problem persists, please contact support.`));
+            }, {
+                showFlipCameraButton: true,
+                showTorchButton: true,
+            });
+        }
+        else {
+            startBarcodeScanner();
+        }
+    }, [handleScan, startBarcodeScanner]);
+    const text = typeof value === 'string' ? value : '';
+    return (React.createElement("div", { className: "cypress-barcode-scanner-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-barcode-scanner", element: element, id: id, required: element.required },
+            error && (React.createElement("figure", { className: "ob-figure" },
+                React.createElement("div", { className: "figure-content has-text-centered" },
+                    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,
+                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, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty }),
+                        React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
+                            React.createElement("i", { className: "material-icons is-size-5" }, "document_scanner"))),
+                    !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
+                        React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
+                    React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
+                React.createElement("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: element.readOnly, onClick: openBarcodeScanner }, "Scan Barcode"))),
+            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                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]);
+    React.useEffect(() => {
+        if (!videoElementRef.current) {
+            return;
+        }
+        const newCamera = new HTML5Camera(videoElementRef.current);
+        setCamera(newCamera);
+        return () => {
+            newCamera.close();
+        };
+    }, []);
+    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]);
+    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("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;
+        }
+    }
+}
 //# sourceMappingURL=FormElementBarcodeScanner.js.map