aws-amplify / aws-amplify/amplify-ui
[FR] Liveness - FaceLivenessDetector component to support Theme Object and Color Mode
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### On which framework/platform would you like to see this feature implemented?
React
### Which UI component is this feature-request for?
Liveness
### Please describe your feature-request in detail.
Hi, `FaceLivenessDectector` component does not follow the colors from `ThemeObject` and `ColorMode`.
Affected Version:
- 3.0.13/14/15 (versions I have tried)
- examples from amplify-ui repo
**Example Code**
```typescript
const theme: Theme = {
name: 'liveness-theme',
overrides: [defaultDarkModeOverride],
};
...
return (
);
```
**Expected Result**
-----------------

**Actual Result**
-----------------

### Please describe a solution you'd like.
I have noticed that liveness oval canvas `fillStyle` has been [hard-coded](https://github.com/aws-amplify/amplify-ui/blob/main/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts#L208) and set to white color (`#fff`) during `detectInitialFaceAndDrawOval`.
```typescript
// packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts
ctx.fillStyle = isStartScreen
? getComputedStyle(canvas).getPropertyValue(
'--amplify-colors-background-primary'
)
: '#fff';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
```
Tbh, I don't have enough knowledge on image recognition subject so I am not really whether it was by design or not.
If it's not by design, it would be nice if users could modify the `canvas fillStyle` via `ThemeObject` so that it will align with the App theme.
### We love contributors! Is this something you'd be interested in working on?
- [X] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.
Contributor guide
Research direction
Start in packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts at detectInitialFaceAndDrawOval and inspect how the canvas fillStyle is selected. Reproduce the provided ThemeProvider colorMode="dark" example, then verify that the FaceLivenessDetector canvas follows the ThemeObject and ColorMode instead of using a fixed color.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100