idmission-web-sdk 2.1.44 → 2.1.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/id_capture/IdCaptureModelsProvider.d.ts +2 -2
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +1 -0
- package/dist/components/video_id/IdVideoCaptureGuidesCommon.d.ts +3 -1
- package/dist/sdk2.cjs.development.js +245 -248
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +245 -248
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +245 -248
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var webSdkVersion = '2.1.
|
|
218
|
+
var webSdkVersion = '2.1.46';
|
|
219
219
|
|
|
220
220
|
function getPlatform() {
|
|
221
221
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -8641,8 +8641,9 @@
|
|
|
8641
8641
|
checkEveryMs = 100;
|
|
8642
8642
|
}
|
|
8643
8643
|
return new Promise(function (resolve) {
|
|
8644
|
-
var _a, _b;
|
|
8644
|
+
var _a, _b, _c;
|
|
8645
8645
|
if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) return resolve();
|
|
8646
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.load();
|
|
8646
8647
|
var interval = setInterval(function () {
|
|
8647
8648
|
var _a, _b;
|
|
8648
8649
|
if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) {
|
|
@@ -11909,7 +11910,9 @@
|
|
|
11909
11910
|
},
|
|
11910
11911
|
detectionTime: 0,
|
|
11911
11912
|
focusPredictionTime: 0,
|
|
11912
|
-
bestFrameDetails:
|
|
11913
|
+
bestFrameDetails: {
|
|
11914
|
+
current: null
|
|
11915
|
+
},
|
|
11913
11916
|
getBestFrame: function getBestFrame() {
|
|
11914
11917
|
return null;
|
|
11915
11918
|
},
|
|
@@ -11945,15 +11948,13 @@
|
|
|
11945
11948
|
focusPredictionTime = _c.focusPredictionTime,
|
|
11946
11949
|
focusModelError = _c.focusModelError;
|
|
11947
11950
|
var onPredictionHandler = React.useRef();
|
|
11948
|
-
var
|
|
11949
|
-
bestFrameDetails = _d[0],
|
|
11950
|
-
setBestFrameDetails = _d[1];
|
|
11951
|
+
var bestFrameDetails = React.useRef(null);
|
|
11951
11952
|
var bestPredictionCanvas = React.useRef(null);
|
|
11952
11953
|
var bestFocusScore = React.useRef(0);
|
|
11953
11954
|
var stopDetection = React.useRef(0);
|
|
11954
|
-
var
|
|
11955
|
-
requiredDocumentType =
|
|
11956
|
-
setRequiredDocumentType =
|
|
11955
|
+
var _d = React.useState('none'),
|
|
11956
|
+
requiredDocumentType = _d[0],
|
|
11957
|
+
setRequiredDocumentType = _d[1];
|
|
11957
11958
|
var thresholds = React.useMemo(function () {
|
|
11958
11959
|
return _assign(_assign({}, documentDetectionThresholds), {
|
|
11959
11960
|
focus: focusThresholds
|
|
@@ -11990,12 +11991,12 @@
|
|
|
11990
11991
|
if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
|
|
11991
11992
|
bestFocusScore.current = focusScore;
|
|
11992
11993
|
drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
|
|
11993
|
-
|
|
11994
|
+
bestFrameDetails.current = {
|
|
11994
11995
|
boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
|
|
11995
11996
|
documentType: prediction.detectedDocumentType,
|
|
11996
11997
|
detectionScore: prediction.detectionScore,
|
|
11997
11998
|
focusScore: focusScore
|
|
11998
|
-
}
|
|
11999
|
+
};
|
|
11999
12000
|
}
|
|
12000
12001
|
}
|
|
12001
12002
|
(_f = onPredictionHandler.current) === null || _f === void 0 ? void 0 : _f.call(onPredictionHandler, _assign(_assign({}, prediction), {
|
|
@@ -12016,21 +12017,21 @@
|
|
|
12016
12017
|
onPredictionHandler.current = handler;
|
|
12017
12018
|
}, []);
|
|
12018
12019
|
var getBestFrame = React.useCallback(function () {
|
|
12019
|
-
if (!bestFrameDetails || !bestPredictionCanvas.current) return null;
|
|
12020
|
-
return _assign(_assign({}, bestFrameDetails), {
|
|
12020
|
+
if (!bestFrameDetails.current || !bestPredictionCanvas.current) return null;
|
|
12021
|
+
return _assign(_assign({}, bestFrameDetails.current), {
|
|
12021
12022
|
canvas: bestPredictionCanvas.current
|
|
12022
12023
|
});
|
|
12023
|
-
}, [
|
|
12024
|
-
var
|
|
12025
|
-
canvasKey =
|
|
12026
|
-
setCanvasKey =
|
|
12024
|
+
}, []);
|
|
12025
|
+
var _e = React.useState(0),
|
|
12026
|
+
canvasKey = _e[0],
|
|
12027
|
+
setCanvasKey = _e[1];
|
|
12027
12028
|
var resetBestFrame = React.useCallback(function () {
|
|
12028
12029
|
stopDetection.current += 1;
|
|
12029
12030
|
setCanvasKey(function (n) {
|
|
12030
12031
|
return n + 1;
|
|
12031
12032
|
});
|
|
12032
12033
|
clearDocumentDetectionLastPredictionCanvas();
|
|
12033
|
-
|
|
12034
|
+
bestFrameDetails.current = null;
|
|
12034
12035
|
bestFocusScore.current = 0;
|
|
12035
12036
|
}, [clearDocumentDetectionLastPredictionCanvas]);
|
|
12036
12037
|
React.useEffect(function () {
|
|
@@ -12054,7 +12055,7 @@
|
|
|
12054
12055
|
requiredDocumentType: requiredDocumentType,
|
|
12055
12056
|
setRequiredDocumentType: setRequiredDocumentType
|
|
12056
12057
|
};
|
|
12057
|
-
}, [
|
|
12058
|
+
}, [detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
|
|
12058
12059
|
return /*#__PURE__*/React.createElement(IdCaptureModelsContext.Provider, {
|
|
12059
12060
|
value: value
|
|
12060
12061
|
}, /*#__PURE__*/React.createElement(InvisibleCanvas, {
|
|
@@ -16688,7 +16689,7 @@
|
|
|
16688
16689
|
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"], ["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"])));
|
|
16689
16690
|
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
16690
16691
|
var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
16691
|
-
var StyledButtonsRow$a = styled(ButtonsRow$1)(templateObject_8$
|
|
16692
|
+
var StyledButtonsRow$a = styled(ButtonsRow$1)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
16692
16693
|
var _a, _b, _c, _d;
|
|
16693
16694
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
16694
16695
|
}, function (props) {
|
|
@@ -16722,7 +16723,7 @@
|
|
|
16722
16723
|
var _a, _b, _c, _d, _e, _f;
|
|
16723
16724
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
16724
16725
|
});
|
|
16725
|
-
var templateObject_1$x, templateObject_2$r, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$
|
|
16726
|
+
var templateObject_1$x, templateObject_2$r, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
|
|
16726
16727
|
|
|
16727
16728
|
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
16728
16729
|
var ContinuityCameraCheckbox = styled.input(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
@@ -16988,8 +16989,8 @@
|
|
|
16988
16989
|
var _a, _b, _c;
|
|
16989
16990
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
|
|
16990
16991
|
});
|
|
16991
|
-
var StyledImage = styled(CapturedDocumentImg)(templateObject_8$
|
|
16992
|
-
var templateObject_1$v, templateObject_2$p, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$
|
|
16992
|
+
var StyledImage = styled(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
16993
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$2;
|
|
16993
16994
|
|
|
16994
16995
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
16995
16996
|
var _this = this;
|
|
@@ -17075,9 +17076,10 @@
|
|
|
17075
17076
|
borderRadius = _o === void 0 ? 25 : _o,
|
|
17076
17077
|
_p = _a.borderColor,
|
|
17077
17078
|
borderColor = _p === void 0 ? 'white' : _p,
|
|
17079
|
+
aspectRatio = _a.aspectRatio,
|
|
17078
17080
|
_q = _a.progress,
|
|
17079
17081
|
progress = _q === void 0 ? 0 : _q,
|
|
17080
|
-
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "progress"]);
|
|
17082
|
+
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
|
|
17081
17083
|
var _r = useResizeObserver(),
|
|
17082
17084
|
ref = _r.ref,
|
|
17083
17085
|
_s = _r.width,
|
|
@@ -17099,7 +17101,10 @@
|
|
|
17099
17101
|
var wavesColor = (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.wavesColor) !== null && _g !== void 0 ? _g : '#287ec6';
|
|
17100
17102
|
var progressBarColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.progressBarColor) !== null && _k !== void 0 ? _k : '#287ec6';
|
|
17101
17103
|
return /*#__PURE__*/React.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React.createElement("div", {
|
|
17102
|
-
ref: ref
|
|
17104
|
+
ref: ref,
|
|
17105
|
+
style: {
|
|
17106
|
+
aspectRatio: aspectRatio
|
|
17107
|
+
}
|
|
17103
17108
|
}, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IdCardBorderSvg, {
|
|
17104
17109
|
width: width,
|
|
17105
17110
|
height: height,
|
|
@@ -17590,9 +17595,9 @@
|
|
|
17590
17595
|
}, function (props) {
|
|
17591
17596
|
return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
|
|
17592
17597
|
});
|
|
17593
|
-
var GuideText = styled.span(templateObject_8$
|
|
17598
|
+
var GuideText = styled.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
|
|
17594
17599
|
var GuideCenterInner = styled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n position: relative;\n margin: auto;\n"], ["\n position: relative;\n margin: auto;\n"])));
|
|
17595
|
-
var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$
|
|
17600
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$1, templateObject_9$1;
|
|
17596
17601
|
|
|
17597
17602
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
17598
17603
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -19435,51 +19440,57 @@
|
|
|
19435
19440
|
}))));
|
|
19436
19441
|
});
|
|
19437
19442
|
HeadGuideSvg.displayName = 'HeadGuideSvg';
|
|
19438
|
-
var PulsingHeadGuideContainer = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n position:
|
|
19443
|
+
var PulsingHeadGuideContainer = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"], ["\n display: flex;\n position: relative;\n height: 100%;\n max-height: 100%;\n\n & > .pulse {\n position: absolute;\n animation: glow-grow 2s ease-out infinite;\n\n &:nth-child(2) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(3) {\n animation-delay: 1.33s;\n }\n }\n\n & > .pulseOrigin {\n position: relative;\n }\n\n @keyframes glow-grow {\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n"])));
|
|
19439
19444
|
function HeadGuide(_a) {
|
|
19440
19445
|
var _b;
|
|
19441
19446
|
var _c = _a.status,
|
|
19442
19447
|
status = _c === void 0 ? 'ready' : _c,
|
|
19443
19448
|
props = __rest(_a, ["status"]);
|
|
19444
19449
|
var ref = React.useRef(null);
|
|
19445
|
-
var
|
|
19446
|
-
|
|
19447
|
-
|
|
19448
|
-
|
|
19449
|
-
|
|
19450
|
-
|
|
19451
|
-
|
|
19452
|
-
|
|
19453
|
-
|
|
19454
|
-
|
|
19455
|
-
left: box.left - parentBox.left
|
|
19456
|
-
}));
|
|
19450
|
+
var _d = useResizeObserver(),
|
|
19451
|
+
parentRef = _d.ref,
|
|
19452
|
+
parentHeight = _d.height;
|
|
19453
|
+
var _e = React.useState(),
|
|
19454
|
+
contentAspectRatio = _e[0],
|
|
19455
|
+
setContentAspectRatio = _e[1];
|
|
19456
|
+
React.useEffect(function () {
|
|
19457
|
+
if (!ref.current) return;
|
|
19458
|
+
var bbox = ref.current.getBBox();
|
|
19459
|
+
setContentAspectRatio((bbox.x + bbox.width + bbox.x) / (bbox.y + bbox.height + bbox.y));
|
|
19457
19460
|
}, []);
|
|
19461
|
+
var scaledWidth = React.useMemo(function () {
|
|
19462
|
+
return contentAspectRatio && parentHeight && parentHeight / contentAspectRatio;
|
|
19463
|
+
}, [contentAspectRatio, parentHeight]);
|
|
19458
19464
|
return /*#__PURE__*/React.createElement(PulsingHeadGuideContainer, {
|
|
19459
19465
|
ref: parentRef
|
|
19460
|
-
}, status === 'ready' &&
|
|
19466
|
+
}, status === 'ready' && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19461
19467
|
className: "pulse",
|
|
19462
19468
|
borderOpacity: 0.25,
|
|
19463
19469
|
borderColor: "#287ec6",
|
|
19464
|
-
|
|
19470
|
+
width: scaledWidth,
|
|
19471
|
+
height: parentHeight
|
|
19465
19472
|
})), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19466
19473
|
className: "pulse",
|
|
19467
19474
|
borderOpacity: 0.25,
|
|
19468
19475
|
borderColor: "#287ec6",
|
|
19469
|
-
|
|
19476
|
+
width: scaledWidth,
|
|
19477
|
+
height: parentHeight
|
|
19470
19478
|
})), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19471
19479
|
className: "pulse",
|
|
19472
19480
|
borderOpacity: 0.25,
|
|
19473
19481
|
borderColor: "#287ec6",
|
|
19474
|
-
|
|
19482
|
+
width: scaledWidth,
|
|
19483
|
+
height: parentHeight
|
|
19475
19484
|
})))), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19476
19485
|
ref: ref,
|
|
19477
19486
|
borderOpacity: 1,
|
|
19478
19487
|
className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
|
|
19479
|
-
status: status
|
|
19488
|
+
status: status,
|
|
19489
|
+
width: scaledWidth,
|
|
19490
|
+
height: parentHeight
|
|
19480
19491
|
})));
|
|
19481
19492
|
}
|
|
19482
|
-
var
|
|
19493
|
+
var AbsoluteSvg = styled.svg(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n"])));
|
|
19483
19494
|
var RelativeSvgContainer = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: ", ";\n"])), function (props) {
|
|
19484
19495
|
return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
|
|
19485
19496
|
});
|
|
@@ -19509,11 +19520,11 @@
|
|
|
19509
19520
|
borderWidth: borderWidth,
|
|
19510
19521
|
borderColor: statusBorderColor,
|
|
19511
19522
|
status: status
|
|
19512
|
-
}, props)), /*#__PURE__*/React.createElement(
|
|
19523
|
+
}, props)), status === 'processing' && ( /*#__PURE__*/React.createElement(AbsoluteSvg, _assign({}, props, {
|
|
19513
19524
|
viewBox: "271 92 297 406",
|
|
19514
19525
|
fill: "none",
|
|
19515
19526
|
xmlns: "http://www.w3.org/2000/svg"
|
|
19516
|
-
}),
|
|
19527
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
19517
19528
|
clipPath: "url(#clip0_428_1188)"
|
|
19518
19529
|
}, frame > 1 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 2 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 3 && ( /*#__PURE__*/React.createElement(React.Fragment, null, frame > 4 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
|
|
19519
19530
|
d: "M298.5 182.5L419 164.5L540 182",
|
|
@@ -19672,13 +19683,13 @@
|
|
|
19672
19683
|
cy: "409",
|
|
19673
19684
|
r: "7",
|
|
19674
19685
|
fill: "white"
|
|
19675
|
-
}))))
|
|
19686
|
+
})))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
19676
19687
|
id: "clip0_428_1188"
|
|
19677
19688
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
19678
19689
|
width: "840",
|
|
19679
19690
|
height: "740",
|
|
19680
19691
|
fill: "white"
|
|
19681
|
-
})))));
|
|
19692
|
+
}))))));
|
|
19682
19693
|
}
|
|
19683
19694
|
function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
19684
19695
|
var _b = _a.status,
|
|
@@ -19709,41 +19720,8 @@
|
|
|
19709
19720
|
}
|
|
19710
19721
|
var templateObject_1$k, templateObject_2$h, templateObject_3$f;
|
|
19711
19722
|
|
|
19712
|
-
var FaceCaptureGuideContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"
|
|
19713
|
-
|
|
19714
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
19715
|
-
// $borderWidth: number
|
|
19716
|
-
// $borderColor?: string
|
|
19717
|
-
// }>`
|
|
19718
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
19719
|
-
// border-color: ${(props) =>
|
|
19720
|
-
// props.$borderColor ??
|
|
19721
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
19722
|
-
// 'white'};
|
|
19723
|
-
// border-style: solid;
|
|
19724
|
-
// border-radius: 50%;
|
|
19725
|
-
// aspect-ratio: 1 / 1.618;
|
|
19726
|
-
// height: 50%;
|
|
19727
|
-
// margin: auto;
|
|
19728
|
-
// `
|
|
19729
|
-
])));
|
|
19730
|
-
// const FaceCaptureGuideOval = styled.div<{
|
|
19731
|
-
// $variant: FaceCaptureGuideOverlayVariant
|
|
19732
|
-
// $borderWidth: number
|
|
19733
|
-
// $borderColor?: string
|
|
19734
|
-
// }>`
|
|
19735
|
-
// border-width: ${(props) => props.$borderWidth}px;
|
|
19736
|
-
// border-color: ${(props) =>
|
|
19737
|
-
// props.$borderColor ??
|
|
19738
|
-
// props.theme.selfieCapture?.guides?.[`${props.$variant}Color`] ??
|
|
19739
|
-
// 'white'};
|
|
19740
|
-
// border-style: solid;
|
|
19741
|
-
// border-radius: 50%;
|
|
19742
|
-
// aspect-ratio: 1 / 1.618;
|
|
19743
|
-
// height: 50%;
|
|
19744
|
-
// margin: auto;
|
|
19745
|
-
// `
|
|
19746
|
-
var StyledSelfieCaptureAnimatedMask$2 = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"], ["\n max-width: 100%;\n max-height: 100%;\n height: 60%;\n"])));
|
|
19723
|
+
var FaceCaptureGuideContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n box-sizing: border-box;\n"])));
|
|
19724
|
+
var FaceCaptureGuideInner = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n height: 60%;\n"], ["\n position: relative;\n height: 60%;\n"])));
|
|
19747
19725
|
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
19748
19726
|
var _b = _a.classNames,
|
|
19749
19727
|
classNames = _b === void 0 ? {} : _b,
|
|
@@ -19757,13 +19735,13 @@
|
|
|
19757
19735
|
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
19758
19736
|
return /*#__PURE__*/React.createElement(FaceCaptureGuideContainer, {
|
|
19759
19737
|
className: classNames.container
|
|
19760
|
-
}, /*#__PURE__*/React.createElement(
|
|
19738
|
+
}, /*#__PURE__*/React.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
|
|
19761
19739
|
status: status,
|
|
19762
19740
|
borderColor: borderColor,
|
|
19763
19741
|
borderWidth: borderWidth,
|
|
19764
19742
|
borderOpacity: borderOpacity,
|
|
19765
19743
|
verticalAlign: "center"
|
|
19766
|
-
}));
|
|
19744
|
+
})));
|
|
19767
19745
|
};
|
|
19768
19746
|
var templateObject_1$j, templateObject_2$g;
|
|
19769
19747
|
|
|
@@ -20993,7 +20971,7 @@
|
|
|
20993
20971
|
var StyledOverlayImageContainer = styled(OverlayImageContainer)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"])));
|
|
20994
20972
|
var LoadingListContainer = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n z-index: 2;\n"], ["\n display: flex;\n position: relative;\n z-index: 2;\n"])));
|
|
20995
20973
|
var LoadingList = styled.ul(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
|
|
20996
|
-
var LoadingListItem = styled.li(templateObject_8
|
|
20974
|
+
var LoadingListItem = styled.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"])));
|
|
20997
20975
|
var ProgressContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
20998
20976
|
var ProgressBarBackground = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
20999
20977
|
var _a, _b, _c, _d;
|
|
@@ -21018,7 +20996,7 @@
|
|
|
21018
20996
|
var _a, _b, _c, _d, _e, _f;
|
|
21019
20997
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
21020
20998
|
});
|
|
21021
|
-
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8
|
|
20999
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
21022
21000
|
|
|
21023
21001
|
var components = {
|
|
21024
21002
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -21180,6 +21158,15 @@
|
|
|
21180
21158
|
setCaptureState('LOADING');
|
|
21181
21159
|
}
|
|
21182
21160
|
}, [cameraAccessDenied]);
|
|
21161
|
+
var onLoadingOverlayDismissed = React.useCallback(function () {
|
|
21162
|
+
setCaptureState('CAPTURING');
|
|
21163
|
+
}, []);
|
|
21164
|
+
var onFailureExitClick = React.useCallback(function () {
|
|
21165
|
+
releaseCameraAccessOnExit && releaseCameraAccess();
|
|
21166
|
+
setTimeout(function () {
|
|
21167
|
+
onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
|
|
21168
|
+
}, 0);
|
|
21169
|
+
}, [livenessCheckRequest, onExitAfterFailure, releaseCameraAccess, releaseCameraAccessOnExit, submissionResponse]);
|
|
21183
21170
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageContainer, {
|
|
21184
21171
|
className: "flex ".concat((_c = (_b = classNames.capture) === null || _b === void 0 ? void 0 : _b.container) !== null && _c !== void 0 ? _c : '')
|
|
21185
21172
|
}, renderCameraFeed && ( /*#__PURE__*/React.createElement(CameraVideoTag, {
|
|
@@ -21223,12 +21210,7 @@
|
|
|
21223
21210
|
verbiage: verbiage.failure,
|
|
21224
21211
|
canRetry: maxRetries > -1 && retryCount < maxRetries,
|
|
21225
21212
|
onRetryClick: onRetryCallback,
|
|
21226
|
-
onExitClick:
|
|
21227
|
-
releaseCameraAccessOnExit && releaseCameraAccess();
|
|
21228
|
-
setTimeout(function () {
|
|
21229
|
-
onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
|
|
21230
|
-
}, 0);
|
|
21231
|
-
}
|
|
21213
|
+
onExitClick: onFailureExitClick
|
|
21232
21214
|
});
|
|
21233
21215
|
default:
|
|
21234
21216
|
return null;
|
|
@@ -21241,9 +21223,7 @@
|
|
|
21241
21223
|
colors: colors.loadingOverlay,
|
|
21242
21224
|
verbiage: verbiage.loadingOverlay,
|
|
21243
21225
|
onUserCancel: onUserCancel,
|
|
21244
|
-
onDismissed:
|
|
21245
|
-
setCaptureState('CAPTURING');
|
|
21246
|
-
}
|
|
21226
|
+
onDismissed: onLoadingOverlayDismissed
|
|
21247
21227
|
}));
|
|
21248
21228
|
};
|
|
21249
21229
|
|
|
@@ -22772,7 +22752,7 @@
|
|
|
22772
22752
|
className: classNames.inner
|
|
22773
22753
|
}, /*#__PURE__*/React.createElement(FaceGuideContainer$1, {
|
|
22774
22754
|
className: classNames.faceGuideContainer
|
|
22775
|
-
}, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask
|
|
22755
|
+
}, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
22776
22756
|
className: classNames.faceGuide,
|
|
22777
22757
|
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
22778
22758
|
borderWidth: faceGuideBorderWidth,
|
|
@@ -22811,8 +22791,8 @@
|
|
|
22811
22791
|
});
|
|
22812
22792
|
var Inner$1 = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"])));
|
|
22813
22793
|
var FaceGuideContainer$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n"], ["\n position: relative;\n height: 50%;\n"])));
|
|
22814
|
-
var StyledSelfieCaptureAnimatedMask
|
|
22815
|
-
var SignaturePadContainer = styled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: relative;\n height: 50%;\n aspect-ratio: 2;\n"], ["\n position: relative;\n height: 50%;\n aspect-ratio: 2;\n"])));
|
|
22794
|
+
var StyledSelfieCaptureAnimatedMask = styled(SelfieCaptureAnimatedMaskWithStatus)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n max-width: 100%;\n height: 100%;\n"], ["\n max-width: 100%;\n height: 100%;\n"])));
|
|
22795
|
+
var SignaturePadContainer = styled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: relative;\n max-width: 100%;\n height: 50%;\n aspect-ratio: 2;\n"], ["\n position: relative;\n max-width: 100%;\n height: 50%;\n aspect-ratio: 2;\n"])));
|
|
22816
22796
|
var SignatureCanvasContainer = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 67px);\n ", "\n"])), function (props) {
|
|
22817
22797
|
return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
|
|
22818
22798
|
});
|
|
@@ -23131,29 +23111,29 @@
|
|
|
23131
23111
|
};
|
|
23132
23112
|
|
|
23133
23113
|
var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
23134
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x
|
|
23135
|
-
var
|
|
23136
|
-
requestedAction =
|
|
23137
|
-
|
|
23138
|
-
satisfied =
|
|
23139
|
-
|
|
23140
|
-
faceGuideStatus =
|
|
23114
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
23115
|
+
var _y = _a.requestedAction,
|
|
23116
|
+
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
23117
|
+
_z = _a.satisfied,
|
|
23118
|
+
satisfied = _z === void 0 ? false : _z,
|
|
23119
|
+
_0 = _a.faceGuideStatus,
|
|
23120
|
+
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
23141
23121
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
23142
23122
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
23143
|
-
|
|
23144
|
-
idCardGuideStatus =
|
|
23123
|
+
_1 = _a.idCardGuideStatus,
|
|
23124
|
+
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
23145
23125
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
23146
23126
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
23147
|
-
|
|
23148
|
-
idCardCaptureProgress =
|
|
23149
|
-
|
|
23150
|
-
assets =
|
|
23151
|
-
|
|
23152
|
-
classNames =
|
|
23153
|
-
|
|
23154
|
-
rawVerbiage =
|
|
23127
|
+
_2 = _a.idCardCaptureProgress,
|
|
23128
|
+
idCardCaptureProgress = _2 === void 0 ? 0 : _2,
|
|
23129
|
+
_3 = _a.assets,
|
|
23130
|
+
assets = _3 === void 0 ? {} : _3,
|
|
23131
|
+
_4 = _a.classNames,
|
|
23132
|
+
classNames = _4 === void 0 ? {} : _4,
|
|
23133
|
+
_5 = _a.verbiage,
|
|
23134
|
+
rawVerbiage = _5 === void 0 ? {} : _5;
|
|
23155
23135
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
23156
|
-
|
|
23136
|
+
// const imageRef = useRef<HTMLImageElement | null>(null)
|
|
23157
23137
|
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
|
|
23158
23138
|
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
|
|
23159
23139
|
var verbiage = useTranslations(rawVerbiage, {
|
|
@@ -23168,25 +23148,42 @@
|
|
|
23168
23148
|
if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '#D6DCE7';
|
|
23169
23149
|
if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 20;
|
|
23170
23150
|
if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '#D6DCE7';
|
|
23171
|
-
var
|
|
23172
|
-
idCardGuideRef =
|
|
23173
|
-
|
|
23174
|
-
idCardGuideWidth =
|
|
23175
|
-
|
|
23176
|
-
idCardGuideHeight =
|
|
23151
|
+
var _6 = useResizeObserver(),
|
|
23152
|
+
idCardGuideRef = _6.ref,
|
|
23153
|
+
_7 = _6.width,
|
|
23154
|
+
idCardGuideWidth = _7 === void 0 ? 0 : _7,
|
|
23155
|
+
_8 = _6.height,
|
|
23156
|
+
idCardGuideHeight = _8 === void 0 ? 0 : _8;
|
|
23157
|
+
var _9 = React.useState(undefined),
|
|
23158
|
+
aspectRatio = _9[0],
|
|
23159
|
+
setAspectRatio = _9[1];
|
|
23160
|
+
// const imageRef = (img: HTMLImageElement) => {
|
|
23161
|
+
// if (!img) return
|
|
23162
|
+
// if (typeof aspectRatio === 'number' && aspectRatio > 0) return
|
|
23163
|
+
// setAspectRatio(
|
|
23164
|
+
// (img.naturalHeight ?? 0) > 0
|
|
23165
|
+
// ? img.naturalWidth / img.naturalHeight
|
|
23166
|
+
// : undefined,
|
|
23167
|
+
// )
|
|
23168
|
+
// }
|
|
23169
|
+
function onImageLoaded(e) {
|
|
23170
|
+
var _a;
|
|
23171
|
+
var img = e.currentTarget;
|
|
23172
|
+
setAspectRatio(((_a = img.naturalHeight) !== null && _a !== void 0 ? _a : 0) > 0 ? img.naturalWidth / img.naturalHeight : undefined);
|
|
23173
|
+
}
|
|
23177
23174
|
var idCardImageStyle = React.useMemo(function () {
|
|
23178
23175
|
return {
|
|
23179
23176
|
maxWidth: idCardGuideWidth > 0 ? idCardGuideWidth : undefined,
|
|
23180
23177
|
maxHeight: idCardGuideHeight,
|
|
23181
|
-
height: '100%'
|
|
23178
|
+
height: '100%',
|
|
23179
|
+
aspectRatio: aspectRatio
|
|
23182
23180
|
};
|
|
23183
|
-
}, [idCardGuideWidth, idCardGuideHeight]);
|
|
23184
|
-
var aspectRatio = ((_u = (_t = imageRef.current) === null || _t === void 0 ? void 0 : _t.naturalHeight) !== null && _u !== void 0 ? _u : 0) > 0 ? imageRef.current.naturalWidth / imageRef.current.naturalHeight : undefined;
|
|
23181
|
+
}, [idCardGuideWidth, idCardGuideHeight, aspectRatio]);
|
|
23185
23182
|
return /*#__PURE__*/React.createElement(Container, {
|
|
23186
23183
|
className: classNames.container
|
|
23187
23184
|
}, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(FaceGuideContainer, {
|
|
23188
23185
|
className: classNames.faceGuideContainer
|
|
23189
|
-
}, /*#__PURE__*/React.createElement(
|
|
23186
|
+
}, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
|
|
23190
23187
|
className: classNames.faceGuide,
|
|
23191
23188
|
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
23192
23189
|
borderWidth: faceGuideBorderWidth,
|
|
@@ -23205,15 +23202,16 @@
|
|
|
23205
23202
|
status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
|
|
23206
23203
|
borderWidth: idCardGuideBorderWidth,
|
|
23207
23204
|
borderColor: idCardGuideBorderColor,
|
|
23205
|
+
aspectRatio: aspectRatio,
|
|
23208
23206
|
"$isVisible": requestedAction !== 'FLIP_ID',
|
|
23209
23207
|
progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
|
|
23210
23208
|
}, /*#__PURE__*/React.createElement(IdCardGuideImage, {
|
|
23211
23209
|
alt: "",
|
|
23212
|
-
ref: imageRef,
|
|
23213
23210
|
className: classNames.idCardGuideImage,
|
|
23214
|
-
"$isMirrored": !((
|
|
23211
|
+
"$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
|
|
23215
23212
|
style: idCardImageStyle,
|
|
23216
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
|
|
23213
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
23214
|
+
onLoad: onImageLoaded
|
|
23217
23215
|
})), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
23218
23216
|
assets: assets,
|
|
23219
23217
|
classNames: classNames.flipIdPrompt,
|
|
@@ -23224,8 +23222,8 @@
|
|
|
23224
23222
|
className: classNames.idCardGuideInstructionsContainer
|
|
23225
23223
|
}, /*#__PURE__*/React.createElement(IdCardGuideInstructions, {
|
|
23226
23224
|
className: classNames.idCardGuideInstructions,
|
|
23227
|
-
"$textColor": (
|
|
23228
|
-
"$background": (
|
|
23225
|
+
"$textColor": (_v = (_u = theme.idVideoCapture) === null || _u === void 0 ? void 0 : _u.idCardGuides) === null || _v === void 0 ? void 0 : _v.instructionsTextColor,
|
|
23226
|
+
"$background": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsBackgroundColor
|
|
23229
23227
|
}, instructionText)))));
|
|
23230
23228
|
};
|
|
23231
23229
|
var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"], ["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"])), function (props) {
|
|
@@ -23234,12 +23232,11 @@
|
|
|
23234
23232
|
});
|
|
23235
23233
|
var Inner = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 1280px;\n display: flex;\n margin: auto;\n align-items: center;\n flex-direction: column;\n"])));
|
|
23236
23234
|
var FaceGuideContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: relative;\n height: 70%;\n"], ["\n position: relative;\n height: 70%;\n"])));
|
|
23237
|
-
var
|
|
23238
|
-
var
|
|
23239
|
-
var
|
|
23240
|
-
var
|
|
23241
|
-
var
|
|
23242
|
-
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
|
|
23235
|
+
var IdCardGuideContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n margin: 0 auto;\n position: relative;\n max-width: 100%;\n height: 30%;\n"])));
|
|
23236
|
+
var IdCardGuideInner = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n"], ["\n position: relative;\n height: 100%;\n"])));
|
|
23237
|
+
var IdCardGuideInstructionsContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: calc(100% - 80px);\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n"], ["\n width: calc(100% - 80px);\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 0 40px;\n position: fixed;\n bottom: 14px;\n left: 0;\n right: 0;\n"])));
|
|
23238
|
+
var IdCardGuideInstructions = styled(GuidanceMessage)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"], ["\n align-content: center;\n margin: 12px auto;\n padding: 8px 12px;\n font-weight: bold;\n font-size: 18px;\n"])));
|
|
23239
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
23243
23240
|
|
|
23244
23241
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
23245
23242
|
var text = _a.text,
|
|
@@ -23370,98 +23367,98 @@
|
|
|
23370
23367
|
}
|
|
23371
23368
|
};
|
|
23372
23369
|
var IdVideoCapture = function IdVideoCapture(_a) {
|
|
23373
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
23370
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
23374
23371
|
var onComplete = _a.onComplete,
|
|
23375
23372
|
onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
|
|
23376
23373
|
onIdBackImageCaptured = _a.onIdBackImageCaptured,
|
|
23377
23374
|
onFaceNotDetected = _a.onFaceNotDetected,
|
|
23378
23375
|
onRecordingFailed = _a.onRecordingFailed,
|
|
23379
23376
|
onExitCapture = _a.onExitCapture,
|
|
23380
|
-
|
|
23381
|
-
idCaptureModelsEnabled =
|
|
23382
|
-
|
|
23383
|
-
idCardFrontDelay =
|
|
23384
|
-
|
|
23385
|
-
videoIdCaptureThresholds =
|
|
23386
|
-
|
|
23387
|
-
skipShowIdCardBack =
|
|
23388
|
-
|
|
23389
|
-
captureCountdownSeconds =
|
|
23377
|
+
_y = _a.idCaptureModelsEnabled,
|
|
23378
|
+
idCaptureModelsEnabled = _y === void 0 ? true : _y,
|
|
23379
|
+
_z = _a.idCardFrontDelay,
|
|
23380
|
+
idCardFrontDelay = _z === void 0 ? 1000 : _z,
|
|
23381
|
+
_0 = _a.videoIdCaptureThresholds,
|
|
23382
|
+
videoIdCaptureThresholds = _0 === void 0 ? defaultVideoIdCaptureThresholds : _0,
|
|
23383
|
+
_1 = _a.skipShowIdCardBack,
|
|
23384
|
+
skipShowIdCardBack = _1 === void 0 ? false : _1,
|
|
23385
|
+
_2 = _a.captureCountdownSeconds,
|
|
23386
|
+
captureCountdownSeconds = _2 === void 0 ? 3 : _2,
|
|
23390
23387
|
readTextPrompt = _a.readTextPrompt,
|
|
23391
|
-
|
|
23392
|
-
readTextTimeoutDurationMs =
|
|
23393
|
-
|
|
23394
|
-
readTextMinReadingMs =
|
|
23395
|
-
|
|
23396
|
-
disableFaceDetectionWhileAudioCapture =
|
|
23397
|
-
|
|
23398
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
23399
|
-
|
|
23400
|
-
mergeAVStreams =
|
|
23401
|
-
|
|
23402
|
-
assets =
|
|
23403
|
-
|
|
23404
|
-
classNames =
|
|
23405
|
-
|
|
23406
|
-
colors =
|
|
23407
|
-
|
|
23408
|
-
rawVerbiage =
|
|
23409
|
-
|
|
23410
|
-
debugMode =
|
|
23411
|
-
var
|
|
23412
|
-
ref =
|
|
23413
|
-
|
|
23414
|
-
width =
|
|
23415
|
-
|
|
23416
|
-
height =
|
|
23417
|
-
var
|
|
23418
|
-
cameraRef =
|
|
23419
|
-
videoRef =
|
|
23420
|
-
videoLoaded =
|
|
23421
|
-
cameraReady =
|
|
23422
|
-
microphoneReady =
|
|
23423
|
-
audioStream =
|
|
23424
|
-
setVideoLoaded =
|
|
23425
|
-
var
|
|
23426
|
-
detectedObjects =
|
|
23427
|
-
setDetectedObjects =
|
|
23428
|
-
var
|
|
23429
|
-
faces =
|
|
23430
|
-
setFaces =
|
|
23431
|
-
var
|
|
23432
|
-
idModelsReady =
|
|
23433
|
-
startIdModels =
|
|
23434
|
-
stopIdModels =
|
|
23435
|
-
onIdPredictionMade =
|
|
23436
|
-
setThresholds =
|
|
23437
|
-
bestFrameDetails =
|
|
23438
|
-
resetBestFrame =
|
|
23439
|
-
idModelError =
|
|
23440
|
-
var
|
|
23441
|
-
videoStartsAt =
|
|
23442
|
-
setVideoStartsAt =
|
|
23443
|
-
var
|
|
23444
|
-
setIdCaptureVideoAudioStartsAt =
|
|
23445
|
-
setExpectedAudioText =
|
|
23446
|
-
var
|
|
23447
|
-
startSelfieGuidance =
|
|
23448
|
-
stopSelfieGuidance =
|
|
23449
|
-
onSelfiePredictionMade =
|
|
23450
|
-
selfieModelError =
|
|
23451
|
-
var
|
|
23452
|
-
isRecordingVideo =
|
|
23453
|
-
startRecordingVideo =
|
|
23454
|
-
startRecordingAudio =
|
|
23455
|
-
stopRecordingVideo =
|
|
23456
|
-
stopRecordingAudio =
|
|
23457
|
-
videoRecordingUnintentionallyStopped =
|
|
23458
|
-
audioRecordingUnintentionallyStopped =
|
|
23459
|
-
videoUrl =
|
|
23460
|
-
audioUrl =
|
|
23388
|
+
_3 = _a.readTextTimeoutDurationMs,
|
|
23389
|
+
readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
|
|
23390
|
+
_4 = _a.readTextMinReadingMs,
|
|
23391
|
+
readTextMinReadingMs = _4 === void 0 ? 10000 : _4,
|
|
23392
|
+
_5 = _a.disableFaceDetectionWhileAudioCapture,
|
|
23393
|
+
disableFaceDetectionWhileAudioCapture = _5 === void 0 ? false : _5,
|
|
23394
|
+
_6 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
23395
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _6 === void 0 ? 2000 : _6,
|
|
23396
|
+
_7 = _a.mergeAVStreams,
|
|
23397
|
+
mergeAVStreams = _7 === void 0 ? false : _7,
|
|
23398
|
+
_8 = _a.assets,
|
|
23399
|
+
assets = _8 === void 0 ? {} : _8,
|
|
23400
|
+
_9 = _a.classNames,
|
|
23401
|
+
classNames = _9 === void 0 ? {} : _9,
|
|
23402
|
+
_10 = _a.colors,
|
|
23403
|
+
colors = _10 === void 0 ? {} : _10,
|
|
23404
|
+
_11 = _a.verbiage,
|
|
23405
|
+
rawVerbiage = _11 === void 0 ? {} : _11,
|
|
23406
|
+
_12 = _a.debugMode,
|
|
23407
|
+
debugMode = _12 === void 0 ? false : _12;
|
|
23408
|
+
var _13 = useResizeObserver(),
|
|
23409
|
+
ref = _13.ref,
|
|
23410
|
+
_14 = _13.width,
|
|
23411
|
+
width = _14 === void 0 ? 1 : _14,
|
|
23412
|
+
_15 = _13.height,
|
|
23413
|
+
height = _15 === void 0 ? 1 : _15;
|
|
23414
|
+
var _16 = React.useContext(CameraStateContext),
|
|
23415
|
+
cameraRef = _16.cameraRef,
|
|
23416
|
+
videoRef = _16.videoRef,
|
|
23417
|
+
videoLoaded = _16.videoLoaded,
|
|
23418
|
+
cameraReady = _16.cameraReady,
|
|
23419
|
+
microphoneReady = _16.microphoneReady,
|
|
23420
|
+
audioStream = _16.audioStream,
|
|
23421
|
+
setVideoLoaded = _16.setVideoLoaded;
|
|
23422
|
+
var _17 = React.useState([]),
|
|
23423
|
+
detectedObjects = _17[0],
|
|
23424
|
+
setDetectedObjects = _17[1];
|
|
23425
|
+
var _18 = React.useState([]),
|
|
23426
|
+
faces = _18[0],
|
|
23427
|
+
setFaces = _18[1];
|
|
23428
|
+
var _19 = React.useContext(IdCaptureModelsContext),
|
|
23429
|
+
idModelsReady = _19.ready,
|
|
23430
|
+
startIdModels = _19.start,
|
|
23431
|
+
stopIdModels = _19.stop,
|
|
23432
|
+
onIdPredictionMade = _19.onPredictionMade,
|
|
23433
|
+
setThresholds = _19.setThresholds,
|
|
23434
|
+
bestFrameDetails = _19.bestFrameDetails,
|
|
23435
|
+
resetBestFrame = _19.resetBestFrame,
|
|
23436
|
+
idModelError = _19.modelError;
|
|
23437
|
+
var _20 = React.useState(null),
|
|
23438
|
+
videoStartsAt = _20[0],
|
|
23439
|
+
setVideoStartsAt = _20[1];
|
|
23440
|
+
var _21 = React.useContext(SubmissionContext),
|
|
23441
|
+
setIdCaptureVideoAudioStartsAt = _21.setIdCaptureVideoAudioStartsAt,
|
|
23442
|
+
setExpectedAudioText = _21.setExpectedAudioText;
|
|
23443
|
+
var _22 = React.useContext(SelfieGuidanceModelsContext),
|
|
23444
|
+
startSelfieGuidance = _22.start,
|
|
23445
|
+
stopSelfieGuidance = _22.stop,
|
|
23446
|
+
onSelfiePredictionMade = _22.onPredictionMade,
|
|
23447
|
+
selfieModelError = _22.error;
|
|
23448
|
+
var _23 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
|
|
23449
|
+
isRecordingVideo = _23.isRecordingVideo,
|
|
23450
|
+
startRecordingVideo = _23.startRecordingVideo,
|
|
23451
|
+
startRecordingAudio = _23.startRecordingAudio,
|
|
23452
|
+
stopRecordingVideo = _23.stopRecordingVideo,
|
|
23453
|
+
stopRecordingAudio = _23.stopRecordingAudio,
|
|
23454
|
+
videoRecordingUnintentionallyStopped = _23.videoRecordingUnintentionallyStopped,
|
|
23455
|
+
audioRecordingUnintentionallyStopped = _23.audioRecordingUnintentionallyStopped,
|
|
23456
|
+
videoUrl = _23.videoUrl,
|
|
23457
|
+
audioUrl = _23.audioUrl;
|
|
23461
23458
|
var countdownTimeoutRef = React.useRef(undefined);
|
|
23462
|
-
var
|
|
23463
|
-
countdownRemaining =
|
|
23464
|
-
setCountdownRemaining =
|
|
23459
|
+
var _24 = React.useState(-1),
|
|
23460
|
+
countdownRemaining = _24[0],
|
|
23461
|
+
setCountdownRemaining = _24[1];
|
|
23465
23462
|
React.useEffect(function () {
|
|
23466
23463
|
if (!isRecordingVideo && !videoUrl) {
|
|
23467
23464
|
startRecordingVideo();
|
|
@@ -23481,9 +23478,9 @@
|
|
|
23481
23478
|
onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
|
|
23482
23479
|
}
|
|
23483
23480
|
}, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
|
|
23484
|
-
var
|
|
23485
|
-
requestedAction =
|
|
23486
|
-
setRequestedAction =
|
|
23481
|
+
var _25 = React.useState('SHOW_ID_FRONT'),
|
|
23482
|
+
requestedAction = _25[0],
|
|
23483
|
+
setRequestedAction = _25[1];
|
|
23487
23484
|
var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
|
|
23488
23485
|
React.useEffect(function startModelsWhenCapturing() {
|
|
23489
23486
|
if (!shouldRunIdModels) return;
|
|
@@ -23495,15 +23492,15 @@
|
|
|
23495
23492
|
React.useEffect(function () {
|
|
23496
23493
|
setThresholds(videoIdCaptureThresholds);
|
|
23497
23494
|
}, [requestedAction, setThresholds, videoIdCaptureThresholds]);
|
|
23498
|
-
var _24 = React.useState(0),
|
|
23499
|
-
currentDetectionScore = _24[0],
|
|
23500
|
-
setCurrentDetectionScore = _24[1];
|
|
23501
|
-
var _25 = React.useState(0),
|
|
23502
|
-
currentFocusScore = _25[0],
|
|
23503
|
-
setCurrentFocusScore = _25[1];
|
|
23504
23495
|
var _26 = React.useState(0),
|
|
23505
|
-
|
|
23506
|
-
|
|
23496
|
+
currentDetectionScore = _26[0],
|
|
23497
|
+
setCurrentDetectionScore = _26[1];
|
|
23498
|
+
var _27 = React.useState(0),
|
|
23499
|
+
currentFocusScore = _27[0],
|
|
23500
|
+
setCurrentFocusScore = _27[1];
|
|
23501
|
+
var _28 = React.useState(0),
|
|
23502
|
+
goodFramesCount = _28[0],
|
|
23503
|
+
setGoodFramesCount = _28[1];
|
|
23507
23504
|
var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
|
|
23508
23505
|
var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
|
|
23509
23506
|
React.useEffect(function () {
|
|
@@ -23522,9 +23519,9 @@
|
|
|
23522
23519
|
} : 0);
|
|
23523
23520
|
});
|
|
23524
23521
|
}, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction]);
|
|
23525
|
-
var
|
|
23526
|
-
idFrontCaptureStartedAt =
|
|
23527
|
-
setFirstGoodFrameTime =
|
|
23522
|
+
var _29 = React.useState(null),
|
|
23523
|
+
idFrontCaptureStartedAt = _29[0],
|
|
23524
|
+
setFirstGoodFrameTime = _29[1];
|
|
23528
23525
|
React.useEffect(function () {
|
|
23529
23526
|
if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
|
|
23530
23527
|
}, [goodFramesCount]);
|
|
@@ -23545,9 +23542,9 @@
|
|
|
23545
23542
|
var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
|
|
23546
23543
|
var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
|
|
23547
23544
|
var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
|
|
23548
|
-
var
|
|
23549
|
-
countdownStartedAt =
|
|
23550
|
-
setCountdownStartedAt =
|
|
23545
|
+
var _30 = React.useState(),
|
|
23546
|
+
countdownStartedAt = _30[0],
|
|
23547
|
+
setCountdownStartedAt = _30[1];
|
|
23551
23548
|
var photoCanvas = React.useRef(null);
|
|
23552
23549
|
var frameLock = React.useRef(false);
|
|
23553
23550
|
var captureFrame = React.useCallback(function () {
|
|
@@ -23670,9 +23667,9 @@
|
|
|
23670
23667
|
stopSelfieGuidance();
|
|
23671
23668
|
};
|
|
23672
23669
|
}, [startSelfieGuidance, stopSelfieGuidance]);
|
|
23673
|
-
var
|
|
23674
|
-
numFramesWithoutFaces =
|
|
23675
|
-
setNumFramesWithoutFaces =
|
|
23670
|
+
var _31 = React.useState(0),
|
|
23671
|
+
numFramesWithoutFaces = _31[0],
|
|
23672
|
+
setNumFramesWithoutFaces = _31[1];
|
|
23676
23673
|
onSelfiePredictionMade(f(React.useCallback(function (faces) {
|
|
23677
23674
|
if (selfieModelError) return;
|
|
23678
23675
|
setFaces(faces);
|
|
@@ -23687,12 +23684,12 @@
|
|
|
23687
23684
|
}
|
|
23688
23685
|
}, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
|
|
23689
23686
|
var theme = styled.useTheme();
|
|
23690
|
-
var
|
|
23687
|
+
var _32 = useTranslations(rawVerbiage, {
|
|
23691
23688
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
23692
23689
|
captureBtnText: 'Capture'
|
|
23693
23690
|
}),
|
|
23694
|
-
captureBtnText =
|
|
23695
|
-
faceNotCenteredText =
|
|
23691
|
+
captureBtnText = _32.captureBtnText,
|
|
23692
|
+
faceNotCenteredText = _32.faceNotCenteredText;
|
|
23696
23693
|
var debugScalingDetails = useDebugScalingDetails({
|
|
23697
23694
|
enabled: debugMode,
|
|
23698
23695
|
pageWidth: width,
|
|
@@ -23750,7 +23747,7 @@
|
|
|
23750
23747
|
className: classNames.guidanceMessage,
|
|
23751
23748
|
"$background": (_q = (_p = (_o = theme.guidanceMessages) === null || _o === void 0 ? void 0 : _o.negative) === null || _p === void 0 ? void 0 : _p.backgroundColor) !== null && _q !== void 0 ? _q : 'red',
|
|
23752
23749
|
"$textColor": (_t = (_s = (_r = theme.guidanceMessages) === null || _r === void 0 ? void 0 : _r.negative) === null || _s === void 0 ? void 0 : _s.textColor) !== null && _t !== void 0 ? _t : 'white'
|
|
23753
|
-
}, guidanceText))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React.createElement("br", null), "Best Frame Detection Score:
|
|
23750
|
+
}, guidanceText))), debugMode && ( /*#__PURE__*/React.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React.createElement("br", null), "Best Frame Detection Score:", ' ', (_v = (_u = bestFrameDetails.current) === null || _u === void 0 ? void 0 : _u.detectionScore) !== null && _v !== void 0 ? _v : 0, /*#__PURE__*/React.createElement("br", null), "Best Frame Focus Score: ", (_x = (_w = bestFrameDetails.current) === null || _w === void 0 ? void 0 : _w.focusScore) !== null && _x !== void 0 ? _x : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React.createElement(CountdownContainer, {
|
|
23754
23751
|
className: classNames.countdownContainer
|
|
23755
23752
|
}, /*#__PURE__*/React.createElement(Countdown, {
|
|
23756
23753
|
className: classNames.countdown
|