idmission-web-sdk 2.1.75 → 2.1.77

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.75';
+  var webSdkVersion = '2.1.77';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -17269,38 +17269,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 +17318,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 +23313,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 +23333,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 +23385,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,
@@ -23541,7 +23525,7 @@
   var defaultVideoIdCaptureThresholds = {
     detection: {
       idCardFront: 0.4,
-      idCardBack: 0.4,
+      idCardBack: 0.5,
       passport: 1
     },
     focus: {
@@ -23561,7 +23545,8 @@
     goodFrames: {
       idCardFront: 1,
       idCardBack: 1
-    }
+    },
+    flipShortcutThreshold: 0.7
   };
   var IdVideoCapture = function IdVideoCapture(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
@@ -23717,14 +23702,15 @@
         setCurrentFocusScore(prediction.focusScore);
         var detectionThresholdMet = requestedAction === 'SHOW_ID_FRONT' ? prediction.idCardFrontDetectionThresholdMet : prediction.idCardBackDetectionThresholdMet;
         var isGoodFrame = detectionThresholdMet && prediction.focusThresholdMet;
-        if (requestedAction === 'FLIP_ID' && isGoodFrame) {
+        var shouldShortcutFlipAnimation = requestedAction === 'FLIP_ID' && isGoodFrame && prediction.idCardBackDetectionScore >= videoIdCaptureThresholds.flipShortcutThreshold;
+        if (shouldShortcutFlipAnimation) {
           return setRequestedAction('SHOW_ID_BACK');
         }
         setGoodFramesCount(isGoodFrame ? function (n) {
           return n + 1;
         } : 0);
       });
-    }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction]);
+    }, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction, videoIdCaptureThresholds.flipShortcutThreshold]);
     var _29 = React.useState(null),
       idFrontCaptureStartedAt = _29[0],
       setFirstGoodFrameTime = _29[1];
@@ -23926,7 +23912,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