idmission-web-sdk 0.0.70 → 0.0.72

package/dist/components/common/ModelLoadingErrorOverlay.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+export type ModelLoadingErrorOverlayProps = {
+    error: Error;
+};
+export declare const ModelLoadingErrorOverlay: ({ error, }: ModelLoadingErrorOverlayProps) => ReactElement;

package/dist/components/common/SelfieProgressPreview.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const IdCaptureImagePreview: ({ text, imageUrl, }: {
+    text?: string | undefined;
+    imageUrl: string;
+}) => JSX.Element;
 export declare const SelfieProgressPreview: ({ imageUrl }: {
     imageUrl: string;
 }) => JSX.Element;

package/dist/components/id_capture/IdCapture.d.ts

@@ -35,9 +35,10 @@ export type IdCaptureProps = {
     onExit?: () => void;
     processingScreen?: React.ReactElement;
     processingDelay?: number;
+    processingText?: string;
     assets?: IdCaptureAssets;
     colors?: IdCaptureColors;
     verbiage?: IdCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, assets, colors, verbiage, debugMode, }: IdCaptureProps) => React.ReactElement;
+export declare const IdCapture: ({ requiredDocumentType, autoCaptureEnabled, autoCaptureScoreThreshold, autoCaptureGoodFramesRequired, autoCaptureBarcodeRequired, mrzDetectionScoreThreshold, passportPageDetectionThreshold, pdf417DetectionThreshold, focusScoreThreshold, barcodeScanningEnabled, maxBarcodeScanAttempts, onPrediction, onBarcodeScanned, onCapture, onExit, processingScreen, processingDelay, processingText, assets, colors, verbiage, debugMode, }: IdCaptureProps) => React.ReactElement;

package/dist/sdk2.cjs.development.js

@@ -7820,6 +7820,23 @@ function cropToBoundingBox(frame, bbox) {
   return canvas;
 }
 
+var ModelLoadingErrorOverlay = function ModelLoadingErrorOverlay(_a) {
+  var error = _a.error;
+  return /*#__PURE__*/React__default['default'].createElement(OverlayContainer, null, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
+    style: {
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      marginBottom: 8
+    }
+  }, "We're sorry, an unexpected error has occurred."), /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      marginBottom: 0
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("code", null, error.message))));
+};
+
 var PREDICTION_POSITIONS = {
   boxes: 0,
   scores: 7,
@@ -7884,6 +7901,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
   var _k = React.useState(0),
     focusPredictionTime = _k[0],
     setFocusPredictionTime = _k[1];
+  var _l = React.useState(null),
+    loadingError = _l[0],
+    setLoadingError = _l[1];
   React.useEffect(function () {
     setReady(false);
     var ddmUrl = documentDetectionModelUrl || defaultDocumentDetectionModelUrl;
@@ -7933,9 +7953,13 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
         });
       });
     }
-    loadModels().then(function () {
-      setReady(true);
-    });
+    try {
+      loadModels().then(function () {
+        setReady(true);
+      });
+    } catch (e) {
+      setLoadingError(e);
+    }
     var webGLCanvas = getWebGLContext(2).canvas;
     webGLCanvas.addEventListener('webglcontextlost', reloadModels);
     return function () {
@@ -8029,7 +8053,9 @@ var IdCaptureModelsProvider = function IdCaptureModelsProvider(_a) {
   }, [detectionTime, focusPredictionTime, getBestFrame, makePrediction, onPredictionMade, ready, resetBestFrame, setThresholds, thresholds]);
   return /*#__PURE__*/React__default['default'].createElement(IdCaptureModelsContext.Provider, {
     value: value
-  }, children, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
+  }, loadingError ? /*#__PURE__*/React__default['default'].createElement(ModelLoadingErrorOverlay, {
+    error: loadingError
+  }) : children, /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: lastPredictionCanvas
   }), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
     ref: bestPredictionCanvas
