@authme/identity-verification 2.2.0 → 2.2.1-rc.3

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

@@ -1,700 +0,0 @@
-"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, headerTitle, headerSubtitle, } = (0, basic_1.renderBasicUI)({
-        headerIcon: config.ocrConfig.icon,
-        headerMode: config.ocrConfig.headerMode,
-    });
-    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,
-        showStatement: config.ocrConfig.showStatement,
-    });
-    const canvasSizeInfo$ = (0, rxjs_1.merge)((0, rxjs_1.from)((0, util_1.requestCamera)(video, 'back')).pipe((0, rxjs_1.tap)((cameraFacingMode) => {
-        if (typeof cameraFacingMode === 'string') {
-            video.classList.add(cameraFacingMode);
-        }
-        (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.EAuthMePassportServiceStatus.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.EAuthMePassportServiceStatus.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.EAuthMePassportServiceStatus.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) => {
-            (0, util_1.startSpinner)(translateService.translate('verify.uploading'));
-            return 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.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.tap)(() => {
-            (0, util_1.stopSpinner)();
-            container.style.display = 'none';
-        }), (0, rxjs_1.concatMap)((result) => {
-            function resultFromConfirmUI() {
-                return tslib_1.__awaiter(this, void 0, void 0, function* () {
-                    return Object.assign(Object.assign({}, result), { details: yield (0, ocr_ui_1.renderConfirmUI)({
-                            cardType: config.ocrConfig.type,
-                            items: {
-                                columns: Object.keys(result.details).sort((a, b) => {
-                                    const aScore = (0, id_recognition_1.getRecognitionColumnOrder)(a);
-                                    const bScore = (0, id_recognition_1.getRecognitionColumnOrder)(b);
-                                    return aScore - bScore || a.localeCompare(b);
-                                }),
-                                details: result.details,
-                            },
-                            options: {
-                                headerIcon: config.ocrConfig.icon,
-                                translate: (key) => translateService.translate(key),
-                            },
-                        }) });
-                });
-            }
-            return config.ocrConfig.displayResultPage
-                ? (0, rxjs_1.defer)(resultFromConfirmUI)
-                : (0, rxjs_1.of)(result);
-        }), (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)(() => {
-            document.body.removeChild(container);
-            return {
-                isSuccess: false,
-                code: `${core_1.ErrorCode.USER_CANCEL}`,
-                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 >= 320 && 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 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