@aws-amplify/ui-react-liveness 2.0.11 → 3.0.0

package/dist/esm/components/FaceLivenessDetector/FaceLivenessDetector.mjs

@@ -1 +1,17 @@
-import{__rest as e,__awaiter as o}from"tslib";import*as t from"react";import{Credentials as r}from"@aws-amplify/core";import i from"./FaceLivenessDetectorCore.mjs";const n=()=>o(void 0,void 0,void 0,(function*(){return yield r.get()}));function c(o){const{config:r}=o,c=e(o,["config"]);return t.createElement(i,Object.assign({},c,{config:Object.assign({credentialProvider:n},r)}))}export{c as default};
+import * as React from 'react';
+import { fetchAuthSession } from 'aws-amplify/auth';
+import FaceLivenessDetectorCore from './FaceLivenessDetectorCore.mjs';
+
+const credentialProvider = async () => {
+    const { credentials } = await fetchAuthSession();
+    if (!credentials) {
+        throw new Error('No credentials provided');
+    }
+    return credentials;
+};
+function FaceLivenessDetector(props) {
+    const { config, ...rest } = props;
+    return (React.createElement(FaceLivenessDetectorCore, { ...rest, config: { credentialProvider, ...config } }));
+}
+
+export { FaceLivenessDetector as default };

package/dist/esm/components/FaceLivenessDetector/FaceLivenessDetectorCore.mjs

@@ -1 +1,42 @@
-import*as e from"react";import{useInterpret as t,useActor as s}from"@xstate/react";import{livenessMachine as r}from"./service/machine/index.mjs";import"./service/types/liveness.mjs";import"tslib";import"@tensorflow/tfjs-core";import"@tensorflow-models/blazeface";import"@tensorflow/tfjs-backend-wasm";import"@tensorflow/tfjs-backend-cpu";import"@aws-amplify/core";import"@aws-sdk/client-rekognitionstreaming";import"@aws-sdk/util-format-url";import"@smithy/eventstream-serde-browser";import"@smithy/fetch-http-handler";import"@smithy/protocol-http";import"./service/utils/freshnessColorDisplay.mjs";import{View as o,Flex as i}from"@aws-amplify/ui-react";import{FaceLivenessDetectorProvider as m}from"./providers/FaceLivenessDetectorProvider.mjs";import{StartLiveness as n}from"./StartLiveness/StartLiveness.mjs";import{LivenessCheck as a}from"./LivenessCheck/LivenessCheck.mjs";import{getDisplayText as c}from"./utils/getDisplayText.mjs";const p="liveness-detector";function l(l){const{disableInstructionScreen:f=!1,components:y,config:u,displayText:d}=l,v=e.useRef(null),{hintDisplayText:h,cameraDisplayText:x,instructionDisplayText:D,streamDisplayText:T,errorDisplayText:j}=c(d),b=t(r,{devTools:"development"===process.env.NODE_ENV,context:{componentProps:Object.assign(Object.assign({},l),{config:null!=u?u:{}})}}),[w,k]=s(b),E=w.matches("start")||w.matches("userCancel"),g=e.useCallback((()=>{k({type:"BEGIN"})}),[k]);return e.useLayoutEffect((()=>{f&&E&&g()}),[g,f,E]),e.createElement(o,{className:p,testId:p},e.createElement(m,{componentProps:l,service:b},e.createElement(i,{direction:"column",ref:v},E?e.createElement(n,{beginLivenessCheck:g,components:y,instructionDisplayText:D}):e.createElement(a,{hintDisplayText:h,cameraDisplayText:x,streamDisplayText:T,errorDisplayText:j,components:y}))))}export{l as default};
+import * as React from 'react';
+import { useInterpret } from '@xstate/react';
+import { livenessMachine } from './service/machine/index.mjs';
+import './service/types/liveness.mjs';
+import '@tensorflow/tfjs-core';
+import '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-wasm';
+import '@tensorflow/tfjs-backend-cpu';
+import '@aws-amplify/core/internals/utils';
+import 'aws-amplify/auth';
+import '@aws-sdk/client-rekognitionstreaming';
+import '@aws-sdk/util-format-url';
+import '@smithy/eventstream-serde-browser';
+import '@smithy/fetch-http-handler';
+import '@smithy/protocol-http';
+import './service/utils/freshnessColorDisplay.mjs';
+import { View, Flex } from '@aws-amplify/ui-react';
+import { FaceLivenessDetectorProvider } from './providers/FaceLivenessDetectorProvider.mjs';
+import { LivenessCheck } from './LivenessCheck/LivenessCheck.mjs';
+import { getDisplayText } from './utils/getDisplayText.mjs';
+
+const DETECTOR_CLASS_NAME = 'liveness-detector';
+function FaceLivenessDetectorCore(props) {
+    const { components, config, displayText } = props;
+    const currElementRef = React.useRef(null);
+    const { hintDisplayText, cameraDisplayText, instructionDisplayText, streamDisplayText, errorDisplayText, } = getDisplayText(displayText);
+    const service = useInterpret(livenessMachine, {
+        devTools: process.env.NODE_ENV === 'development',
+        context: {
+            componentProps: {
+                ...props,
+                config: config ?? {},
+            },
+        },
+    });
+    return (React.createElement(View, { className: DETECTOR_CLASS_NAME, testId: DETECTOR_CLASS_NAME },
+        React.createElement(FaceLivenessDetectorProvider, { componentProps: props, service: service },
+            React.createElement(Flex, { direction: "column", ref: currElementRef },
+                React.createElement(LivenessCheck, { instructionDisplayText: instructionDisplayText, hintDisplayText: hintDisplayText, cameraDisplayText: cameraDisplayText, streamDisplayText: streamDisplayText, errorDisplayText: errorDisplayText, components: components })))));
+}
+
+export { FaceLivenessDetectorCore as default };

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs

