idmission-web-sdk 2.1.76 → 2.1.78

package/dist/sdk2.umd.development.js

@@ -215,7 +215,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.1.76';
+  var webSdkVersion = '2.1.78';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -8835,6 +8835,12 @@
       modelError: modelError
     };
   }
+  var lastFocusPredictionAt = 0;
+  var lastFocusPredictionTime = 0;
+  function setLastFocusPredictionAt(time) {
+    lastFocusPredictionTime = time - lastFocusPredictionAt;
+    lastFocusPredictionAt = time;
+  }
   function makeFocusModelPrediction(model, imageData, cropCanvas, rotateCanvas, box) {
     var _a, _b, _c, _d, _e;
     var startedAt = new Date();
@@ -11945,22 +11951,19 @@
     var _e = React.useState({}),
       focusThresholds = _e[0],
       setFocusThresholds = _e[1];
-    var _f = React.useState(0),
-      focusPredictionTime = _f[0],
-      setFocusPredictionTime = _f[1];
-    var _g = useLoadFocusModel({
+    var _f = useLoadFocusModel({
         modelPath: focusModelPath,
         modelLoadTimeoutMs: focusModelLoadTimeoutMs,
         onModelError: onFocusModelError
       }),
-      model = _g.model,
-      ready = _g.ready,
-      modelDownloadProgress = _g.modelDownloadProgress,
-      modelError = _g.modelError;
+      model = _f.model,
+      ready = _f.ready,
+      modelDownloadProgress = _f.modelDownloadProgress,
+      modelError = _f.modelError;
     var makeFocusPrediction = React.useCallback(function (imageData, box) {
       if (!model.current) return null;
       var prediction = makeFocusModelPrediction(model.current, imageData, cropCanvas.current, rotateCanvas.current, box);
-      setFocusPredictionTime(prediction.predictionTime);
+      setLastFocusPredictionAt(prediction.predictionTime);
       return prediction;
     }, [model]);
     var value = React.useMemo(function () {
@@ -11969,11 +11972,11 @@
         focusModelDownloadProgress: modelDownloadProgress,
         focusModelError: modelError,
         makeFocusPrediction: makeFocusPrediction,
-        focusPredictionTime: focusPredictionTime,
+        focusPredictionTime: lastFocusPredictionTime,
         focusThresholds: focusThresholds,
         setFocusThresholds: setFocusThresholds
       };
-    }, [focusPredictionTime, focusThresholds, makeFocusPrediction, modelDownloadProgress, modelError, ready]);
+    }, [focusThresholds, makeFocusPrediction, modelDownloadProgress, modelError, ready]);
     return /*#__PURE__*/React.createElement(FocusModelContext.Provider, {
       value: value
     }, /*#__PURE__*/React.createElement(InvisibleCanvas, {
@@ -17269,38 +17272,23 @@
       _b = _a.borderOpacity,
       borderOpacity = _b === void 0 ? 1 : _b,
       _c = _a.progress,
-      progress = _c === void 0 ? 1 : _c,
+      progress = _c === void 0 ? 0 : _c,
       _d = _a.progressPaused,
       progressPaused = _d === void 0 ? false : _d,
       _e = _a.isProgressBar,
       isProgressBar = _e === void 0 ? false : _e,
       props = __rest(_a, ["borderRadius", "borderColor", "borderWidth", "borderOpacity", "progress", "progressPaused", "isProgressBar"]);
-    var rectRef = React.useRef(null);
     var _f = React.useState(0),
       totalLength = _f[0],
       setTotalLength = _f[1];
     var resolvedProgress = progress * totalLength;
-    React.useLayoutEffect(function () {
-      if (totalLength > 0) return;
-      var interval;
-      var measuredLength = 0;
-      function measureTotalLength() {
-        var _a, _b;
-        try {
-          measuredLength = (_b = (_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getTotalLength()) !== null && _b !== void 0 ? _b : 0;
-          if (measuredLength === 0) return;
-          setTotalLength(measuredLength);
-          if (interval) clearInterval(interval);
-        } catch (e) {
-          warn('failed to measure SVG length', e);
-        }
+    var rectRef = function rectRef(r) {
+      try {
+        if (isProgressBar && r) setTotalLength(r.getTotalLength());
+      } catch (e) {
+        debug('failed to measure SVG length', e);
       }
-      measureTotalLength();
-      if (measuredLength === 0) interval = setInterval(measureTotalLength, 250);
-      return function () {
-        if (interval) clearInterval(interval);
-      };
-    }, [totalLength]);
+    };
     return /*#__PURE__*/React.createElement(SvgOverlay, _assign({
       height: "100%",
       fill: "none",
@@ -17333,7 +17321,7 @@
   }
   var IdCardBorderContainer = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\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  @keyframes glow-grow {\n    0% {\n      opacity: 0;\n      transform: scale(1);\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\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  @keyframes glow-grow {\n    0% {\n      opacity: 0;\n      transform: scale(1);\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\n"])));
   var SvgOverlay = styled.svg(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
-  var IdCardBorderRect = styled.rect(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  &.progress {\n    width: 100%;\n    height: 100%;\n    animation: dash ", "\n      ", ";\n  }\n\n  &.paused {\n    animation-play-state: paused;\n  }\n\n  @keyframes dash {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n"], ["\n  &.progress {\n    width: 100%;\n    height: 100%;\n    animation: dash ", "\n      ", ";\n  }\n\n  &.paused {\n    animation-play-state: paused;\n  }\n\n  @keyframes dash {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n"])), function (props) {
+  var IdCardBorderRect = styled.rect(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  &.progress {\n    animation: dash ", "\n      ", ";\n  }\n\n  &.paused {\n    animation-play-state: paused;\n  }\n\n  @keyframes dash {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n"], ["\n  &.progress {\n    animation: dash ", "\n      ", ";\n  }\n\n  &.paused {\n    animation-play-state: paused;\n  }\n\n  @keyframes dash {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n"])), function (props) {
     var _a;
     return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
   }, function (props) {
@@ -23328,14 +23316,13 @@
       idCardGuideStatus = _1 === void 0 ? 'ready' : _1,
       idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
       idCardGuideBorderColor = _a.idCardGuideBorderColor,
-      _2 = _a.idCardCaptureProgress,
-      idCardCaptureProgress = _2 === void 0 ? 0 : _2,
-      _3 = _a.idCardCaptureGuideImages,
-      userSuppliedImages = _3 === void 0 ? defaultIdCaptureGuideImages : _3,
-      _4 = _a.classNames,
-      classNames = _4 === void 0 ? {} : _4,
-      _5 = _a.verbiage,
-      rawVerbiage = _5 === void 0 ? {} : _5;
+      idCardCaptureProgress = _a.idCardCaptureProgress,
+      _2 = _a.idCardCaptureGuideImages,
+      userSuppliedImages = _2 === void 0 ? defaultIdCaptureGuideImages : _2,
+      _3 = _a.classNames,
+      classNames = _3 === void 0 ? {} : _3,
+      _4 = _a.verbiage,
+      rawVerbiage = _4 === void 0 ? {} : _4;
     var cameraRef = React.useContext(CameraStateContext).cameraRef;
     var verbiage = useTranslations(rawVerbiage, {
       idFrontInstructionText: 'Display the front of your ID card...',
@@ -23349,17 +23336,17 @@
     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';
     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;
     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';
-    var _6 = useResizeObserver(),
-      idCardGuideRef = _6.ref,
-      _7 = _6.width,
-      idCardGuideWidth = _7 === void 0 ? 0 : _7,
-      _8 = _6.height,
-      idCardGuideHeight = _8 === void 0 ? 0 : _8;
+    var _5 = useResizeObserver(),
+      idCardGuideRef = _5.ref,
+      _6 = _5.width,
+      idCardGuideWidth = _6 === void 0 ? 0 : _6,
+      _7 = _5.height,
+      idCardGuideHeight = _7 === void 0 ? 0 : _7;
     var idCaptureGuideImages = useGuideImages(userSuppliedImages);
     var idCaptureGuideImagesByUrl = useGuideImagesByUrl(idCaptureGuideImages);
-    var _9 = React.useState(undefined),
-      aspectRatio = _9[0],
-      setAspectRatio = _9[1];
+    var _8 = React.useState(undefined),
+      aspectRatio = _8[0],
+      setAspectRatio = _8[1];
     var onImageLoaded = React.useCallback(function (e) {
       var _a, _b, _c, _d;
       var img = e.currentTarget;
@@ -23401,7 +23388,7 @@
       borderColor: idCardGuideBorderColor,
       aspectRatio: aspectRatio,
       "$isVisible": requestedAction !== 'FLIP_ID',
-      progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
+      progress: requestedAction === 'VERIFY_LIVENESS' ? undefined : idCardCaptureProgress
     }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
       alt: "",
       className: classNames.idCardGuideImage,
@@ -23928,7 +23915,7 @@
       requestedAction: requestedAction,
       satisfied: satisfied,
       idCardGuideStatus: countdownStartedAt ? 'capturing' : 'ready',
-      idCardCaptureProgress: countdownStartedAt ? 1 : 0,
+      idCardCaptureProgress: !!countdownStartedAt ? 1 : 0,
       idCardCaptureGuideImages: idCardCaptureGuideImages,
       faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
       idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor