idmission-web-sdk 1.0.350 → 1.0.351

package/dist/lib/camera/Camera.d.ts

@@ -39,6 +39,7 @@ export type CaptureDevice = {
     videoDevice: MediaDeviceInfo | null;
     videoLoaded: boolean;
     setVideoLoaded: (value: boolean) => void;
+    onVideoUnmounted: (videoElement: HTMLVideoElement) => void;
     cameraRef: MutableRefObject<Camera | null>;
     cameraReady: boolean;
     cameraAccessDenied: boolean;

package/dist/sdk2.cjs.development.js

@@ -51,7 +51,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.350';
+var webSdkVersion = '1.0.351';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1902,6 +1902,7 @@ function usePreferredCaptureDevice(_a) {
     _h = _b.debugMode,
     debugMode = _h === void 0 ? false : _h;
   var videoRef = React.useRef(null);
+  var videoRefStack = React.useRef([]);
   var cameraRef = React.useRef(null);
   var _j = React.useState(false),
     cameraReady = _j[0],
@@ -1933,6 +1934,23 @@ function usePreferredCaptureDevice(_a) {
   var _t = React.useState(false),
     microphoneAccessDenied = _t[0],
     setMicrophoneAccessDenied = _t[1];
+  var videoRefElement = videoRef.current;
+  React.useEffect(function pushVideoRefToStackWhenChanged() {
+    // proceed if the video element being mounted is not already at the top of the videoRefStack.
+    var topOfStack = videoRefStack.current.slice(-1)[0];
+    if (videoRefElement && videoRefElement !== topOfStack) {
+      log('adding video to stack', videoRefElement);
+      videoRefStack.current.push(videoRefElement);
+    }
+  }, [videoRefElement]);
+  var onVideoUnmounted = React.useCallback(function (videoElement) {
+    log('removing video from stack', videoElement);
+    videoRefStack.current = videoRefStack.current.filter(function (v) {
+      return v !== videoElement;
+    });
+    videoRef.current = videoRefStack.current.slice(-1)[0]; // top of stack.
+    log('new videoRef is', videoRef.current);
+  }, []);
   React.useEffect(function resetCameraOnContinuityPreferenceChanged() {
     if (debugMode) {
       log('iphone continuity camera allowed changed', iphoneContinuityCameraAllowed);
@@ -2222,6 +2240,7 @@ function usePreferredCaptureDevice(_a) {
       videoDevice: videoDevice,
       videoLoaded: videoLoaded,
       setVideoLoaded: setVideoLoaded,
+      onVideoUnmounted: onVideoUnmounted,
       cameraRef: cameraRef,
       cameraReady: cameraReady,
       cameraAccessDenied: cameraAccessDenied,
@@ -2236,7 +2255,7 @@ function usePreferredCaptureDevice(_a) {
       microphoneAccessDenied: microphoneAccessDenied,
       requestMicrophoneAccess: requestMicrophoneAccess
     };
-  }, [audioStream, cameraAccessDenied, cameraReady, iphoneContinuityCameraAllowed, iphoneContinuityCameraAvailable, microphoneAccessDenied, microphoneReady, requestCameraAccess, requestMicrophoneAccess, takePhoto, videoDevice, videoLoaded]);
+  }, [audioStream, cameraAccessDenied, cameraReady, iphoneContinuityCameraAllowed, iphoneContinuityCameraAvailable, microphoneAccessDenied, microphoneReady, onVideoUnmounted, requestCameraAccess, requestMicrophoneAccess, takePhoto, videoDevice, videoLoaded]);
 }
 
 var CameraStateContext = /*#__PURE__*/React.createContext({
@@ -2267,6 +2286,9 @@ var CameraStateContext = /*#__PURE__*/React.createContext({
   setVideoLoaded: function setVideoLoaded() {
     return null;
   },
+  onVideoUnmounted: function onVideoUnmounted() {
+    return null;
+  },
   audioStream: null,
   microphoneReady: false,
   microphoneAccessDenied: false,
@@ -12116,11 +12138,19 @@ var CameraVideoTag = function CameraVideoTag(_a) {
   var _c = React.useContext(CameraStateContext),
     videoRef = _c.videoRef,
     setVideoLoaded = _c.setVideoLoaded,
+    onVideoUnmounted = _c.onVideoUnmounted,
     cameraRef = _c.cameraRef;
-  React.useEffect(function () {
+  React.useEffect(function notifyCameraProviderOfUnmount() {
+    var videoElement = videoRef.current;
+    if (!videoElement) return;
+    return function () {
+      onVideoUnmounted(videoElement);
+    };
+  }, [onVideoUnmounted, videoRef]);
+  React.useEffect(function setVideoLoadedToFalseOnMount() {
     setVideoLoaded(false);
   }, [setVideoLoaded]);
-  React.useEffect(function () {
+  React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
     var _a;
     if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
       videoRef.current.srcObject = cameraRef.current.stream;
@@ -13162,47 +13192,56 @@ var Canvas = styled__default['default'].canvas(templateObject_2$h || (templateOb
 var templateObject_1$n, templateObject_2$h;
 
 var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
-  var _b, _c, _d, _e, _f;
+  var _b, _c, _d, _e, _f, _g, _h;
   var onCaptureClicked = _a.onCaptureClicked,
-    _g = _a.classNames,
-    classNames = _g === void 0 ? {} : _g,
-    _h = _a.verbiage,
-    rawVerbiage = _h === void 0 ? {} : _h;
-  var _j = useDocumentCaptureState(),
-    _k = _j[0],
-    documents = _k.documents,
-    currentDocumentIndex = _k.currentDocumentIndex,
-    rectX = _k.rectX,
-    rectY = _k.rectY,
-    rectWidth = _k.rectWidth,
-    rectHeight = _k.rectHeight,
-    rectOffsetTop = _k.rectOffsetTop,
-    capturing = _k.capturing,
-    uploadCapturedDocument = _k.uploadCapturedDocument,
-    dispatch = _j[1];
-  var _l = (_b = documents[currentDocumentIndex]) !== null && _b !== void 0 ? _b : {},
-    title = _l.title,
-    aspectRatio = _l.aspectRatio,
-    cameraFeedMode = _l.cameraFeedMode,
-    instructions = _l.instructions,
-    contentUrl = _l.contentUrl,
-    content = _l.content,
-    uploadState = _l.uploadState;
-  var _m = React.useContext(CameraStateContext),
-    cameraReady = _m.cameraReady,
-    cameraAccessDenied = _m.cameraAccessDenied,
-    requestCameraAccess = _m.requestCameraAccess;
-  var _o = React.useState(false),
-    cameraAccessRequested = _o[0],
-    setCameraAccessRequested = _o[1];
-  var cameraAccessNeeded = uploadState === 'not_started' && !cameraAccessRequested && !content;
+    _j = _a.classNames,
+    classNames = _j === void 0 ? {} : _j,
+    _k = _a.verbiage,
+    rawVerbiage = _k === void 0 ? {} : _k;
+  var _l = useDocumentCaptureState(),
+    _m = _l[0],
+    documents = _m.documents,
+    currentDocumentIndex = _m.currentDocumentIndex,
+    rectX = _m.rectX,
+    rectY = _m.rectY,
+    rectWidth = _m.rectWidth,
+    rectHeight = _m.rectHeight,
+    rectOffsetTop = _m.rectOffsetTop,
+    capturing = _m.capturing,
+    uploadCapturedDocument = _m.uploadCapturedDocument,
+    dispatch = _l[1];
+  var _o = (_b = documents[currentDocumentIndex]) !== null && _b !== void 0 ? _b : {},
+    title = _o.title,
+    aspectRatio = _o.aspectRatio,
+    cameraFeedMode = _o.cameraFeedMode,
+    instructions = _o.instructions,
+    contentUrl = _o.contentUrl,
+    content = _o.content,
+    uploadState = _o.uploadState;
+  var _p = React.useContext(CameraStateContext),
+    cameraRef = _p.cameraRef,
+    cameraReady = _p.cameraReady,
+    cameraAccessDenied = _p.cameraAccessDenied,
+    requestCameraAccess = _p.requestCameraAccess;
+  var _q = React.useState(false),
+    cameraAccessRequested = _q[0],
+    setCameraAccessRequested = _q[1];
+  var cameraAccessNeeded =
+  // we should force the browser to ask for camera access if...
+  uploadState === 'not_started' &&
+  // we aren't in the middle of uploading a document...
+  !content &&
+  // and the user hasn't passed a media blob for the current document...
+  !cameraAccessRequested &&
+  // and we haven't already tried to force a camera request...
+  !((_d = (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.stream) === null || _d === void 0 ? void 0 : _d.active); // and we don't already have camera access.
   React.useEffect(function requestCameraAccessIfNeeded() {
     if (!cameraAccessNeeded) return;
     setCameraAccessRequested(true);
     requestCameraAccess();
   }, [cameraAccessNeeded, requestCameraAccess]);
   var theme = styled.useTheme();
-  var maskColor = (_e = (_d = (_c = theme.documentCapture) === null || _c === void 0 ? void 0 : _c.guideBox) === null || _d === void 0 ? void 0 : _d.maskColor) !== null && _e !== void 0 ? _e : cameraFeedMode === 'snapToGuides' ? '#708090' : "rgba(0, 0, 0, 0.5)";
+  var maskColor = (_g = (_f = (_e = theme.documentCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.maskColor) !== null && _g !== void 0 ? _g : cameraFeedMode === 'snapToGuides' ? '#708090' : "rgba(0, 0, 0, 0.5)";
   var verbiage = useTranslations(rawVerbiage, {
     headingText: title,
     loadingBtnText: 'Camera initializing...',
@@ -13235,7 +13274,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
     });
   }
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
-    className: "flex ".concat((_f = classNames.container) !== null && _f !== void 0 ? _f : '')
+    className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
   }, /*#__PURE__*/React__default['default'].createElement(CameraFeedWrapper, {
     className: classNames.cameraFeedWrapper,
     "$mode": cameraFeedMode !== null && cameraFeedMode !== void 0 ? cameraFeedMode : 'snapToGuides',
@@ -14629,9 +14668,12 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
       }],
       onDocumentCaptured: function onDocumentCaptured(document) {
         var imageData = document.contentUrl;
-        setImage(imageData);
-        setUsingDocumentCapture(false);
         onCapture === null || onCapture === void 0 ? void 0 : onCapture(imageData);
+        // todo: this a hack to address what is probably some sub-optimal coupling - fix
+        setTimeout(function () {
+          setImage(imageData);
+          setUsingDocumentCapture(false);
+        }, 0);
       }
     });
   }