@smileid/web-components 2.0.1 → 10.0.0

package/{src → lib}/components/selfie/src/selfie-capture-review/SelfieCaptureReview.stories.js

@@ -1,24 +1,24 @@
-import './SelfieCaptureReview';
-
-const meta = {
-  argTypes: {
-    'theme-color': { control: 'color' },
-  },
-  component: 'selfie-capture-review',
-};
-
-export default meta;
-
-export const SelfieCaptureReview = {
-  args: {
-    'theme-color': '#001096',
-  },
-  render: (args) => `
-        <selfie-capture-review
-            show-navigation
-            data-image="https://placehold.co/600x400"
-            theme-color='${args['theme-color']}'
-        >
-        </selfie-capture-review>
-    `,
-};
+import './SelfieCaptureReview';
+
+const meta = {
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
+  component: 'selfie-capture-review',
+};
+
+export default meta;
+
+export const SelfieCaptureReview = {
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
+        <selfie-capture-review
+            show-navigation
+            data-image="https://placehold.co/600x400"
+            theme-color='${args['theme-color']}'
+        >
+        </selfie-capture-review>
+    `,
+};

package/{src → lib}/components/selfie/src/selfie-capture-review/index.js

@@ -1,3 +1,3 @@
-import SelfieCaptureReview from './SelfieCaptureReview';
-
-export default SelfieCaptureReview;
+import SelfieCaptureReview from './SelfieCaptureReview';
+
+export default SelfieCaptureReview;

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

@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'preact/hooks';
+import { IconLoader2 } from '@tabler/icons-preact';
+import register from 'preact-custom-element';
+import type { FunctionComponent } from 'preact';
+
+import { getBoolProp } from '@/utils/props';
+import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
+import '../selfie-capture/SelfieCapture';
+import { getMediapipeInstance } from '../smartselfie-capture/utils/mediapipeManager';
+
+declare const h: any;
+
+interface Props {
+  timeout?: number;
+  interval?: number;
+  duration?: number;
+  'theme-color'?: string;
+  'show-navigation'?: string | boolean;
+  'allow-agent-mode'?: string | boolean;
+  'show-agent-mode-for-tests'?: string | boolean;
+  'hide-attribution'?: string | boolean;
+  'disable-image-tests'?: string | boolean;
+  key?: string;
+  'start-countdown'?: string | boolean;
+  hidden?: string | boolean;
+}
+
+const SelfieCaptureWrapper: FunctionComponent<Props> = ({
+  timeout = 10000,
+  'start-countdown': startCountdownProp = false,
+  hidden: hiddenProp = false,
+  ...props
+}) => {
+  const hidden = getBoolProp(hiddenProp);
+  const startCountdown = getBoolProp(startCountdownProp);
+  const [mediapipeReady, setMediapipeReady] = useState(false);
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [initialSessionCompleted, setInitialSessionCompleted] = useState(false);
+  const [mediapipeLoading, setMediapipeLoading] = useState(false);
+  const [usingSelfieCapture, setUsingSelfieCapture] = useState(false);
+
+  useEffect(() => {
+    if (mediapipeReady || mediapipeLoading) return;
+
+    const loadMediapipe = async () => {
+      setMediapipeLoading(true);
+      try {
+        await getMediapipeInstance();
+        setMediapipeReady(true);
+      } catch (error) {
+        console.error('Failed to load Mediapipe:', error);
+      }
+      setMediapipeLoading(false);
+    };
+
+    loadMediapipe();
+  }, [mediapipeReady, mediapipeLoading]);
+
+  useEffect(() => {
+    if (hidden || !startCountdown || mediapipeReady) return undefined;
+
+    const timer = setInterval(() => {
+      setLoadingProgress((prev: number) => Math.min(prev + 1, 100));
+    }, timeout / 100);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [hidden, startCountdown, timeout, mediapipeReady]);
+
+  useEffect(() => {
+    if (hidden || mediapipeReady || loadingProgress < 100) return undefined;
+
+    const setupEventForwarding = () => {
+      const selfieCapture = document.querySelector('selfie-capture');
+      if (
+        selfieCapture &&
+        !selfieCapture.hasAttribute('data-backup-events-setup')
+      ) {
+        selfieCapture.setAttribute('data-backup-events-setup', 'true');
+
+        const forwardEvent = (event: Event) => {
+          const customEvent = event as CustomEvent;
+          window.dispatchEvent(
+            new CustomEvent(customEvent.type, {
+              detail: customEvent.detail,
+              bubbles: true,
+            }),
+          );
+        };
+
+        selfieCapture.addEventListener('selfie-capture.publish', forwardEvent);
+        selfieCapture.addEventListener(
+          'selfie-capture.cancelled',
+          forwardEvent,
+        );
+        selfieCapture.addEventListener('selfie-capture.close', forwardEvent);
+
+        return () => {
+          selfieCapture.removeEventListener(
+            'selfie-capture.publish',
+            forwardEvent,
+          );
+          selfieCapture.removeEventListener(
+            'selfie-capture.cancelled',
+            forwardEvent,
+          );
+          selfieCapture.removeEventListener(
+            'selfie-capture.close',
+            forwardEvent,
+          );
+        };
+      }
+      return undefined;
+    };
+
+    const timeoutId = setTimeout(setupEventForwarding, 200);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [hidden, mediapipeReady, loadingProgress]);
+
+  if (hidden) {
+    return null;
+  }
+
+  // on retakes, prefer SmartSelfieCapture if Mediapipe is ready
+  if (initialSessionCompleted && mediapipeReady && !usingSelfieCapture) {
+    return <SmartSelfieCapture {...props} />;
+  }
+
+  // use SmartSelfieCapture if mediapipe loads
+  if (!initialSessionCompleted && mediapipeReady && !usingSelfieCapture) {
+    return <SmartSelfieCapture {...props} />;
+  }
+
+  if (loadingProgress >= 100) {
+    if (!usingSelfieCapture) {
+      setUsingSelfieCapture(true);
+    }
+
+    const propsWithoutHidden = { ...props };
+    delete (propsWithoutHidden as any).hidden;
+
+    const selfieCapture = h('selfie-capture', {
+      ...propsWithoutHidden,
+      ref: (el: HTMLElement) => {
+        if (el && !el.hasAttribute('data-events-setup')) {
+          el.setAttribute('data-events-setup', 'true');
+
+          const forwardEvent = (event: Event) => {
+            const customEvent = event as CustomEvent;
+
+            if (
+              customEvent.type === 'selfie-capture.publish' ||
+              customEvent.type === 'selfie-capture.cancelled' ||
+              customEvent.type === 'selfie-capture.close'
+            ) {
+              setInitialSessionCompleted(true);
+            }
+
+            window.dispatchEvent(
+              new CustomEvent(customEvent.type, {
+                detail: customEvent.detail,
+                bubbles: true,
+              }),
+            );
+          };
+
+          el.addEventListener('selfie-capture.publish', forwardEvent);
+          el.addEventListener('selfie-capture.cancelled', forwardEvent);
+          el.addEventListener('selfie-capture.close', forwardEvent);
+        }
+      },
+    });
+
+    return selfieCapture;
+  }
+
+  return (
+    <div style={{ textAlign: 'center', marginTop: '20%' }}>
+      <div
+        style={{
+          marginBottom: '16px',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <IconLoader2
+          size={48}
+          style={{ animation: 'spin 1s linear infinite' }}
+        />
+      </div>
+      <p>Loading... {loadingProgress}%</p>
+      <style>{`
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+if (!customElements.get('selfie-capture-wrapper')) {
+  register(
+    SelfieCaptureWrapper,
+    'selfie-capture-wrapper',
+    [
+      'timeout',
+      'interval',
+      'duration',
+      'theme-color',
+      'show-navigation',
+      'allow-agent-mode',
+      'show-agent-mode-for-tests',
+      'hide-attribution',
+      'disable-image-tests',
+      'key',
+      'start-countdown',
+      'hidden',
+    ],
+    { shadow: true },
+  );
+}
+
+export default SelfieCaptureWrapper;

package/lib/components/selfie/src/selfie-capture-wrapper/index.ts

@@ -0,0 +1 @@
+export { default as SelfieCaptureWrapper } from './SelfieCaptureWrapper';

package/lib/components/selfie/src/smartselfie-capture/OvalProgress.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+interface OvalProgressProps {
+  progress: number;
+  duration?: number;
+  themeColor?: string;
+}
+
+const OvalProgress = ({
+  progress,
+  duration = 1000,
+  themeColor = '#001096',
+}: OvalProgressProps) => {
+  const pathRef = useRef<SVGPathElement>(null);
+  const prevProgress = useRef(progress);
+
+  useEffect(() => {
+    const path = pathRef.current;
+    if (!path) return;
+
+    const pathLength = path.getTotalLength();
+    path.style.opacity = progress > 0 ? '1' : '0';
+    const fromOffset = pathLength * (1 - prevProgress.current);
+    const toOffset = pathLength * (1 - progress);
+
+    // If no change, skip
+    if (fromOffset === toOffset) return;
+
+    path.style.transition = 'none';
+    path.style.strokeDasharray = `${pathLength} ${pathLength}`;
+    path.style.strokeDashoffset = `${fromOffset}`;
+
+    // Force style flush
+    path.getBoundingClientRect();
+
+    path.style.transition = `stroke-dashoffset ${duration}ms ease-out`;
+    path.style.strokeDashoffset = `${toOffset}`;
+
+    prevProgress.current = progress;
+  }, [progress, duration]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+      }}
+    >
+      <svg
+        viewBox="0 0 285 380"
+        preserveAspectRatio="xMidYMid meet"
+        style={{ width: '100%', height: '100%' }}
+      >
+        {/* id is referenced by parent */}
+        <clipPath id="selfie-clip-path" clipPathUnits="objectBoundingBox">
+          <path d="M0.085 0.382 C0.087 0.357 0.092 0.294 0.131 0.236 C0.200 0.133 0.340 0.063 0.501 0.063 C0.730 0.063 0.915 0.205 0.915 0.382 C0.915 0.424 0.899 0.513 0.891 0.549 C0.882 0.588 0.871 0.626 0.857 0.664 C0.792 0.825 0.639 0.937 0.501 0.937 C0.314 0.937 0.182 0.755 0.144 0.666 C0.126 0.624 0.110 0.557 0.107 0.547 C0.092 0.485 0.081 0.439 0.085 0.382 Z" />
+        </clipPath>
+        <path
+          d="M142.693 24C208.319 24 261 77.97 261 145.008C261 160.97 256.319 194.788 254.129 208.356C251.64 223.188 248.348 237.875 244.27 252.35C225.747 313.203 182.328 356 142.693 356C89.414 356 51.871 286.667 41.016 252.948C35.937 236.987 31.356 211.748 30.559 207.857C26.277 184.114 22.991 166.556 24.285 145.008C24.883 135.631 26.277 111.789 37.431 89.742C57.049 50.636 96.983 24 142.693 24Z"
+          stroke={themeColor}
+          fill="none"
+          style={{ strokeWidth: '8' }}
+        />
+        <path
+          ref={pathRef}
+          d="M142.693 24C208.319 24 261 77.97 261 145.008C261 160.97 256.319 194.788 254.129 208.356C251.64 223.188 248.348 237.875 244.27 252.35C225.747 313.203 182.328 356 142.693 356C89.414 356 51.871 286.667 41.016 252.948C35.937 236.987 31.356 211.748 30.559 207.857C26.277 184.114 22.991 166.556 24.285 145.008C24.883 135.631 26.277 111.789 37.431 89.742C57.049 50.636 96.983 24 142.693 24Z"
+          stroke="#22c55e"
+          style={{ strokeWidth: '8' }}
+          fill="none"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default OvalProgress;

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -0,0 +1,224 @@
+import { useRef, useEffect } from 'preact/hooks';
+import register from 'preact-custom-element';
+import type { FunctionComponent } from 'preact';
+
+import { getBoolProp } from '../../../../utils/props';
+import { useFaceCapture, useCamera } from './hooks';
+import { CameraPreview } from './components/CameraPreview';
+import { AlertDisplay } from './components/AlertDisplay';
+import { CaptureControls } from './components/CaptureControls';
+
+import '../../../navigation/src';
+import '../../../attribution/PoweredBySmileId';
+
+interface Props {
+  interval?: number;
+  duration?: number;
+  'theme-color'?: string;
+  'show-navigation'?: string | boolean;
+  'allow-agent-mode'?: string | boolean;
+  'show-agent-mode-for-tests'?: string | boolean;
+  'hide-attribution'?: string | boolean;
+  'disable-image-tests'?: string | boolean;
+}
+
+const SmartSelfieCapture: FunctionComponent<Props> = ({
+  interval = 350,
+  duration = 2800,
+  'theme-color': themeColor = '#001096',
+  'show-navigation': showNavigationProp = false,
+  'allow-agent-mode': allowAgentModeProp = false,
+  'show-agent-mode-for-tests': showAgentModeForTestsProp = false,
+  'hide-attribution': hideAttributionProp = false,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const navigationRef = useRef<HTMLElement | null>(null);
+
+  const showNavigation = getBoolProp(showNavigationProp);
+  const allowAgentMode = getBoolProp(allowAgentModeProp);
+  const showAgentModeForTests = getBoolProp(showAgentModeForTestsProp);
+  const hideAttribution = getBoolProp(hideAttributionProp);
+
+  const smileCooldown = 300;
+  const smileThreshold = 0.25;
+  const mouthOpenThreshold = 0.05;
+  const minFaceSize = 0.35;
+  const maxFaceSize = 0.5;
+
+  const camera = useCamera();
+
+  const faceCapture = useFaceCapture({
+    videoRef: camera.videoRef,
+    canvasRef,
+    interval,
+    duration,
+    smileThreshold,
+    mouthOpenThreshold,
+    minFaceSize,
+    maxFaceSize,
+    smileCooldown,
+  });
+
+  useEffect(() => {
+    const initializeCamera = async () => {
+      await camera.startCamera();
+      await camera.checkAgentSupport();
+      await faceCapture.initializeFaceLandmarker();
+
+      setTimeout(() => {
+        faceCapture.setupCanvas();
+        faceCapture.startDetectionLoop();
+      }, 500);
+    };
+
+    initializeCamera();
+
+    return () => {
+      faceCapture.stopDetectionLoop();
+      camera.stopCamera();
+      faceCapture.cleanup();
+    };
+  }, []);
+
+  useEffect(() => {
+    const navigation = navigationRef.current;
+
+    if (navigation && showNavigation) {
+      const handleNavigationBack = () => {
+        faceCapture.handleCancel();
+      };
+
+      const handleNavigationClose = () => {
+        faceCapture.handleClose();
+      };
+
+      navigation.addEventListener('navigation.back', handleNavigationBack);
+      navigation.addEventListener('navigation.close', handleNavigationClose);
+
+      return () => {
+        navigation.removeEventListener('navigation.back', handleNavigationBack);
+        navigation.removeEventListener(
+          'navigation.close',
+          handleNavigationClose,
+        );
+      };
+    }
+    return undefined;
+  }, [showNavigation]);
+
+  return (
+    <div className="smartselfie-capture">
+      {showNavigation && (
+        // @ts-ignore
+        <smileid-navigation ref={navigationRef} theme-color={themeColor} />
+      )}
+
+      <CameraPreview
+        videoRef={camera.videoRef}
+        canvasRef={canvasRef}
+        facingMode={camera.facingMode}
+        multipleFaces={faceCapture.multipleFaces.value}
+        progress={
+          faceCapture.capturesTaken.value > 0
+            ? faceCapture.capturesTaken.value / faceCapture.totalCaptures.value
+            : 0
+        }
+        interval={interval}
+        themeColor={themeColor}
+      />
+
+      <AlertDisplay alertTitle={faceCapture.alertTitle.value} />
+
+      {!faceCapture.isCapturing.value &&
+        !faceCapture.hasFinishedCapture.value && (
+          <CaptureControls
+            isCapturing={faceCapture.isCapturing.value}
+            hasFinishedCapture={faceCapture.hasFinishedCapture.value}
+            isReadyToCapture={faceCapture.isReadyToCapture.value}
+            allowAgentMode={allowAgentMode}
+            agentSupported={camera.agentSupported}
+            showAgentModeForTests={showAgentModeForTests}
+            facingMode={camera.facingMode}
+            themeColor={themeColor}
+            onStartCapture={faceCapture.startCapture}
+            onSwitchCamera={camera.switchCamera}
+          />
+        )}
+
+      {/* @ts-ignore */}
+      {!hideAttribution && <powered-by-smile-id />}
+
+      <style>{`
+        * {
+          box-sizing: border-box;
+        }
+
+        button {
+          padding: 10px 20px;
+          background: ${themeColor || '#001096'};
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 16px;
+        }
+
+        button:disabled {
+          background: #ccc;
+          cursor: not-allowed;
+        }
+
+        button.btn-primary {
+          background-color: ${themeColor || '#001096'};
+          border-radius: 2.5rem;
+          color: white;
+          border: none;
+          height: 3.125rem;
+          display: inline-block;
+          padding: 0.75rem 1.5rem;
+          text-align: center;
+          font-size: 1.125rem;
+          font-weight: 600;
+          font-family: "DM Sans", sans-serif;
+          cursor: pointer;
+        }
+        
+        button.btn-primary:hover {
+          background-color: #2d2b2a;
+        }
+          
+        button.btn-primary:disabled {
+          background-color: #666;
+          cursor: not-allowed;
+        }
+
+        .smartselfie-capture {
+          font-family: sans-serif;
+          max-width: 356px;
+          margin: 0 auto;
+          padding-block: 2rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+if (!customElements.get('smartselfie-capture')) {
+  register(
+    SmartSelfieCapture,
+    'smartselfie-capture',
+    [
+      'interval',
+      'duration',
+      'theme-color',
+      'show-navigation',
+      'allow-agent-mode',
+      'show-agent-mode-for-tests',
+      'hide-attribution',
+      'disable-image-tests',
+    ],
+    { shadow: true },
+  );
+}
+
+export default SmartSelfieCapture;

package/lib/components/selfie/src/smartselfie-capture/components/AlertDisplay.tsx

@@ -0,0 +1,34 @@
+import type { FunctionComponent } from 'preact';
+
+interface AlertDisplayProps {
+  alertTitle: string;
+}
+
+export const AlertDisplay: FunctionComponent<AlertDisplayProps> = ({
+  alertTitle,
+}) =>
+  alertTitle ? (
+    <>
+      <div className="alert-message">
+        <div className="alert-title">{alertTitle}</div>
+      </div>
+
+      <style>{`
+        .alert-message {
+          margin-top: 1.5rem;
+          color: #000;
+          color: #151F72;
+          padding: 0.5rem 1.5rem;
+          border-radius: 4px;
+          text-align: start;
+          width: 100%;
+        }
+
+        .alert-title {
+          font-size: 16px;
+          font-weight: bold;
+          text-align: center;
+        }
+      `}</style>
+    </>
+  ) : null;