@tn3w/openage 1.0.5 → 1.0.6

package/dist/openage.umd.js

@@ -547,6 +547,20 @@
   flex-direction: column;
 }
 
+.oa-inline-shell {
+  background: var(--oa-bg);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.18),
+    0 0 0 1px rgba(0,0,0,0.06);
+  width: min(100%, 360px);
+  max-width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
 .oa-modal-overlay {
   position: fixed;
   inset: 0;
@@ -1114,8 +1128,7 @@
       'face_landmarker/face_landmarker/float16/1/' +
       'face_landmarker.task';
 
-  const FACEAPI_CDN =
-      'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js';
+  const FACEAPI_CDN = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js';
 
   const FACEAPI_MODEL_CDN =
       'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@master/weights';
@@ -1152,6 +1165,7 @@
           this.popup = null;
           this.shadow = null;
           this.elements = {};
+          this.popupElements = null;
           this.onChallenge = null;
           this.onStartClick = null;
           this.popupFrame = 0;
@@ -1164,6 +1178,7 @@
           const host = document.createElement('div');
           host.id = this.id;
           this.shadow = host.attachShadow({ mode: 'open' });
+          this.host = host;
 
           const style = document.createElement('style');
           style.textContent = STYLES;
@@ -1176,7 +1191,12 @@
           if (this.params.size === 'invisible') {
               host.style.display = 'none';
               this.container.appendChild(host);
-              this.host = host;
+              return;
+          }
+
+          if (this.isInlineLayout()) {
+              this.renderInlineShell();
+              this.container.appendChild(host);
               return;
           }
 
@@ -1212,7 +1232,32 @@
           this.elements.errorSlot = this.shadow.querySelector('.oa-error-slot');
 
           this.container.appendChild(host);
-          this.host = host;
+      }
+
+      isInlineLayout() {
+          return this.params.layout === 'inline';
+      }
+
+      renderInlineShell() {
+          const inlineShell = document.createElement('div');
+          inlineShell.className = 'oa-inline-shell';
+          inlineShell.innerHTML = this.buildPopupContent({ closeable: false });
+          this.shadow.appendChild(inlineShell);
+
+          this.popup = {
+              host: this.host,
+              root: inlineShell,
+              inline: true,
+          };
+
+          this.bindPopupEvents(inlineShell);
+      }
+
+      resetInlineShell() {
+          if (!this.popup?.root) return;
+
+          this.popup.root.innerHTML = this.buildPopupContent({ closeable: false });
+          this.bindPopupEvents(this.popup.root);
       }
 
       startChallenge() {
@@ -1245,6 +1290,14 @@
       }
 
       openPopup() {
+          if (this.isInlineLayout()) {
+              if (!this.popup) {
+                  this.renderInlineShell();
+              }
+
+              return this.getVideo();
+          }
+
           if (this.popup) return this.getVideo();
 
           const anchor = this.getPopupAnchor();
@@ -1422,7 +1475,7 @@
           this.popup.root.style.pointerEvents = 'auto';
       }
 