@@ -8469,6 +8495,63 @@ var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4
 var ExitCaptureButton = styled__default['default'].button(templateObject_1$6 || (templateObject_1$6 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  font-size: 20px;\n  width: 32px;\n  height: 32px;\n  font-family: monospace;\n  z-index: 1002;\n  border: none;\n  border-radius: 4px;\n  background: #ccc;\n  cursor: pointer;\n\n  &:hover {\n    background: #ddd;\n  }\n"])));
 var templateObject_1$6;
 
+var Spinner = styled__default['default'].div(templateObject_1$5 || (templateObject_1$5 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return $size !== null && $size !== void 0 ? $size : 80;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $size = _a.$size;
+  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
+}, function (_a) {
+  var $thickness = _a.$thickness;
+  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+}, function (_a) {
+  var $color = _a.$color;
+  return $color !== null && $color !== void 0 ? $color : '#888';
+});
+var templateObject_1$5;
+
+var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
+  var text = _a.text,
+    imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, text && /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, text), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var SelfieProgressPreview = function SelfieProgressPreview(_a) {
+  var imageUrl = _a.imageUrl;
+  return /*#__PURE__*/React__default['default'].createElement(ImagePreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(ImagePreviewText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
+    "$size": 24,
+    "$color": "white",
+    "$thickness": 3,
+    style: {
+      position: 'relative',
+      top: 4,
+      left: -3,
+      margin: '0 3px 0 -12px'
+    }
+  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(ImagePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
+    src: imageUrl,
+    alt: ""
+  })));
+};
+var ImagePreviewWrapper = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
+var ImagePreviewText = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
+var ImagePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
+var templateObject_1$4, templateObject_2$2, templateObject_3$1;
+
 var initialState$5 = {
   videoWidth: 0,
   videoHeight: 0,
@@ -8663,6 +8746,7 @@ var IdCapture = function IdCapture(_a) {
     processingScreen = _a.processingScreen,
     _s = _a.processingDelay,
     processingDelay = _s === void 0 ? 0 : _s,
+    processingText = _a.processingText,
     _t = _a.assets,
     assets = _t === void 0 ? {} : _t,
     _u = _a.colors,
@@ -8897,7 +8981,10 @@ var IdCapture = function IdCapture(_a) {
     videoHeight: state.videoHeight
   });
   if (processingFrame) {
-    return processingScreen || /*#__PURE__*/React__default['default'].createElement("div", null, "Processing...");
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, processingScreen, imageURL && /*#__PURE__*/React__default['default'].createElement(IdCaptureImagePreview, {
+      text: processingText,
+      imageUrl: imageURL
+    }));
   }
   if (imageURL !== '') {
     return /*#__PURE__*/React__default['default'].createElement("img", {
@@ -9364,10 +9451,10 @@ var CameraVideoTag = function CameraVideoTag() {
     "$isRearFacing": (_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing
   });
 };
-var FullscreenVideoTag = styled__default['default'].video(templateObject_1$5 || (templateObject_1$5 = 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) {
+var FullscreenVideoTag = styled__default['default'].video(templateObject_1$3 || (templateObject_1$3 = 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$5;
+var templateObject_1$3;
 
 function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
   var _this = this;
@@ -9661,6 +9748,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
           colors: colors,
           verbiage: verbiage.idCardFront,
           debugMode: debugMode,
+          processingText: "ID card front captured.",
           processingScreen: /*#__PURE__*/React__default['default'].createElement(FlipIdPrompt, {
             assets: assets.flipIdPrompt,
             verbiage: verbiage.flipIdPrompt
@@ -9849,18 +9937,30 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   var detectorRef = React.useRef(null);
   var rafId = React.useRef(0);
   var loopId = React.useRef(0);
+  var _f = React.useState(null),
+    loadingError = _f[0],
+    setLoadingError = _f[1];
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
-        var _a;
+        var _a, e_1;
         return tslib.__generator(this, function (_b) {
           switch (_b.label) {
             case 0:
               setReady(false);
+              _b.label = 1;
+            case 1:
+              _b.trys.push([1, 3,, 4]);
               _a = detectorRef;
               return [4, loadHighPerformanceFaceDetector()];
-            case 1:
+            case 2:
               _a.current = _b.sent();
+              return [3, 4];
+            case 3:
+              e_1 = _b.sent();
+              setLoadingError(e_1);
+              return [3, 4];
+            case 4:
               setReady(true);
               return [2];
           }
@@ -9996,21 +10096,23 @@ var HighPerformanceSelfieGuidanceModelsProvider = function HighPerformanceSelfie
   }, [onPredictionMade, ready, start, stop]);
   return /*#__PURE__*/React__namespace.createElement(HighPerformanceSelfieGuidanceModelsContext.Provider, {
     value: value
-  }, children);
+  }, loadingError ? /*#__PURE__*/React__namespace.createElement(ModelLoadingErrorOverlay, {
+    error: loadingError
+  }) : children);
 };
 
-var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$4 || (templateObject_1$4 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
+var GuidanceMessageContainer = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"], ["\n  position: absolute;\n  top: calc(", ");\n  font-weight: bold;\n  width: 100%;\n  display: flex;\n"])), function (_a) {
   var $top = _a.$top;
   return $top !== null && $top !== void 0 ? $top : '10vh';
 });
-var GuidanceMessage = styled__default['default'].div(templateObject_2$2 || (templateObject_2$2 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
+var GuidanceMessage = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"], ["\n  margin-left: auto;\n  margin-right: auto;\n  background: ", ";\n  color: ", ";\n  padding: 10px 12px 8px;\n  border-radius: 8px;\n"])), function (_a) {
   var $background = _a.$background;
   return $background !== null && $background !== void 0 ? $background : '#ccc';
 }, function (_a) {
   var $textColor = _a.$textColor;
   return $textColor !== null && $textColor !== void 0 ? $textColor : 'black';
 });
-var templateObject_1$4, templateObject_2$2;
+var templateObject_1$2, templateObject_2$1;
 
 var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger) {
   var _a = React.useState(false),
@@ -10287,55 +10389,6 @@ var SelfieCapture = function SelfieCapture(_a) {
   }, "\xD7"));
 };
 
-var Spinner = styled__default['default'].div(templateObject_1$3 || (templateObject_1$3 = tslib.__makeTemplateObject(["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: inline-block;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n\n  &:after {\n    content: ' ';\n    display: block;\n    width: ", "px;\n    height: ", "px;\n    margin: 8px;\n    border-radius: 50%;\n    border: ", "px solid\n      ", ";\n    border-color: ", " transparent\n      ", " transparent;\n    animation: lds-dual-ring 1.2s linear infinite;\n    box-sizing: content-box;\n  }\n\n  @keyframes lds-dual-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
-  var $size = _a.$size;
-  return $size !== null && $size !== void 0 ? $size : 80;
-}, function (_a) {
-  var $size = _a.$size;
-  return $size !== null && $size !== void 0 ? $size : 80;
-}, function (_a) {
-  var $size = _a.$size;
-  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
-}, function (_a) {
-  var $size = _a.$size;
-  return ($size !== null && $size !== void 0 ? $size : 80) - 16;
-}, function (_a) {
-  var $thickness = _a.$thickness;
-  return $thickness !== null && $thickness !== void 0 ? $thickness : 6;
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-}, function (_a) {
-  var $color = _a.$color;
-  return $color !== null && $color !== void 0 ? $color : '#888';
-});
-var templateObject_1$3;
-
-var SelfieProgressPreview = function SelfieProgressPreview(_a) {
-  var imageUrl = _a.imageUrl;
-  return /*#__PURE__*/React__default['default'].createElement(SelfieProgressPreviewWrapper, null, /*#__PURE__*/React__default['default'].createElement(SelfieProgressText, null, /*#__PURE__*/React__default['default'].createElement(Spinner, {
-    "$size": 24,
-    "$color": "white",
-    "$thickness": 3,
-    style: {
-      position: 'relative',
-      top: 4,
-      left: -3,
-      margin: '0 3px 0 -12px'
-    }
-  }), "Processing..."), /*#__PURE__*/React__default['default'].createElement(SelfiePreviewImageWrapper, null, /*#__PURE__*/React__default['default'].createElement("img", {
-    src: imageUrl,
-    alt: ""
-  })));
-};
-var SelfieProgressPreviewWrapper = styled__default['default'].div(templateObject_1$2 || (templateObject_1$2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  height: 33%;\n  bottom: 12px;\n  right: 12px;\n"])));
-var SelfieProgressText = styled__default['default'].div(templateObject_2$1 || (templateObject_2$1 = tslib.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"], ["\n  display: block;\n  position: absolute;\n  top: -32px;\n  font:\n    14px -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol';\n  color: white;\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n"])));
-var SelfiePreviewImageWrapper = styled__default['default'].div(templateObject_3$1 || (templateObject_3$1 = tslib.__makeTemplateObject(["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"], ["\n  position: relative;\n  height: calc(100% - 8px);\n  padding: 4px;\n  border-radius: 4px;\n  background: white;\n\n  & > img {\n    border-radius: 4px;\n    width: auto;\n    max-height: 100%;\n  }\n"])));
-var templateObject_1$2, templateObject_2$1, templateObject_3$1;
-
 var initialState$2 = {
   frame: null,
   face: null,