@smileid/web-components 11.0.1 → 11.0.2

package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -5,7 +5,9 @@ import type { FunctionComponent } from 'preact';
 
 import { getBoolProp } from '@/utils/props';
 import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
+// Legacy web component fallback (used when Mediapipe isn't available)
 import '../selfie-capture/SelfieCapture';
+// Mediapipe loader/manager used by SmartSelfieCapture
 import { getMediapipeInstance } from '../smartselfie-capture/utils/mediapipeManager';
 
 interface Props {
@@ -23,12 +25,16 @@ interface Props {
   hidden?: string | boolean;
 }
 
+// Wrapper component that decides whether to use the modern
+// SmartSelfieCapture (Mediapipe-based) or fallback to the legacy `selfie-capture`
+// web component after a timeout of 20 seconds.
 const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   timeout = 20000,
   'start-countdown': startCountdownProp = false,
   hidden: hiddenProp = false,
   ...props
 }) => {
+  // Detect if tests are running under Cypress/Electron (affects loading behavior)
   const isParentCypress = (() => {
     try {
       return (
@@ -48,12 +54,21 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
   const hidden = getBoolProp(hiddenProp);
   const startCountdown = getBoolProp(startCountdownProp);
+  // Component state:
+  // - mediapipeReady: whether the mediapipe instance has successfully loaded
+  // - loadingProgress: percentage used for the visible loading UI
+  // - initialSessionCompleted: set when the legacy component emits publish/cancel/close
+  // - mediapipeLoading: true while attempting to load mediapipe
+  // - usingSelfieCapture: whether we've mounted the legacy `selfie-capture` element
   const [mediapipeReady, setMediapipeReady] = useState(false);
   const [loadingProgress, setLoadingProgress] = useState(isCypress ? 100 : 0);
   const [initialSessionCompleted, setInitialSessionCompleted] = useState(false);
   const [mediapipeLoading, setMediapipeLoading] = useState(false);
   const [usingSelfieCapture, setUsingSelfieCapture] = useState(false);
 
+  // Attempt to load Mediapipe (once). If Mediapipe is already ready, loading,
+  // or running under Cypress, skip the attempt. This side-effect flips
+  // mediapipeReady/mediapipeLoading flags which control which component is used.
   useEffect(() => {
     if (mediapipeReady || mediapipeLoading || isCypress) return;
 
@@ -63,6 +78,8 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
         await getMediapipeInstance();
         setMediapipeReady(true);
       } catch (error) {
+        // Loading failed; we'll fall back to the legacy selfie-capture component
+        // after the loadingProgress reaches 100%.
         console.error('Failed to load Mediapipe:', error);
       }
       setMediapipeLoading(false);
@@ -71,6 +88,9 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     loadMediapipe();
   }, [mediapipeReady, mediapipeLoading]);
 
+  // When using the loading countdown (startCountdown), increment the
+  // visible loading progress. This is only used while mediapipe hasn't
+  // reported ready; once mediapipeReady becomes true we stop the timer.
   useEffect(() => {
     if (hidden || !startCountdown || mediapipeReady) return undefined;
 
@@ -135,6 +155,8 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     };
   }, [hidden, mediapipeReady, loadingProgress]);
 
+  // Announce to any `smart-camera-web` element which liveness version is active.
+  // The old capture users 0.0.1, the new one 1.0.0.
   useEffect(() => {
     if (hidden || mediapipeLoading) return;
 
@@ -163,6 +185,9 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   }
 
   if (loadingProgress >= 100) {
+    // When loading completes without Mediapipe becoming ready, mount the legacy
+    // `selfie-capture` web component. We also set `usingSelfieCapture` so other
+    // effects can react (e.g. metadata dispatch).
     if (!usingSelfieCapture) {
       setUsingSelfieCapture(true);
     }

package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts

@@ -1,5 +1,8 @@
 import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';
 
+//  SM-S931 (for the standard S25), SM-S936 (for the S25+), and SM-S938 (for the S25 Ultra)
+const EXCLUDED_DEVICES = ['sm-s936', 'sm-s931', 'sm-s938'];
+
 declare global {
   interface Window {
     __smileIdentityMediapipe?: {
@@ -10,6 +13,42 @@ declare global {
   }
 }
 
+/**
+ * @description Detects if the user is on an excluded device using the modern and more accurate
+ * User-Agent Client Hints (UA-CH) API to get the device model.
+ * @returns {Promise<boolean>} - True if the device model is in the exclusion list.
+ */
+const isExcludedDeviceUsingHints = async (): Promise<boolean> => {
+  // Check for User-Agent Client Hints API support
+  if (typeof navigator !== 'undefined' && navigator.userAgentData) {
+    try {
+      // Request the 'model' high-entropy value and destructure it directly
+      const { model } = await navigator.userAgentData.getHighEntropyValues([
+        'model',
+      ]);
+
+      if (!model) {
+        return false;
+      }
+
+      const lowerModel = model.toLowerCase();
+
+      // Check if the extracted model string matches any of the excluded prefixes
+      return EXCLUDED_DEVICES.some((prefix) => lowerModel.includes(prefix));
+    } catch (error) {
+      // Log the error but fail safe (return false)
+      console.warn(
+        'UA-CH model fetch failed, falling back to UA string check.',
+        error,
+      );
+      return false;
+    }
+  }
+  // If API is not supported, return false (rely on synchronous isExcludedDevice)
+  return false;
+};
+
+// this was added because devices (mostly older) that do not support FP16 will fail to load the model.
 const hasFP16Support = () => {
   const canvas = document.createElement('canvas');
   const gl =
@@ -52,10 +91,12 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
         'https://web-models.smileidentity.com/mediapipe-tasks-vision-wasm',
       );
 
+      const isExcluded = await isExcludedDeviceUsingHints();
+
       const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
         baseOptions: {
           modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
-          delegate: hasFP16Support() ? 'GPU' : 'CPU',
+          delegate: isExcluded || !hasFP16Support() ? 'CPU' : 'GPU',
         },
         outputFaceBlendshapes: true,
         runningMode: 'VIDEO',

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "private": "true",
   "exports": {
     ".": "./index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
   "types": "dist/types/main.d.ts",
@@ -104,7 +104,7 @@
     "prettier": "^3.6.2",
     "rollup-plugin-visualizer": "^6.0.3",
     "typescript": "^5.8.3",
-    "vite": "^7.1.5",
+    "vite": "^7.1.12",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-tsconfig-paths": "^1.4.1"
   }