idmission-web-sdk 0.0.30 → 0.0.32

package/dist/components/customer_flows/SignatureKYC.d.ts

@@ -10,5 +10,6 @@ export type SignatureKYCProps = {
     onComplete?: (submissionResponse: SubmissionResponse) => void;
     geolocationEnabled?: boolean;
     geolocationRequired?: boolean;
+    debugMode?: boolean;
 };
-export declare const SignatureKYC: ({ submissionToken, submissionEnvironment, submissionUrl, onBeforeSubmit, onComplete, geolocationEnabled, geolocationRequired, }: SignatureKYCProps) => ReactElement;
+export declare const SignatureKYC: ({ submissionToken, submissionEnvironment, submissionUrl, onBeforeSubmit, onComplete, geolocationEnabled, geolocationRequired, debugMode, }: SignatureKYCProps) => ReactElement;

package/dist/components/signature_capture/VideoSignatureCapture.d.ts

@@ -5,5 +5,6 @@ export type VideoSignatureCaptureProps = {
     onComplete?: (signatureData: SignatureData, imageData: string) => void;
     onFaceNotDetected?: () => void;
     verbiage?: SignatureCaptureVerbiage;
+    debugMode?: boolean;
 };
-export declare const VideoSignatureCapture: ({ onComplete, onFaceNotDetected, verbiage, }: VideoSignatureCaptureProps) => React.ReactElement;
+export declare const VideoSignatureCapture: ({ onComplete, onFaceNotDetected, verbiage, debugMode, }: VideoSignatureCaptureProps) => React.ReactElement;

package/dist/components/signature_kyc/SignatureKYCWizard.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 export type SignatureKYCWizardProps = {
     onComplete?: () => void;
+    debugMode?: boolean;
 };
-export declare const SignatureKYCWizard: ({ onComplete, }: SignatureKYCWizardProps) => ReactElement;
+export declare const SignatureKYCWizard: ({ onComplete, debugMode, }: SignatureKYCWizardProps) => ReactElement;

package/dist/sdk2.cjs.development.js

@@ -11363,36 +11363,38 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   var onComplete = _a.onComplete,
     onFaceNotDetected = _a.onFaceNotDetected,
     _d = _a.verbiage,
-    verbiage = _d === void 0 ? {} : _d;
+    verbiage = _d === void 0 ? {} : _d,
+    _e = _a.debugMode,
+    debugMode = _e === void 0 ? false : _e;
   var t = reactI18next.useTranslation().t;
-  var _e = React.useContext(CameraStateContext),
-    cameraRef = _e.cameraRef,
-    videoRef = _e.videoRef;
-  var _f = useResizeObserver__default['default'](),
-    ref = _f.ref,
-    width = _f.width,
-    height = _f.height;
+  var _f = React.useContext(CameraStateContext),
+    cameraRef = _f.cameraRef,
+    videoRef = _f.videoRef;
+  var _g = useResizeObserver__default['default'](),
+    ref = _g.ref,
+    width = _g.width,
+    height = _g.height;
   var signaturePad = React.useRef(null);
   var signatureRecorder = React.useRef(null);
   var recordedChunks = React.useRef([]);
-  var _g = React.useState(null),
-    signatureVideoUrl = _g[0],
-    setSignatureVideoUrl = _g[1];
-  var _h = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
-    start = _h.start,
-    stop = _h.stop,
-    onPredictionMade = _h.onPredictionMade;
-  var _j = useVideoRecorder(cameraRef.current),
-    isRecording = _j.isRecording,
-    startRecording = _j.startRecording,
-    stopRecording = _j.stopRecording,
-    videoUrl = _j.videoUrl;
-  var _k = React.useState(null),
-    signatureData = _k[0],
-    setSignatureData = _k[1];
+  var _h = React.useState(null),
+    signatureVideoUrl = _h[0],
+    setSignatureVideoUrl = _h[1];
+  var _j = React.useContext(HighPerformanceSelfieGuidanceModelsContext),
+    start = _j.start,
+    stop = _j.stop,
+    onPredictionMade = _j.onPredictionMade;
+  var _k = useVideoRecorder(cameraRef.current),
+    isRecording = _k.isRecording,
+    startRecording = _k.startRecording,
+    stopRecording = _k.stopRecording,
+    videoUrl = _k.videoUrl;
   var _l = React.useState(null),
-    signatureDataUrl = _l[0],
-    setSignatureDataUrl = _l[1];
+    signatureData = _l[0],
+    setSignatureData = _l[1];
+  var _m = React.useState(null),
+    signatureDataUrl = _m[0],
+    setSignatureDataUrl = _m[1];
   verbiage.acceptBtnText = verbiage.acceptBtnText || t('Accept');
   verbiage.clearBtnText = verbiage.clearBtnText || t('Clear');
   var outputCanvas = React.useRef(null);
