/** * Copyright (c) Microblink Ltd. All rights reserved. */ import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State } from '@stencil/core'; import { CameraEntry, CameraExperienceState, Code, EventReady, EventScanError, EventScanSuccess, FeedbackCode, FeedbackMessage, ImageRecognitionConfiguration, ImageRecognitionType, RecognitionEvent, RecognitionStatus, VideoRecognitionConfiguration, SDKError } from '../../../utils/data-structures'; import * as ErrorTypes from '../../../utils/error-structures'; import { CheckConclusion, SdkService } from '../../../utils/sdk.service'; import * as PhotoPaySDK from '../../../../../es/photopay-sdk'; import { TranslationService } from '../../../utils/translation.service'; import * as DeviceHelpers from '../../../utils/device.helpers'; import * as GenericHelpers from '../../../utils/generic.helpers'; import * as Utils from './mb-component.utils'; @Component({ tag: 'mb-component', styleUrl: 'mb-component.scss', shadow: true, }) export class MbComponent { private screens: { [key: string]: HTMLMbScreenElement | null } = { action: null, error: null, loading: null, processing: null } private overlays: { [key: string]: HTMLMbOverlayElement | null } = { camera: null, draganddrop: null, processing: null, modal: null } private cameraExperience!: HTMLMbCameraExperienceElement; private dragAndDropZone!: HTMLDivElement; private errorMessage!: HTMLParagraphElement; private scanFromCameraButton!: HTMLMbButtonElement; private scanFromImageButton!: HTMLMbButtonElement; private scanFromImageInput!: HTMLInputElement; private videoElement!: HTMLVideoElement; private licenseExperienceModal!: HTMLMbModalElement; private scanReset: boolean = false; private detectionSuccessLock = false; private isBackSide = false; private initialBodyOverflowValue: string; private cameraChangeInProgress: boolean = false; private blocked: boolean = false; private combinedGalleryOpened = false; private imageRecognitionType: ImageRecognitionType; private imageBoxFirst: HTMLMbImageBoxElement; private imageBoxSecond: HTMLMbImageBoxElement; @State() galleryExperienceModalErrorWindowVisible: boolean = false; @State() apiProcessStatusVisible: boolean = false; @State() apiProcessStatusState: 'ERROR' | 'LOADING' | 'NONE' | 'SUCCESS' = 'NONE'; /** * Host element as variable for manipulation (CSS in this case) */ @Element() hostEl: HTMLElement; /** * See description in public component. */ @Prop() allowHelloMessage: boolean = true; /** * See description in public component. */ @Prop() engineLocation: string = ''; /** * See description in public component. */ @Prop() licenseKey: string; /** * See description in public component. */ @Prop({ mutable: true }) wasmType: string | null; /** * See description in public component. */ @Prop({ mutable: true }) recognizers: Array; /** * See description in public component. */ @Prop({ mutable: true }) recognizerOptions: { [key: string]: any }; /** * See description in public component. */ @Prop() recognitionTimeout: number; /** * See description in public component. */ @Prop() includeSuccessFrame: boolean = false; /** * See description in public component. */ @Prop() enableDrag: boolean = true; /** * See description in public component. */ @Prop() hideLoadingAndErrorUi: boolean = false; /** * See description in public component. */ @Prop() rtl: boolean = false; /** * See description in public component. */ @Prop() scanFromCamera: boolean = true; /** * See description in public component. */ @Prop() scanFromImage: boolean = true; /** * See description in public component. */ @Prop() galleryOverlayType: 'FULLSCREEN' | 'INLINE' = 'INLINE'; /** * See description in public component. */ @Prop() galleryDropType: 'FULLSCREEN' | 'INLINE' = 'INLINE'; /** * See description in public component. */ @Prop() showActionLabels: boolean = false; /** * See description in public component. */ @Prop() showModalWindows: boolean = false; /** * See description in public component. */ @Prop() showCameraFeedbackBarcodeMessage: boolean = false; /** * See description in public component. */ @Prop() showScanningLine: boolean = false; /** * See description in public component. */ @Prop() iconCameraDefault: string = 'data:image/svg+xml;utf8,'; /** * See description in public component. */ @Prop() iconCameraActive: string = 'data:image/svg+xml;utf8,'; /** * See description in public component. */ @Prop() iconGalleryDefault: string = 'data:image/svg+xml;utf8,'; /** * See description in public component. */ @Prop() iconGalleryActive: string = 'data:image/svg+xml;utf8,'; /** * See description in public component. */ @Prop() iconInvalidFormat: string = 'data:image/svg+xml;utf8,'; /** * See description in public component. */ @Prop() iconSpinnerScreenLoading: string; /** * See description in public component. */ @Prop() iconSpinnerFromGalleryExperience: string; /** * See description in public component. */ @Prop() iconGalleryScanningCompleted: string; /** * Instance of SdkService passed from root component. */ @Prop() sdkService: SdkService; /** * Instance of TranslationService passed from root component. */ @Prop() translationService: TranslationService; /** * Camera device ID passed from root component. */ @Prop() cameraId: string | null = null; /** * Event containing boolean which used to check whether component is blocked. */ @Event() block: EventEmitter; /** * See event 'fatalError' in public component. */ @Event() fatalError: EventEmitter; /** * See event 'ready' in public component. */ @Event() ready: EventEmitter; /** * See event 'scanError' in public component. */ @Event() scanError: EventEmitter; /** * See event 'scanSuccess' in public component. */ @Event() scanSuccess: EventEmitter; /** * Event containing FeedbackMessage which can be passed to MbFeedback component. */ @Event() feedback: EventEmitter; /** * See event 'cameraScanStarted' in public component. */ @Event() cameraScanStarted: EventEmitter; /** * See event 'imageScanStarted' in public component. */ @Event() imageScanStarted: EventEmitter; /** * See event 'scanAborted' in public component. */ @Event() scanAborted: EventEmitter; connectedCallback() { GenericHelpers.setWebComponentParts(this.hostEl); this.hostEl.addEventListener('keyup', (ev: any) => { if (ev.key === 'Escape' || ev.code === 'Escape') { this.abortScan(); } }); } componentDidRender() { this.init(); const parts = GenericHelpers.getWebComponentParts(this.hostEl.shadowRoot); this.hostEl.setAttribute('exportparts', parts.join(', ')); } disconnectedCallback() { this.sdkService?.stopRecognition(); } /** * Starts camera scan using camera overlay with usage instructions. */ @Method() async startCameraScan() { this.startScanFromCamera(); } /** * Starts image scan, emits results from provided file. * * @param file File to scan */ @Method() async startImageScan(file: File) { this.startScanFromImage(file); } /** * Method is exposed outside which allow us to control UI state from parent component. * * In case of state `ERROR` and if `showModalWindows` is set to `true`, modal window * with error message will be displayed. */ @Method() async setUiState(state: 'ERROR' | 'LOADING' | 'NONE' | 'SUCCESS') { window.setTimeout(() => { if (this.overlays.camera.visible) { if (state === 'ERROR' && !this.showModalWindows) { this.apiProcessStatusState = 'NONE'; this.apiProcessStatusVisible = false; this.stopRecognition(); return; } this.apiProcessStatusState = state; this.apiProcessStatusVisible = true; if (state !== 'ERROR') { this.cameraExperience.classList.add('is-muted'); } else { this.cameraExperience.classList.add('is-error'); } this.cameraExperience.apiState = state; } else if (this.overlays.processing.visible) { if (state === 'ERROR') { if (this.showModalWindows) { this.galleryExperienceModalErrorWindowVisible = true; } else { this.galleryExperienceModalErrorWindowVisible = false; this.stopRecognition(); } } } if (state === 'SUCCESS') { window.setTimeout(() => this.stopRecognition(), 400); } }, 400); } async closeApiProcessStatus(restart: boolean = false): Promise { window.setTimeout(() => { this.apiProcessStatusVisible = false; this.apiProcessStatusState = 'NONE'; this.cameraExperience.classList.remove('is-muted'); this.cameraExperience.classList.remove('is-error'); }, 600); if (restart) { await this.checkInputProperties() .then(() => this.sdkService.resumeRecognition()) .then(() => { window.setTimeout(() => this.cameraExperience.apiState = '', 400); this.isBackSide = false; this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide, true); }); } } private async init() { if (!this.hideLoadingAndErrorUi) { this.showScreen('loading'); this.showOverlay(''); } if (this.blocked) { return; } const internetIsAvailable = navigator.onLine; if (!internetIsAvailable) { this.setFatalError( new SDKError({ code: ErrorTypes.ErrorCodes.InternetNotAvailable, message: this.translationService.i('check-internet-connection').toString() }) ); return; } const hasMandatoryProperties = await this.checkInputProperties(); if (!hasMandatoryProperties) { return; } const hasMandatoryCapabilities = await DeviceHelpers.checkMandatoryCapabilites(); if (!hasMandatoryCapabilities) { this.setFatalError(new SDKError(ErrorTypes.componentErrors.browserNotSupported)); return; } this.blocked = true; this.block.emit(true); const initEvent: EventReady | SDKError = await this.sdkService.initialize(this.licenseKey, { allowHelloMessage: this.allowHelloMessage, engineLocation: this.engineLocation, wasmType: Utils.getSDKWasmType(this.wasmType) }); this.cameraExperience.showOverlay = this.sdkService.showOverlay; if (initEvent instanceof SDKError) { this.setFatalError(initEvent); return; } if (this.showActionLabels) { this.scanFromCameraButton.label = this.translationService.i('action-message-camera').toString(); this.scanFromImageButton.label = this.translationService.i('action-message-image').toString(); } if (this.scanFromCamera) { this.scanFromCameraButton.visible = true; const hasVideoDevices = await DeviceHelpers.hasVideoDevices(); this.scanFromCameraButton.disabled = !hasVideoDevices; if (!hasVideoDevices) { this.feedback.emit({ code: FeedbackCode.CameraDisabled, state: 'FEEDBACK_INFO', message: this.translationService.i('camera-disabled').toString() }); if (this.showActionLabels) { this.scanFromCameraButton.label = this.translationService.i('action-message-camera-disabled').toString(); } } } if (this.scanFromImage) { this.scanFromImageButton.visible = true; const imageScanIsAvailable = this.sdkService.isScanFromImageAvailable(this.recognizers, this.recognizerOptions); this.scanFromImageButton.disabled = !imageScanIsAvailable; if (imageScanIsAvailable) { this.imageRecognitionType = this.sdkService.getScanFromImageType(this.recognizers, this.recognizerOptions); if (this.imageRecognitionType === ImageRecognitionType.Single) { this.screens.processing.setAttribute('data-type', 'single'); } if (this.imageRecognitionType === ImageRecognitionType.Combined) { this.screens.processing.setAttribute('data-type', 'combined'); } } else { if (this.showActionLabels) { this.scanFromImageButton.label = this.translationService.i('action-message-image-not-supported').toString(); } } } this.ready.emit(initEvent); this.blocked = false; this.block.emit(false); this.showScreen('action'); if (this.enableDrag) { this.setDragAndDrop(); } } private async flipCameraAction(): Promise { await this.sdkService.flipCamera(); const cameraFlipped = await this.sdkService.isCameraFlipped(); this.cameraExperience.setCameraFlipState(cameraFlipped); } private async changeCameraDevice(camera: CameraEntry) { if (this.cameraChangeInProgress) { return; } this.cameraChangeInProgress = true; await this.sdkService.changeCameraDevice(camera.details); this.cameraChangeInProgress = false; } private async checkInputProperties(): Promise { if (!this.licenseKey) { this.setFatalError(new SDKError(PhotoPaySDK.sdkErrors.licenseKeyMissing)); return false; } // Recognizers const conclusion: CheckConclusion = this.sdkService.checkRecognizers(this.recognizers); if (!conclusion.status) { const fatalError = new SDKError({ code: ErrorTypes.ErrorCodes.InvalidRecognizers, message: conclusion.message }); this.setFatalError(fatalError); return false; } this.cameraExperience.type = this.sdkService.getDesiredCameraExperience(this.recognizers, this.recognizerOptions); return true; } private async startScanFromCamera() { const configuration: VideoRecognitionConfiguration = { recognizers: this.recognizers, successFrame: this.includeSuccessFrame, cameraFeed: this.videoElement, cameraId: this.cameraId }; if (this.recognizerOptions && Object.keys(this.recognizerOptions).length > 0) { configuration.recognizerOptions = this.recognizerOptions; } if (this.recognitionTimeout && typeof this.recognitionTimeout === 'number') { configuration.recognitionTimeout = this.recognitionTimeout; } this.isBackSide = false; const eventHandler = (recognitionEvent: RecognitionEvent) => { switch (recognitionEvent.status) { case RecognitionStatus.Preparing: this.feedback.emit({ code: FeedbackCode.ScanStarted, state: 'FEEDBACK_OK', message: '' }); this.showOverlay('camera'); this.cameraExperience.setState(CameraExperienceState.Default); break; case RecognitionStatus.Ready: this.cameraExperience.setActiveCamera(this.sdkService.videoRecognizer.deviceId); break; case RecognitionStatus.Processing: // Just keep working break; case RecognitionStatus.EmptyResultState: if (!recognitionEvent.data.initiatedByUser) { this.scanError.emit({ code: Code.EmptyResult, fatal: false, message: 'Could not extract information from video feed!', recognizerName: recognitionEvent.data.recognizerName }); this.feedback.emit({ code: FeedbackCode.ScanUnsuccessful, state: 'FEEDBACK_ERROR', message: this.translationService.i('feedback-scan-unsuccessful').toString() }); } this.showOverlay(''); break; case RecognitionStatus.UnknownError: // Do nothing, RecognitionStatus.EmptyResultState will handle negative outcome break; case RecognitionStatus.DetectionFailed: this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide); this.detectionSuccessLock = false; break; case RecognitionStatus.DetectionStatusChange: // Use this event if information about card location is required break; case RecognitionStatus.DetectionStatusFail: this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide); break; case RecognitionStatus.DetectionStatusSuccess: this.detectionSuccessLock = true; window.setTimeout(() => { if (this.detectionSuccessLock) { this.cameraExperience.setState(CameraExperienceState.Detection); this.scanReset = false; } }, 100); break; case RecognitionStatus.DetectionStatusCameraTooHigh: this.cameraExperience.setState(CameraExperienceState.MoveCloser) .then(() => { this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide); }); break; case RecognitionStatus.DetectionStatusCameraAtAngle: this.cameraExperience.setState(CameraExperienceState.AdjustAngle) .then(() => { this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide); }); break; case RecognitionStatus.DetectionStatusCameraTooNear: case RecognitionStatus.DetectionStatusDocumentTooCloseToEdge: case RecognitionStatus.DetectionStatusPartial: this.cameraExperience.setState(CameraExperienceState.MoveFarther) .then(() => { this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide); }); break; case RecognitionStatus.DocumentClassified: this.cameraExperience.setState(CameraExperienceState.Classification); break; case RecognitionStatus.OnFirstSideResult: this.cameraExperience.setState(CameraExperienceState.Done, false, true) .then(() => { this.cameraExperience.setState(CameraExperienceState.Flip, this.isBackSide, true) .then(() => { if (!this.scanReset) { this.isBackSide = true; this.cameraExperience.setState( CameraExperienceState.Default, this.isBackSide ); } }); }) break; case RecognitionStatus.ScanSuccessful: /* Which recognizer is it? ImageCapture or some other? * * ImageCapture has the 'imageCapture' flag set to true, we do not want to close camera overlay after image * acquisition process is finished. Cause maybe backend service will failed and we can press retry to resume * with the same video recognizer and try again */ if (!recognitionEvent.data.imageCapture) { this.cameraExperience.setState(CameraExperienceState.DoneAll, false, true) .then(() => { this.cameraExperience.resetState(); this.cameraExperience.classList.add('hide'); this.showOverlay(''); this.scanSuccess.emit(recognitionEvent.data?.result); this.feedback.emit({ code: FeedbackCode.ScanSuccessful, state: 'FEEDBACK_OK', message: '' }); }); } else { const resultIsValid = recognitionEvent.data.result.recognizer.processingStatus === 0 && recognitionEvent.data.result.recognizer.state === 2; if (resultIsValid) { this.scanSuccess.emit(recognitionEvent.data?.result); this.feedback.emit({ code: FeedbackCode.ScanSuccessful, state: 'FEEDBACK_OK', message: '' }); } else if (!recognitionEvent.data.initiatedByUser) { this.scanError.emit({ code: Code.EmptyResult, fatal: true, message: 'Could not extract information from video feed!', recognizerName: recognitionEvent.data.recognizerName }); } } break; case RecognitionStatus.CameraNotAllowed: this.scanError.emit({ code: Code.CameraNotAllowed, fatal: true, message: 'Cannot access camera!', recognizerName: '' }); this.feedback.emit({ code: FeedbackCode.CameraNotAllowed, state: 'FEEDBACK_ERROR', message: this.translationService.i('camera-not-allowed').toString() }); window.setTimeout(() => { this.scanFromCameraButton.disabled = true; if (this.showActionLabels) { this.scanFromCameraButton.label = this.translationService.i('action-message-camera-not-allowed').toString(); } }, 10); this.showOverlay(''); break; case RecognitionStatus.CameraInUse: this.scanError.emit({ code: Code.CameraInUse, fatal: true, message: 'Camera already in use!', recognizerName: '' }); this.feedback.emit({ code: FeedbackCode.CameraInUse, state: 'FEEDBACK_ERROR', message: this.translationService.i('camera-in-use').toString() }); window.setTimeout(() => { this.scanFromCameraButton.disabled = true; if (this.showActionLabels) { this.scanFromCameraButton.label = this.translationService.i('action-message-camera-in-use').toString(); } }, 10); this.showOverlay(''); break; case RecognitionStatus.NoSupportForMediaDevices: case RecognitionStatus.CameraNotFound: case RecognitionStatus.UnableToAccessCamera: this.scanError.emit({ code: Code.CameraGenericError, fatal: true, message: `There was a problem while accessing camera ${recognitionEvent.status}`, recognizerName: '' }); this.feedback.emit({ code: FeedbackCode.CameraGenericError, state: 'FEEDBACK_ERROR', message: this.translationService.i('camera-generic-error').toString() }); window.setTimeout(() => { this.scanFromCameraButton.disabled = true; if (this.showActionLabels) { this.scanFromCameraButton.label = this.translationService.i('action-message-camera-disabled').toString(); } }, 10); this.showOverlay(''); break; default: // console.warn('Unhandled video recognition status:', recognitionEvent.status); } }; try { this.cameraExperience.classList.remove('hide'); this.cameraScanStarted.emit(); void this.cameraExperience.populateCameraDevices(); await this.sdkService.scanFromCamera(configuration, eventHandler); const cameraFlipped = this.sdkService.isCameraFlipped(); this.cameraExperience.setCameraFlipState(cameraFlipped); } catch (error) { this.handleScanError(error); this.showOverlay(''); } } private async startScanFromImage(file?: File) { const configuration: ImageRecognitionConfiguration = { recognizers: this.recognizers, file: file || this.scanFromImageInput.files[0] }; if (this.recognizerOptions && Object.keys(this.recognizerOptions).length > 0) { configuration.recognizerOptions = this.recognizerOptions; } const eventHandler = (recognitionEvent: RecognitionEvent) => { switch (recognitionEvent.status) { case RecognitionStatus.Preparing: this.feedback.emit({ code: FeedbackCode.ScanStarted, state: 'FEEDBACK_OK', message: '' }); this.showScanFromImageUi(); break; case RecognitionStatus.Processing: // Just keep working break; case RecognitionStatus.NoImageFileFound: this.scanError.emit({ code: Code.NoImageFileFound, fatal: true, message: 'No image file was provided to SDK service!', recognizerName: '' }); this.feedback.emit({ code: FeedbackCode.ScanUnsuccessful, state: 'FEEDBACK_ERROR', message: this.translationService.i('feedback-scan-unsuccessful').toString() }); this.hideScanFromImageUi(false); this.clearInputImages(); break; case RecognitionStatus.DetectionFailed: // Do nothing, RecognitionStatus.EmptyResultState will handle negative outcome this.clearInputImages(); break; case RecognitionStatus.EmptyResultState: this.scanError.emit({ code: Code.EmptyResult, fatal: false, message: 'Could not extract information from image!', recognizerName: recognitionEvent.data.recognizerName }); this.feedback.emit({ code: FeedbackCode.ScanUnsuccessful, state: 'FEEDBACK_ERROR', message: this.translationService.i('feedback-scan-unsuccessful').toString() }); this.hideScanFromImageUi(false); this.clearInputImages(); break; case RecognitionStatus.UnknownError: // Do nothing, RecognitionStatus.EmptyResultState will handle negative outcome this.clearInputImages(); break; case RecognitionStatus.ScanSuccessful: this.scanSuccess.emit(recognitionEvent.data); this.feedback.emit({ code: FeedbackCode.ScanSuccessful, state: 'FEEDBACK_OK', message: '' }); this.clearInputImages(); if (!recognitionEvent.data.imageCapture) { this.hideScanFromImageUi(true); } break; default: //console.warn('Unhandled image recognition status:', recognitionEvent.status); } }; try { this.imageScanStarted.emit(); await this.sdkService.scanFromImage(configuration, eventHandler); } catch (error) { this.handleScanError(error); this.hideScanFromImageUi(false); } } private handleScanError(error: any) { const isAvailable = navigator.onLine; if (!isAvailable) { const fatalError = new SDKError({ code: ErrorTypes.ErrorCodes.InternetNotAvailable, message: this.translationService.i('check-internet-connection').toString() }); this.setFatalError(fatalError); this.showLicenseInfoModal( this.translationService.i('check-internet-connection').toString() ); return; } if (error?.code === PhotoPaySDK.ErrorCodes.LICENSE_UNLOCK_ERROR) { this.setFatalError(new SDKError(ErrorTypes.componentErrors.licenseError, error)); this.showLicenseInfoModal(error); } else { this.scanError.emit({ code: Code.GenericScanError, fatal: true, message: 'There was a problem during scan action.', recognizerName: '', details: error }); this.feedback.emit({ code: FeedbackCode.GenericScanError, state: 'FEEDBACK_ERROR', message: this.translationService.i('feedback-error-generic').toString() }); this.showOverlay(''); } } private showLicenseInfoModal(error: any): void { if (typeof error === 'string') { this.licenseExperienceModal.content = error; } else { if (error.type === 'NETWORK_ERROR') { this.licenseExperienceModal.content = this.translationService.i('network-error').toString(); } else { this.licenseExperienceModal.content = this.translationService.i('scanning-not-available').toString(); } } this.showOverlay('modal'); } private showScreen(screenName: string) { for (const screenKey in this.screens) { if (this.screens[screenKey]) { this.screens[screenKey].visible = screenName === screenKey; } } } private showOverlay(overlayName: string) { if (overlayName === 'camera') { this.initialBodyOverflowValue = document.body.style.overflow; document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = this.initialBodyOverflowValue; } for (const overlayKey in this.overlays) { if (this.overlays[overlayKey]) { this.overlays[overlayKey].visible = overlayName === overlayKey; } } } private setDragAndDrop() { const dropTarget = this.galleryDropType === 'FULLSCREEN' ? window : this.hostEl; const lockTimeout = 3000; let lockDragAndDrop = false; if (this.galleryDropType === 'INLINE') { this.overlays.draganddrop.classList.add('inline'); } const closeOverlay = () => { if (lockDragAndDrop) { window.setTimeout(() => { this.showOverlay(''); window.setTimeout(() => { this.showScreen('action'); this.hostEl.style.borderStyle = 'solid'; }, 500); }, lockTimeout); } else { this.showOverlay(''); window.setTimeout(() => { this.showScreen('action'); this.hostEl.style.borderStyle = 'solid'; }, 500); } } dropTarget.addEventListener('dragenter', (ev: any) => { ev.stopPropagation(); ev.preventDefault(); if (!this.scanFromImageButton.visible) { return; } this.hostEl.style.borderStyle = 'none'; }); dropTarget.addEventListener('dragover', (ev: any) => { ev.stopPropagation(); ev.preventDefault(); if (!this.scanFromImageButton.visible) { return; } this.hostEl.style.borderStyle = 'none'; this.overlays.draganddrop.classList.remove('error'); this.overlays.draganddrop.querySelector('p').innerText = this.translationService.i('drop-info').toString(); this.showOverlay('draganddrop'); }); this.dragAndDropZone.addEventListener('dragleave', (ev: any) => { ev.stopPropagation(); ev.preventDefault(); if (!this.scanFromImageButton.visible) { return; } closeOverlay(); }); this.dragAndDropZone.addEventListener('drop', (ev: any) => { ev.stopPropagation(); ev.preventDefault(); if (!this.scanFromImageButton.visible) { return; } if (GenericHelpers.hasSupportedImageFiles(ev.dataTransfer.files)) { this.startScanFromImage(ev.dataTransfer.files[0]); } else { this.overlays.draganddrop.classList.add('error'); this.overlays.draganddrop.querySelector('p').innerText = this.translationService.i('drop-error').toString(); lockDragAndDrop = true; window.setTimeout(() => lockDragAndDrop = false, lockTimeout); } closeOverlay(); }); } private setFatalError(error: SDKError) { this.fatalError.emit(error); if (this.hideLoadingAndErrorUi) { return; } if (error.details) { switch (error.details?.code) { case PhotoPaySDK.ErrorCodes.LICENSE_UNLOCK_ERROR: const licenseErrorType = error.details?.type; switch (licenseErrorType) { case PhotoPaySDK.LicenseErrorType.NetworkError: this.errorMessage.innerText = this.translationService.i('network-error').toString(); break; default: this.errorMessage.innerText = this.translationService.i('scanning-not-available').toString(); } break; default: // Do nothing } } else { this.errorMessage.innerText = error.message; } this.showScreen('error'); this.showOverlay(''); } private abortScan() { this.scanAborted.emit(); this.stopRecognition(); } private stopRecognition() { this.cameraExperience.classList.add('hide'); this.sdkService.stopRecognition(); this.scanReset = true; window.setTimeout(() => { this.cameraExperience.setState(CameraExperienceState.Default, false, true); this.cameraExperience.apiState = ''; }, 500); this.showOverlay(''); this.closeApiProcessStatus(); } private closeGalleryExperienceModal() { this.galleryExperienceModalErrorWindowVisible = false; this.stopRecognition(); } private onFromImageClicked(): void { if (this.imageRecognitionType === ImageRecognitionType.Single) { this.scanFromImageInput.click(); } if (this.imageRecognitionType === ImageRecognitionType.Combined) { if (this.combinedGalleryOpened) { this.closeCombinedGalleryUpload(); } else { this.openCombinedGalleryUpload(); } } } private clearInputImages(): void { if (this.imageRecognitionType === ImageRecognitionType.Single) { this.scanFromImageInput.value = ''; } if (this.imageRecognitionType === ImageRecognitionType.Combined) { this.imageBoxFirst.clear(); this.imageBoxSecond.clear(); } } private openCombinedGalleryUpload(): void { const dialog = this.screens.action.querySelector('.combined-image-upload'); dialog.classList.add('visible'); this.scanFromImageButton.selected = true; this.combinedGalleryOpened = true; } private closeCombinedGalleryUpload(): void { const dialog = this.screens.action.querySelector('.combined-image-upload'); dialog.classList.remove('visible'); this.scanFromImageButton.selected = false; this.combinedGalleryOpened = false; } private showScanFromImageUi(): void { if (this.galleryOverlayType === 'INLINE') { const inProgress = this.screens.processing.querySelector('p.in-progress'); const done = this.screens.processing.querySelector('p.done'); inProgress.classList.add('visible'); done.classList.remove('visible'); this.showScreen('processing'); } if (this.galleryOverlayType === 'FULLSCREEN') { this.showOverlay('processing'); } } private hideScanFromImageUi(success: boolean): void { if (this.galleryOverlayType === 'INLINE') { let timeout = 0; const inProgress = this.screens.processing.querySelector('p.in-progress'); const done = this.screens.processing.querySelector('p.done'); inProgress.classList.remove('visible'); if (success) { done.classList.add('visible'); timeout = 1000; } window.setTimeout(() => this.showScreen('action'), timeout); } if (this.galleryOverlayType === 'FULLSCREEN') { this.showOverlay(''); } } render() { return (

this.screens.loading = el as HTMLMbScreenElement} >

