@smileid/web-components 1.0.0-beta → 1.4.2

package/components/selfie/src/SelfieCaptureScreens.js

@@ -5,9 +5,12 @@ import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
 import { version as COMPONENTS_VERSION } from '../../../package.json';
 
-async function getPermissions(captureScreen) {
+async function getPermissions(captureScreen, facingMode = 'user') {
   try {
-    await SmartCamera.getMedia({ audio: false, video: true });
+    await SmartCamera.getMedia({
+      audio: false,
+      video: { facingMode },
+    });
     captureScreen.removeAttribute('data-camera-error');
     captureScreen.setAttribute('data-camera-ready', true);
   } catch (error) {
@@ -27,11 +30,11 @@ class SelfieCaptureScreens extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-            ${styles}
+            ${styles(this.themeColor)}
             <div>
-              <selfie-capture-instructions ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
-              <selfie-capture ${this.showNavigation} ${this.hideAttribution} ${this.disableImageTests} hidden></selfie-capture>
-              <selfie-capture-review ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
+              <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-review theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
             </div>
         `;
 
@@ -47,11 +50,12 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieReview = this.querySelector('selfie-capture-review');
 
     if (this.hideInstructions && !this.hasAttribute('hidden')) {
-      getPermissions(this.selfieCapture);
+      getPermissions(this.selfieCapture, this.getAgentMode());
     }
 
+    // If the initial screen is selfie-capture, we need to get permissions
     if (this.getAttribute('initial-screen') === 'selfie-capture') {
-      getPermissions(this.selfieCapture);
+      getPermissions(this.selfieCapture, this.getAgentMode());
       this.setActiveScreen(this.selfieCapture);
     } else if (this.hideInstructions) {
       this.setActiveScreen(this.selfieCapture);
@@ -62,6 +66,10 @@ class SelfieCaptureScreens extends HTMLElement {
     this.setUpEventListeners();
   }
 
+  getAgentMode() {
+    return this.inAgentMode ? 'environment' : 'user';
+  }
+
   disconnectedCallback() {
     SmartCamera.stopMedia();
     if (this.activeScreen) {
@@ -75,7 +83,7 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieInstruction.addEventListener(
       'selfie-capture-instructions.capture',
       async () => {
-        await getPermissions(this.selfieCapture);
+        await getPermissions(this.selfieCapture, this.getAgentMode());
         this.setActiveScreen(this.selfieCapture);
       },
     );
@@ -119,7 +127,7 @@ class SelfieCaptureScreens extends HTMLElement {
         this._data.images = [];
         if (this.hideInstructions) {
           this.setActiveScreen(this.selfieCapture);
-          await getPermissions(this.selfieCapture);
+          await getPermissions(this.selfieCapture, this.getAgentMode());
         } else {
           this.setActiveScreen(this.selfieInstruction);
         }
@@ -167,6 +175,20 @@ class SelfieCaptureScreens extends HTMLElement {
     return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
   }
 
+  get inAgentMode() {
+    return this.getAttribute('allow-agent-mode') === 'true';
+  }
+
+  get allowAgentMode() {
+    return this.inAgentMode ? "allow-agent-mode='true'" : '';
+  }
+
+  get allowAgentModeTests() {
+    return this.hasAttribute('show-agent-mode-for-tests')
+      ? 'show-agent-mode-for-tests'
+      : '';
+  }
+
   get hideBack() {
     return this.hasAttribute('hide-back-to-host') ? 'hide-back' : '';
   }
@@ -177,6 +199,10 @@ class SelfieCaptureScreens extends HTMLElement {
       : '';
   }
 
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
   setActiveScreen(screen) {
     this.activeScreen?.setAttribute('hidden', '');
     screen.removeAttribute('hidden');

package/components/selfie/src/SelfieCaptureScreens.stories.js

@@ -1,21 +1,30 @@
 import './SelfieCaptureScreens';
 
 const meta = {
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'selfie-capture-screens',
 };
 
 export default meta;
 
 export const SelfieCaptureFlow = {
-  render: () => `
-        <selfie-capture-screens>
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
+        <selfie-capture-screens theme-color='${args['theme-color']}'>
         </selfie-capture-screens>
     `,
 };
 
 export const SelfieCaptureFlowHiddenInstructions = {
-  render: () => `
-        <selfie-capture-screens hide-instructions >
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
+        <selfie-capture-screens hide-instructions theme-color='${args['theme-color']}'>
         </selfie-capture-screens>
     `,
 };

package/components/selfie/src/selfie-capture/SelfieCapture.js

@@ -63,11 +63,12 @@ function getLivenessFramesIndices(
 
 function templateString() {
   return `
-    ${styles}
+    ${styles(this.themeColor)}
   <style>
   :host {
-    --color-active: #2D2B2A;
-    --color-default: #001096;
+    --theme-color: ${this.themeColor || '#001096'};
+    --color-active: #001096;
+    --color-default: #2D2B2A;
     --color-disabled: #848282;
   }
 
@@ -140,6 +141,14 @@ function templateString() {
     color: #001096;
   }
 
+  .title-color {
+    color: ${this.themeColor};
+  }
+  
+  .theme-color {
+    color: ${this.themeColor};
+  }
+
   .center {
     text-align: center;
     margin-left: auto;
@@ -171,7 +180,7 @@ function templateString() {
   }
 
   .button {
-    --button-color: var(--color-default);
+    --button-color: ${this.themeColor};
     -webkit-appearance: none;
     appearance: none;
     border-radius: 2.5rem;
@@ -189,7 +198,7 @@ function templateString() {
   .button:hover,
   .button:focus,
   .button:active {
-    --button-color: var(--color-active);
+    --button-color: var(--color-default);
   }
 
   .button:disabled {
@@ -378,6 +387,11 @@ function templateString() {
     transform: scaleX(-1) translateX(50%) translateY(-50%);
   }
 
+  .video-container video.agent-mode {
+    min-height: 100%;
+    transform: scaleX(1) translateX(-50%) translateY(-50%);
+  }
+
   .video-container .video {
     background-color: black;
     position: absolute;
@@ -497,15 +511,15 @@ function templateString() {
   }
   </style>
   <div id='selfie-capture-screen' class='flow center'>
-    <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
-    <h1 class='text-2xl color-digital-blue font-bold'>Take a Selfie</h1>
+    <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+    <h1 class='text-2xl title-color font-bold'>Take a Selfie</h1>
 
     <div class='section | flow'>
       <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">
-          <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="var(--color-default)" stroke-width="7.13965"/>
+          <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>
         <p id='smile-cta' class='color-gray'>SMILE</p>
       </div>
@@ -517,27 +531,26 @@ function templateString() {
         </svg>
         <span>Tips: Put your face inside the oval frame and click to "take selfie"</span> </small>
 
+      ${this.allowAgentMode ? `<button data-variant='outline small' id='switch-camera' class='button | center' type='button'>${this.inAgentMode ? 'Agent Mode On' : 'Agent Mode Off'}</button>` : ''}
+
       <button data-variant='solid' id='start-image-capture' class='button | center' type='button'>
         Take Selfie
       </button>
 
-      ${
-        this.hideAttribution
-          ? ''
-          : `
-        <powered-by-smile-id></powered-by-smile-id>
-      `
-      }
+      ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
     </div>
   </div>
   `;
 }
 
-async function getPermissions(captureScreen) {
+async function getPermissions(
+  captureScreen,
+  constraints = { facingMode: 'user' },
+) {
   try {
     await SmartCamera.getMedia({
       audio: false,
-      video: true,
+      video: constraints,
     });
     captureScreen?.removeAttribute('data-camera-error');
     captureScreen?.setAttribute('data-camera-ready', true);
@@ -557,12 +570,16 @@ class SelfieCaptureScreen extends HTMLElement {
     this.render = () => this.templateString();
 
     this.attachShadow({ mode: 'open' });
+    this.facingMode = 'user';
+    if (this.allowAgentMode) {
+      this.facingMode = 'environment';
+    }
   }
 
   connectedCallback() {
     const template = document.createElement('template');
     template.innerHTML = this.render();
-
+    this.shadowRoot.innerHTML = '';
     this.shadowRoot.appendChild(template.content.cloneNode(true));
     this.videoContainer = this.shadowRoot.querySelector(
       '.video-container > .video',
@@ -592,6 +609,9 @@ class SelfieCaptureScreen extends HTMLElement {
 
   _startImageCapture() {
     this.startImageCapture.disabled = true;
+    if (this.switchCamera) {
+      this.switchCamera.disabled = true;
+    }
 
     /**
      * this was culled from https://jakearchibald.com/2013/animated-line-drawing-svg/
@@ -622,6 +642,20 @@ class SelfieCaptureScreen extends HTMLElement {
     }, this._videoStreamDurationInMS);
   }
 
+  async _switchCamera() {
+    this.facingMode = this.facingMode === 'user' ? 'environment' : 'user';
+    if (this.facingMode === 'user') {
+      this.shadowRoot.querySelector('video').classList.remove('agent-mode');
+    } else {
+      this.shadowRoot.querySelector('video').classList.add('agent-mode');
+    }
+    this.startImageCapture.disabled = true;
+    this.switchCamera.disabled = true;
+    SmartCamera.stopMedia();
+    await getPermissions(this, { facingMode: this.facingMode });
+    this.handleStream(SmartCamera.stream);
+  }
+
   _stopVideoStream() {
     try {
       clearTimeout(this._videoStreamTimeout);
@@ -635,6 +669,7 @@ class SelfieCaptureScreen extends HTMLElement {
 
       const totalNoOfFrames = this._rawImages.length;
       this._data.referenceImage = this._referenceImage;
+      this._data.previewImage = this._referenceImage;
 
       const livenessFramesIndices = getLivenessFramesIndices(totalNoOfFrames);
 
@@ -772,6 +807,8 @@ class SelfieCaptureScreen extends HTMLElement {
     this.startImageCapture = this.shadowRoot.querySelector(
       '#start-image-capture',
     );
+
+    this.switchCamera = this.shadowRoot.querySelector('#switch-camera');
     this.imageOutline = this.shadowRoot.querySelector('#image-outline path');
     this.smileCTA = this.shadowRoot.querySelector('#smile-cta');
 
@@ -779,6 +816,10 @@ class SelfieCaptureScreen extends HTMLElement {
       this._startImageCapture();
     });
 
+    this.switchCamera?.addEventListener('click', () => {
+      this._switchCamera();
+    });
+
     this.navigation.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
@@ -790,8 +831,10 @@ class SelfieCaptureScreen extends HTMLElement {
     if (SmartCamera.stream) {
       this.handleStream(SmartCamera.stream);
     } else if (this.hasAttribute('data-camera-ready')) {
-      getPermissions(this);
+      getPermissions(this, { facingMode: this.facingMode });
     }
+
+    this.setupAgentMode();
   }
 
   disconnectedCallback() {
@@ -808,16 +851,34 @@ class SelfieCaptureScreen extends HTMLElement {
   }
 
   get themeColor() {
-    return this.getAttribute('theme-color') || '#043C93';
+    return this.getAttribute('theme-color') || '#001096';
   }
 
   get hideAttribution() {
     return this.hasAttribute('hide-attribution');
   }
 
-  get supportBothCaptureModes() {
-    const value = this.documentCaptureModes;
-    return value.includes('camera') && value.includes('upload');
+  async setupAgentMode() {
+    if (!this.allowAgentMode) {
+      return;
+    }
+
+    const supportAgentMode = await SmartCamera.supportsAgentMode();
+
+    if (supportAgentMode || this.hasAttribute('show-agent-mode-for-tests')) {
+      this.switchCamera.hidden = false;
+      if (this.facingMode === 'user') {
+        this.shadowRoot.querySelector('video')?.classList?.remove('agent-mode');
+      } else {
+        this.shadowRoot.querySelector('video')?.classList?.add('agent-mode');
+      }
+    } else {
+      this.switchCamera.hidden = true;
+    }
+  }
+
+  get hasAgentSupport() {
+    return this.hasAttribute('has-agent-support');
   }
 
   get title() {
@@ -836,10 +897,20 @@ class SelfieCaptureScreen extends HTMLElement {
     return this.hasAttribute('disable-image-tests');
   }
 
+  get allowAgentMode() {
+    return this.getAttribute('allow-agent-mode') === 'true';
+  }
+
+  get inAgentMode() {
+    return this.facingMode === 'environment';
+  }
+
   static get observedAttributes() {
     return [
+      'allow-agent-mode',
       'data-camera-error',
       'data-camera-ready',
+      'disable-image-tests',
       'hidden',
       'hide-back-to-host',
       'show-navigation',
@@ -853,6 +924,7 @@ class SelfieCaptureScreen extends HTMLElement {
       case 'data-camera-ready':
       case 'hidden':
       case 'title':
+      case 'allow-agent-mode':
         this.shadowRoot.innerHTML = this.render();
         this.init();
         break;

package/components/selfie/src/selfie-capture/SelfieCapture.stories.js

@@ -2,12 +2,18 @@ import SmartCamera from '../../../../domain/camera/src/SmartCamera';
 import './SelfieCapture';
 
 const meta = {
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'selfie-capture',
 };
 
 export default meta;
 
 export const SelfieCapture = {
+  args: {
+    'theme-color': '#001096',
+  },
   loaders: [
     async () => ({
       permissionGranted: await SmartCamera.getMedia({
@@ -16,8 +22,15 @@ export const SelfieCapture = {
       }),
     }),
   ],
+  render: (args) => `
+        <selfie-capture theme-color='${args['theme-color']}'>
+        </selfie-capture>
+    `,
+};
+
+export const SelfieCaptureAgentMode = {
   render: () => `
-        <selfie-capture>
+        <selfie-capture allow-agent-mode='true' data-camera-ready show-agent-mode-for-tests>
         </selfie-capture>
     `,
 };