idmission-web-sdk 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export type IDmissionSDK = {
     renderCustomerIdentification: typeof renderCustomerIdentification;
     renderSignatureKYC: typeof renderSignatureKYC;
     preloadModels: typeof preloadModels;
+    ready: boolean;
 };
 declare global {
     var IDmissionSDK: IDmissionSDK;

package/dist/sdk2.cjs.development.js

@@ -796,7 +796,6 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
     ref: wrapperRef,
     onClick: onClick,
     style: {
-      position: 'absolute',
       zIndex: 1000
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -1059,38 +1058,6 @@ var CameraStateContext = /*#__PURE__*/React.createContext({
   }
 });
 
-var CameraVideoTag = function CameraVideoTag() {
-  var _a;
-  var _b = React.useContext(CameraStateContext),
-    videoRef = _b.videoRef,
-    setVideoLoaded = _b.setVideoLoaded,
-    cameraRef = _b.cameraRef;
-  React.useEffect(function () {
-    setVideoLoaded(false);
-  }, [setVideoLoaded]);
-  React.useEffect(function () {
-    var _a;
-    if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
-      videoRef.current.srcObject = cameraRef.current.stream;
-    }
-  }, [cameraRef, videoRef]);
-  var onLoadedData = React.useCallback(function () {
-    setVideoLoaded(true);
-  }, [setVideoLoaded]);
-  return /*#__PURE__*/React__default['default'].createElement(FullscreenVideoTag, {
-    autoPlay: true,
-    playsInline: true,
-    muted: true,
-    ref: videoRef,
-    onLoadedData: onLoadedData,
-    "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
-  });
-};
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
-  return props.$isRearFacing ? '' : 'scaleX(-1)';
-});
-var templateObject_1$2;
-
 var initialState$5 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -1584,7 +1551,7 @@ var IdCapture = function IdCapture(_a) {
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement(DocumentCaptureGuideOverlay, {
+  }, /*#__PURE__*/React__default['default'].createElement(DocumentCaptureGuideOverlay, {
     width: width,
     height: height,
     instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
@@ -1820,11 +1787,7 @@ var IdCaptureLoadingOverlay = function IdCaptureLoadingOverlay(_a) {
     }
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     className: "ladda-label"
-  }, cameraAccessDenied ? cameraAccessBlockedText : cameraReady && modelsReady ? continueText : modelsReady ? cameraInitializingText : modelsWarmingUpText)), /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      display: 'none'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null))));
+  }, cameraAccessDenied ? cameraAccessBlockedText : cameraReady && modelsReady ? continueText : modelsReady ? cameraInitializingText : modelsWarmingUpText))));
 };
 
 var FlipIdPrompt = function FlipIdPrompt(_a) {
@@ -1899,7 +1862,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: wrapperRef,
     style: {
       position: 'absolute',
@@ -2002,7 +1965,6 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
       flexGrow: 1,
       textAlign: 'center',
       color: 'white',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'end'
@@ -2122,6 +2084,38 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
   }, submissionStatus === SubmissionStatus.SUBMITTING ? submittingText : submitText))));
 };
 
+var CameraVideoTag = function CameraVideoTag() {
+  var _a;
+  var _b = React.useContext(CameraStateContext),
+    videoRef = _b.videoRef,
+    setVideoLoaded = _b.setVideoLoaded,
+    cameraRef = _b.cameraRef;
+  React.useEffect(function () {
+    setVideoLoaded(false);
+  }, [setVideoLoaded]);
+  React.useEffect(function () {
+    var _a;
+    if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
+      videoRef.current.srcObject = cameraRef.current.stream;
+    }
+  }, [cameraRef, videoRef]);
+  var onLoadedData = React.useCallback(function () {
+    setVideoLoaded(true);
+  }, [setVideoLoaded]);
+  return /*#__PURE__*/React__default['default'].createElement(FullscreenVideoTag, {
+    autoPlay: true,
+    playsInline: true,
+    muted: true,
+    ref: videoRef,
+    onLoadedData: onLoadedData,
+    "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
+  });
+};
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"], ["\n  transform: ", ";\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n"])), function (props) {
+  return props.$isRearFacing ? '' : 'scaleX(-1)';
+});
+var templateObject_1$2;
+
 var CaptureState;
 (function (CaptureState) {
   CaptureState["CAPTURING"] = "CAPTURING";
@@ -2335,7 +2329,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
     backPortraitGuidesImage: assets.idCardBackPortraitGuidesImageUrl,
     backLandscapeGuidesImage: assets.idCardBackLandscapeGuidesImageUrl
   });
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, overlayDismissed && function () {
+  return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
+    className: "flex"
+  }, state.captureState !== CaptureState.COMPLETE && /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), overlayDismissed && function () {
     switch (state.requestedDocumentType) {
       case DocumentType.ID_CARD_FRONT:
         return /*#__PURE__*/React__default['default'].createElement(IdCapture, {
@@ -10542,9 +10538,12 @@ var useHighestResCaptureDevice = function useHighestResCaptureDevice(_a) {
               return [3, 4];
             case 3:
               e_1 = _a.sent();
-              console.error('caught the block!!', e_1);
-              setCameraAccessDenied(true);
-              return [2];
+              if (e_1.name === 'NotAllowedError') {
+                console.error('caught the block!!', e_1);
+                setCameraAccessDenied(true);
+                return [2];
+              }
+              throw e_1;
             case 4:
               return [4, navigator.mediaDevices.enumerateDevices()];
             case 5:
@@ -10780,6 +10779,11 @@ var useHighestResCaptureDevice = function useHighestResCaptureDevice(_a) {
           case 0:
             canvas = document.createElement('canvas');
             ctx = canvas.getContext('2d');
+            console.log({
+              ctx: ctx,
+              cameraRef: cameraRef.current,
+              videoRef: videoRef.current
+            });
             if (!ctx || !cameraRef.current || !videoRef.current) return [2, null];
             canvas.width = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.videoWidth;
             canvas.height = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoHeight;
@@ -13196,7 +13200,8 @@ globalThis.IDmissionSDK = {
   renderCustomerVerification: renderCustomerVerification,
   renderCustomerIdentification: renderCustomerIdentification,
   renderSignatureKYC: renderSignatureKYC,
-  preloadModels: preloadModels
+  preloadModels: preloadModels,
+  ready: true
 };
 
 exports.CustomerBiometricsEnrollment = CustomerBiometricsEnrollment;