idmission-web-sdk 2.1.76 → 2.1.78

package/dist/sdk2.esm.js

@@ -204,7 +204,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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
@@ -2842,6 +2842,12 @@ function useLoadFocusModel(_a) {
     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();
@@ -5954,22 +5960,19 @@ function FocusModelProvider(_a) {
   var _e = useState({}),
     focusThresholds = _e[0],
     setFocusThresholds = _e[1];
-  var _f = 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 = 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 = useMemo(function () {
@@ -5978,11 +5981,11 @@ function FocusModelProvider(_a) {
       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__default.createElement(FocusModelContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
@@ -8405,38 +8408,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 = useRef(null);
   var _f = useState(0),
     totalLength = _f[0],
     setTotalLength = _f[1];
   var resolvedProgress = progress * totalLength;
-  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__default.createElement(SvgOverlay, _assign({
     height: "100%",
     fill: "none",
@@ -8469,7 +8457,7 @@ function IdCardBorderSvg(_a) {
 }
 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) {
@@ -13696,14 +13684,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 = useContext(CameraStateContext).cameraRef;
   var verbiage = useTranslations(rawVerbiage, {
     idFrontInstructionText: 'Display the front of your ID card...',
@@ -13717,17 +13704,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(),
-    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 = useState(undefined),
-    aspectRatio = _9[0],
-    setAspectRatio = _9[1];
+  var _8 = useState(undefined),
+    aspectRatio = _8[0],
+    setAspectRatio = _8[1];
   var onImageLoaded = useCallback(function (e) {
     var _a, _b, _c, _d;
     var img = e.currentTarget;
@@ -13769,7 +13756,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__default.createElement(IdCardGuideImage, {
     alt: "",
     className: classNames.idCardGuideImage,
@@ -14296,7 +14283,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