@@ -11433,23 +11435,27 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }, [onComplete, signatureData, signatureDataUrl, signatureVideoUrl]);
   var animationFrame = React.useRef(0);
   React.useEffect(function () {
+    var _a;
     if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !cameraRef.current || !isRecording) return;
-    outputCanvas.current.width = cameraRef.current.width;
-    outputCanvas.current.height = cameraRef.current.height;
+    var _b = [cameraRef.current.width, cameraRef.current.height],
+      w = _b[0],
+      h = _b[1];
+    var isPortrait = window.innerWidth < window.innerHeight;
+    var cameraIsLandscape = w > h;
+    if (isPortrait && cameraIsLandscape) _a = [h, w], w = _a[0], h = _a[1];
+    outputCanvas.current.width = w;
+    outputCanvas.current.height = h;
     var ctx = outputCanvas.current.getContext('2d');
     if (!ctx) return;
     animationFrame.current = requestAnimationFrame(function runFrame() {
       return tslib.__awaiter(this, void 0, void 0, function () {
-        var isMobile, w, h, rect;
+        var rect;
         return tslib.__generator(this, function (_a) {
           if (!signaturePad.current || !videoRef.current || !outputCanvas.current) {
             cancelAnimationFrame(animationFrame.current);
             return [2];
           }
-          isMobile = window.innerWidth <= 800;
-          w = outputCanvas.current.width;
-          h = outputCanvas.current.height;
-          rect = [w * (isMobile ? 0.02 : 0.15), h * (isMobile ? 0.15 : 0.25), w * (isMobile ? 0.96 : 0.7), h * (isMobile ? 0.7 : 0.5)];
+          rect = [w * (isPortrait ? 0.02 : 0.15), h * (isPortrait ? 0.15 : 0.25), w * (isPortrait ? 0.96 : 0.7), h * (isPortrait ? 0.7 : 0.5)];
           ctx.drawImage(videoRef.current, 0, 0, w, h);
           ctx.beginPath();
           ctx.fillStyle = 'rgba(255,255,255,0.5)';
@@ -11465,9 +11471,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       cancelAnimationFrame(animationFrame.current);
     };
   }, [cameraRef, isRecording, onFaceNotDetected, videoRef]);
-  var _m = React.useState(0),
-    numFramesWithoutFaces = _m[0],
-    setNumFramesWithoutFaces = _m[1];
+  var _o = React.useState(0),
+    numFramesWithoutFaces = _o[0],
+    setNumFramesWithoutFaces = _o[1];
   React.useEffect(function () {
     onPredictionMade(function (faces) {
       setNumFramesWithoutFaces(function (n) {
@@ -11530,16 +11536,12 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
       stopRecording();
       (_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
     }
-  }, verbiage.acceptBtnText))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, verbiage.acceptBtnText))), debugMode && /*#__PURE__*/React__default['default'].createElement(DebugStatsPane, null, "Video: ", (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.width, "x", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.height), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: 'none'
     }
   }, /*#__PURE__*/React__default['default'].createElement("canvas", {
-    ref: outputCanvas,
-    style: {
-      width: (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth,
-      height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
-    }
+    ref: outputCanvas
   })));
 };
 
@@ -11565,16 +11567,18 @@ var SignatureKYCLoadingOverlay = function SignatureKYCLoadingOverlay(_a) {
 };
 
 var SignatureKYCWizard = function SignatureKYCWizard(_a) {
-  var onComplete = _a.onComplete;
-  var _b = React.useContext(SubmissionContext),
-    selfieImage = _b.selfieImage,
-    setSelfieImage = _b.setSelfieImage,
-    setSignatureData = _b.setSignatureData,
-    logSelfieCaptureAttempt = _b.logSelfieCaptureAttempt;
+  var onComplete = _a.onComplete,
+    _b = _a.debugMode,
+    debugMode = _b === void 0 ? false : _b;
+  var _c = React.useContext(SubmissionContext),
+    selfieImage = _c.selfieImage,
+    setSelfieImage = _c.setSelfieImage,
+    setSignatureData = _c.setSignatureData,
+    logSelfieCaptureAttempt = _c.logSelfieCaptureAttempt;
   var releaseCameraAccess = React.useContext(CameraStateContext).releaseCameraAccess;
-  var _c = React.useState('LOADING'),
-    captureState = _c[0],
-    setCaptureState = _c[1];
+  var _d = React.useState('LOADING'),
+    captureState = _d[0],
+    setCaptureState = _d[1];
   var operationStartedAt = React.useRef();
   var captureStartedAt = React.useRef();
   var captureEndedAt = React.useRef();
@@ -11634,12 +11638,14 @@ var SignatureKYCWizard = function SignatureKYCWizard(_a) {
     switch (captureState) {
       case 'CHECKING_LIVENESS':
         return /*#__PURE__*/React__default['default'].createElement(FaceLivenessCapture, {
-          onSuccess: onFaceCaptureSuccess
+          onSuccess: onFaceCaptureSuccess,
+          debugMode: debugMode
         });
       case 'CAPTURING_SIGNATURE':
         return /*#__PURE__*/React__default['default'].createElement(VideoSignatureCapture, {
           onComplete: onSignatureCaptureCompleted,
-          onFaceNotDetected: onSignatureCaptureFacesNotDetected
+          onFaceNotDetected: onSignatureCaptureFacesNotDetected,
+          debugMode: debugMode
         });
       default:
         return null;
@@ -13290,7 +13296,8 @@ var SignatureKYC = function SignatureKYC(_a) {
     onBeforeSubmit = _a.onBeforeSubmit,
     onComplete = _a.onComplete,
     geolocationEnabled = _a.geolocationEnabled,
-    geolocationRequired = _a.geolocationRequired;
+    geolocationRequired = _a.geolocationRequired,
+    debugMode = _a.debugMode;
   return /*#__PURE__*/React__default['default'].createElement(SubmissionProvider, {
     action: SubmissionAction.NONE,
     environment: submissionEnvironment,
@@ -13304,7 +13311,9 @@ var SignatureKYC = function SignatureKYC(_a) {
     preferContinuityCamera: false,
     preferFrontFacingCamera: true,
     requestMicrophoneAccess: true
-  }, /*#__PURE__*/React__default['default'].createElement(SignatureKYCWizard, null)));
+  }, /*#__PURE__*/React__default['default'].createElement(SignatureKYCWizard, {
+    debugMode: debugMode
+  })));
 };
 
 i18n__default['default'].use(LanguageDetector__default['default']).use(reactI18next.initReactI18next).init({