@@ -1 +1,199 @@
-import e,{useRef as t,useState as r}from"react";import a from"classnames";import{Loader as s,Flex as o,View as i}from"@aws-amplify/ui-react";import"../service/machine/index.mjs";import{FaceMatchState as c}from"../service/types/liveness.mjs";import"tslib";import"@tensorflow/tfjs-core";import"@tensorflow-models/blazeface";import"@tensorflow/tfjs-backend-wasm";import"@tensorflow/tfjs-backend-cpu";import"@aws-amplify/core";import"@aws-sdk/client-rekognitionstreaming";import"@aws-sdk/util-format-url";import"@smithy/eventstream-serde-browser";import"@smithy/fetch-http-handler";import"@smithy/protocol-http";import"../service/utils/freshnessColorDisplay.mjs";import{useLivenessActor as m}from"../hooks/useLivenessActor.mjs";import{useLivenessSelector as n,createLivenessSelector as l}from"../hooks/useLivenessSelector.mjs";import{useMediaStreamInVideo as d}from"../hooks/useMediaStreamInVideo.mjs";import{CancelButton as h}from"../shared/CancelButton.mjs";import{selectErrorState as p,Hint as f}from"../shared/Hint.mjs";import{MatchIndicator as v}from"../shared/MatchIndicator.mjs";import{Overlay as u}from"../shared/Overlay.mjs";import{RecordingIcon as E}from"../shared/RecordingIcon.mjs";import{LivenessClassNames as y}from"../types/classNames.mjs";import{renderErrorModal as C,FaceLivenessErrorModal as g}from"../shared/FaceLivenessErrorModal.mjs";const j=l((e=>{var t;return null===(t=e.context.videoAssociatedParams)||void 0===t?void 0:t.videoMediaStream})),M=l((e=>e.context.faceMatchAssociatedParams.faceMatchPercentage)),w=l((e=>e.context.faceMatchAssociatedParams.faceMatchState)),N=e.createElement(s,{size:"large",className:y.Loader,"data-testid":"centered-loader"}),A=e.memo(v),I=s=>{const{isMobileScreen:l,isRecordingStopped:v,streamDisplayText:I,hintDisplayText:T,errorDisplayText:D,components:x,testId:b}=s,{cancelLivenessCheckText:k,recordingIndicatorText:S}=I,{ErrorView:L=g}=null!=x?x:{},[O,F]=m(),R=n(j),_=n(M),P=n(w),H=n(p),V=[c.TOO_FAR,c.CANT_IDENTIFY,c.FACE_IDENTIFIED,c.MATCHED],{videoRef:z,videoWidth:W,videoHeight:$}=d(R),B=t(null),X=t(null),[Y,q]=r(!1),G=O.matches("cameraCheck"),J=O.matches("recording"),K=O.matches("checkSucceeded"),Q=O.matches({recording:"flashFreshnessColors"}),[U,Z]=r(W),[ee,te]=r($),[re,ae]=r((()=>W&&$?W/$:0));e.useLayoutEffect((()=>{Y&&F({type:"SET_DOM_AND_CAMERA_DETAILS",data:{videoEl:z.current,canvasEl:B.current,freshnessColorEl:X.current,isMobile:l}}),z.current&&(Z(z.current.videoWidth),te(z.current.videoHeight),ae(z.current.videoWidth/z.current.videoHeight))}),[F,z,Y,l]);return G?e.createElement(o,{height:$,width:"100%",position:"relative"},N):e.createElement(o,{className:a(y.CameraModule,l&&`${y.CameraModule}--mobile`),"data-testid":b},!Y&&N,e.createElement(i,{as:"canvas",ref:X,className:y.FreshnessCanvas,hidden:!0}),e.createElement(i,{className:y.VideoAnchor,style:{aspectRatio:`${re}`}},e.createElement("video",{ref:z,muted:!0,autoPlay:!0,playsInline:!0,style:{transform:"scaleX(-1)"},width:U,height:ee,onCanPlay:()=>{q(!0)},"data-testid":"video",className:y.Video}),e.createElement(o,{className:a(y.OvalCanvas,l&&`${y.OvalCanvas}--mobile`,v&&y.FadeOut)},e.createElement(i,{as:"canvas",width:"100%",height:"100%",ref:B})),J&&e.createElement(i,{className:y.RecordingIconContainer},e.createElement(E,null,S)),!K&&e.createElement(i,{className:y.CancelContainer},e.createElement(h,{ariaLabel:k})),e.createElement(u,{anchorOrigin:{horizontal:"center",vertical:J&&!Q?"start":"space-between"},className:y.InstructionOverlay},e.createElement(f,{hintDisplayText:T}),H&&e.createElement(L,{onRetry:()=>{F({type:"CANCEL"})}},C({errorState:H,overrideErrorDisplayText:D})),J&&!Q&&V.includes(P)?e.createElement(A,{percentage:Math.ceil(_)}):null)))};export{I as LivenessCameraModule,M as selectFaceMatchPercentage,w as selectFaceMatchState,j as selectVideoStream};
+import React__default, { useRef, useState } from 'react';
+import { classNames } from '@aws-amplify/ui';
+import { Loader, View, Flex, Text, Label, SelectField, Button } from '@aws-amplify/ui-react';
+import { useColorMode } from '@aws-amplify/ui-react/internal';
+import '../service/machine/index.mjs';
+import { FaceMatchState } from '../service/types/liveness.mjs';
+import '@tensorflow/tfjs-core';
+import '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-wasm';
+import '@tensorflow/tfjs-backend-cpu';
+import '@aws-amplify/core/internals/utils';
+import { drawStaticOval } from '../service/utils/liveness.mjs';
+import 'aws-amplify/auth';
+import '@aws-sdk/client-rekognitionstreaming';
+import '@aws-sdk/util-format-url';
+import '@smithy/eventstream-serde-browser';
+import '@smithy/fetch-http-handler';
+import '@smithy/protocol-http';
+import '../service/utils/freshnessColorDisplay.mjs';
+import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
+import { useLivenessSelector, createLivenessSelector } from '../hooks/useLivenessSelector.mjs';
+import { useMediaStreamInVideo } from '../hooks/useMediaStreamInVideo.mjs';
+import { LivenessClassNames } from '../types/classNames.mjs';
+import { selectErrorState, Hint } from '../shared/Hint.mjs';
+import { MatchIndicator } from '../shared/MatchIndicator.mjs';
+import { Overlay } from '../shared/Overlay.mjs';
+import { renderErrorModal, FaceLivenessErrorModal } from '../shared/FaceLivenessErrorModal.mjs';
+import { DefaultPhotosensitiveWarning, DefaultRecordingIcon, DefaultCancelButton } from '../shared/DefaultStartScreenComponents.mjs';
+
+const selectVideoConstraints = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoConstraints);
+const selectVideoStream = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoMediaStream);
+const selectFaceMatchPercentage = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchPercentage);
+const selectFaceMatchState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchState);
+const selectSelectedDeviceId = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectedDeviceId);
+const selectSelectableDevices = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectableDevices);
+const centeredLoader = (React__default.createElement(Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }));
+const showMatchIndicatorStates = [
+    FaceMatchState.TOO_FAR,
+    FaceMatchState.CANT_IDENTIFY,
+    FaceMatchState.FACE_IDENTIFIED,
+    FaceMatchState.MATCHED,
+];
+/**
+ * For now we want to memoize the HOC for MatchIndicator because to optimize renders
+ * The LivenessCameraModule still needs to be optimized for re-renders and at that time
+ * we should be able to remove this memoization
+ */
+const MemoizedMatchIndicator = React__default.memo(MatchIndicator);
+const LivenessCameraModule = (props) => {
+    const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
+    const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
+    const { ErrorView = FaceLivenessErrorModal } = customComponents ?? {};
+    const [state, send] = useLivenessActor();
+    const videoStream = useLivenessSelector(selectVideoStream);
+    const videoConstraints = useLivenessSelector(selectVideoConstraints);
+    const selectedDeviceId = useLivenessSelector(selectSelectedDeviceId);
+    const selectableDevices = useLivenessSelector(selectSelectableDevices);
+    const faceMatchPercentage = useLivenessSelector(selectFaceMatchPercentage);
+    const faceMatchState = useLivenessSelector(selectFaceMatchState);
+    const errorState = useLivenessSelector(selectErrorState);
+    const colorMode = useColorMode();
+    const { videoRef, videoWidth, videoHeight } = useMediaStreamInVideo(videoStream);
+    const canvasRef = useRef(null);
+    const freshnessColorRef = useRef(null);
+    const [isCameraReady, setIsCameraReady] = useState(false);
+    const isCheckingCamera = state.matches('cameraCheck');
+    const isWaitingForCamera = state.matches('waitForDOMAndCameraDetails');
+    const isStartView = state.matches('start') || state.matches('userCancel');
+    const isRecording = state.matches('recording');
+    const isCheckSucceeded = state.matches('checkSucceeded');
+    const isFlashingFreshness = state.matches({
+        recording: 'flashFreshnessColors',
+    });
+    // Android/Firefox and iOS flip the values of width/height returned from
+    // getUserMedia, so we'll reset these in useLayoutEffect with the videoRef
+    // element's intrinsic videoWidth and videoHeight attributes
+    const [mediaWidth, setMediaWidth] = useState(videoWidth);
+    const [mediaHeight, setMediaHeight] = useState(videoHeight);
+    const [aspectRatio, setAspectRatio] = useState(() => videoWidth && videoHeight ? videoWidth / videoHeight : 0);
+    React__default.useEffect(() => {
+        if (canvasRef &&
+            videoRef &&
+            canvasRef.current &&
+            videoRef.current &&
+            videoStream &&
+            isStartView) {
+            drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+        }
+    }, [canvasRef, videoRef, videoStream, colorMode, isStartView]);
+    React__default.useEffect(() => {
+        const updateColorModeHandler = (e) => {
+            if (e.matches &&
+                canvasRef &&
+                videoRef &&
+                canvasRef.current &&
+                videoRef.current &&
+                videoStream &&
+                isStartView) {
+                drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+            }
+        };
+        const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)');
+        const lightModePreference = window.matchMedia('(prefers-color-scheme: light)');
+        darkModePreference.addEventListener('change', updateColorModeHandler);
+        lightModePreference.addEventListener('change', updateColorModeHandler);
+        return () => {
+            darkModePreference.removeEventListener('change', updateColorModeHandler);
+            lightModePreference.addEventListener('change', updateColorModeHandler);
+        };
+    }, [canvasRef, videoRef, videoStream, isStartView]);
+    React__default.useLayoutEffect(() => {
+        if (isCameraReady) {
+            send({
+                type: 'SET_DOM_AND_CAMERA_DETAILS',
+                data: {
+                    videoEl: videoRef.current,
+                    canvasEl: canvasRef.current,
+                    freshnessColorEl: freshnessColorRef.current,
+                    isMobile: isMobileScreen,
+                },
+            });
+        }
+        if (videoRef.current) {
+            setMediaWidth(videoRef.current.videoWidth);
+            setMediaHeight(videoRef.current.videoHeight);
+            setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
+        }
+    }, [send, videoRef, isCameraReady, isMobileScreen]);
+    const photoSensitivtyWarning = React__default.useMemo(() => {
+        return (React__default.createElement(View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
+            React__default.createElement(DefaultPhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
+    }, [instructionDisplayText, isStartView]);
+    const handleMediaPlay = () => {
+        setIsCameraReady(true);
+    };
+    const beginLivenessCheck = React__default.useCallback(() => {
+        send({
+            type: 'BEGIN',
+        });
+    }, [send]);
+    const onCameraChange = React__default.useCallback((e) => {
+        const newDeviceId = e.target.value;
+        const changeCamera = async () => {
+            const newStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    ...videoConstraints,
+                    deviceId: { exact: newDeviceId },
+                },
+                audio: false,
+            });
+            send({
+                type: 'UPDATE_DEVICE_AND_STREAM',
+                data: { newDeviceId, newStream },
+            });
+        };
+        changeCamera();
+    }, [videoConstraints, send]);
+    if (isCheckingCamera) {
+        return (React__default.createElement(Flex, { justifyContent: 'center', className: LivenessClassNames.StartScreenCameraWaiting },
+            React__default.createElement(Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
+            React__default.createElement(Text, { fontSize: "large", fontWeight: "bold", "data-testid": "waiting-camera-permission", className: `${LivenessClassNames.StartScreenCameraWaiting}__text` }, cameraDisplayText.waitingCameraPermissionText)));
+    }
+    const isRecordingOnMobile = isMobileScreen && !isStartView && !isWaitingForCamera && isRecording;
+    return (React__default.createElement(React__default.Fragment, null,
+        photoSensitivtyWarning,
+        React__default.createElement(Flex, { className: classNames(LivenessClassNames.CameraModule, isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
+            !isCameraReady && centeredLoader,
+            React__default.createElement(View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
+            React__default.createElement(View, { className: LivenessClassNames.VideoAnchor, style: {
+                    aspectRatio: `${aspectRatio}`,
+                } },
+                React__default.createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: LivenessClassNames.Video }),
+                React__default.createElement(Flex, { className: classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
+                    React__default.createElement(View, { as: "canvas", ref: canvasRef })),
+                isRecording && (React__default.createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
+                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default.createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
+                React__default.createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
+                    React__default.createElement(Hint, { hintDisplayText: hintDisplayText }),
+                    errorState && (React__default.createElement(ErrorView, { onRetry: () => {
+                            send({ type: 'CANCEL' });
+                        } }, renderErrorModal({
+                        errorState,
+                        overrideErrorDisplayText: errorDisplayText,
+                    }))),
+                    isRecording &&
+                        !isFlashingFreshness &&
+                        showMatchIndicatorStates.includes(faceMatchState) ? (React__default.createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
+                isStartView &&
+                    !isMobileScreen &&
+                    selectableDevices &&
+                    selectableDevices.length > 1 && (React__default.createElement(Flex, { className: LivenessClassNames.StartScreenCameraSelect },
+                    React__default.createElement(View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
+                        React__default.createElement(Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
+                        React__default.createElement(SelectField, { id: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices?.map((device) => (React__default.createElement("option", { value: device.deviceId, key: device.deviceId }, device.label))))))))),
+        isStartView && (React__default.createElement(Flex, { justifyContent: "center" },
+            React__default.createElement(Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
+};
+
+export { LivenessCameraModule, selectFaceMatchPercentage, selectFaceMatchState, selectSelectableDevices, selectSelectedDeviceId, selectVideoConstraints, selectVideoStream };

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCheck.mjs

@@ -1 +1,97 @@
-import*as e from"react";import{Flex as t,Text as r,Button as s,View as i}from"@aws-amplify/ui-react";import"../service/machine/index.mjs";import"../service/types/liveness.mjs";import{LivenessErrorState as o}from"../service/types/error.mjs";import"tslib";import"@tensorflow/tfjs-core";import"@tensorflow-models/blazeface";import"@tensorflow/tfjs-backend-wasm";import"@tensorflow/tfjs-backend-cpu";import"@aws-amplify/core";import"@aws-sdk/client-rekognitionstreaming";import"@aws-sdk/util-format-url";import"@smithy/eventstream-serde-browser";import"@smithy/fetch-http-handler";import"@smithy/protocol-http";import"../service/utils/freshnessColorDisplay.mjs";import{LivenessCameraModule as a}from"./LivenessCameraModule.mjs";import{useLivenessActor as n}from"../hooks/useLivenessActor.mjs";import{useLivenessSelector as m,createLivenessSelector as c}from"../hooks/useLivenessSelector.mjs";import"@aws-amplify/ui";import{isMobileScreen as p,getLandscapeMediaQuery as l}from"../utils/device.mjs";import{CancelButton as d}from"../shared/CancelButton.mjs";import{defaultErrorDisplayText as f}from"../displayText.mjs";import{LandscapeErrorModal as u}from"../shared/LandscapeErrorModal.mjs";import{selectErrorState as h}from"../shared/Hint.mjs";import"../types/classNames.mjs";const y="liveness-detector-check",E=c((e=>e.context.isRecordingStopped)),g=({hintDisplayText:c,cameraDisplayText:g,streamDisplayText:x,errorDisplayText:R,components:T})=>{const[A,j]=n(),C=m(h),M=m(E),b=A.matches("permissionDenied"),v=p(),k=()=>{j({type:"RETRY_CAMERA_CHECK"})},{cameraMinSpecificationsHeadingText:L,cameraMinSpecificationsMessageText:w,cameraNotFoundHeadingText:D,cameraNotFoundMessageText:_,retryCameraPermissionsText:N}=g,{cancelLivenessCheckText:S}=x;e.useLayoutEffect((()=>{if(v){const e=e=>{e&&j({type:"MOBILE_LANDSCAPE_WARNING"})},t=l();return e(t.matches),t.addEventListener("change",(t=>{e(t.matches)})),()=>{t.removeEventListener("change",(t=>e(t.matches)))}}}),[v,j]);return e.createElement(t,{direction:"column",position:"relative",testId:y,className:y},(()=>{if(C===o.MOBILE_LANDSCAPE_ERROR){const r=Object.assign(Object.assign({},f),R),{landscapeHeaderText:s,portraitMessageText:i,landscapeMessageText:o,tryAgainText:a}=r;return e.createElement(t,{backgroundColor:"background.primary",direction:"column",textAlign:"center",alignItems:"center",justifyContent:"center",position:"absolute",width:"100%"},e.createElement(u,{header:s,portraitMessage:i,landscapeMessage:o,tryAgainText:a,onRetry:()=>{j({type:"CANCEL"})}}))}return b?e.createElement(t,{backgroundColor:"background.primary",direction:"column",textAlign:"center",alignItems:"center",justifyContent:"center",width:"100%",height:480},e.createElement(r,{fontSize:"large",fontWeight:"bold"},C===o.CAMERA_FRAMERATE_ERROR?L:D),e.createElement(r,{maxWidth:300},C===o.CAMERA_FRAMERATE_ERROR?w:_),e.createElement(s,{variation:"primary",type:"button",onClick:k},N),e.createElement(i,{position:"absolute",top:"medium",right:"medium"},e.createElement(d,{ariaLabel:S}))):e.createElement(a,{isMobileScreen:v,isRecordingStopped:M,streamDisplayText:x,hintDisplayText:c,errorDisplayText:R,components:T})})())};export{g as LivenessCheck};
+import * as React from 'react';
+import { Flex, Text, Button, View } from '@aws-amplify/ui-react';
+import '../service/machine/index.mjs';
+import '../service/types/liveness.mjs';
+import { LivenessErrorState } from '../service/types/error.mjs';
+import '@tensorflow/tfjs-core';
+import '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-wasm';
+import '@tensorflow/tfjs-backend-cpu';
+import '@aws-amplify/core/internals/utils';
+import 'aws-amplify/auth';
+import '@aws-sdk/client-rekognitionstreaming';
+import '@aws-sdk/util-format-url';
+import '@smithy/eventstream-serde-browser';
+import '@smithy/fetch-http-handler';
+import '@smithy/protocol-http';
+import '../service/utils/freshnessColorDisplay.mjs';
+import { LivenessCameraModule } from './LivenessCameraModule.mjs';
+import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
+import { useLivenessSelector, createLivenessSelector } from '../hooks/useLivenessSelector.mjs';
+import '@aws-amplify/ui';
+import { isMobileScreen, getLandscapeMediaQuery } from '../utils/device.mjs';
+import { CancelButton } from '../shared/CancelButton.mjs';
+import { defaultErrorDisplayText } from '../displayText.mjs';
+import { LandscapeErrorModal } from '../shared/LandscapeErrorModal.mjs';
+import { selectErrorState } from '../shared/Hint.mjs';
+import '../types/classNames.mjs';
+
+const CHECK_CLASS_NAME = 'liveness-detector-check';
+const CAMERA_ERROR_TEXT_WIDTH = 420;
+const selectIsRecordingStopped = createLivenessSelector((state) => state.context.isRecordingStopped);
+const LivenessCheck = ({ instructionDisplayText, hintDisplayText, cameraDisplayText, streamDisplayText, errorDisplayText, components, }) => {
+    const [state, send] = useLivenessActor();
+    const errorState = useLivenessSelector(selectErrorState);
+    const isRecordingStopped = useLivenessSelector(selectIsRecordingStopped);
+    const isPermissionDenied = state.matches('permissionDenied');
+    const isMobile = isMobileScreen();
+    const recheckCameraPermissions = () => {
+        send({ type: 'RETRY_CAMERA_CHECK' });
+    };
+    const { cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, } = cameraDisplayText;
+    const { cancelLivenessCheckText } = streamDisplayText;
+    React.useLayoutEffect(() => {
+        if (isMobile) {
+            const sendLandscapeWarning = (isLandscapeMatched) => {
+                if (isLandscapeMatched) {
+                    send({ type: 'MOBILE_LANDSCAPE_WARNING' });
+                }
+            };
+            // Get orientation: landscape media query
+            const landscapeMediaQuery = getLandscapeMediaQuery();
+            // Send warning based on initial orientation
+            sendLandscapeWarning(landscapeMediaQuery.matches);
+            // Listen for future orientation changes and send warning
+            landscapeMediaQuery.addEventListener('change', (e) => {
+                sendLandscapeWarning(e.matches);
+            });
+            // Remove matchMedia event listener
+            return () => {
+                landscapeMediaQuery.removeEventListener('change', (e) => sendLandscapeWarning(e.matches));
+            };
+        }
+    }, [isMobile, send]);
+    const renderCheck = () => {
+        if (errorState === LivenessErrorState.MOBILE_LANDSCAPE_ERROR) {
+            const displayText = {
+                ...defaultErrorDisplayText,
+                ...errorDisplayText,
+            };
+            const { landscapeHeaderText, portraitMessageText, landscapeMessageText, tryAgainText, } = displayText;
+            return (React.createElement(Flex, { backgroundColor: "background.primary", direction: "column", textAlign: "center", alignItems: "center", justifyContent: "center", position: "absolute", width: "100%" },
+                React.createElement(LandscapeErrorModal, { header: landscapeHeaderText, portraitMessage: portraitMessageText, landscapeMessage: landscapeMessageText, tryAgainText: tryAgainText, onRetry: () => {
+                        send({
+                            type: 'CANCEL',
+                        });
+                    } })));
+        }
+        else if (isPermissionDenied) {
+            return (React.createElement(Flex, { backgroundColor: "background.primary", direction: "column", textAlign: "center", alignItems: "center", justifyContent: "center", width: "100%", height: 480 },
+                React.createElement(Text, { fontSize: "large", fontWeight: "bold" }, errorState === LivenessErrorState.CAMERA_FRAMERATE_ERROR
+                    ? cameraMinSpecificationsHeadingText
+                    : cameraNotFoundHeadingText),
+                React.createElement(Text, { maxWidth: CAMERA_ERROR_TEXT_WIDTH }, errorState === LivenessErrorState.CAMERA_FRAMERATE_ERROR
+                    ? cameraMinSpecificationsMessageText
+                    : cameraNotFoundMessageText),
+                React.createElement(Button, { variation: "primary", type: "button", onClick: recheckCameraPermissions }, retryCameraPermissionsText),
+                React.createElement(View, { position: "absolute", top: "medium", right: "medium" },
+                    React.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText }))));
+        }
+        else {
+            return (React.createElement(LivenessCameraModule, { isMobileScreen: isMobile, isRecordingStopped: isRecordingStopped, instructionDisplayText: instructionDisplayText, streamDisplayText: streamDisplayText, hintDisplayText: hintDisplayText, errorDisplayText: errorDisplayText, cameraDisplayText: cameraDisplayText, components: components }));
+        }
+    };
+    return (React.createElement(Flex, { direction: "column", position: "relative", testId: CHECK_CLASS_NAME, className: CHECK_CLASS_NAME, gap: "xl" }, renderCheck()));
+};
+
+export { LivenessCheck, selectIsRecordingStopped };

package/dist/esm/components/FaceLivenessDetector/displayText.mjs

@@ -1 +1,50 @@
-const e={timeoutHeaderText:"Time out",timeoutMessageText:"Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",faceDistanceHeaderText:"Forward movement detected",faceDistanceMessageText:"Avoid moving closer when connecting.",multipleFacesHeaderText:"Multiple faces detected",multipleFacesMessageText:"Ensure only one face is present in front of the camera when connecting.",clientHeaderText:"Client error",clientMessageText:"Check failed due to client issue",serverHeaderText:"Server issue",serverMessageText:"Cannot complete check due to server issue",landscapeHeaderText:"Landscape orientation not supported",landscapeMessageText:"Rotate your device to portrait (vertical) orientation.",portraitMessageText:"Ensure your device remains in portrait (vertical) orientation for the check’s duration.",tryAgainText:"Try again"},t=Object.assign({instructionsHeaderHeadingText:"Liveness check",instructionsHeaderBodyText:"You will go through a face verification process to prove that you are a real person.",instructionsBeginCheckText:"Begin check",photosensitivyWarningHeadingText:"Photosensitivity warning",photosensitivyWarningBodyText:"This check displays colored lights. Use caution if you are photosensitive.",photosensitivyWarningInfoText:"A small percentage of individuals may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.",instructionListHeadingText:"Follow the instructions to complete the check:",goodFitCaptionText:"Good fit",goodFitAltText:"Ilustration of a person's face, perfectly fitting inside of an oval.",tooFarCaptionText:"Too far",tooFarAltText:"Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",instructionListStepOneText:"When an oval appears, follow the instructions to fit your face in it.",instructionListStepTwoText:"Maximize your screen's brightness.",instructionListStepThreeText:"Make sure your face is not covered with sunglasses or a mask.",instructionListStepFourText:"Move to a well-lit place that is not in direct sunlight.",cameraMinSpecificationsHeadingText:"Camera does not meet minimum specifications",cameraMinSpecificationsMessageText:"Camera must support at least 320*240 resolution and 15 frames per second.",cameraNotFoundHeadingText:"Camera not accessible.",cameraNotFoundMessageText:"Check that camera is connected and camera permissions are enabled in settings before retrying.",retryCameraPermissionsText:"Retry",cancelLivenessCheckText:"Cancel Liveness check",recordingIndicatorText:"Rec",hintMoveFaceFrontOfCameraText:"Move face in front of camera",hintTooManyFacesText:"Ensure only one face is in front of camera",hintFaceDetectedText:"Face detected",hintCanNotIdentifyText:"Move face in front of camera",hintTooCloseText:"Move back",hintTooFarText:"Move closer",hintHoldFacePositionCountdownText:"Hold face position during countdown",hintConnectingText:"Connecting...",hintVerifyingText:"Verifying...",hintIlluminationTooBrightText:"Move to dimmer area",hintIlluminationTooDarkText:"Move to brighter area",hintIlluminationNormalText:"Lighting conditions normal",hintHoldFaceForFreshnessText:"Hold still"},e);export{e as defaultErrorDisplayText,t as defaultLivenessDisplayText};
+const defaultErrorDisplayText = {
+    timeoutHeaderText: 'Time out',
+    timeoutMessageText: "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
+    faceDistanceHeaderText: 'Forward movement detected',
+    faceDistanceMessageText: 'Avoid moving closer when connecting.',
+    multipleFacesHeaderText: 'Multiple faces detected',
+    multipleFacesMessageText: 'Ensure only one face is present in front of the camera when connecting.',
+    clientHeaderText: 'Client error',
+    clientMessageText: 'Check failed due to client issue',
+    serverHeaderText: 'Server issue',
+    serverMessageText: 'Cannot complete check due to server issue',
+    landscapeHeaderText: 'Landscape orientation not supported',
+    landscapeMessageText: 'Rotate your device to portrait (vertical) orientation.',
+    portraitMessageText: 'Ensure your device remains in portrait (vertical) orientation for the check’s duration.',
+    tryAgainText: 'Try again',
+};
+const defaultLivenessDisplayText = {
+    hintCenterFaceText: 'Center your face',
+    startScreenBeginCheckText: 'Start video check',
+    photosensitivyWarningHeadingText: 'Photosensitivity warning',
+    photosensitivyWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
+    photosensitivyWarningInfoText: 'Some people may experience may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+    goodFitCaptionText: 'Good fit',
+    goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
+    tooFarCaptionText: 'Too far',
+    tooFarAltText: "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
+    cameraMinSpecificationsHeadingText: 'Camera does not meet minimum specifications',
+    cameraMinSpecificationsMessageText: 'Camera must support at least 320*240 resolution and 15 frames per second.',
+    cameraNotFoundHeadingText: 'Camera is not accessible.',
+    cameraNotFoundMessageText: 'Check that a camera is connected and there is not another application using the camera. You may have to go into settings to grant camera permissions and close out all instances of your browser and retry.',
+    retryCameraPermissionsText: 'Retry',
+    waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
+    cancelLivenessCheckText: 'Cancel Liveness check',
+    recordingIndicatorText: 'Rec',
+    hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
+    hintTooManyFacesText: 'Ensure only one face is in front of camera',
+    hintFaceDetectedText: 'Face detected',
+    hintCanNotIdentifyText: 'Move face in front of camera',
+    hintTooCloseText: 'Move back',
+    hintTooFarText: 'Move closer',
+    hintConnectingText: 'Connecting...',
+    hintVerifyingText: 'Verifying...',
+    hintIlluminationTooBrightText: 'Move to dimmer area',
+    hintIlluminationTooDarkText: 'Move to brighter area',
+    hintIlluminationNormalText: 'Lighting conditions normal',
+    hintHoldFaceForFreshnessText: 'Hold still',
+    ...defaultErrorDisplayText,
+};
+
+export { defaultErrorDisplayText, defaultLivenessDisplayText };

package/dist/esm/components/FaceLivenessDetector/hooks/useLivenessActor.mjs

@@ -1 +1,13 @@
-import{useActor as r}from"@xstate/react";import{useFaceLivenessDetector as e}from"../providers/FaceLivenessDetectorProvider.mjs";function t(){const{service:t}=e();return r(t)}export{t as useLivenessActor};
+import { useActor } from '@xstate/react';
+import { useFaceLivenessDetector } from '../providers/FaceLivenessDetectorProvider.mjs';
+
+// TODO: Add type annotations. Currently typing the actors returned from Xstate is difficult
+// because the interpreter and state can not be used to form a type.
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function useLivenessActor() {
+    const { service } = useFaceLivenessDetector();
+    const actor = useActor(service);
+    return actor;
+}
+
+export { useLivenessActor };

package/dist/esm/components/FaceLivenessDetector/hooks/useLivenessSelector.mjs

@@ -1 +1,12 @@
-import{useSelector as r}from"@xstate/react";import{useFaceLivenessDetector as e}from"../providers/FaceLivenessDetectorProvider.mjs";function t(r){return r}function o(t){const{service:o}=e();return r(o,t)}export{t as createLivenessSelector,o as useLivenessSelector};
+import { useSelector } from '@xstate/react';
+import { useFaceLivenessDetector } from '../providers/FaceLivenessDetectorProvider.mjs';
+
+function createLivenessSelector(selector) {
+    return selector;
+}
+function useLivenessSelector(selector) {
+    const { service } = useFaceLivenessDetector();
+    return useSelector(service, selector);
+}
+
+export { createLivenessSelector, useLivenessSelector };

package/dist/esm/components/FaceLivenessDetector/hooks/useMediaStreamInVideo.mjs

@@ -1 +1,38 @@
-import{useRef as t,useState as e,useEffect as r}from"react";import{isObject as i}from"@aws-amplify/ui";import{STATIC_VIDEO_CONSTRAINTS as o}from"../StartLiveness/helpers.mjs";function c(c){const s=o.height.ideal,n=o.width.ideal,a=t(null),[h,m]=e(s),[d,f]=e(n);return r((()=>{if(c){i(a.current)&&(a.current.srcObject=c);const{height:t,width:e}=c.getTracks()[0].getSettings();m(t),f(e)}return()=>{c&&c.getTracks().forEach((t=>{c.removeTrack(t),t.stop()}))}}),[c]),{videoRef:a,videoHeight:h,videoWidth:d}}export{c as useMediaStreamInVideo};
+import { useRef, useState, useEffect } from 'react';
+import { isObject } from '@aws-amplify/ui';
+import { STATIC_VIDEO_CONSTRAINTS } from '../utils/helpers.mjs';
+
+function useMediaStreamInVideo(stream) {
+    const height = STATIC_VIDEO_CONSTRAINTS.height.ideal;
+    const width = STATIC_VIDEO_CONSTRAINTS.width.ideal;
+    const videoRef = useRef(null);
+    const [videoHeight, setVideoHeight] = useState(height);
+    const [videoWidth, setVideoWidth] = useState(width);
+    useEffect(() => {
+        if (stream) {
+            if (isObject(videoRef.current)) {
+                videoRef.current.srcObject = stream;
+            }
+            const { height: streamHeight, width: streamWidth } = stream
+                .getTracks()[0]
+                .getSettings();
+            setVideoHeight(streamHeight);
+            setVideoWidth(streamWidth);
+        }
+        return () => {
+            if (stream) {
+                stream.getTracks().forEach((track) => {
+                    stream.removeTrack(track);
+                    track.stop();
+                });
+            }
+        };
+    }, [stream]);
+    return {
+        videoRef,
+        videoHeight,
+        videoWidth,
+    };
+}
+
+export { useMediaStreamInVideo };

package/dist/esm/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.mjs

@@ -1 +1,15 @@
-import{__rest as e}from"tslib";import r from"react";const t=r.createContext(null);function n(n){var{children:o}=n,i=e(n,["children"]);return r.createElement(t.Provider,{value:i},o)}function o(){const e=r.useContext(t);if(null===e)throw new Error("useFaceLivenessDetector must be used within a FaceLivenessDetectorProvider");return e}export{n as FaceLivenessDetectorProvider,o as useFaceLivenessDetector};
+import React__default from 'react';
+
+const FaceLivenessDetectorContext = React__default.createContext(null);
+function FaceLivenessDetectorProvider({ children, ...props }) {
+    return (React__default.createElement(FaceLivenessDetectorContext.Provider, { value: props }, children));
+}
+function useFaceLivenessDetector() {
+    const props = React__default.useContext(FaceLivenessDetectorContext);
+    if (props === null) {
+        throw new Error('useFaceLivenessDetector must be used within a FaceLivenessDetectorProvider');
+    }
+    return props;
+}
+
+export { FaceLivenessDetectorProvider, useFaceLivenessDetector };