idmission-web-sdk 1.0.323 → 1.0.325

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.
@@ -20,4 +20,4 @@ export type ReadTextPromptProps = {
20
20
  classNames?: ReadTextPromptClassNames;
21
21
  verbiage?: ReadTextPromptVerbiage;
22
22
  };
23
- export declare const ReadTextPrompt: ({ text, onComplete, startedAt, durationMs, classNames, verbiage: rawVerbiage, }: ReadTextPromptProps) => React.JSX.Element;
23
+ export declare const ReadTextPrompt: ({ text, onComplete, durationMs, classNames, verbiage: rawVerbiage, }: ReadTextPromptProps) => React.JSX.Element;
@@ -50,7 +50,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
50
50
  var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
51
51
  var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
52
52
 
53
- var webSdkVersion = '1.0.323';
53
+ var webSdkVersion = '1.0.325';
54
54
 
55
55
  function getPlatform() {
56
56
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -65,6 +65,30 @@ function getPlatform() {
65
65
  function dataUrlToBase64(url) {
66
66
  return tslib.__awaiter(this, void 0, void 0, function () {
67
67
  return tslib.__generator(this, function (_a) {
68
+ if (url.indexOf('blob:') >= 0) {
69
+ return [2 /*return*/, new Promise(function (resolve, reject) {
70
+ // Fetch the Blob content
71
+ fetch(url).then(function (response) {
72
+ if (!response.ok) {
73
+ throw new Error('Failed to fetch Blob content');
74
+ }
75
+ return response.blob();
76
+ }).then(function (blob) {
77
+ var reader = new FileReader();
78
+ reader.onload = function () {
79
+ var base64String = reader.result ? reader.result.split(',')[1] : '';
80
+ resolve(base64String);
81
+ };
82
+ reader.onerror = function () {
83
+ reader.abort();
84
+ reject(new Error('Error converting blob to base64'));
85
+ };
86
+ reader.readAsDataURL(blob);
87
+ })["catch"](function (error) {
88
+ reject(error);
89
+ });
90
+ })];
91
+ }
68
92
  return [2 /*return*/, url.replace(/^data:image\/(png|jpeg);base64,/, '')];
69
93
  });
70
94
  });
@@ -9354,6 +9378,7 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
9354
9378
  modelDownloadProgress = _m[0],
9355
9379
  setModelDownloadProgress = _m[1];
9356
9380
  React.useEffect(function () {
9381
+ var _a;
9357
9382
  setReady(false);
9358
9383
  function handleDownloadProgress(event) {
9359
9384
  setModelDownloadProgress(progressToPercentage(event.detail));
@@ -9398,12 +9423,18 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
9398
9423
  function handleWebglContextLoss() {
9399
9424
  setModelError(new Error('WebGL context was lost.'));
9400
9425
  }
9401
- var webGLCanvas = getWebGLContext(2).canvas;
9402
- webGLCanvas.addEventListener('webglcontextlost', handleWebglContextLoss);
9426
+ var webGLCanvas = (_a = getWebGLContext(2)) === null || _a === void 0 ? void 0 : _a.canvas;
9427
+ if (webGLCanvas) {
9428
+ webGLCanvas.addEventListener('webglcontextlost', handleWebglContextLoss);
9429
+ } else {
9430
+ handleWebglContextLoss();
9431
+ }
9403
9432
  return function () {
9404
9433
  var _a;
9405
9434
  clearInterval(modelLoadTimeout);
9406
- (_a = webGLCanvas.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(webGLCanvas, 'webglcontextlost', handleWebglContextLoss);
9435
+ if (webGLCanvas) {
9436
+ (_a = webGLCanvas.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(webGLCanvas, 'webglcontextlost', handleWebglContextLoss);
9437
+ }
9407
9438
  document.removeEventListener('idmission.preloadProgress.idCapture', handleDownloadProgress);
9408
9439
  };
9409
9440
  }, [documentDetectionModelUrl, focusModelUrl, modelLoadTimeoutMs]);
@@ -9881,13 +9912,13 @@ var initialState$4 = {
9881
9912
  var IdCaptureStateContext = /*#__PURE__*/React.createContext(initialState$4);
9882
9913
  var IdCaptureDispatchContext = /*#__PURE__*/React.createContext(function () {});
9883
9914
  var reducer$4 = function reducer(state, action) {
9884
- var _a;
9915
+ var _a, _b;
9885
9916
  switch (action.type) {
9886
9917
  case 'configureWizard':
9887
9918
  {
9888
- var _b = action.payload,
9889
- captureRequirement = _b.captureRequirement,
9890
- precapturedDocuments = _b.precapturedDocuments;
9919
+ var _c = action.payload,
9920
+ captureRequirement = _c.captureRequirement,
9921
+ precapturedDocuments = _c.precapturedDocuments;
9891
9922
  var newState = tslib.__assign(tslib.__assign({}, state), {
9892
9923
  captureRequirement: captureRequirement
9893
9924
  });
@@ -9944,26 +9975,26 @@ var reducer$4 = function reducer(state, action) {
9944
9975
  guideImageHeight: action.payload.height
9945
9976
  });
9946
9977
  case 'objectsDetected':
9947
- var _c = action.payload.prediction,
9948
- detectedObjects = _c.detectedObjects,
9949
- detectionScore = _c.detectionScore,
9950
- detectionThresholdMet = _c.detectionThresholdMet,
9951
- detectedDocumentType = _c.detectedDocumentType,
9952
- passportDetectionScore = _c.passportDetectionScore,
9953
- passportDetectionThresholdMet = _c.passportDetectionThresholdMet,
9954
- mrzDetectionScore = _c.mrzDetectionScore,
9955
- mrzDetectionThresholdMet = _c.mrzDetectionThresholdMet,
9956
- pdf417DetectionScore = _c.pdf417DetectionScore,
9957
- pdf417DetectionThresholdMet = _c.pdf417DetectionThresholdMet,
9958
- bestDocumentOrPassport = _c.bestDocumentOrPassport,
9959
- bestMrz = _c.bestMrz,
9960
- bestPdf417 = _c.bestPdf417,
9961
- documentInBounds = _c.documentInBounds,
9962
- documentTooClose = _c.documentTooClose,
9963
- focusScore = _c.focusScore,
9964
- focusThresholdMet = _c.focusThresholdMet,
9965
- frameWidth = _c.frameWidth,
9966
- frameHeight = _c.frameHeight;
9978
+ var _d = action.payload.prediction,
9979
+ detectedObjects = _d.detectedObjects,
9980
+ detectionScore = _d.detectionScore,
9981
+ detectionThresholdMet = _d.detectionThresholdMet,
9982
+ detectedDocumentType = _d.detectedDocumentType,
9983
+ passportDetectionScore = _d.passportDetectionScore,
9984
+ passportDetectionThresholdMet = _d.passportDetectionThresholdMet,
9985
+ mrzDetectionScore = _d.mrzDetectionScore,
9986
+ mrzDetectionThresholdMet = _d.mrzDetectionThresholdMet,
9987
+ pdf417DetectionScore = _d.pdf417DetectionScore,
9988
+ pdf417DetectionThresholdMet = _d.pdf417DetectionThresholdMet,
9989
+ bestDocumentOrPassport = _d.bestDocumentOrPassport,
9990
+ bestMrz = _d.bestMrz,
9991
+ bestPdf417 = _d.bestPdf417,
9992
+ documentInBounds = _d.documentInBounds,
9993
+ documentTooClose = _d.documentTooClose,
9994
+ focusScore = _d.focusScore,
9995
+ focusThresholdMet = _d.focusThresholdMet,
9996
+ frameWidth = _d.frameWidth,
9997
+ frameHeight = _d.frameHeight;
9967
9998
  var frameCapturedAt = new Date();
9968
9999
  var frameCaptureRate = 0;
9969
10000
  var goodFramesThreshold = state.goodFramesThreshold;
@@ -10012,9 +10043,9 @@ var reducer$4 = function reducer(state, action) {
10012
10043
  });
10013
10044
  case 'predictionMade':
10014
10045
  {
10015
- var _d = action.payload,
10016
- detectedDocumentType_1 = _d.detectedDocumentType,
10017
- passportDetectionScore_1 = _d.passportDetectionScore;
10046
+ var _e = action.payload,
10047
+ detectedDocumentType_1 = _e.detectedDocumentType,
10048
+ passportDetectionScore_1 = _e.passportDetectionScore;
10018
10049
  var requestedDocumentType = state.requestedDocumentType;
10019
10050
  var newState = tslib.__assign(tslib.__assign({}, state), {
10020
10051
  detectedDocumentType: detectedDocumentType_1
@@ -10104,19 +10135,35 @@ var reducer$4 = function reducer(state, action) {
10104
10135
  }
10105
10136
  case 'documentCapturedManually':
10106
10137
  {
10107
- var newState = tslib.__assign({}, state);
10108
- var capturedDocument = tslib.__assign(tslib.__assign({}, action.payload), {
10109
- width: 0,
10110
- height: 0
10138
+ var newState_2 = tslib.__assign(tslib.__assign({}, state), {
10139
+ capturedDocuments: tslib.__assign(tslib.__assign({}, state.capturedDocuments), (_b = {}, _b[state.requestedDocumentType] = tslib.__assign(tslib.__assign({}, action.payload), {
10140
+ width: 0,
10141
+ height: 0
10142
+ }), _b))
10143
+ });
10144
+ var remainingRequirements = requiredDocumentsForOption[state.captureRequirement].filter(function (v) {
10145
+ return !(v in newState_2.capturedDocuments);
10111
10146
  });
10112
- if (Object.keys(state.capturedDocuments).length === 0) {
10113
- newState.capturedDocuments.passport = capturedDocument;
10147
+ if (state.captureRequirement === 'idCardOrPassport') {
10148
+ if (state.requestedDocumentType === 'passport') {
10149
+ remainingRequirements = [];
10150
+ } else {
10151
+ remainingRequirements = remainingRequirements.filter(function (v) {
10152
+ return v !== 'passport';
10153
+ });
10154
+ }
10155
+ }
10156
+ if (remainingRequirements.length === 0) {
10157
+ newState_2.captureState = 'complete';
10114
10158
  } else {
10115
- newState.capturedDocuments = {};
10116
- newState.capturedDocuments.idCardFront = state.capturedDocuments.passport;
10117
- newState.capturedDocuments.idCardBack = capturedDocument;
10159
+ newState_2.requestedDocumentType = remainingRequirements[0];
10160
+ if (state.requestedDocumentType === 'idCardFront' && newState_2.requestedDocumentType === 'idCardBack') {
10161
+ newState_2.captureState = 'requestingFlip';
10162
+ newState_2.documentDetectionThresholdMet = false;
10163
+ newState_2.passportPageDetectionThresholdMet = false;
10164
+ }
10118
10165
  }
10119
- return newState;
10166
+ return newState_2;
10120
10167
  }
10121
10168
  case 'flipRequestCompleted':
10122
10169
  return tslib.__assign(tslib.__assign({}, state), {
@@ -13451,11 +13498,23 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
13451
13498
  idCaptureRequirement: captureRequirement,
13452
13499
  onFinished: onSubmitClick,
13453
13500
  onCapture: function onCapture(imageData) {
13454
- dispatch({
13455
- type: 'documentCapturedManually',
13456
- payload: {
13457
- imageData: imageData
13458
- }
13501
+ return tslib.__awaiter(void 0, void 0, void 0, function () {
13502
+ var base64ImageData;
13503
+ return tslib.__generator(this, function (_a) {
13504
+ switch (_a.label) {
13505
+ case 0:
13506
+ return [4 /*yield*/, dataUrlToBase64(imageData)];
13507
+ case 1:
13508
+ base64ImageData = _a.sent();
13509
+ dispatch({
13510
+ type: 'documentCapturedManually',
13511
+ payload: {
13512
+ imageData: base64ImageData
13513
+ }
13514
+ });
13515
+ return [2 /*return*/];
13516
+ }
13517
+ });
13459
13518
  });
13460
13519
  },
13461
13520
  classNames: classNames.fallback,
@@ -14162,32 +14221,32 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
14162
14221
  }, [checkLiveness, face, frame, isReady, submissionError]);
14163
14222
  var onFallbackImageCaptured = React.useCallback(function (imageUrl) {
14164
14223
  return tslib.__awaiter(void 0, void 0, void 0, function () {
14165
- var response, _a, e_2;
14166
- return tslib.__generator(this, function (_b) {
14167
- switch (_b.label) {
14224
+ var imageData, response, e_2;
14225
+ return tslib.__generator(this, function (_a) {
14226
+ switch (_a.label) {
14168
14227
  case 0:
14169
14228
  dispatch({
14170
14229
  type: 'livenessChecking'
14171
14230
  });
14172
- _b.label = 1;
14231
+ _a.label = 1;
14173
14232
  case 1:
14174
- _b.trys.push([1, 4,, 5]);
14175
- _a = checkLiveness;
14233
+ _a.trys.push([1, 4,, 5]);
14176
14234
  return [4 /*yield*/, dataUrlToBase64(imageUrl)];
14177
14235
  case 2:
14178
- return [4 /*yield*/, _a.apply(void 0, [_b.sent()])];
14236
+ imageData = _a.sent();
14237
+ return [4 /*yield*/, checkLiveness(imageData)];
14179
14238
  case 3:
14180
- response = _b.sent();
14239
+ response = _a.sent();
14181
14240
  dispatch({
14182
14241
  type: 'livenessChecked',
14183
14242
  payload: {
14184
- imageUrl: imageUrl,
14243
+ imageUrl: imageData,
14185
14244
  response: response
14186
14245
  }
14187
14246
  });
14188
14247
  return [3 /*break*/, 5];
14189
14248
  case 4:
14190
- e_2 = _b.sent();
14249
+ e_2 = _a.sent();
14191
14250
  dispatch({
14192
14251
  type: 'livenessCheckFailed',
14193
14252
  payload: {
@@ -16072,7 +16131,6 @@ var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4
16072
16131
  var ReadTextPrompt = function ReadTextPrompt(_a) {
16073
16132
  var text = _a.text,
16074
16133
  onComplete = _a.onComplete,
16075
- startedAt = _a.startedAt,
16076
16134
  _b = _a.durationMs,
16077
16135
  durationMs = _b === void 0 ? 15000 : _b,
16078
16136
  _c = _a.classNames,
@@ -16080,11 +16138,32 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
16080
16138
  _d = _a.verbiage,
16081
16139
  rawVerbiage = _d === void 0 ? {} : _d;
16082
16140
  text = useVerbiage(text, '');
16141
+ var countdownTimeoutRef = React.useRef(undefined);
16142
+ var _e = React.useState(durationMs / 1000),
16143
+ countdownRemaining = _e[0],
16144
+ setCountdownRemaining = _e[1];
16083
16145
  var verbiage = useTranslations(rawVerbiage, {
16084
16146
  headingText: 'Please read the following text aloud',
16085
16147
  doneBtnText: 'Done'
16086
16148
  });
16087
- var timeRemaining = msToTime(Math.max(0, durationMs - (new Date().getTime() - (startedAt !== null && startedAt !== void 0 ? startedAt : new Date()).getTime())));
16149
+ var manualCountdown = function manualCountdown(remainingTime) {
16150
+ if (remainingTime > 0) {
16151
+ var nextCycle_1 = remainingTime - 1;
16152
+ setCountdownRemaining(nextCycle_1);
16153
+ countdownTimeoutRef.current = setTimeout(function () {
16154
+ return manualCountdown(nextCycle_1);
16155
+ }, 1000);
16156
+ }
16157
+ };
16158
+ React.useEffect(function () {
16159
+ setCountdownRemaining(countdownRemaining);
16160
+ countdownTimeoutRef.current = setTimeout(function () {
16161
+ return manualCountdown(countdownRemaining);
16162
+ }, 1000);
16163
+ return function () {
16164
+ clearTimeout(countdownTimeoutRef.current);
16165
+ };
16166
+ }, []);
16088
16167
  return /*#__PURE__*/React__default['default'].createElement(ReadTextPromptContainer, {
16089
16168
  className: classNames.container
16090
16169
  }, /*#__PURE__*/React__default['default'].createElement(ReadTextPromptHeading, {
@@ -16095,22 +16174,13 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
16095
16174
  className: classNames.buttonsRow
16096
16175
  }, /*#__PURE__*/React__default['default'].createElement(ReadTextPromptTimeRemaining, {
16097
16176
  className: classNames.timeRemaining
16098
- }, timeRemaining), /*#__PURE__*/React__default['default'].createElement(DoneButton, {
16177
+ }, countdownRemaining), /*#__PURE__*/React__default['default'].createElement(DoneButton, {
16099
16178
  variant: "positive",
16100
16179
  className: classNames.doneBtn,
16101
16180
  onClick: onComplete,
16102
16181
  finished: true
16103
16182
  }, verbiage.doneBtnText)));
16104
16183
  };
16105
- function msToTime(s) {
16106
- var ms = s % 1000;
16107
- s = (s - ms) / 1000;
16108
- var secs = s % 60;
16109
- s = (s - secs) / 60;
16110
- var mins = s % 60;
16111
- secs += 1;
16112
- return mins + ':' + ('00' + secs).slice(-2);
16113
- }
16114
16184
  var ReadTextPromptContainer = styled__default['default'].div(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n"])));
16115
16185
  var ReadTextPromptHeading = styled__default['default'].div(templateObject_2$6 || (templateObject_2$6 = tslib.__makeTemplateObject(["\n padding: 20px;\n font-weight: bold;\n margin: auto auto 32px;\n\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 20px;\n font-weight: bold;\n margin: auto auto 32px;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
16116
16186
  var _a, _b, _c, _d, _e, _f;
@@ -16236,6 +16306,10 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16236
16306
  stopRecordingAudio = _21.stopRecordingAudio,
16237
16307
  videoUrl = _21.videoUrl,
16238
16308
  audioUrl = _21.audioUrl;
16309
+ var countdownTimeoutRef = React.useRef(undefined);
16310
+ var _22 = React.useState(0),
16311
+ countdownRemaining = _22[0],
16312
+ setCountdownRemaining = _22[1];
16239
16313
  React.useEffect(function () {
16240
16314
  if (!isRecordingVideo && !videoUrl) {
16241
16315
  startRecordingVideo();
@@ -16251,9 +16325,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16251
16325
  React.useEffect(function () {
16252
16326
  shouldCaptureFrames.current = videoLoaded && cameraReady && idModelsReady && (!readTextPrompt || microphoneReady);
16253
16327
  }, [cameraReady, idModelsReady, microphoneReady, readTextPrompt, videoLoaded]);
16254
- var _22 = React.useState('SHOW_ID_FRONT'),
16255
- requestedAction = _22[0],
16256
- setRequestedAction = _22[1];
16328
+ var _23 = React.useState('SHOW_ID_FRONT'),
16329
+ requestedAction = _23[0],
16330
+ setRequestedAction = _23[1];
16257
16331
  React.useEffect(function () {
16258
16332
  if (requestedAction !== 'SHOW_ID_FRONT' && requestedAction !== 'SHOW_ID_BACK') return;
16259
16333
  if (!idCaptureModelsEnabled || !idModelsReady || !cameraReady || !videoLoaded) return;
@@ -16281,15 +16355,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16281
16355
  }
16282
16356
  });
16283
16357
  }, [idCardBackDetectionThreshold, idCardBackFocusThreshold, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, requestedAction, setThresholds]);
16284
- var _23 = React.useState(0),
16285
- currentDetectionScore = _23[0],
16286
- setCurrentDetectionScore = _23[1];
16287
16358
  var _24 = React.useState(0),
16288
- currentFocusScore = _24[0],
16289
- setCurrentFocusScore = _24[1];
16359
+ currentDetectionScore = _24[0],
16360
+ setCurrentDetectionScore = _24[1];
16290
16361
  var _25 = React.useState(0),
16291
- goodFramesCount = _25[0],
16292
- setGoodFramesCount = _25[1];
16362
+ currentFocusScore = _25[0],
16363
+ setCurrentFocusScore = _25[1];
16364
+ var _26 = React.useState(0),
16365
+ goodFramesCount = _26[0],
16366
+ setGoodFramesCount = _26[1];
16293
16367
  var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? goodIdCardFrontFramesThreshold : goodIdCardBackFramesThreshold;
16294
16368
  var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
16295
16369
  React.useEffect(function () {
@@ -16307,9 +16381,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16307
16381
  }
16308
16382
  });
16309
16383
  }, [idCaptureModelsEnabled, idCardFrontDetectionThreshold, onIdPredictionMade]);
16310
- var _26 = React.useState(null),
16311
- idFrontCaptureStartedAt = _26[0],
16312
- setFirstGoodFrameTime = _26[1];
16384
+ var _27 = React.useState(null),
16385
+ idFrontCaptureStartedAt = _27[0],
16386
+ setFirstGoodFrameTime = _27[1];
16313
16387
  React.useEffect(function () {
16314
16388
  if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
16315
16389
  }, [goodFramesCount]);
@@ -16330,9 +16404,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16330
16404
  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
16331
16405
  var faceBox = (_f = faces === null || faces === void 0 ? void 0 : faces[0]) === null || _f === void 0 ? void 0 : _f.box;
16332
16406
  var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
16333
- var _27 = React.useState(),
16334
- countdownStartedAt = _27[0],
16335
- setCountdownStartedAt = _27[1];
16407
+ var _28 = React.useState(),
16408
+ countdownStartedAt = _28[0],
16409
+ setCountdownStartedAt = _28[1];
16336
16410
  var frameLock = React.useRef(false);
16337
16411
  var captureFrame = React.useCallback(function () {
16338
16412
  return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -16421,18 +16495,38 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16421
16495
  setCountdownStartedAt(new Date());
16422
16496
  }
16423
16497
  }, [countdownStartedAt, satisfied]);
16498
+ React.useEffect(function () {
16499
+ return function () {
16500
+ clearTimeout(countdownTimeoutRef.current);
16501
+ };
16502
+ }, []);
16503
+ var manualCountdown = function manualCountdown(remainingTime) {
16504
+ if (remainingTime > 0) {
16505
+ var nextCycle_1 = remainingTime - 1;
16506
+ setCountdownRemaining(nextCycle_1);
16507
+ countdownTimeoutRef.current = setTimeout(function () {
16508
+ return manualCountdown(nextCycle_1);
16509
+ }, 1000);
16510
+ return;
16511
+ }
16512
+ if (countdownStartedAt) {
16513
+ captureFrame();
16514
+ }
16515
+ };
16424
16516
  React.useEffect(function () {
16425
16517
  if (!countdownStartedAt) return;
16426
- var remainingTime = new Date().getTime() + captureCountdownSeconds * 1000.0 - countdownStartedAt.getTime();
16427
- var timeout = setTimeout(captureFrame, remainingTime);
16518
+ setCountdownRemaining(captureCountdownSeconds);
16519
+ countdownTimeoutRef.current = setTimeout(function () {
16520
+ return manualCountdown(captureCountdownSeconds);
16521
+ }, 1000);
16428
16522
  return function () {
16429
- clearTimeout(timeout);
16523
+ clearTimeout(countdownTimeoutRef.current);
16430
16524
  };
16431
16525
  }, [captureCountdownSeconds, captureFrame, countdownStartedAt]);
16432
16526
  var timeoutStartedAt = useTimeout(readTextTimeoutDurationMs, stopRecording, requestedAction !== 'READ_TEXT', false, requestedAction === 'READ_TEXT').timeoutStartedAt;
16433
- var _28 = React.useState(0),
16434
- numFramesWithoutFaces = _28[0],
16435
- setNumFramesWithoutFaces = _28[1];
16527
+ var _29 = React.useState(0),
16528
+ numFramesWithoutFaces = _29[0],
16529
+ setNumFramesWithoutFaces = _29[1];
16436
16530
  React.useEffect(function () {
16437
16531
  onSelfiePredictionMade(function (faces) {
16438
16532
  setFaces(faces);
@@ -16448,14 +16542,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16448
16542
  }
16449
16543
  }, [numFramesWithoutFaces, onFaceNotDetected]);
16450
16544
  var theme = styled.useTheme();
16451
- var _29 = useTranslations(rawVerbiage, {
16545
+ var _30 = useTranslations(rawVerbiage, {
16452
16546
  faceNotCenteredText: 'Please move your face to the center...',
16453
16547
  searchingForIdCardText: 'Searching for ID card...',
16454
16548
  captureBtnText: 'Capture'
16455
16549
  }),
16456
- captureBtnText = _29.captureBtnText,
16457
- faceNotCenteredText = _29.faceNotCenteredText,
16458
- searchingForIdCardText = _29.searchingForIdCardText;
16550
+ captureBtnText = _30.captureBtnText,
16551
+ faceNotCenteredText = _30.faceNotCenteredText,
16552
+ searchingForIdCardText = _30.searchingForIdCardText;
16459
16553
  var debugScalingDetails = useDebugScalingDetails({
16460
16554
  enabled: debugMode,
16461
16555
  pageWidth: width,
@@ -16464,7 +16558,6 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16464
16558
  videoHeight: (_k = (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.videoHeight) !== null && _k !== void 0 ? _k : 0
16465
16559
  });
16466
16560
  var capturingId = ['SHOW_ID_FRONT', 'SHOW_ID_BACK'].includes(requestedAction);
16467
- var countdownRemaining = !!countdownStartedAt && Math.max(0, captureCountdownSeconds - Math.floor((new Date().getTime() - countdownStartedAt.getTime()) / 1000.0));
16468
16561
  var searchingForIdCard = idCaptureModelsEnabled && capturingId && !goodFramesThresholdMet;
16469
16562
  var guidanceText = !faceCentered ? faceNotCenteredText : searchingForIdCard ? searchingForIdCardText : undefined;
16470
16563
  return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
@@ -16502,7 +16595,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16502
16595
  face: face,
16503
16596
  scaling: debugScalingDetails
16504
16597
  });
16505
- })))))), guidanceText && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
16598
+ })))))), guidanceText && idCaptureModelsEnabled && !modelError && ( /*#__PURE__*/React__default['default'].createElement(GuidanceMessageContainer, {
16506
16599
  className: classNames.guidanceMessageContainer
16507
16600
  }, /*#__PURE__*/React__default['default'].createElement(GuidanceMessage, {
16508
16601
  className: classNames.guidanceMessage,