Merge branch liveness/alpha in to dca-v2 to include back camera (#5846)

* Update publish workflow

* disable e2e tests in workflow

* Squashed commit of the following:

commit 984fa99
Author: thaddmt <68032955+thaddmt@users.noreply.github.com>
Date:   Thu Sep 26 11:10:45 2024 -0700

    chore(liveness): allow selecting all cameras, allow camera selection … (#5833)

    * chore(liveness): allow selecting all cameras, allow camera selection on mobile

    * only show on mobile with facemovement challenge only

    * relax e2e tests on alpha

    * make more reaadable

    * fix

    * update names

    * refactor, add tests

    * Update packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx

    Co-authored-by: Caleb Pollman <cpollman@amazon.com>

    * refactor

    ---------

    Co-authored-by: Caleb Pollman <cpollman@amazon.com>

packages/e2e/features/ui/components/liveness/disable-start-screen.feature

@@ -24,6 +24,3 @@ Feature: Disable Start Screen
       Then I click the "FaceMovementAndLightChallenge" selectfield and select the "FaceMovementChallenge" option
       Then I see "FaceMovementChallenge"
       Then I see "liveness-detector" element
-      Then I see the "Face didn't fit inside oval in time limit." timeout error
-      Then I click the "Try again" button
-      Then I see "Loading"

packages/e2e/features/ui/components/liveness/no-light.feature

@@ -23,7 +23,3 @@ Feature: Liveness Detector
       Then I see "connecting"
       Then I click the "Start video check" button
       Then I see "liveness-detector" element
-      Then I see "Move closer"
-      Then I see the "Face didn't fit inside oval in time limit." timeout error
-      Then I click the "Try again" button
-      Then I see the "Start video check" button

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/CameraSelector.tsx

@@ -0,0 +1,43 @@
+import { Flex, Label, SelectField, View } from '@aws-amplify/ui-react';
+import React from 'react';
+import { LivenessClassNames } from '../types/classNames';
+
+interface CameraSelectorProps {
+  deviceId?: string;
+  onSelect: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  devices: MediaDeviceInfo[];
+}
+
+export const CameraSelector = (props: CameraSelectorProps): JSX.Element => {
+  const {
+    onSelect: onCameraChange,
+    devices: selectableDevices,
+    deviceId: selectedDeviceId,
+  } = props;
+  return (
+    <Flex className={LivenessClassNames.StartScreenCameraSelect}>
+      <View className={LivenessClassNames.StartScreenCameraSelectContainer}>
+        <Label
+          htmlFor="amplify-liveness-camera-select"
+          className={`${LivenessClassNames.StartScreenCameraSelect}__label`}
+        >
+          Camera:
+        </Label>
+        <SelectField
+          id="amplify-liveness-camera-select"
+          testId="amplify-liveness-camera-select"
+          label="Camera"
+          labelHidden
+          value={selectedDeviceId}
+          onChange={onCameraChange}
+        >
+          {selectableDevices.map((device) => (
+            <option value={device.deviceId} key={device.deviceId}>
+              {device.label}
+            </option>
+          ))}
+        </SelectField>
+      </View>
+    </Flex>
+  );
+};

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx

@@ -1,15 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { classNames } from '@aws-amplify/ui';
 
-import {
-  Button,
-  Flex,
-  Label,
-  Loader,
-  SelectField,
-  Text,
-  View,
-} from '@aws-amplify/ui-react';
+import { Button, Flex, Loader, Text, View } from '@aws-amplify/ui-react';
 import { useColorMode } from '@aws-amplify/ui-react/internal';
 import { FaceMatchState, clearOvalCanvas, drawStaticOval } from '../service';
 import {
@@ -40,6 +32,7 @@ import {
   DefaultRecordingIcon,
 } from '../shared/DefaultStartScreenComponents';
 import { FACE_MOVEMENT_CHALLENGE } from '../service/utils/constants';
+import { CameraSelector } from './CameraSelector';
 
 export const selectChallengeType = createLivenessSelector(
   (state) => state.context.parsedSessionInformation?.Challenge?.Name
@@ -160,6 +153,13 @@ export const LivenessCameraModule = (
     videoWidth && videoHeight ? videoWidth / videoHeight : 0
   );
 
+  // Only mobile device camera selection for no light challenge
+  const hasMultipleDevices = !!selectableDevices?.length;
+  const allowDeviceSelection =
+    isStartView &&
+    hasMultipleDevices &&
+    (!isMobileScreen || isFaceMovementChallenge);
+
   React.useEffect(() => {
     if (canvasRef?.current && videoRef?.current && videoStream && isStartView) {
       drawStaticOval(canvasRef.current, videoRef.current, videoStream);
@@ -417,38 +417,13 @@ export const LivenessCameraModule = (
             <View as="canvas" ref={canvasRef} />
           </Flex>
 
-          {isStartView &&
-            !isMobileScreen &&
-            selectableDevices &&
-            selectableDevices.length > 1 && (
-              <Flex className={LivenessClassNames.StartScreenCameraSelect}>
-                <View
-                  className={
-                    LivenessClassNames.StartScreenCameraSelectContainer
-                  }
-                >
-                  <Label
-                    htmlFor="amplify-liveness-camera-select"
-                    className={`${LivenessClassNames.StartScreenCameraSelect}__label`}
-                  >
-                    Camera:
-                  </Label>
-                  <SelectField
-                    id="amplify-liveness-camera-select"
-                    label="Camera"
-                    labelHidden
-                    value={selectedDeviceId}
-                    onChange={onCameraChange}
-                  >
-                    {selectableDevices?.map((device) => (
-                      <option value={device.deviceId} key={device.deviceId}>
-                        {device.label}
-                      </option>
-                    ))}
-                  </SelectField>
-                </View>
-              </Flex>
-            )}
+          {allowDeviceSelection ? (
+            <CameraSelector
+              onSelect={onCameraChange}
+              devices={selectableDevices}
+              deviceId={selectedDeviceId}
+            />
+          ) : null}
         </View>
       </Flex>
 

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/__tests__/CameraSelector.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import { CameraSelector } from '../CameraSelector';
+import React from 'react';
+
+const mockMediaDevice: MediaDeviceInfo = {
+  deviceId: 'foobar',
+  groupId: 'foobar',
+  kind: 'videoinput',
+  label: 'foobar',
+  toJSON: jest.fn(),
+};
+
+describe('CameraSelector', () => {
+  it('should render', () => {
+    const result = render(
+      <CameraSelector onSelect={() => {}} devices={[mockMediaDevice]} />
+    );
+
+    expect(result.container).toBeDefined();
+  });
+});

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/__tests__/LivenessCameraModule.test.tsx

@@ -483,7 +483,9 @@ describe('LivenessCameraModule', () => {
   it('should render hair check screen when isStart = true', () => {
     isStart = true;
     mockStateMatchesAndSelectors();
-    mockUseLivenessSelector.mockReturnValue(25).mockReturnValue(['device-id']);
+    mockUseLivenessSelector
+      .mockReturnValue(25)
+      .mockReturnValue(['device-id', 'device-id-2', 'device-id-3']);
 
     renderWithLivenessProvider(
       <LivenessCameraModule
@@ -500,6 +502,9 @@ describe('LivenessCameraModule', () => {
     videoEl.dispatchEvent(new Event('canplay'));
 
     expect(screen.getByTestId('popover-icon')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('amplify-liveness-camera-select')
+    ).toBeInTheDocument();
   });
 
   it('selectors should work', () => {

packages/react-liveness/src/components/FaceLivenessDetector/utils/helpers.ts

@@ -8,5 +8,4 @@ export const STATIC_VIDEO_CONSTRAINTS: MediaTrackConstraints = {
     ideal: 480,
   },
   frameRate: { min: 15, ideal: 30, max: 30 },
-  facingMode: 'user',
 };