@authme/identity-verification 2.1.1

package/src/lib/ui/ocr-flow.js

@@ -0,0 +1,664 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startOCR = void 0;
+const tslib_1 = require("tslib");
+const arrow_down_1 = require("../lottie/arrow_down");
+const arrow_up_1 = require("../lottie/arrow_up");
+const arrow_right_1 = require("../lottie/arrow_right");
+const arrow_left_1 = require("../lottie/arrow_left");
+const rxjs_1 = require("rxjs");
+const util_1 = require("@authme/util");
+const id_recognition_1 = require("@authme/id-recognition");
+const lottie_web_1 = tslib_1.__importDefault(require("lottie-web"));
+const rxjs_2 = require("rxjs");
+const lottie_1 = require("../lottie");
+const basic_1 = require("./basic");
+const ocr_ui_1 = require("./ocr.ui");
+const operator_1 = require("../operator");
+const core_1 = require("@authme/core");
+function startOCR(config) {
+    const translateService = (0, core_1.getTranslateInstance)();
+    let rotateTimer = [];
+    let rotatePosition = '';
+    let isValidScreenSize = true;
+    let ocrConfig = {
+        enableManualUpload: false,
+        fraudRetryTimes: 1,
+        fraudTimeout: 52,
+        fraudMaxFps: 2,
+    };
+    const unsubscribe$ = new rxjs_1.Subject();
+    const getCardBorderPoint = () => {
+        return [
+            [
+                cardborder.offsetLeft / cardborderContainer.offsetWidth,
+                cardborder.offsetTop / cardborderContainer.offsetHeight,
+            ],
+            [
+                cardborder.offsetLeft / cardborderContainer.offsetWidth,
+                (cardborder.offsetTop + cardborder.offsetHeight) /
+                    cardborderContainer.offsetHeight,
+            ],
+            [
+                (cardborder.offsetLeft + cardborder.offsetWidth) /
+                    cardborderContainer.offsetWidth,
+                (cardborder.offsetTop + cardborder.offsetHeight) /
+                    cardborderContainer.offsetHeight,
+            ],
+            [
+                (cardborder.offsetLeft + cardborder.offsetWidth) /
+                    cardborderContainer.offsetWidth,
+                cardborder.offsetTop / cardborderContainer.offsetHeight,
+            ],
+        ];
+    };
+    const { container, videoContainer, video, closeIcon, header, headerTitle, headerSubtitle, } = (0, basic_1.renderBasicUI)();
+    const { antiFraudInstructionContainer, titleTextPanel, titleText, hintText, statusText, statusTextPanel, lottieMask, arrowAnimationContainer, scanAnimationContainer, antiFraudInstructionAnimationContainer, confirmImageContainer, imageTypeText, cardborder, cardborderContainer, statementContainer, retryBtn, confirmBtn, completeBtn, image, } = (0, ocr_ui_1.renderOCRUI)({
+        videoContainer,
+        container,
+    });
+    const canvasSizeInfo$ = (0, rxjs_1.merge)((0, rxjs_1.from)((0, util_1.requestCamera)(video, (0, util_1.videoConstraintsFactory)(!(0, util_1.isMobileOrTablet)(), 'environment'), 'back')).pipe((0, rxjs_1.tap)(() => (0, util_1.showElement)(videoContainer)), (0, rxjs_1.switchMap)(() => (0, util_1.getCanvasSize)(video)), (0, rxjs_1.shareReplay)(1), (0, rxjs_1.catchError)((error) => {
+        if (error instanceof OverconstrainedError) {
+            alert(translateService.translate('camera.error.lowResolution'));
+        }
+        else {
+            alert(translateService.translate('camera.error.notFound'));
+        }
+        return (0, rxjs_1.throwError)(() => new core_1.AuthmeError(core_1.ErrorCode.CAMERA_NOT_SUPPORT));
+    })), (0, rxjs_1.fromEvent)(window, 'resize').pipe((0, rxjs_1.switchMapTo)((0, util_1.getCanvasSize)(video))));
+    function startAntiFraud(type) {
+        let startRotate = false;
+        if (type !== id_recognition_1.EAuthMeCardClass.TWN_IDCard_Front ||
+            !config.ocrConfig.needAntiFraud) {
+            return (0, rxjs_1.of)(true);
+        }
+        const applyTextByResult = (result) => {
+            statusText.classList.add('non-empty');
+            switch (result.eStatus) {
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.PositionNotMatch:
+                    statusText.textContent = translateService.translate('verify.error.mismatch');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.NeedMoreFrame:
+                    statusText.textContent = '';
+                    statusText.classList.remove('non-empty');
+                    setBorderColor('pass');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.NoCard:
+                    statusText.textContent = translateService.translate('verify.error.noCard');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.WrongCardType:
+                    statusText.textContent = translateService.translate('verify.error.wrongCardType');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.Reflective:
+                    statusText.textContent = translateService.translate('verify.error.reflective');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.Blur:
+                    statusText.textContent =
+                        translateService.translate('verify.error.blur');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.Gray:
+                    statusText.classList.remove('non-empty');
+                    statusText.textContent = '';
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeIDCardAntiFraudStatus.Error:
+                    statusText.textContent = translateService.translate('verify.error.serverError');
+                    (0, util_1.showErrorMessage)(translateService.translate('verify.error.serverError'), true);
+                    break;
+                default:
+                    break;
+            }
+        };
+        const antiFraudStart$ = (0, rxjs_1.from)(showAntiFraudLottie()).pipe((0, rxjs_1.switchMap)(() => (0, util_1.checkOnlineStatus)(translateService.translate('network.error.offline'))), (0, rxjs_1.switchMap)(() => canvasSizeInfo$), (0, rxjs_1.switchMap)((canvasSizeInfo) => (0, rxjs_1.from)(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe((0, rxjs_1.switchMap)(() => config.antiFraudStart(getCardBorderPoint())), (0, operator_1.sendFrame)(canvasSizeInfo, image, video, config.onAntiFraudFrame, ocrConfig.fraudMaxFps, false, 'jpg'), (0, rxjs_1.map)((x) => x.result), (0, rxjs_1.tap)((x) => {
+            if (!startRotate)
+                applyTextByResult(x);
+        }), (0, rxjs_1.takeWhile)((x) => x.eStatus !== id_recognition_1.EAuthMeIDCardAntiFraudStatus.Pass &&
+            x.eStatus !== id_recognition_1.EAuthMeIDCardAntiFraudStatus.Failed, true))), (0, rxjs_1.shareReplay)(1));
+        const detected$ = antiFraudStart$
+            .pipe((0, rxjs_2.filter)((x) => x.eStage !== id_recognition_1.EAuthMeIDCardAntiFraudStage.Frontal), (0, rxjs_1.take)(1), (0, rxjs_1.tap)(() => {
+            startRotate = true;
+            startCardBorderRotate();
+            hintText.textContent = '';
+        }))
+            .subscribe();
+        const handleSuccess$ = antiFraudStart$.pipe((0, rxjs_2.filter)((x) => x.eStatus === id_recognition_1.EAuthMeIDCardAntiFraudStatus.Pass), (0, rxjs_1.take)(1), (0, rxjs_1.tap)(() => {
+            for (let i = 0; i < rotateTimer.length; i++) {
+                clearTimeout(rotateTimer[i]);
+            }
+            (0, util_1.hidePopup)();
+            clearAllFraudLottie();
+            statusText.textContent = '';
+            statusText.classList.remove('non-empty');
+            setBorderColor('pass');
+            lottie_web_1.default.play('success');
+        }), (0, rxjs_1.switchMap)(() => (0, util_1.waitTime)(2000)), (0, rxjs_1.tap)(() => {
+            if (!rotatePosition.includes('Default')) {
+                setEndFraudRotate();
+            }
+        }), (0, rxjs_1.switchMap)(() => (0, util_1.waitTime)(2000)), (0, rxjs_1.tap)(() => {
+            lottie_web_1.default.stop('success');
+        }));
+        const handleError$ = antiFraudStart$.pipe((0, rxjs_2.filter)((x) => x.eStatus === id_recognition_1.EAuthMeIDCardAntiFraudStatus.Failed), (0, rxjs_1.take)(1), (0, rxjs_1.tap)(() => {
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Default);
+        }));
+        return (0, rxjs_1.merge)(handleSuccess$, handleError$).pipe((0, rxjs_1.take)(1), (0, rxjs_1.tap)(() => detected$.unsubscribe()));
+    }
+    function startOCR(type) {
+        if (!config.ocrConfig.needOCR &&
+            type === id_recognition_1.EAuthMeCardClass.TWN_IDCard_Front) {
+            return (0, rxjs_1.of)(true);
+        }
+        const applyTextByResult = (result) => {
+            statusText.classList.add('non-empty');
+            switch (result.eStatus) {
+                case id_recognition_1.EAuthMeCardOCRStatus.NoCard:
+                case id_recognition_1.EAuthMeMRZServiceStatus.NotFound:
+                    statusText.textContent = translateService.translate('verify.error.noCard');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeCardOCRStatus.WrongCardType:
+                    statusText.textContent = translateService.translate('verify.error.wrongCardType');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeCardOCRStatus.PositionNotMatch:
+                    statusText.textContent = translateService.translate('verify.error.mismatch');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeCardOCRStatus.Reflective:
+                    statusText.textContent = translateService.translate('verify.error.reflective');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeCardOCRStatus.Blur:
+                    statusText.textContent =
+                        translateService.translate('verify.error.blur');
+                    setBorderColor('error');
+                    break;
+                case id_recognition_1.EAuthMeMRZServiceStatus.RecogFailed:
+                    statusText.textContent = translateService.translate('verify.error.wrongCardType');
+                    setBorderColor('error');
+                    break;
+                default:
+                    break;
+            }
+        };
+        const init = (retry) => canvasSizeInfo$.pipe((0, rxjs_1.take)(1), (0, rxjs_1.switchMap)((canvasSizeInfo) => (0, rxjs_1.from)(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe((0, rxjs_1.switchMap)(() => (0, util_1.checkOnlineStatus)(translateService.translate('network.error.offline'))), (0, rxjs_1.switchMap)(() => config.ocrStart(getCardBorderPoint(), type, retry)), (0, rxjs_1.tap)(() => (0, util_1.stopSpinner)()), (0, rxjs_1.map)(() => canvasSizeInfo))));
+        setBorderColor(null);
+        const recognition = (retry) => init(retry).pipe((0, rxjs_1.switchMap)((canvasSizeInfo) => (0, rxjs_1.of)(canvasSizeInfo).pipe((0, operator_1.sendFrame)(canvasSizeInfo, image, video, config.recognition, 30, false, 'jpg'), (0, rxjs_1.tap)((x) => applyTextByResult(x.result)), (0, rxjs_2.filter)(({ result }) => result.eStatus === id_recognition_1.EAuthMeCardOCRStatus.Pass ||
+            result.eStatus === id_recognition_1.EAuthMeMRZServiceStatus.Success), (0, rxjs_1.take)(1), (0, rxjs_1.tap)(() => {
+            setBorderColor('pass');
+            statusText.textContent =
+                translateService.translate('verify.ocrSuccess');
+            (0, util_1.showElement)(scanAnimationContainer);
+            scanAnimationContainer.style.width = `${cardborder.offsetWidth}px`;
+            scanAnimationContainer.style.height = `${cardborder.offsetHeight}px`;
+            lottie_web_1.default.play('scan');
+        }), (0, rxjs_1.switchMap)((resp) => (0, rxjs_1.from)((0, util_1.waitTime)(3000)).pipe((0, rxjs_1.tap)(() => {
+            (0, util_1.hideElement)(scanAnimationContainer);
+            lottie_web_1.default.stop('scan');
+            lottie_web_1.default.play('success');
+        }), (0, rxjs_1.switchMap)(() => (0, util_1.waitTime)(1000)), (0, rxjs_1.tap)(() => {
+            lottie_web_1.default.stop('success');
+            resetMaskUI();
+        }), (0, rxjs_1.map)(() => resp))), (0, rxjs_1.switchMap)(({ result }) => (0, rxjs_1.from)(type === id_recognition_1.EAuthMeCardClass.Passport
+            ? (0, rxjs_1.of)(false)
+            : checkConfirmImage(result.imageData, result.iWidth, result.iHeight, type)).pipe((0, rxjs_1.switchMap)((needRetry) => needRetry
+            ? (0, rxjs_1.of)(true)
+            : (0, rxjs_1.from)(config.confirmImage(type)).pipe((0, rxjs_1.map)((confirmResp) => !confirmResp))), (0, rxjs_1.tap)(() => {
+            (0, util_1.hideElement)(confirmImageContainer);
+            showVideoElement();
+        }), (0, rxjs_1.switchMap)((needRetry) => needRetry ? recognition(true) : (0, rxjs_1.of)(true)))))));
+        return recognition(false);
+    }
+    function createFlowByType(type) {
+        return (0, rxjs_1.of)(true).pipe((0, rxjs_1.tap)(() => setUIByType(type)), (0, rxjs_1.tap)(() => setCustomizedUI()), (0, rxjs_1.switchMap)(() => startAntiFraud(type)), (0, rxjs_1.tap)(() => setUIByType(type)), (0, rxjs_1.switchMap)(() => startOCR(type)));
+    }
+    function main() {
+        (0, util_1.hideElement)(antiFraudInstructionContainer);
+        (0, util_1.startSpinner)(translateService.translate('general.loading'));
+        const flow$ = config.acceptTypes
+            .map((x) => createFlowByType(x))
+            .reduce((prev, cur) => prev.pipe((0, rxjs_1.switchMap)(() => cur)), canvasSizeInfo$.pipe((0, rxjs_1.take)(1), (0, rxjs_1.tap)(() => setUIByType(config.acceptTypes[0])), (0, rxjs_1.switchMap)((canvasSizeInfo) => (0, rxjs_1.from)(config.init(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe((0, rxjs_1.tap)((x) => (ocrConfig = x)), (0, rxjs_1.tap)(() => (0, util_1.stopSpinner)())))))
+            .pipe((0, rxjs_1.tap)(() => {
+            (0, util_1.hideElement)(videoContainer);
+            (0, util_1.startSpinner)(translateService.translate('verify.uploading'));
+        }), (0, rxjs_1.switchMap)(() => config.onSuccess()), (0, rxjs_1.map)((x) => ({ isSuccess: true, message: '', data: x })), (0, rxjs_1.takeUntil)(unsubscribe$), (0, rxjs_1.finalize)(() => {
+            (0, util_1.stopSpinner)();
+            reset();
+        }));
+        const cancel$ = (0, rxjs_1.fromEvent)(closeIcon, 'click').pipe((0, rxjs_1.map)(() => ({
+            isSuccess: false,
+            message: new core_1.AuthmeError(core_1.ErrorCode.USER_CANCEL).message,
+            data: {},
+        })), (0, rxjs_1.takeUntil)(unsubscribe$));
+        return (0, rxjs_1.merge)(flow$, cancel$).pipe((0, rxjs_1.take)(1));
+    }
+    (0, rxjs_1.fromEvent)(window, 'offline')
+        .pipe((0, rxjs_1.switchMap)(() => (0, util_1.asyncOnLineShowErrorMessage)(translateService.translate('network.error.offline'), true)), (0, rxjs_1.takeUntil)(unsubscribe$))
+        .subscribe();
+    function startCardBorderRotate() {
+        rotateTimer = [];
+        setTopText(translateService.translate('verify.idCardFlipLeft'));
+        (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Right);
+        rotatePosition = ocr_ui_1.OcrRotateAnimationName.Right;
+        lottie_web_1.default.loadAnimation({
+            container: arrowAnimationContainer,
+            renderer: 'svg',
+            loop: true,
+            autoplay: true,
+            name: 'arrow_left',
+            animationData: (0, arrow_left_1.arrow_left)(),
+        });
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_left');
+            lottie_web_1.default.destroy('arrow_left');
+        }, 2000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipRight'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.RightToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.RightToDefault;
+        }, 3000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_right',
+                animationData: (0, arrow_right_1.arrow_right)(),
+            });
+            setTopText(translateService.translate('verify.idCardFlipRight'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Left);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Left;
+        }, 6000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_right');
+            lottie_web_1.default.destroy('arrow_right');
+        }, 8000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipLeft'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.LeftToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.LeftToDefault;
+        }, 9000));
+        rotateTimer.push(setTimeout(() => {
+            (0, util_1.showPopup)(translateService.translate('verify.fraud.hintTitle'), translateService.translate('verify.fraud.hintText'), false);
+        }, 11000));
+        rotateTimer.push(setTimeout(() => {
+            (0, util_1.hidePopup)();
+            setTopText(translateService.translate('verify.idCardFlipLeft'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Right);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Right;
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_left',
+                animationData: (0, arrow_left_1.arrow_left)(),
+            });
+        }, 14000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_left');
+            lottie_web_1.default.destroy('arrow_left');
+        }, 16000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipRight'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.RightToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.RightToDefault;
+        }, 17000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_right',
+                animationData: (0, arrow_right_1.arrow_right)(),
+            });
+            setTopText(translateService.translate('verify.idCardFlipRight'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Left);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Left;
+        }, 20000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_right');
+            lottie_web_1.default.destroy('arrow_right');
+        }, 22000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipLeft'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.LeftToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.LeftToDefault;
+        }, 23000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_up',
+                animationData: (0, arrow_up_1.arrow_up)(),
+            });
+            setTopText(translateService.translate('verify.idCardFlipUp'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Top);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Top;
+        }, 26000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_up');
+            lottie_web_1.default.destroy('arrow_up');
+        }, 28000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipDown'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.TopToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.TopToDefault;
+        }, 29000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_down',
+                animationData: (0, arrow_down_1.arrow_down)(),
+            });
+            setTopText(translateService.translate('verify.idCardFlipDown'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Bottom);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Bottom;
+        }, 32000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_down');
+            lottie_web_1.default.destroy('arrow_down');
+        }, 34000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipUp'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.BottomToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.BottomToDefault;
+        }, 35000));
+        rotateTimer.push(setTimeout(() => {
+            (0, util_1.showPopup)(translateService.translate('verify.fraud.hintTitle'), translateService.translate('verify.fraud.hintText'), false);
+        }, 37000));
+        rotateTimer.push(setTimeout(() => {
+            (0, util_1.hidePopup)();
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_up',
+                animationData: (0, arrow_up_1.arrow_up)(),
+            });
+            setTopText(translateService.translate('verify.idCardFlipUp'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Top);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Top;
+        }, 40000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_up');
+            lottie_web_1.default.destroy('arrow_up');
+        }, 42000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipDown'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.TopToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.TopToDefault;
+        }, 43000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.loadAnimation({
+                container: arrowAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'arrow_down',
+                animationData: (0, arrow_down_1.arrow_down)(),
+            });
+            setTopText(translateService.translate('verify.idCardFlipDown'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.Bottom);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.Bottom;
+        }, 46000));
+        rotateTimer.push(setTimeout(() => {
+            lottie_web_1.default.stop('arrow_down');
+            lottie_web_1.default.destroy('arrow_down');
+        }, 48000));
+        rotateTimer.push(setTimeout(() => {
+            setTopText(translateService.translate('verify.idCardFlipUp'));
+            (0, ocr_ui_1.setHtmlRotate)(cardborder, ocr_ui_1.OcrRotateAnimationName.BottomToDefault);
+            rotatePosition = ocr_ui_1.OcrRotateAnimationName.BottomToDefault;
+        }, 49000));
+    }
+    // resize
+    (0, rxjs_1.fromEvent)(window, 'resize')
+        .pipe((0, rxjs_1.switchMapTo)((0, util_1.getCanvasSize)(video)), (0, rxjs_1.switchMap)((canvasSizeInfo) => config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight, getCardBorderPoint())), (0, rxjs_1.tap)(() => {
+        scanAnimationContainer.style.width = `${cardborder.offsetWidth}px`;
+        scanAnimationContainer.style.height = `${cardborder.offsetHeight}px`;
+    }), (0, rxjs_1.takeUntil)(unsubscribe$))
+        .subscribe();
+    (0, rxjs_1.merge)((0, rxjs_1.fromEvent)(window, 'resize'), (0, rxjs_1.of)(0))
+        .pipe((0, rxjs_1.map)(() => window.innerWidth >= 330 && window.innerHeight >= 500), (0, rxjs_2.filter)((x) => x !== isValidScreenSize), (0, rxjs_1.tap)((x) => (isValidScreenSize = x)), (0, rxjs_1.tap)((x) => x
+        ? (0, util_1.hidePopup)()
+        : (0, util_1.showPopup)(translateService.translate('error.screenSize.title'), translateService.translate('error.screenSize.content'), false)), (0, rxjs_1.takeUntil)(unsubscribe$))
+        .subscribe();
+    function showAntiFraudLottie() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            showVideoElement(false);
+            (0, util_1.showElement)(antiFraudInstructionContainer);
+            (0, util_1.showElement)(lottieMask);
+            setHeaderText(translateService.translate('verify.idCard'), translateService.translate('verify.header.step', { current: 1, total: 3 }));
+            lottie_web_1.default.loadAnimation({
+                container: antiFraudInstructionAnimationContainer,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                name: 'tutorial',
+                animationData: (0, lottie_1.tutorial)(),
+            });
+            setTimeout(() => {
+                confirmBtn.disabled = false;
+            }, 3000);
+            yield (0, rxjs_1.firstValueFrom)((0, rxjs_1.fromEvent)(confirmBtn, 'click').pipe((0, rxjs_1.tap)(() => {
+                (0, util_1.hideElement)(lottieMask);
+                (0, util_1.hideElement)(antiFraudInstructionContainer);
+                lottie_web_1.default.stop('tutorial');
+                lottie_web_1.default.destroy('tutorial');
+                showVideoElement();
+                return;
+            })));
+        });
+    }
+    function checkConfirmImage(data, width, height, type) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            showVideoElement(false);
+            (0, util_1.showElement)(confirmImageContainer);
+            if (data) {
+                const ctx2 = image.getContext('2d');
+                image.width = width;
+                image.height = height;
+                const imgData = ctx2.createImageData(image.width, image.height);
+                imgData.data.set(data);
+                ctx2.putImageData(imgData, 0, 0);
+            }
+            const retryEvents = (0, rxjs_1.fromEvent)(retryBtn, 'click').pipe((0, rxjs_1.mapTo)(true));
+            const confirmEvents = (0, rxjs_1.fromEvent)(completeBtn, 'click').pipe((0, rxjs_1.mapTo)(false));
+            const allEvents$ = (0, rxjs_1.merge)(retryEvents, confirmEvents);
+            return yield (0, rxjs_1.firstValueFrom)(allEvents$.pipe());
+        });
+    }
+    function setEndFraudRotate() {
+        let position;
+        switch (rotatePosition) {
+            case ocr_ui_1.OcrRotateAnimationName.Top:
+                setTopText(translateService.translate('verify.idCardFlipDown'));
+                position = ocr_ui_1.OcrRotateAnimationName.TopToDefault;
+                break;
+            case ocr_ui_1.OcrRotateAnimationName.Bottom:
+                setTopText(translateService.translate('verify.idCardFlipUp'));
+                position = ocr_ui_1.OcrRotateAnimationName.BottomToDefault;
+                break;
+            case ocr_ui_1.OcrRotateAnimationName.Left:
+                setTopText(translateService.translate('verify.idCardFlipLeft'));
+                position = ocr_ui_1.OcrRotateAnimationName.LeftToDefault;
+                break;
+            case ocr_ui_1.OcrRotateAnimationName.Right:
+                setTopText(translateService.translate('verify.idCardFlipRight'));
+                position = ocr_ui_1.OcrRotateAnimationName.RightToDefault;
+                break;
+            default:
+                position = ocr_ui_1.OcrRotateAnimationName.Default;
+                break;
+        }
+        (0, ocr_ui_1.setHtmlRotate)(cardborder, position);
+    }
+    function setTopText(title) {
+        titleText.textContent = title;
+    }
+    function setCustomizedUI() {
+        if (config.ocrConfig.showStatement === false) {
+            (0, util_1.hideElement)(statementContainer);
+        }
+        header.classList.add(`headerMode${config.ocrConfig.headerMode}`);
+    }
+    function setUIByType(type) {
+        setTextByType(type);
+        setHeaderByType(type);
+        setCardSize(type);
+    }
+    function setTextByType(type) {
+        const typeMap = {
+            EAuthMeCardClass_Passport: 'verify.passportFrontSide',
+            EAuthMeCardClass_TWN_IDCard_Front: 'verify.idCardFrontSide',
+            EAuthMeCardClass_TWN_IDCard_Back: 'verify.idCardBackSide',
+            EAuthMeCardClass_TWN_DriverLicense_Front: 'verify.licenseFrontSide',
+            EAuthMeCardClass_TWN_DriverLicense_Back: 'verify.licenseBackSide',
+            EAuthMeCardClass_TWN_HealthCard_Front: 'verify.healthFrontSide',
+        };
+        titleText.textContent = translateService.translate(typeMap[type]);
+        statusText.textContent = '';
+        statusText.classList.remove('non-empty');
+        hintText.textContent = type.includes('Back')
+            ? translateService.translate('verify.backSide')
+            : translateService.translate('verify.frontSide');
+        const typeConfirmTextMap = {
+            EAuthMeCardClass_TWN_IDCard_Front: 'verify.confirmIdCardFront',
+            EAuthMeCardClass_TWN_IDCard_Back: 'verify.confirmIdCardBack',
+            EAuthMeCardClass_TWN_DriverLicense_Front: 'verify.confirmLicenseFront',
+            EAuthMeCardClass_TWN_DriverLicense_Back: 'verify.confirmLicenseBack',
+            EAuthMeCardClass_TWN_HealthCard_Front: 'verify.confirmHealthFront',
+        };
+        imageTypeText.textContent = translateService.translate(typeConfirmTextMap[type]);
+    }
+    function setHeaderByType(type) {
+        const typeMap = {
+            EAuthMeCardClass_Passport: 'verify.header.passport',
+            EAuthMeCardClass_TWN_IDCard_Front: 'verify.header.idCard',
+            EAuthMeCardClass_TWN_IDCard_Back: 'verify.header.idCard',
+            EAuthMeCardClass_TWN_DriverLicense_Front: 'verify.header.driverLicense',
+            EAuthMeCardClass_TWN_DriverLicense_Back: 'verify.header.driverLicense',
+            EAuthMeCardClass_TWN_HealthCard_Front: 'verify.header.healthCard',
+        };
+        if (type.includes('Health') || type.includes('Passport')) {
+            setHeaderText(translateService.translate(typeMap[type]), translateService.translate('verify.header.step', {
+                current: 1,
+                total: 1,
+            }));
+        }
+        else {
+            if (type.includes('Front')) {
+                const stepNow = type.includes('TWN_IDCard')
+                    ? translateService.translate('verify.header.step', {
+                        current: 2,
+                        total: 3,
+                    })
+                    : translateService.translate('verify.header.step', {
+                        current: 1,
+                        total: 2,
+                    });
+                setHeaderText(translateService.translate(typeMap[type]), stepNow);
+            }
+            else {
+                const stepNow = type.includes('TWN_IDCard')
+                    ? translateService.translate('verify.header.step', {
+                        current: 3,
+                        total: 3,
+                    })
+                    : translateService.translate('verify.header.step', {
+                        current: 2,
+                        total: 2,
+                    });
+                setHeaderText(translateService.translate(typeMap[type]), stepNow);
+            }
+        }
+    }
+    function setCardSize(type) {
+        const maxWidth = cardborderContainer.offsetWidth * 0.95;
+        const maxHeight = cardborderContainer.offsetHeight * 0.6;
+        let ratio = 17 / 11;
+        if (type === id_recognition_1.EAuthMeCardClass.TWN_DriverLicense_Back ||
+            type === id_recognition_1.EAuthMeCardClass.TWN_DriverLicense_Front) {
+            ratio = 17 / 12;
+        }
+        const { width, height } = (0, util_1.cropByRatio)(maxWidth, maxHeight, ratio);
+        cardborder.style.width = `${width}px`;
+        cardborder.style.height = `${height}px`;
+        scanAnimationContainer.style.width = `${width}px`;
+        scanAnimationContainer.style.height = `${height}px`;
+    }
+    function resetMaskUI() {
+        setBorderColor(null);
+    }
+    function setBorderColor(status) {
+        cardborder.classList.remove('error');
+        cardborder.classList.remove('pass');
+        if (status) {
+            cardborder.classList.add(status);
+        }
+    }
+    function clearAllFraudLottie() {
+        lottie_web_1.default.stop('arrow_left');
+        lottie_web_1.default.stop('arrow_right');
+        lottie_web_1.default.stop('arrow_up');
+        lottie_web_1.default.stop('arrow_down');
+        lottie_web_1.default.destroy('arrow_left');
+        lottie_web_1.default.destroy('arrow_right');
+        lottie_web_1.default.destroy('arrow_up');
+        lottie_web_1.default.destroy('arrow_down');
+    }
+    function setHeaderText(title, step) {
+        headerTitle.textContent = title;
+        headerSubtitle.textContent = step;
+    }
+    function showVideoElement(isShow = true) {
+        if (isShow) {
+            (0, util_1.showElement)(closeIcon);
+            (0, util_1.showElement)(titleTextPanel);
+            (0, util_1.showElement)(statusTextPanel);
+        }
+        else {
+            (0, util_1.hideElement)(closeIcon);
+            (0, util_1.hideElement)(titleTextPanel);
+            (0, util_1.hideElement)(statusTextPanel);
+        }
+    }
+    function reset() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            try {
+                video.srcObject
+                    .getTracks()
+                    .forEach((stream) => stream.stop());
+            }
+            catch (error) {
+                // no video, ignore
+            }
+            yield config.onDestroy();
+            for (let i = 0; i < rotateTimer.length; i++) {
+                clearTimeout(rotateTimer[i]);
+            }
+            (0, util_1.hidePopup)();
+            video.srcObject = null;
+            document.body.removeChild(container);
+            unsubscribe$.next();
+            unsubscribe$.complete();
+        });
+    }
+    return main();
+}
+exports.startOCR = startOCR;
+//# sourceMappingURL=ocr-flow.js.map