idmission-web-sdk 2.1.45 → 2.1.47
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 +256 -255
- 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 +256 -255
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +256 -255
- 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.47';
|
|
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) {
|
|
@@ -8741,8 +8742,10 @@
|
|
|
8741
8742
|
return [4 /*yield*/, waitForVideoReady(videoRef)];
|
|
8742
8743
|
case 1:
|
|
8743
8744
|
_a.sent();
|
|
8744
|
-
|
|
8745
|
-
|
|
8745
|
+
setTimeout(function () {
|
|
8746
|
+
loadedModel.classifyForVideo(videoRef.current, performance.now());
|
|
8747
|
+
setReady(true);
|
|
8748
|
+
}, 500);
|
|
8746
8749
|
return [2 /*return*/];
|
|
8747
8750
|
}
|
|
8748
8751
|
});
|
|
@@ -11423,8 +11426,10 @@
|
|
|
11423
11426
|
return [4 /*yield*/, waitForVideoReady(videoRef)];
|
|
11424
11427
|
case 1:
|
|
11425
11428
|
_a.sent();
|
|
11426
|
-
|
|
11427
|
-
|
|
11429
|
+
setTimeout(function () {
|
|
11430
|
+
model.detectForVideo(videoRef.current, performance.now());
|
|
11431
|
+
setReady(true);
|
|
11432
|
+
}, 500);
|
|
11428
11433
|
return [2 /*return*/];
|
|
11429
11434
|
}
|
|
11430
11435
|
});
|
|
@@ -11909,7 +11914,9 @@
|
|
|
11909
11914
|
},
|
|
11910
11915
|
detectionTime: 0,
|
|
11911
11916
|
focusPredictionTime: 0,
|
|
11912
|
-
bestFrameDetails:
|
|
11917
|
+
bestFrameDetails: {
|
|
11918
|
+
current: null
|
|
11919
|
+
},
|
|
11913
11920
|
getBestFrame: function getBestFrame() {
|
|
11914
11921
|
return null;
|
|
11915
11922
|
},
|
|
@@ -11945,15 +11952,13 @@
|
|
|
11945
11952
|
focusPredictionTime = _c.focusPredictionTime,
|
|
11946
11953
|
focusModelError = _c.focusModelError;
|
|
11947
11954
|
var onPredictionHandler = React.useRef();
|
|
11948
|
-
var
|
|
11949
|
-
bestFrameDetails = _d[0],
|
|
11950
|
-
setBestFrameDetails = _d[1];
|
|
11955
|
+
var bestFrameDetails = React.useRef(null);
|
|
11951
11956
|
var bestPredictionCanvas = React.useRef(null);
|
|
11952
11957
|
var bestFocusScore = React.useRef(0);
|
|
11953
11958
|
var stopDetection = React.useRef(0);
|
|
11954
|
-
var
|
|
11955
|
-
requiredDocumentType =
|
|
11956
|
-
setRequiredDocumentType =
|
|
11959
|
+
var _d = React.useState('none'),
|
|
11960
|
+
requiredDocumentType = _d[0],
|
|
11961
|
+
setRequiredDocumentType = _d[1];
|
|
11957
11962
|
var thresholds = React.useMemo(function () {
|
|
11958
11963
|
return _assign(_assign({}, documentDetectionThresholds), {
|
|
11959
11964
|
focus: focusThresholds
|
|
@@ -11990,12 +11995,12 @@
|
|
|
11990
11995
|
if (bestFocusScore.current <= focusScore && stopDetectionAtStart === stopDetection.current) {
|
|
11991
11996
|
bestFocusScore.current = focusScore;
|
|
11992
11997
|
drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
|
|
11993
|
-
|
|
11998
|
+
bestFrameDetails.current = {
|
|
11994
11999
|
boundingBox: (_e = prediction.bestDocument) === null || _e === void 0 ? void 0 : _e.box,
|
|
11995
12000
|
documentType: prediction.detectedDocumentType,
|
|
11996
12001
|
detectionScore: prediction.detectionScore,
|
|
11997
12002
|
focusScore: focusScore
|
|
11998
|
-
}
|
|
12003
|
+
};
|
|
11999
12004
|
}
|
|
12000
12005
|
}
|
|
12001
12006
|
(_f = onPredictionHandler.current) === null || _f === void 0 ? void 0 : _f.call(onPredictionHandler, _assign(_assign({}, prediction), {
|
|
@@ -12016,21 +12021,21 @@
|
|
|
12016
12021
|
onPredictionHandler.current = handler;
|
|
12017
12022
|
}, []);
|
|
12018
12023
|
var getBestFrame = React.useCallback(function () {
|
|
12019
|
-
if (!bestFrameDetails || !bestPredictionCanvas.current) return null;
|
|
12020
|
-
return _assign(_assign({}, bestFrameDetails), {
|
|
12024
|
+
if (!bestFrameDetails.current || !bestPredictionCanvas.current) return null;
|
|
12025
|
+
return _assign(_assign({}, bestFrameDetails.current), {
|
|
12021
12026
|
canvas: bestPredictionCanvas.current
|
|
12022
12027
|
});
|
|
12023
|
-
}, [
|
|
12024
|
-
var
|
|
12025
|
-
canvasKey =
|
|
12026
|
-
setCanvasKey =
|
|
12028
|
+
}, []);
|
|
12029
|
+
var _e = React.useState(0),
|
|
12030
|
+
canvasKey = _e[0],
|
|
12031
|
+
setCanvasKey = _e[1];
|
|
12027
12032
|
var resetBestFrame = React.useCallback(function () {
|
|
12028
12033
|
stopDetection.current += 1;
|
|
12029
12034
|
setCanvasKey(function (n) {
|
|
12030
12035
|
return n + 1;
|
|
12031
12036
|
});
|
|
12032
12037
|
clearDocumentDetectionLastPredictionCanvas();
|
|
12033
|
-
|
|
12038
|
+
bestFrameDetails.current = null;
|
|
12034
12039
|
bestFocusScore.current = 0;
|
|
12035
12040
|
}, [clearDocumentDetectionLastPredictionCanvas]);
|
|
12036
12041
|
React.useEffect(function () {
|
|
@@ -12054,7 +12059,7 @@
|
|
|
12054
12059
|
requiredDocumentType: requiredDocumentType,
|
|
12055
12060
|
setRequiredDocumentType: setRequiredDocumentType
|
|
12056
12061
|
};
|
|
12057
|
-
}, [
|
|
12062
|
+
}, [detectionTime, documentDetectionModelDownloadProgress, documentDetectionModelReady, focusModelDownloadProgress, focusModelReady, focusPredictionTime, getBestFrame, modelError, onPredictionMade, requiredDocumentType, resetBestFrame, setThresholds, startDocumentDetection, stopDocumentDetection, thresholds]);
|
|
12058
12063
|
return /*#__PURE__*/React.createElement(IdCaptureModelsContext.Provider, {
|
|
12059
12064
|
value: value
|
|
12060
12065
|
}, /*#__PURE__*/React.createElement(InvisibleCanvas, {
|
|
@@ -16688,7 +16693,7 @@
|
|
|
16688
16693
|
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
16694
|
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
16695
|
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$
|
|
16696
|
+
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
16697
|
var _a, _b, _c, _d;
|
|
16693
16698
|
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
16699
|
}, function (props) {
|
|
@@ -16722,7 +16727,7 @@
|
|
|
16722
16727
|
var _a, _b, _c, _d, _e, _f;
|
|
16723
16728
|
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
16729
|
});
|
|
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$
|
|
16730
|
+
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
16731
|
|
|
16727
16732
|
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
16733
|
var ContinuityCameraCheckbox = styled.input(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
@@ -16988,8 +16993,8 @@
|
|
|
16988
16993
|
var _a, _b, _c;
|
|
16989
16994
|
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
16995
|
});
|
|
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$
|
|
16996
|
+
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"])));
|
|
16997
|
+
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
16998
|
|
|
16994
16999
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
16995
17000
|
var _this = this;
|
|
@@ -17075,9 +17080,10 @@
|
|
|
17075
17080
|
borderRadius = _o === void 0 ? 25 : _o,
|
|
17076
17081
|
_p = _a.borderColor,
|
|
17077
17082
|
borderColor = _p === void 0 ? 'white' : _p,
|
|
17083
|
+
aspectRatio = _a.aspectRatio,
|
|
17078
17084
|
_q = _a.progress,
|
|
17079
17085
|
progress = _q === void 0 ? 0 : _q,
|
|
17080
|
-
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "progress"]);
|
|
17086
|
+
props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
|
|
17081
17087
|
var _r = useResizeObserver(),
|
|
17082
17088
|
ref = _r.ref,
|
|
17083
17089
|
_s = _r.width,
|
|
@@ -17099,7 +17105,10 @@
|
|
|
17099
17105
|
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
17106
|
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
17107
|
return /*#__PURE__*/React.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React.createElement("div", {
|
|
17102
|
-
ref: ref
|
|
17108
|
+
ref: ref,
|
|
17109
|
+
style: {
|
|
17110
|
+
aspectRatio: aspectRatio
|
|
17111
|
+
}
|
|
17103
17112
|
}, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IdCardBorderSvg, {
|
|
17104
17113
|
width: width,
|
|
17105
17114
|
height: height,
|
|
@@ -17590,9 +17599,9 @@
|
|
|
17590
17599
|
}, function (props) {
|
|
17591
17600
|
return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
|
|
17592
17601
|
});
|
|
17593
|
-
var GuideText = styled.span(templateObject_8$
|
|
17602
|
+
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
17603
|
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$
|
|
17604
|
+
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
17605
|
|
|
17597
17606
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
17598
17607
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -19075,7 +19084,7 @@
|
|
|
19075
19084
|
colors: colors,
|
|
19076
19085
|
verbiage: idCaptureVerbiage,
|
|
19077
19086
|
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
19078
|
-
}), !((_d = (_c = theme.idCapture) === null || _c === void 0 ? void 0 : _c.capturePreview) === null || _d === void 0 ? void 0 : _d.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && ( /*#__PURE__*/React.createElement(IdCaptureImagePreview, {
|
|
19087
|
+
}), debugMode && !((_d = (_c = theme.idCapture) === null || _c === void 0 ? void 0 : _c.capturePreview) === null || _d === void 0 ? void 0 : _d.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && ( /*#__PURE__*/React.createElement(IdCaptureImagePreview, {
|
|
19079
19088
|
classNames: (_e = classNames.capture) === null || _e === void 0 ? void 0 : _e.imagePreview,
|
|
19080
19089
|
text: (_f = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _f === void 0 ? void 0 : _f.processingIdCardText,
|
|
19081
19090
|
imageUrl: state.imageUrl
|
|
@@ -19435,51 +19444,57 @@
|
|
|
19435
19444
|
}))));
|
|
19436
19445
|
});
|
|
19437
19446
|
HeadGuideSvg.displayName = 'HeadGuideSvg';
|
|
19438
|
-
var PulsingHeadGuideContainer = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n position:
|
|
19447
|
+
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
19448
|
function HeadGuide(_a) {
|
|
19440
19449
|
var _b;
|
|
19441
19450
|
var _c = _a.status,
|
|
19442
19451
|
status = _c === void 0 ? 'ready' : _c,
|
|
19443
19452
|
props = __rest(_a, ["status"]);
|
|
19444
19453
|
var ref = React.useRef(null);
|
|
19445
|
-
var
|
|
19446
|
-
|
|
19447
|
-
|
|
19448
|
-
|
|
19449
|
-
|
|
19450
|
-
|
|
19451
|
-
|
|
19452
|
-
|
|
19453
|
-
|
|
19454
|
-
|
|
19455
|
-
left: box.left - parentBox.left
|
|
19456
|
-
}));
|
|
19454
|
+
var _d = useResizeObserver(),
|
|
19455
|
+
parentRef = _d.ref,
|
|
19456
|
+
parentHeight = _d.height;
|
|
19457
|
+
var _e = React.useState(),
|
|
19458
|
+
contentAspectRatio = _e[0],
|
|
19459
|
+
setContentAspectRatio = _e[1];
|
|
19460
|
+
React.useEffect(function () {
|
|
19461
|
+
if (!ref.current) return;
|
|
19462
|
+
var bbox = ref.current.getBBox();
|
|
19463
|
+
setContentAspectRatio((bbox.x + bbox.width + bbox.x) / (bbox.y + bbox.height + bbox.y));
|
|
19457
19464
|
}, []);
|
|
19465
|
+
var scaledWidth = React.useMemo(function () {
|
|
19466
|
+
return contentAspectRatio && parentHeight && parentHeight / contentAspectRatio;
|
|
19467
|
+
}, [contentAspectRatio, parentHeight]);
|
|
19458
19468
|
return /*#__PURE__*/React.createElement(PulsingHeadGuideContainer, {
|
|
19459
19469
|
ref: parentRef
|
|
19460
|
-
}, status === 'ready' &&
|
|
19470
|
+
}, status === 'ready' && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19461
19471
|
className: "pulse",
|
|
19462
19472
|
borderOpacity: 0.25,
|
|
19463
19473
|
borderColor: "#287ec6",
|
|
19464
|
-
|
|
19474
|
+
width: scaledWidth,
|
|
19475
|
+
height: parentHeight
|
|
19465
19476
|
})), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19466
19477
|
className: "pulse",
|
|
19467
19478
|
borderOpacity: 0.25,
|
|
19468
19479
|
borderColor: "#287ec6",
|
|
19469
|
-
|
|
19480
|
+
width: scaledWidth,
|
|
19481
|
+
height: parentHeight
|
|
19470
19482
|
})), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19471
19483
|
className: "pulse",
|
|
19472
19484
|
borderOpacity: 0.25,
|
|
19473
19485
|
borderColor: "#287ec6",
|
|
19474
|
-
|
|
19486
|
+
width: scaledWidth,
|
|
19487
|
+
height: parentHeight
|
|
19475
19488
|
})))), /*#__PURE__*/React.createElement(HeadGuideSvg, _assign({}, props, {
|
|
19476
19489
|
ref: ref,
|
|
19477
19490
|
borderOpacity: 1,
|
|
19478
19491
|
className: "pulseOrigin ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''),
|
|
19479
|
-
status: status
|
|
19492
|
+
status: status,
|
|
19493
|
+
width: scaledWidth,
|
|
19494
|
+
height: parentHeight
|
|
19480
19495
|
})));
|
|
19481
19496
|
}
|
|
19482
|
-
var
|
|
19497
|
+
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
19498
|
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
19499
|
return props.$verticalAlign === 'bottom' ? 'flex-end' : 'center';
|
|
19485
19500
|
});
|
|
@@ -19509,11 +19524,11 @@
|
|
|
19509
19524
|
borderWidth: borderWidth,
|
|
19510
19525
|
borderColor: statusBorderColor,
|
|
19511
19526
|
status: status
|
|
19512
|
-
}, props)), /*#__PURE__*/React.createElement(
|
|
19527
|
+
}, props)), status === 'processing' && ( /*#__PURE__*/React.createElement(AbsoluteSvg, _assign({}, props, {
|
|
19513
19528
|
viewBox: "271 92 297 406",
|
|
19514
19529
|
fill: "none",
|
|
19515
19530
|
xmlns: "http://www.w3.org/2000/svg"
|
|
19516
|
-
}),
|
|
19531
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
19517
19532
|
clipPath: "url(#clip0_428_1188)"
|
|
19518
19533
|
}, 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
19534
|
d: "M298.5 182.5L419 164.5L540 182",
|
|
@@ -19672,13 +19687,13 @@
|
|
|
19672
19687
|
cy: "409",
|
|
19673
19688
|
r: "7",
|
|
19674
19689
|
fill: "white"
|
|
19675
|
-
}))))
|
|
19690
|
+
})))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
19676
19691
|
id: "clip0_428_1188"
|
|
19677
19692
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
19678
19693
|
width: "840",
|
|
19679
19694
|
height: "740",
|
|
19680
19695
|
fill: "white"
|
|
19681
|
-
})))));
|
|
19696
|
+
}))))));
|
|
19682
19697
|
}
|
|
19683
19698
|
function SelfieCaptureAnimatedMaskWithStatus(_a) {
|
|
19684
19699
|
var _b = _a.status,
|
|
@@ -19709,41 +19724,8 @@
|
|
|
19709
19724
|
}
|
|
19710
19725
|
var templateObject_1$k, templateObject_2$h, templateObject_3$f;
|
|
19711
19726
|
|
|
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"])));
|
|
19727
|
+
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"])));
|
|
19728
|
+
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
19729
|
var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
19748
19730
|
var _b = _a.classNames,
|
|
19749
19731
|
classNames = _b === void 0 ? {} : _b,
|
|
@@ -19757,13 +19739,13 @@
|
|
|
19757
19739
|
borderOpacity = _f === void 0 ? 0.8 : _f;
|
|
19758
19740
|
return /*#__PURE__*/React.createElement(FaceCaptureGuideContainer, {
|
|
19759
19741
|
className: classNames.container
|
|
19760
|
-
}, /*#__PURE__*/React.createElement(
|
|
19742
|
+
}, /*#__PURE__*/React.createElement(FaceCaptureGuideInner, null, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
|
|
19761
19743
|
status: status,
|
|
19762
19744
|
borderColor: borderColor,
|
|
19763
19745
|
borderWidth: borderWidth,
|
|
19764
19746
|
borderOpacity: borderOpacity,
|
|
19765
19747
|
verticalAlign: "center"
|
|
19766
|
-
}));
|
|
19748
|
+
})));
|
|
19767
19749
|
};
|
|
19768
19750
|
var templateObject_1$j, templateObject_2$g;
|
|
19769
19751
|
|
|
@@ -20622,7 +20604,7 @@
|
|
|
20622
20604
|
colors: colors,
|
|
20623
20605
|
verbiage: verbiage,
|
|
20624
20606
|
debugMode: debugMode
|
|
20625
|
-
}), !disableCapturePreview && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
|
|
20607
|
+
}), debugMode && !disableCapturePreview && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
|
|
20626
20608
|
classNames: classNames.imagePreview,
|
|
20627
20609
|
imageUrl: imageUrl,
|
|
20628
20610
|
text: (_e = verbiage.progressPreviewText) !== null && _e !== void 0 ? _e : ''
|
|
@@ -20993,7 +20975,7 @@
|
|
|
20993
20975
|
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
20976
|
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
20977
|
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
|
|
20978
|
+
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
20979
|
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
20980
|
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
20981
|
var _a, _b, _c, _d;
|
|
@@ -21018,7 +21000,7 @@
|
|
|
21018
21000
|
var _a, _b, _c, _d, _e, _f;
|
|
21019
21001
|
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
21002
|
});
|
|
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
|
|
21003
|
+
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
21004
|
|
|
21023
21005
|
var components = {
|
|
21024
21006
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -21180,6 +21162,15 @@
|
|
|
21180
21162
|
setCaptureState('LOADING');
|
|
21181
21163
|
}
|
|
21182
21164
|
}, [cameraAccessDenied]);
|
|
21165
|
+
var onLoadingOverlayDismissed = React.useCallback(function () {
|
|
21166
|
+
setCaptureState('CAPTURING');
|
|
21167
|
+
}, []);
|
|
21168
|
+
var onFailureExitClick = React.useCallback(function () {
|
|
21169
|
+
releaseCameraAccessOnExit && releaseCameraAccess();
|
|
21170
|
+
setTimeout(function () {
|
|
21171
|
+
onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
|
|
21172
|
+
}, 0);
|
|
21173
|
+
}, [livenessCheckRequest, onExitAfterFailure, releaseCameraAccess, releaseCameraAccessOnExit, submissionResponse]);
|
|
21183
21174
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageContainer, {
|
|
21184
21175
|
className: "flex ".concat((_c = (_b = classNames.capture) === null || _b === void 0 ? void 0 : _b.container) !== null && _c !== void 0 ? _c : '')
|
|
21185
21176
|
}, renderCameraFeed && ( /*#__PURE__*/React.createElement(CameraVideoTag, {
|
|
@@ -21223,12 +21214,7 @@
|
|
|
21223
21214
|
verbiage: verbiage.failure,
|
|
21224
21215
|
canRetry: maxRetries > -1 && retryCount < maxRetries,
|
|
21225
21216
|
onRetryClick: onRetryCallback,
|
|
21226
|
-
onExitClick:
|
|
21227
|
-
releaseCameraAccessOnExit && releaseCameraAccess();
|
|
21228
|
-
setTimeout(function () {
|
|
21229
|
-
onExitAfterFailure === null || onExitAfterFailure === void 0 ? void 0 : onExitAfterFailure(submissionResponse, livenessCheckRequest);
|
|
21230
|
-
}, 0);
|
|
21231
|
-
}
|
|
21217
|
+
onExitClick: onFailureExitClick
|
|
21232
21218
|
});
|
|
21233
21219
|
default:
|
|
21234
21220
|
return null;
|
|
@@ -21241,9 +21227,7 @@
|
|
|
21241
21227
|
colors: colors.loadingOverlay,
|
|
21242
21228
|
verbiage: verbiage.loadingOverlay,
|
|
21243
21229
|
onUserCancel: onUserCancel,
|
|
21244
|
-
onDismissed:
|
|
21245
|
-
setCaptureState('CAPTURING');
|
|
21246
|
-
}
|
|
21230
|
+
onDismissed: onLoadingOverlayDismissed
|
|
21247
21231
|
}));
|
|
21248
21232
|
};
|
|
21249
21233
|
|
|
@@ -22772,7 +22756,7 @@
|
|
|
22772
22756
|
className: classNames.inner
|
|
22773
22757
|
}, /*#__PURE__*/React.createElement(FaceGuideContainer$1, {
|
|
22774
22758
|
className: classNames.faceGuideContainer
|
|
22775
|
-
}, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask
|
|
22759
|
+
}, /*#__PURE__*/React.createElement(StyledSelfieCaptureAnimatedMask, {
|
|
22776
22760
|
className: classNames.faceGuide,
|
|
22777
22761
|
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
22778
22762
|
borderWidth: faceGuideBorderWidth,
|
|
@@ -22811,7 +22795,7 @@
|
|
|
22811
22795
|
});
|
|
22812
22796
|
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
22797
|
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
|
|
22798
|
+
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"])));
|
|
22815
22799
|
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
22800
|
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
22801
|
return props.$disabled ? 'opacity: 0.5; pointer-events: none;' : '';
|
|
@@ -23131,29 +23115,29 @@
|
|
|
23131
23115
|
};
|
|
23132
23116
|
|
|
23133
23117
|
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 =
|
|
23118
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
23119
|
+
var _y = _a.requestedAction,
|
|
23120
|
+
requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
|
|
23121
|
+
_z = _a.satisfied,
|
|
23122
|
+
satisfied = _z === void 0 ? false : _z,
|
|
23123
|
+
_0 = _a.faceGuideStatus,
|
|
23124
|
+
faceGuideStatus = _0 === void 0 ? 'success' : _0,
|
|
23141
23125
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
23142
23126
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
23143
|
-
|
|
23144
|
-
idCardGuideStatus =
|
|
23127
|
+
_1 = _a.idCardGuideStatus,
|
|
23128
|
+
idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
|
|
23145
23129
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
23146
23130
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
23147
|
-
|
|
23148
|
-
idCardCaptureProgress =
|
|
23149
|
-
|
|
23150
|
-
assets =
|
|
23151
|
-
|
|
23152
|
-
classNames =
|
|
23153
|
-
|
|
23154
|
-
rawVerbiage =
|
|
23131
|
+
_2 = _a.idCardCaptureProgress,
|
|
23132
|
+
idCardCaptureProgress = _2 === void 0 ? 0 : _2,
|
|
23133
|
+
_3 = _a.assets,
|
|
23134
|
+
assets = _3 === void 0 ? {} : _3,
|
|
23135
|
+
_4 = _a.classNames,
|
|
23136
|
+
classNames = _4 === void 0 ? {} : _4,
|
|
23137
|
+
_5 = _a.verbiage,
|
|
23138
|
+
rawVerbiage = _5 === void 0 ? {} : _5;
|
|
23155
23139
|
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
23156
|
-
|
|
23140
|
+
// const imageRef = useRef<HTMLImageElement | null>(null)
|
|
23157
23141
|
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-Borderless.svg"));
|
|
23158
23142
|
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-Borderless.svg"));
|
|
23159
23143
|
var verbiage = useTranslations(rawVerbiage, {
|
|
@@ -23168,25 +23152,42 @@
|
|
|
23168
23152
|
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
23153
|
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
23154
|
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 =
|
|
23155
|
+
var _6 = useResizeObserver(),
|
|
23156
|
+
idCardGuideRef = _6.ref,
|
|
23157
|
+
_7 = _6.width,
|
|
23158
|
+
idCardGuideWidth = _7 === void 0 ? 0 : _7,
|
|
23159
|
+
_8 = _6.height,
|
|
23160
|
+
idCardGuideHeight = _8 === void 0 ? 0 : _8;
|
|
23161
|
+
var _9 = React.useState(undefined),
|
|
23162
|
+
aspectRatio = _9[0],
|
|
23163
|
+
setAspectRatio = _9[1];
|
|
23164
|
+
// const imageRef = (img: HTMLImageElement) => {
|
|
23165
|
+
// if (!img) return
|
|
23166
|
+
// if (typeof aspectRatio === 'number' && aspectRatio > 0) return
|
|
23167
|
+
// setAspectRatio(
|
|
23168
|
+
// (img.naturalHeight ?? 0) > 0
|
|
23169
|
+
// ? img.naturalWidth / img.naturalHeight
|
|
23170
|
+
// : undefined,
|
|
23171
|
+
// )
|
|
23172
|
+
// }
|
|
23173
|
+
function onImageLoaded(e) {
|
|
23174
|
+
var _a;
|
|
23175
|
+
var img = e.currentTarget;
|
|
23176
|
+
setAspectRatio(((_a = img.naturalHeight) !== null && _a !== void 0 ? _a : 0) > 0 ? img.naturalWidth / img.naturalHeight : undefined);
|
|
23177
|
+
}
|
|
23177
23178
|
var idCardImageStyle = React.useMemo(function () {
|
|
23178
23179
|
return {
|
|
23179
23180
|
maxWidth: idCardGuideWidth > 0 ? idCardGuideWidth : undefined,
|
|
23180
23181
|
maxHeight: idCardGuideHeight,
|
|
23181
|
-
height: '100%'
|
|
23182
|
+
height: '100%',
|
|
23183
|
+
aspectRatio: aspectRatio
|
|
23182
23184
|
};
|
|
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;
|
|
23185
|
+
}, [idCardGuideWidth, idCardGuideHeight, aspectRatio]);
|
|
23185
23186
|
return /*#__PURE__*/React.createElement(Container, {
|
|
23186
23187
|
className: classNames.container
|
|
23187
23188
|
}, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(FaceGuideContainer, {
|
|
23188
23189
|
className: classNames.faceGuideContainer
|
|
23189
|
-
}, /*#__PURE__*/React.createElement(
|
|
23190
|
+
}, /*#__PURE__*/React.createElement(SelfieCaptureAnimatedMaskWithStatus, {
|
|
23190
23191
|
className: classNames.faceGuide,
|
|
23191
23192
|
status: requestedAction === 'VERIFY_LIVENESS' ? faceGuideStatus : 'success',
|
|
23192
23193
|
borderWidth: faceGuideBorderWidth,
|
|
@@ -23205,15 +23206,16 @@
|
|
|
23205
23206
|
status: requestedAction === 'VERIFY_LIVENESS' ? 'disabled' : idCardGuideStatus,
|
|
23206
23207
|
borderWidth: idCardGuideBorderWidth,
|
|
23207
23208
|
borderColor: idCardGuideBorderColor,
|
|
23209
|
+
aspectRatio: aspectRatio,
|
|
23208
23210
|
"$isVisible": requestedAction !== 'FLIP_ID',
|
|
23209
23211
|
progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
|
|
23210
23212
|
}, /*#__PURE__*/React.createElement(IdCardGuideImage, {
|
|
23211
23213
|
alt: "",
|
|
23212
|
-
ref: imageRef,
|
|
23213
23214
|
className: classNames.idCardGuideImage,
|
|
23214
|
-
"$isMirrored": !((
|
|
23215
|
+
"$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
|
|
23215
23216
|
style: idCardImageStyle,
|
|
23216
|
-
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl
|
|
23217
|
+
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
23218
|
+
onLoad: onImageLoaded
|
|
23217
23219
|
})), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
23218
23220
|
assets: assets,
|
|
23219
23221
|
classNames: classNames.flipIdPrompt,
|
|
@@ -23224,8 +23226,8 @@
|
|
|
23224
23226
|
className: classNames.idCardGuideInstructionsContainer
|
|
23225
23227
|
}, /*#__PURE__*/React.createElement(IdCardGuideInstructions, {
|
|
23226
23228
|
className: classNames.idCardGuideInstructions,
|
|
23227
|
-
"$textColor": (
|
|
23228
|
-
"$background": (
|
|
23229
|
+
"$textColor": (_v = (_u = theme.idVideoCapture) === null || _u === void 0 ? void 0 : _u.idCardGuides) === null || _v === void 0 ? void 0 : _v.instructionsTextColor,
|
|
23230
|
+
"$background": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsBackgroundColor
|
|
23229
23231
|
}, instructionText)))));
|
|
23230
23232
|
};
|
|
23231
23233
|
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 +23236,11 @@
|
|
|
23234
23236
|
});
|
|
23235
23237
|
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
23238
|
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;
|
|
23239
|
+
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"])));
|
|
23240
|
+
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"])));
|
|
23241
|
+
var IdCardGuideInstructionsContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\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 box-sizing: border-box;\n"], ["\n width: 100%;\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 box-sizing: border-box;\n"])));
|
|
23242
|
+
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"])));
|
|
23243
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
23243
23244
|
|
|
23244
23245
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
23245
23246
|
var text = _a.text,
|
|
@@ -23370,98 +23371,98 @@
|
|
|
23370
23371
|
}
|
|
23371
23372
|
};
|
|
23372
23373
|
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;
|
|
23374
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
23374
23375
|
var onComplete = _a.onComplete,
|
|
23375
23376
|
onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
|
|
23376
23377
|
onIdBackImageCaptured = _a.onIdBackImageCaptured,
|
|
23377
23378
|
onFaceNotDetected = _a.onFaceNotDetected,
|
|
23378
23379
|
onRecordingFailed = _a.onRecordingFailed,
|
|
23379
23380
|
onExitCapture = _a.onExitCapture,
|
|
23380
|
-
|
|
23381
|
-
idCaptureModelsEnabled =
|
|
23382
|
-
|
|
23383
|
-
idCardFrontDelay =
|
|
23384
|
-
|
|
23385
|
-
videoIdCaptureThresholds =
|
|
23386
|
-
|
|
23387
|
-
skipShowIdCardBack =
|
|
23388
|
-
|
|
23389
|
-
captureCountdownSeconds =
|
|
23381
|
+
_y = _a.idCaptureModelsEnabled,
|
|
23382
|
+
idCaptureModelsEnabled = _y === void 0 ? true : _y,
|
|
23383
|
+
_z = _a.idCardFrontDelay,
|
|
23384
|
+
idCardFrontDelay = _z === void 0 ? 1000 : _z,
|
|
23385
|
+
_0 = _a.videoIdCaptureThresholds,
|
|
23386
|
+
videoIdCaptureThresholds = _0 === void 0 ? defaultVideoIdCaptureThresholds : _0,
|
|
23387
|
+
_1 = _a.skipShowIdCardBack,
|
|
23388
|
+
skipShowIdCardBack = _1 === void 0 ? false : _1,
|
|
23389
|
+
_2 = _a.captureCountdownSeconds,
|
|
23390
|
+
captureCountdownSeconds = _2 === void 0 ? 3 : _2,
|
|
23390
23391
|
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 =
|
|
23392
|
+
_3 = _a.readTextTimeoutDurationMs,
|
|
23393
|
+
readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
|
|
23394
|
+
_4 = _a.readTextMinReadingMs,
|
|
23395
|
+
readTextMinReadingMs = _4 === void 0 ? 10000 : _4,
|
|
23396
|
+
_5 = _a.disableFaceDetectionWhileAudioCapture,
|
|
23397
|
+
disableFaceDetectionWhileAudioCapture = _5 === void 0 ? false : _5,
|
|
23398
|
+
_6 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
23399
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _6 === void 0 ? 2000 : _6,
|
|
23400
|
+
_7 = _a.mergeAVStreams,
|
|
23401
|
+
mergeAVStreams = _7 === void 0 ? false : _7,
|
|
23402
|
+
_8 = _a.assets,
|
|
23403
|
+
assets = _8 === void 0 ? {} : _8,
|
|
23404
|
+
_9 = _a.classNames,
|
|
23405
|
+
classNames = _9 === void 0 ? {} : _9,
|
|
23406
|
+
_10 = _a.colors,
|
|
23407
|
+
colors = _10 === void 0 ? {} : _10,
|
|
23408
|
+
_11 = _a.verbiage,
|
|
23409
|
+
rawVerbiage = _11 === void 0 ? {} : _11,
|
|
23410
|
+
_12 = _a.debugMode,
|
|
23411
|
+
debugMode = _12 === void 0 ? false : _12;
|
|
23412
|
+
var _13 = useResizeObserver(),
|
|
23413
|
+
ref = _13.ref,
|
|
23414
|
+
_14 = _13.width,
|
|
23415
|
+
width = _14 === void 0 ? 1 : _14,
|
|
23416
|
+
_15 = _13.height,
|
|
23417
|
+
height = _15 === void 0 ? 1 : _15;
|
|
23418
|
+
var _16 = React.useContext(CameraStateContext),
|
|
23419
|
+
cameraRef = _16.cameraRef,
|
|
23420
|
+
videoRef = _16.videoRef,
|
|
23421
|
+
videoLoaded = _16.videoLoaded,
|
|
23422
|
+
cameraReady = _16.cameraReady,
|
|
23423
|
+
microphoneReady = _16.microphoneReady,
|
|
23424
|
+
audioStream = _16.audioStream,
|
|
23425
|
+
setVideoLoaded = _16.setVideoLoaded;
|
|
23426
|
+
var _17 = React.useState([]),
|
|
23427
|
+
detectedObjects = _17[0],
|
|
23428
|
+
setDetectedObjects = _17[1];
|
|
23429
|
+
var _18 = React.useState([]),
|
|
23430
|
+
faces = _18[0],
|
|
23431
|
+
setFaces = _18[1];
|
|
23432
|
+
var _19 = React.useContext(IdCaptureModelsContext),
|
|
23433
|
+
idModelsReady = _19.ready,
|
|
23434
|
+
startIdModels = _19.start,
|
|
23435
|
+
stopIdModels = _19.stop,
|
|
23436
|
+
onIdPredictionMade = _19.onPredictionMade,
|
|
23437
|
+
setThresholds = _19.setThresholds,
|
|
23438
|
+
bestFrameDetails = _19.bestFrameDetails,
|
|
23439
|
+
resetBestFrame = _19.resetBestFrame,
|
|
23440
|
+
idModelError = _19.modelError;
|
|
23441
|
+
var _20 = React.useState(null),
|
|
23442
|
+
videoStartsAt = _20[0],
|
|
23443
|
+
setVideoStartsAt = _20[1];
|
|
23444
|
+
var _21 = React.useContext(SubmissionContext),
|
|
23445
|
+
setIdCaptureVideoAudioStartsAt = _21.setIdCaptureVideoAudioStartsAt,
|
|
23446
|
+
setExpectedAudioText = _21.setExpectedAudioText;
|
|
23447
|
+
var _22 = React.useContext(SelfieGuidanceModelsContext),
|
|
23448
|
+
startSelfieGuidance = _22.start,
|
|
23449
|
+
stopSelfieGuidance = _22.stop,
|
|
23450
|
+
onSelfiePredictionMade = _22.onPredictionMade,
|
|
23451
|
+
selfieModelError = _22.error;
|
|
23452
|
+
var _23 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
|
|
23453
|
+
isRecordingVideo = _23.isRecordingVideo,
|
|
23454
|
+
startRecordingVideo = _23.startRecordingVideo,
|
|
23455
|
+
startRecordingAudio = _23.startRecordingAudio,
|
|
23456
|
+
stopRecordingVideo = _23.stopRecordingVideo,
|
|
23457
|
+
stopRecordingAudio = _23.stopRecordingAudio,
|
|
23458
|
+
videoRecordingUnintentionallyStopped = _23.videoRecordingUnintentionallyStopped,
|
|
23459
|
+
audioRecordingUnintentionallyStopped = _23.audioRecordingUnintentionallyStopped,
|
|
23460
|
+
videoUrl = _23.videoUrl,
|
|
23461
|
+
audioUrl = _23.audioUrl;
|
|
23461
23462
|
var countdownTimeoutRef = React.useRef(undefined);
|
|
23462
|
-
var
|
|
23463
|
-
countdownRemaining =
|
|
23464
|
-
setCountdownRemaining =
|
|
23463
|
+
var _24 = React.useState(-1),
|
|
23464
|
+
countdownRemaining = _24[0],
|
|
23465
|
+
setCountdownRemaining = _24[1];
|
|
23465
23466
|
React.useEffect(function () {
|
|
23466
23467
|
if (!isRecordingVideo && !videoUrl) {
|
|
23467
23468
|
startRecordingVideo();
|
|
@@ -23481,9 +23482,9 @@
|
|
|
23481
23482
|
onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
|
|
23482
23483
|
}
|
|
23483
23484
|
}, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
|
|
23484
|
-
var
|
|
23485
|
-
requestedAction =
|
|
23486
|
-
setRequestedAction =
|
|
23485
|
+
var _25 = React.useState('SHOW_ID_FRONT'),
|
|
23486
|
+
requestedAction = _25[0],
|
|
23487
|
+
setRequestedAction = _25[1];
|
|
23487
23488
|
var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
|
|
23488
23489
|
React.useEffect(function startModelsWhenCapturing() {
|
|
23489
23490
|
if (!shouldRunIdModels) return;
|
|
@@ -23495,15 +23496,15 @@
|
|
|
23495
23496
|
React.useEffect(function () {
|
|
23496
23497
|
setThresholds(videoIdCaptureThresholds);
|
|
23497
23498
|
}, [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
23499
|
var _26 = React.useState(0),
|
|
23505
|
-
|
|
23506
|
-
|
|
23500
|
+
currentDetectionScore = _26[0],
|
|
23501
|
+
setCurrentDetectionScore = _26[1];
|
|
23502
|
+
var _27 = React.useState(0),
|
|
23503
|
+
currentFocusScore = _27[0],
|
|
23504
|
+
setCurrentFocusScore = _27[1];
|
|
23505
|
+
var _28 = React.useState(0),
|
|
23506
|
+
goodFramesCount = _28[0],
|
|
23507
|
+
setGoodFramesCount = _28[1];
|
|
23507
23508
|
var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
|
|
23508
23509
|
var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
|
|
23509
23510
|
React.useEffect(function () {
|
|
@@ -23522,9 +23523,9 @@
|
|
|
23522
23523
|
} : 0);
|
|
23523
23524
|
});
|
|
23524
23525
|
}, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction]);
|
|
23525
|
-
var
|
|
23526
|
-
idFrontCaptureStartedAt =
|
|
23527
|
-
setFirstGoodFrameTime =
|
|
23526
|
+
var _29 = React.useState(null),
|
|
23527
|
+
idFrontCaptureStartedAt = _29[0],
|
|
23528
|
+
setFirstGoodFrameTime = _29[1];
|
|
23528
23529
|
React.useEffect(function () {
|
|
23529
23530
|
if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
|
|
23530
23531
|
}, [goodFramesCount]);
|
|
@@ -23545,9 +23546,9 @@
|
|
|
23545
23546
|
var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
|
|
23546
23547
|
var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
|
|
23547
23548
|
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 =
|
|
23549
|
+
var _30 = React.useState(),
|
|
23550
|
+
countdownStartedAt = _30[0],
|
|
23551
|
+
setCountdownStartedAt = _30[1];
|
|
23551
23552
|
var photoCanvas = React.useRef(null);
|
|
23552
23553
|
var frameLock = React.useRef(false);
|
|
23553
23554
|
var captureFrame = React.useCallback(function () {
|
|
@@ -23670,9 +23671,9 @@
|
|
|
23670
23671
|
stopSelfieGuidance();
|
|
23671
23672
|
};
|
|
23672
23673
|
}, [startSelfieGuidance, stopSelfieGuidance]);
|
|
23673
|
-
var
|
|
23674
|
-
numFramesWithoutFaces =
|
|
23675
|
-
setNumFramesWithoutFaces =
|
|
23674
|
+
var _31 = React.useState(0),
|
|
23675
|
+
numFramesWithoutFaces = _31[0],
|
|
23676
|
+
setNumFramesWithoutFaces = _31[1];
|
|
23676
23677
|
onSelfiePredictionMade(f(React.useCallback(function (faces) {
|
|
23677
23678
|
if (selfieModelError) return;
|
|
23678
23679
|
setFaces(faces);
|
|
@@ -23687,12 +23688,12 @@
|
|
|
23687
23688
|
}
|
|
23688
23689
|
}, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
|
|
23689
23690
|
var theme = styled.useTheme();
|
|
23690
|
-
var
|
|
23691
|
+
var _32 = useTranslations(rawVerbiage, {
|
|
23691
23692
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
23692
23693
|
captureBtnText: 'Capture'
|
|
23693
23694
|
}),
|
|
23694
|
-
captureBtnText =
|
|
23695
|
-
faceNotCenteredText =
|
|
23695
|
+
captureBtnText = _32.captureBtnText,
|
|
23696
|
+
faceNotCenteredText = _32.faceNotCenteredText;
|
|
23696
23697
|
var debugScalingDetails = useDebugScalingDetails({
|
|
23697
23698
|
enabled: debugMode,
|
|
23698
23699
|
pageWidth: width,
|
|
@@ -23750,7 +23751,7 @@
|
|
|
23750
23751
|
className: classNames.guidanceMessage,
|
|
23751
23752
|
"$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
23753
|
"$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:
|
|
23754
|
+
}, 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
23755
|
className: classNames.countdownContainer
|
|
23755
23756
|
}, /*#__PURE__*/React.createElement(Countdown, {
|
|
23756
23757
|
className: classNames.countdown
|
|
@@ -25543,7 +25544,7 @@
|
|
|
25543
25544
|
colors: colors,
|
|
25544
25545
|
verbiage: verbiage,
|
|
25545
25546
|
debugMode: debugMode
|
|
25546
|
-
}), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
|
|
25547
|
+
}), debugMode && !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
|
|
25547
25548
|
imageUrl: imageUrl,
|
|
25548
25549
|
text: progressPreviewText,
|
|
25549
25550
|
classNames: classNames.imagePreview
|
|
@@ -26101,7 +26102,7 @@
|
|
|
26101
26102
|
colors: colors,
|
|
26102
26103
|
verbiage: verbiage,
|
|
26103
26104
|
debugMode: debugMode
|
|
26104
|
-
}), !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
|
|
26105
|
+
}), debugMode && !((_c = (_b = theme.selfieCapture) === null || _b === void 0 ? void 0 : _b.capturePreview) === null || _c === void 0 ? void 0 : _c.disabled) && imageUrl && ( /*#__PURE__*/React.createElement(SelfieProgressPreview, {
|
|
26105
26106
|
text: progressPreviewText,
|
|
26106
26107
|
imageUrl: imageUrl,
|
|
26107
26108
|
classNames: classNames.imagePreview
|