this.screens.error = el as HTMLMbScreenElement} >

this.errorMessage = el as HTMLParagraphElement}>

this.screens.action = el as HTMLMbScreenElement} >

{this.translationService.i('action-message').toString()}

this.scanFromCameraButton = el as HTMLMbButtonElement} preventDefault={true} visible={true} disabled={false} icon={true} onButtonClick={() => this.startScanFromCamera()} imageSrcDefault={this.iconCameraDefault} imageSrcActive={this.iconCameraActive} imageAlt="action-alt-camera" translationService={this.translationService} >

this.scanFromImageInput = el as HTMLInputElement} type="file" accept="image/*" onChange={() => this.scanFromImageInput.value && this.startScanFromImage()} /> this.scanFromImageButton = el as HTMLMbButtonElement} disabled={false} preventDefault={false} visible={false} selected={false} icon={true} onButtonClick={() => this.onFromImageClicked()} imageSrcDefault={this.iconGalleryDefault} imageSrcActive={this.iconGalleryActive} imageAlt="action-alt-gallery" translationService={this.translationService} >

this.screens.processing = el as HTMLMbScreenElement} >

{this.translationService.i('process-image-message-inline').toString()}

{this.translationService.i('process-image-message-inline-done').toString()}

this.overlays.draganddrop = el as HTMLMbOverlayElement} >

Whoops, we don't support that image format. Please upload a JPEG or PNG file.

this.dragAndDropZone = el as HTMLDivElement}>

this.overlays.processing = el as HTMLMbOverlayElement} >

{this.translationService.i('process-image-message').toString()}

this.closeGalleryExperienceModal()} >

this.overlays.camera = el as HTMLMbOverlayElement} >

this.cameraExperience = el as HTMLMbCameraExperienceElement} translationService={this.translationService} showScanningLine={this.showScanningLine} showCameraFeedbackBarcodeMessage={this.showCameraFeedbackBarcodeMessage} onClose={() => this.abortScan()} onFlipCameraAction={() => this.flipCameraAction()} onChangeCameraDevice={(ev: CustomEvent) => this.changeCameraDevice(ev.detail)} class="overlay-camera-element" >

this.closeApiProcessStatus(true)} onCloseFromStart={() => this.stopRecognition()} >

); } }