-      buildPopupContent() {
+      buildPopupContent({ closeable = true } = {}) {
           return `
       <div class="oa-header">
         <div class="oa-title">
@@ -1433,10 +1486,14 @@
           </a>
           <span class="oa-badge">on-device</span>
         </div>
-        <button class="oa-close-btn"
-          aria-label="Close">
-          ${CLOSE_SVG}
-        </button>
+                ${
+                    closeable
+                        ? `<button class="oa-close-btn"
+                    aria-label="Close">
+                    ${CLOSE_SVG}
+                </button>`
+                        : ''
+                }
       </div>
       <div class="oa-body">
         ${heroTemplate('Initializing…')}
@@ -1449,7 +1506,7 @@
     `;
       }
 
-      bindPopupEvents(root, shadow) {
+      bindPopupEvents(root) {
           const closeBtn = root.querySelector('.oa-close-btn');
           if (closeBtn) {
               closeBtn.addEventListener('click', () => {
@@ -1567,6 +1624,22 @@
       }
 
       showResult(outcome, message) {
+          if (this.isInlineLayout()) {
+              if (!this.popupElements?.body) return;
+
+              this.popupElements.body.innerHTML = resultTemplate(outcome, message);
+              this.hideActions();
+
+              if (outcome === 'pass') {
+                  this.setState('verified');
+                  return;
+              }
+
+              this.setState(outcome === 'fail' ? 'failed' : 'retry');
+              this.showActions('Try Again');
+              return;
+          }
+
           if (outcome === 'pass') {
               this.closePopup();
               this.setState('verified');
@@ -1606,8 +1679,9 @@
           if (!this.popupElements?.body) return;
 
           this.popupElements.body.innerHTML = errorStepTemplate(message);
-          this.popupElements.errorCountdown =
-              this.popupElements.body.querySelector('.oa-error-step-countdown');
+          this.popupElements.errorCountdown = this.popupElements.body.querySelector(
+              '.oa-error-step-countdown'
+          );
           this.hideActions();
       }
 
@@ -1626,6 +1700,22 @@
 
       closePopup() {
           if (!this.popup) return;
+
+          if (this.popup.inline) {
+              this.popup.cleanup?.();
+              if (this.popupFrame) {
+                  cancelAnimationFrame(this.popupFrame);
+                  this.popupFrame = 0;
+              }
+              this.resetInlineShell();
+
+              if (this.state === 'loading') {
+                  this.setState('idle');
+              }
+
+              return;
+          }
+
           this.popup.cleanup?.();
           this.popup.themeCleanup?.();
           this.popup.host.remove();
@@ -2825,9 +2915,18 @@
       return 'Verification failed. Please try again.';
   }
 
+  function isInlineLayout(widget) {
+      return widget?.params?.layout === 'inline';
+  }
+
   async function showErrorStep(widget, error) {
       const message = resolveChallengeErrorMessage(error);
 
+      if (isInlineLayout(widget)) {
+          widget.showResult?.('retry', message);
+          return;
+      }
+
       if (!widget.popup) {
           widget.openPopup?.();
       }
@@ -2880,10 +2979,14 @@
           await Promise.all([loadVision(), initAgeEstimator()]);
 
           modelBuffer = await loadModel();
-          widget.showReady();
 
-          await waitForStart(widget);
-          await startCameraFlow(widget, modelBuffer);
+          if (isInlineLayout(widget)) {
+              await startCameraFlow(widget, modelBuffer);
+          } else {
+              widget.showReady();
+              await waitForStart(widget);
+              await startCameraFlow(widget, modelBuffer);
+          }
 
           const transport = createTransport('serverless', params);
 
@@ -2972,10 +3075,16 @@
               captureFrame: () => (captureFrame() ? 'true' : 'null'),
           });
 
-          widget.showReady();
-          await waitForStart(widget);
+          let video;
+
+          if (isInlineLayout(widget)) {
+              video = widget.showCamera();
+          } else {
+              widget.showReady();
+              await waitForStart(widget);
+              video = widget.showCamera();
+          }
 
-          const video = widget.showCamera();
           widget.setVideoStatus('Requesting camera…');
           await startCamera(video);
           exposeMirrorVideo(video);
@@ -3278,8 +3387,19 @@
   const emitter = new EventEmitter();
   const widgets = new Map();
 
+  function normalizeLayout(layout) {
+      if (layout === 'inline' || layout === 'embed' || layout === 'embedded') {
+          return 'inline';
+      }
+
+      return 'widget';
+  }
+
   function normalizeParams(params) {
       const globalConfig = typeof window !== 'undefined' ? window.openage || {} : {};
+      const layout = normalizeLayout(
+          params.layout ?? params.display ?? globalConfig.layout ?? globalConfig.display
+      );
 
       return {
           mode: 'serverless',
@@ -3288,6 +3408,7 @@
           minAge: 18,
           ...globalConfig,
           ...params,
+          layout,
       };
   }
 
@@ -3296,6 +3417,10 @@
           emitter.emit('opened', widget.id);
           runChallenge(widget, emitter);
       };
+
+      if (widget.params.layout === 'inline') {
+          widget.startChallenge();
+      }
   }
 
   function render(container, params = {}) {
@@ -3444,6 +3569,7 @@
               size: element.dataset.size,
               action: element.dataset.action,
               mode: element.dataset.mode,
+              layout: element.dataset.layout || element.dataset.display,
               server: element.dataset.server,
           };