@smileid/web-components 2.0.2 → 10.0.2

package/{src → lib}/components/selfie/src/SelfieCaptureScreens.js

@@ -1,6 +1,6 @@
-import './selfie-capture';
 import './selfie-capture-instructions';
 import './selfie-capture-review';
+import './selfie-capture-wrapper/index.ts';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
 import packageJson from '../../../../package.json';
@@ -37,10 +37,76 @@ async function getPermissions(captureScreen, facingMode = 'user') {
   }
 }
 
+const cropImageFromDataUri = (
+  dataUri,
+  cropPercentX = 0,
+  cropPercentY = 0,
+  quality = 0.9,
+) =>
+  new Promise((resolve, reject) => {
+    if (!dataUri || typeof dataUri !== 'string') {
+      reject(new Error('Invalid data URI provided'));
+      return;
+    }
+
+    if (
+      cropPercentX < 0 ||
+      cropPercentX >= 99 ||
+      cropPercentY < 0 ||
+      cropPercentY >= 99
+    ) {
+      reject(new Error('Crop percentages must be between 0 and 99'));
+      return;
+    }
+
+    const img = new Image();
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        const originalWidth = img.width;
+        const originalHeight = img.height;
+        const cropAmountX = (originalWidth * cropPercentX) / 100;
+        const cropAmountY = (originalHeight * cropPercentY) / 100;
+
+        const newWidth = originalWidth - cropAmountX * 2;
+        const newHeight = originalHeight - cropAmountY * 2;
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+
+        ctx.drawImage(
+          img,
+          cropAmountX,
+          cropAmountY,
+          newWidth,
+          newHeight,
+          0,
+          0,
+          newWidth,
+          newHeight,
+        );
+
+        const croppedDataUri = canvas.toDataURL('image/jpeg', quality);
+        resolve(croppedDataUri);
+      } catch (error) {
+        reject(new Error(`Failed to process image: ${error.message}`));
+      }
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image from data URI'));
+    };
+
+    img.src = dataUri;
+  });
+
 class SelfieCaptureScreens extends HTMLElement {
   constructor() {
     super();
     this.activeScreen = null;
+    this._remountKey = 0; // Counter for forcing wrapper remounts
     smartCameraWeb?.dispatchEvent(new CustomEvent('metadata.initialize'));
   }
 
@@ -49,7 +115,7 @@ class SelfieCaptureScreens extends HTMLElement {
             ${styles(this.themeColor)}
             <div>
               <selfie-capture-instructions theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
-              <selfie-capture theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} hidden></selfie-capture>
+              <selfie-capture-wrapper theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} key="${this._remountKey}" start-countdown="false" hidden></selfie-capture-wrapper>
               <selfie-capture-review theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
             </div>
         `;
@@ -60,9 +126,8 @@ class SelfieCaptureScreens extends HTMLElement {
         libraryVersion: COMPONENTS_VERSION,
       },
     };
-
     this.selfieInstruction = this.querySelector('selfie-capture-instructions');
-    this.selfieCapture = this.querySelector('selfie-capture');
+    this.selfieCapture = this.querySelector('selfie-capture-wrapper');
     this.selfieReview = this.querySelector('selfie-capture-review');
 
     if (this.hideInstructions && !this.hasAttribute('hidden')) {
@@ -124,27 +189,8 @@ class SelfieCaptureScreens extends HTMLElement {
         this.handleBackEvents();
       },
     );
-
-    this.selfieCapture.addEventListener('selfie-capture.cancelled', () => {
-      this.selfieCapture.reset();
-      SmartCamera.stopMedia();
-      if (this.hideInstructions) {
-        this.handleBackEvents();
-        return;
-      }
-
-      this.setActiveScreen(this.selfieInstruction);
-    });
-
-    this.selfieCapture.addEventListener('selfie-capture.publish', (event) => {
-      smartCameraWeb?.dispatchEvent(
-        new CustomEvent('metadata.selfie-capture-end'),
-      );
-      this.selfieReview.setAttribute('data-image', event.detail.referenceImage);
-      this._data.images = event.detail.images;
-      SmartCamera.stopMedia();
-      this.setActiveScreen(this.selfieReview);
-    });
+    // Setup selfie-wrapper event listeners
+    this.setupSelfieWrapperEventListeners();
 
     this.selfieReview.addEventListener(
       'selfie-capture-review.rejected',
@@ -154,6 +200,10 @@ class SelfieCaptureScreens extends HTMLElement {
         );
         this.selfieReview.removeAttribute('data-image');
         this._data.images = [];
+
+        // Force remount by incrementing key
+        this.forceWrapperRemount();
+
         if (this.hideInstructions) {
           this.setActiveScreen(this.selfieCapture);
           await getPermissions(this.selfieCapture, this.getAgentMode());
@@ -182,6 +232,113 @@ class SelfieCaptureScreens extends HTMLElement {
     );
   }
 
+  // Force remount of selfie-capture-wrapper component for clean state
+  forceWrapperRemount() {
+    this._remountKey++;
+    const container = this.querySelector('div');
+    const oldSelfieCapture = this.selfieCapture;
+
+    // Create new selfie-capture-wrapper element with same attributes
+    const newSelfieCapture = document.createElement('selfie-capture-wrapper');
+    newSelfieCapture.setAttribute('theme-color', this.themeColor);
+    newSelfieCapture.setAttribute('key', this._remountKey.toString());
+    newSelfieCapture.setAttribute('start-countdown', 'false');
+
+    // Copy all the correct attributes based on the getter logic
+    const showNav = this.hasAttribute('show-navigation');
+    const allowAgent = this.getAttribute('allow-agent-mode') === 'true';
+    const allowAgentTests = this.hasAttribute('show-agent-mode-for-tests');
+    const hideAttr = this.hasAttribute('hide-attribution');
+    const disableTests = this.hasAttribute('disable-image-tests');
+
+    if (showNav) newSelfieCapture.setAttribute('show-navigation', '');
+    if (allowAgent) newSelfieCapture.setAttribute('allow-agent-mode', 'true');
+    if (allowAgentTests)
+      newSelfieCapture.setAttribute('show-agent-mode-for-tests', '');
+    if (hideAttr) newSelfieCapture.setAttribute('hide-attribution', '');
+    if (disableTests) newSelfieCapture.setAttribute('disable-image-tests', '');
+    newSelfieCapture.setAttribute('hidden', '');
+
+    // Replace old element with new one
+    container.replaceChild(newSelfieCapture, oldSelfieCapture);
+
+    // Update reference
+    this.selfieCapture = newSelfieCapture;
+
+    // Re-add event listeners for the new element
+    this.setupSelfieWrapperEventListeners();
+  }
+
+  // Override setActiveScreen to enable countdown when selfie-capture is active
+  setActiveScreen(screen) {
+    this.activeScreen?.setAttribute('hidden', '');
+    screen.removeAttribute('hidden');
+    this.activeScreen = screen;
+
+    // If activating selfie-capture-wrapper, enable the countdown and ensure permissions
+    if (screen === this.selfieCapture) {
+      screen.setAttribute('start-countdown', 'true');
+      getPermissions(this.selfieCapture, this.getAgentMode());
+    } else if (this.selfieCapture) {
+      // Disable countdown when not on capture screen
+      this.selfieCapture.setAttribute('start-countdown', 'false');
+    }
+  }
+
+  setupSelfieWrapperEventListeners() {
+    window.addEventListener('selfie-capture.cancelled', () => {
+      SmartCamera.stopMedia();
+
+      // Force remount of selfie-capture-wrapper for clean state on next visit
+      this.forceWrapperRemount();
+
+      if (this.hideInstructions) {
+        this.handleBackEvents();
+        return;
+      }
+
+      this.setActiveScreen(this.selfieInstruction);
+    });
+
+    // Add specific close event handler for selfie-capture-wrapper
+    window.addEventListener('selfie-capture.close', () => {
+      SmartCamera.stopMedia();
+
+      // Force remount of selfie-capture-wrapper for clean state on next visit
+      this.forceWrapperRemount();
+
+      this.handleCloseEvent();
+    });
+
+    window.addEventListener('selfie-capture.publish', async (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.selfie-capture-end'),
+      );
+      this.selfieReview.setAttribute(
+        'data-image',
+        await cropImageFromDataUri(event.detail.referenceImage, 20, 20),
+      );
+      this._data.images = event.detail.images;
+      SmartCamera.stopMedia();
+      this.setActiveScreen(this.selfieReview);
+    });
+
+    // Also listen for the publish event on the parent SelfieCaptureScreens element
+    // in case smartselfie-capture dispatches it there
+    this.addEventListener('selfie-capture.publish', async (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.selfie-capture-end'),
+      );
+      this.selfieReview.setAttribute(
+        'data-image',
+        await cropImageFromDataUri(event.detail.referenceImage, 20, 20),
+      );
+      this._data.images = event.detail.images;
+      SmartCamera.stopMedia();
+      this.setActiveScreen(this.selfieReview);
+    });
+  }
+
   _publishSelectedImages() {
     this.dispatchEvent(
       new CustomEvent('selfie-capture-screens.publish', { detail: this._data }),
@@ -193,7 +350,7 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get hideAttribution() {
-    return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
+    return this.hasAttribute('hide-attribution') ? 'hide-attribution=""' : '';
   }
 
   get hideBackOfId() {
@@ -201,7 +358,7 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get showNavigation() {
-    return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
+    return this.hasAttribute('show-navigation') ? 'show-navigation=""' : '';
   }
 
   get inAgentMode() {
@@ -209,25 +366,25 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get allowAgentMode() {
-    return this.inAgentMode ? "allow-agent-mode='true'" : '';
+    return this.inAgentMode ? 'allow-agent-mode="true"' : '';
   }
 
   get allowAgentModeTests() {
     return this.hasAttribute('show-agent-mode-for-tests')
-      ? 'show-agent-mode-for-tests'
+      ? 'show-agent-mode-for-tests=""'
       : '';
   }
 
   get hideBack() {
     return this.hasAttribute('hide-back-to-host') ||
       this.hasAttribute('hide-back')
-      ? 'hide-back'
+      ? 'hide-back=""'
       : '';
   }
 
   get disableImageTests() {
     return this.hasAttribute('disable-image-tests')
-      ? 'disable-image-tests'
+      ? 'disable-image-tests=""'
       : '';
   }
 
@@ -235,12 +392,6 @@ class SelfieCaptureScreens extends HTMLElement {
     return this.getAttribute('theme-color') || '#001096';
   }
 
-  setActiveScreen(screen) {
-    this.activeScreen?.setAttribute('hidden', '');
-    screen.removeAttribute('hidden');
-    this.activeScreen = screen;
-  }
-
   handleBackEvents() {
     this.dispatchEvent(new CustomEvent('selfie-capture-screens.cancelled'));
   }

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

@@ -1,5 +1,3 @@
 import SelfieCaptureScreens from './SelfieCaptureScreens';
-import SelfieCapture from './selfie-capture/SelfieCapture';
 
 export default SelfieCaptureScreens;
-export { SelfieCapture };

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

@@ -358,7 +358,7 @@ function templateString() {
     left: 50%;
     min-width: auto;
     position: absolute;
-    top: calc(50% - 3px);
+    top: 50%;
     transform: translateX(-50%) translateY(50%);
   }
 
@@ -381,7 +381,7 @@ function templateString() {
   }
 
   .video-container video {
-    min-height: 100%;
+    height: 150%;
     transform: scaleX(-1) translateX(50%) translateY(-50%);
   }
 
@@ -468,7 +468,6 @@ function templateString() {
   #selfie-capture-screen,
   #back-of-id-entry-screen {
     block-size: 45rem;
-    padding-block: 2rem;
     display: flex;
     flex-direction: column;
     max-block-size: 100%;
@@ -520,7 +519,7 @@ function templateString() {
       <div class='video-container'>
         <div class='video'>
         </div>
-        <svg id="image-outline" width="215" height="245" viewBox="0 0 215 245" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg id="image-outline" width="215" height="245" viewBox="0 0 215 245" fill="none" xmlns="http://www.w3.org/2000/svg" style="position: relative;">
           <path d="M210.981 122.838C210.981 188.699 164.248 241.268 107.55 241.268C50.853 241.268 4.12018 188.699 4.12018 122.838C4.12018 56.9763 50.853 4.40771 107.55 4.40771C164.248 4.40771 210.981 56.9763 210.981 122.838Z" stroke="${this.themeColor}" stroke-width="7.13965"/>
         </svg>
         <div id="smile-cta-box">

package/{src → lib}/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js

@@ -260,7 +260,6 @@ function templateString() {
       }
 
       #selfie-capture-instruction-screen {
-        padding-block: 2rem;
         display: flex;
         flex-direction: column;
         max-block-size: 100%;

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

@@ -94,7 +94,6 @@ function templateString() {
       }
       #selfie-capture-review-screen {
         block-size: 45rem;
-        padding-block: 2rem;
         display: flex;
         flex-direction: column;
         max-block-size: 100%;
@@ -126,13 +125,6 @@ function templateString() {
         z-index: 1;
         block-size: 100%;
       }
-    
-      .selfie-container,
-      .selfie-review-container.landscape {
-        height: auto;
-        clip-path: inset(15% 20% 20% 20% round 10px);
-        overflow: hidden;
-      }
 
       .selfie-container img {
         background-color: black;

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

@@ -0,0 +1,226 @@
+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';
+
+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 = 20000,
+  '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;
+
+    return (
+      // @ts-ignore
+      <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 (
+    <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';