@aws-amplify/ui-react-liveness 3.1.8 → 3.1.10

package/dist/esm/components/FaceLivenessDetector/service/utils/streamProvider.mjs

@@ -16,7 +16,7 @@ class LivenessStreamProvider {
     constructor({ sessionId, region, stream, videoEl, credentialProvider, endpointOverride, systemClockOffset, }) {
         this.sessionId = sessionId;
         this.region = region;
-        this._stream = stream;
+        this.stream = stream;
         this.videoEl = videoEl;
         this.videoRecorder = new VideoRecorder(stream);
         this.credentialProvider = credentialProvider;
@@ -111,12 +111,13 @@ class LivenessStreamProvider {
     }
     async startLivenessVideoConnection() {
         const livenessRequestGenerator = this.getAsyncGeneratorFromReadableStream(this.videoRecorder.videoStream)();
+        const mediaSettings = this.stream.getTracks()[0].getSettings();
         const response = await this._client.send(new StartFaceLivenessSessionCommand({
             ChallengeVersions: 'FaceMovementAndLightChallenge_1.0.0',
             SessionId: this.sessionId,
             LivenessRequestStream: livenessRequestGenerator,
-            VideoWidth: this.videoEl.videoWidth.toString(),
-            VideoHeight: this.videoEl.videoHeight.toString(),
+            VideoWidth: (mediaSettings.width ?? this.videoEl.width).toString(),
+            VideoHeight: (mediaSettings.height ?? this.videoEl.height).toString(),
         }));
         return response.LivenessResponseStream;
     }

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.1.8';
+const VERSION = '3.1.10';
 
 export { VERSION };

package/dist/index.js

@@ -833,7 +833,7 @@ function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceInterse
     return { faceMatchState, faceMatchPercentage };
 }
 
-const VERSION = '3.1.8';
+const VERSION = '3.1.10';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -1129,7 +1129,7 @@ class LivenessStreamProvider {
     constructor({ sessionId, region, stream, videoEl, credentialProvider, endpointOverride, systemClockOffset, }) {
         this.sessionId = sessionId;
         this.region = region;
-        this._stream = stream;
+        this.stream = stream;
         this.videoEl = videoEl;
         this.videoRecorder = new VideoRecorder(stream);
         this.credentialProvider = credentialProvider;
@@ -1224,12 +1224,13 @@ class LivenessStreamProvider {
     }
     async startLivenessVideoConnection() {
         const livenessRequestGenerator = this.getAsyncGeneratorFromReadableStream(this.videoRecorder.videoStream)();
+        const mediaSettings = this.stream.getTracks()[0].getSettings();
         const response = await this._client.send(new clientRekognitionstreaming.StartFaceLivenessSessionCommand({
             ChallengeVersions: 'FaceMovementAndLightChallenge_1.0.0',
             SessionId: this.sessionId,
             LivenessRequestStream: livenessRequestGenerator,
-            VideoWidth: this.videoEl.videoWidth.toString(),
-            VideoHeight: this.videoEl.videoHeight.toString(),
+            VideoWidth: (mediaSettings.width ?? this.videoEl.width).toString(),
+            VideoHeight: (mediaSettings.height ?? this.videoEl.height).toString(),
         }));
         return response.LivenessResponseStream;
     }

package/dist/styles.css

@@ -1730,8 +1730,9 @@ strong.amplify-text {
   padding-inline-start: var(--amplify-components-button-padding-inline-start);
   padding-inline-end: var(--amplify-components-button-padding-inline-end);
   transition: all var(--amplify-components-button-transition-duration);
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-button-disabled-color: var(
     --amplify-components-button-disabled-color
   );
@@ -2752,50 +2753,58 @@ strong.amplify-text {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
   cursor: not-allowed;
 }
 .amplify-button--disabled:hover {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled :focus {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled:active {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--loading {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:hover {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:focus {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:active {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button__loader-wrapper {
   align-items: var(--amplify-components-button-loader-wrapper-align-items);
@@ -2943,8 +2952,9 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -moz-user-select: text;
-       user-select: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
   display: inline-block;
   --amplify-components-fieldcontrol-color: var(
     --amplify-components-input-color
@@ -3027,8 +3037,9 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -moz-user-select: text;
-       user-select: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {
@@ -3092,24 +3103,29 @@ strong.amplify-text {
 
 .amplify-link {
   color: var(--amplify-components-link-color);
-  text-decoration: var(--amplify-components-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
 .amplify-link:visited {
   color: var(--amplify-components-link-visited-color);
-  text-decoration: var(--amplify-components-link-visited-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
 }
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
-  text-decoration: var(--amplify-components-link-active-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
 }
 .amplify-link:focus {
   color: var(--amplify-components-link-focus-color);
-  text-decoration: var(--amplify-components-link-focus-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
 }
 .amplify-link:hover {
   color: var(--amplify-components-link-hover-color);
-  text-decoration: var(--amplify-components-link-hover-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 
 .amplify-loader {
@@ -3519,6 +3535,7 @@ strong.amplify-text {
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3569,6 +3586,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3582,6 +3602,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3595,6 +3618,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -3610,6 +3636,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -3622,6 +3651,13 @@ strong.amplify-text {
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 
 .amplify-breadcrumbs__list {
   display: flex;
@@ -3652,14 +3688,16 @@ strong.amplify-text {
   font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
   padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
   padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
-  text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
 }
 
 .amplify-breadcrumbs__link--current {
   color: var(--amplify-components-breadcrumbs-link-current-color);
   font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
   font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
-  text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
 }
 
 .amplify-card {
@@ -5209,8 +5247,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-sliderfield-root-height: var(
     --amplify-components-sliderfield-thumb-height
   );

package/dist/types/components/FaceLivenessDetector/service/utils/streamProvider.d.ts

@@ -26,7 +26,7 @@ export declare class LivenessStreamProvider {
     private _reader;
     private videoEl;
     private _client;
-    private _stream;
+    private stream;
     private initPromise;
     constructor({ sessionId, region, stream, videoEl, credentialProvider, endpointOverride, systemClockOffset, }: StreamProviderArgs);
     getResponseStream(): Promise<AsyncIterable<LivenessResponseStream>>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.1.8";
+export declare const VERSION = "3.1.10";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "3.1.8",
+  "version": "3.1.10",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,8 +47,8 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.4.1",
-    "@aws-amplify/ui-react": "6.3.1",
+    "@aws-amplify/ui": "6.6.0",
+    "@aws-amplify/ui-react": "6.5.0",
     "@aws-sdk/client-rekognitionstreaming": "3.621.0",
     "@aws-sdk/util-format-url": "3.609.0",
     "@smithy/eventstream-serde-browser": "^2.0.4",