idmission-web-sdk 2.1.75 → 2.1.77

package/dist/components/video_id/IdVideoCapture.d.ts

@@ -38,6 +38,7 @@ export type VideoIdCaptureThresholds = IdCaptureThresholds & {
         /** Number of good frames of the ID card back that must be captured before moving on during video capture. */
         idCardBack: number;
     };
+    flipShortcutThreshold: number;
 };
 export declare const defaultVideoIdCaptureThresholds: VideoIdCaptureThresholds;
 export type IdVideoCaptureProps = {

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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
@@ -8435,38 +8435,23 @@ function IdCardBorderSvg(_a) {
     _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__namespace.default.createElement(SvgOverlay, _assign({
     height: "100%",
     fill: "none",
@@ -8499,7 +8484,7 @@ function IdCardBorderSvg(_a) {
 }
 var IdCardBorderContainer = styled__default.default.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__default.default.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__default.default.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__default.default.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) {
@@ -13726,14 +13711,13 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     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...',
@@ -13747,17 +13731,17 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
   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__default.default(),
-    idCardGuideRef = _6.ref,
-    _7 = _6.width,
-    idCardGuideWidth = _7 === void 0 ? 0 : _7,
-    _8 = _6.height,
-    idCardGuideHeight = _8 === void 0 ? 0 : _8;
+  var _5 = useResizeObserver__default.default(),
+    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;
@@ -13799,7 +13783,7 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
     borderColor: idCardGuideBorderColor,
     aspectRatio: aspectRatio,
     "$isVisible": requestedAction !== 'FLIP_ID',
-    progress: requestedAction === 'VERIFY_LIVENESS' ? 0 : idCardCaptureProgress
+    progress: requestedAction === 'VERIFY_LIVENESS' ? undefined : idCardCaptureProgress
   }, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
     alt: "",
     className: classNames.idCardGuideImage,
@@ -13939,7 +13923,7 @@ var edgeBoundary = 0.05;
 var defaultVideoIdCaptureThresholds = {
   detection: {
     idCardFront: 0.4,
-    idCardBack: 0.4,
+    idCardBack: 0.5,
     passport: 1
   },
   focus: {
@@ -13959,7 +13943,8 @@ var defaultVideoIdCaptureThresholds = {
   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;
@@ -14115,14 +14100,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       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];
@@ -14324,7 +14310,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     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