@tn3w/openage 1.0.4 → 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;
@@ -899,6 +913,52 @@
 .oa-result-fail { color: var(--oa-danger); }
 .oa-result-retry { color: var(--oa-warn); }
 
+.oa-error-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 2rem 1.2rem;
+  background: var(--oa-surface);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  margin: 10px;
+  animation: oa-fade-in 0.4s ease;
+  text-align: center;
+}
+
+.oa-error-step-icon {
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--oa-danger);
+  font-size: 1.7rem;
+  line-height: 1;
+}
+
+.oa-error-step-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--oa-text);
+}
+
+.oa-error-step-message {
+  font-size: 0.84rem;
+  line-height: 1.5;
+  color: var(--oa-text-muted);
+  max-width: 260px;
+}
+
+.oa-error-step-countdown {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--oa-danger);
+}
+
 .oa-hidden { display: none !important; }
 
 /* ── Animations ──────────────────────────────── */
@@ -1025,6 +1085,17 @@
   `;
   }
 
+  function errorStepTemplate(message) {
+      return `
+    <div class="oa-error-step">
+      <div class="oa-error-step-icon">✕</div>
+      <div class="oa-error-step-title">Verification stopped</div>
+      <div class="oa-error-step-message">${message}</div>
+      <div class="oa-error-step-countdown"></div>
+    </div>
+  `;
+  }
+
   function resultTemplate(outcome, message) {
       const icons = {
           fail: '✕',
@@ -1046,7 +1117,7 @@
 
   const VERSION = '1.0.0';
 
-  const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/' + '@mediapipe/tasks-vision@0.10.17';
+  const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17';
 
   const MEDIAPIPE_WASM = `${MEDIAPIPE_CDN}/wasm`;
 
@@ -1057,13 +1128,13 @@
       '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';
+      'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@master/weights';
 
   const MAX_RETRIES = 3;
+  const ERROR_STEP_SECONDS = 5;
   const BURST_FRAMES = 5;
   const BURST_INTERVAL_MS = 200;
   const POSITION_CHECK_MS = 100;
@@ -1094,6 +1165,7 @@
           this.popup = null;
           this.shadow = null;
           this.elements = {};
+          this.popupElements = null;
           this.onChallenge = null;
           this.onStartClick = null;
           this.popupFrame = 0;
@@ -1106,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;
@@ -1118,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;
           }
 
@@ -1154,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() {
@@ -1187,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();
@@ -1364,7 +1475,7 @@
           this.popup.root.style.pointerEvents = 'auto';
       }
 
-      buildPopupContent() {
+      buildPopupContent({ closeable = true } = {}) {
           return `
       <div class="oa-header">
         <div class="oa-title">
@@ -1375,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…')}
@@ -1391,7 +1506,7 @@
     `;
       }
 
-      bindPopupEvents(root, shadow) {
+      bindPopupEvents(root) {
           const closeBtn = root.querySelector('.oa-close-btn');
           if (closeBtn) {
               closeBtn.addEventListener('click', () => {
@@ -1509,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');
@@ -1544,8 +1675,21 @@
           }
       }
 
-      showError() {
-          this.setState('retry');
+      showError(message) {
+          if (!this.popupElements?.body) return;
+
+          this.popupElements.body.innerHTML = errorStepTemplate(message);
+          this.popupElements.errorCountdown = this.popupElements.body.querySelector(
+              '.oa-error-step-countdown'
+          );
+          this.hideActions();
+      }
+
+      setErrorCountdown(seconds) {
+          if (!this.popupElements?.errorCountdown) return;
+
+          const unit = seconds === 1 ? 'second' : 'seconds';
+          this.popupElements.errorCountdown.textContent = `Closing in ${seconds} ${unit}…`;
       }
 
       clearError() {
@@ -1556,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();
@@ -2723,6 +2883,73 @@
       return new Promise((r) => setTimeout(r, ms));
   }
 
+  function resolveChallengeErrorMessage(error) {
+      const name = typeof error?.name === 'string' ? error.name : '';
+      const message = typeof error?.message === 'string' ? error.message : String(error || '');
+      const normalized = `${name} ${message}`.toLowerCase();
+
+      if (
+          name === 'NotFoundError' ||
+          /request is not allowed by the user agent or the platform in the current context/.test(
+              normalized
+          ) ||
+          /requested device not found|device not found|no camera|could not start video source/.test(
+              normalized
+          )
+      ) {
+          return 'No camera available. Plug in a camera and try again.';
+      }
+
+      if (
+          name === 'NotAllowedError' ||
+          name === 'PermissionDeniedError' ||
+          /permission|camera access|access denied/.test(normalized)
+      ) {
+          return 'Camera access was blocked. Allow camera access and try again.';
+      }
+
+      if (/positioning timeout/.test(normalized)) {
+          return 'Face positioning timed out. Reopen the check and try again.';
+      }
+
+      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?.();
+      }
+
+      widget.showError?.(message);
+
+      for (let seconds = ERROR_STEP_SECONDS; seconds > 0; seconds--) {
+          if (!widget.popup) break;
+          widget.setErrorCountdown?.(seconds);
+          await sleep(1000);
+      }
+
+      widget.closePopup?.();
+      widget.setState?.('retry');
+  }
+
+  async function handleChallengeError(widget, emitter, error) {
+      console.log('Error during challenge:', error);
+      await showErrorStep(widget, error);
+      emitter.emit('error', error, widget.id);
+      widget.params.errorCallback?.(error);
+  }
+
   async function runChallenge(widget, emitter) {
       const mode = widget.params.mode || 'serverless';
 
@@ -2752,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);
 
@@ -2803,10 +3034,7 @@
           emitResult(widget, emitter, result);
       } catch (error) {
           cleanupLocal();
-          console.log('Error during challenge:', error);
-          widget.showResult('fail', 'Verification failed');
-          emitter.emit('error', error, widget.id);
-          params.errorCallback?.(error);
+          await handleChallengeError(widget, emitter, error);
       }
   }
 
@@ -2847,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);
@@ -2937,11 +3171,8 @@
 
           cleanupVM(transport);
       } catch (error) {
-          console.log('Error during challenge:', error);
           cleanupVM();
-          widget.showResult('fail', 'Verification failed');
-          emitter.emit('error', error, widget.id);
-          params.errorCallback?.(error);
+          await handleChallengeError(widget, emitter, error);
       }
   }
 
@@ -3156,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',
@@ -3166,6 +3408,7 @@
           minAge: 18,
           ...globalConfig,
           ...params,
+          layout,
       };
   }
 
@@ -3174,6 +3417,10 @@
           emitter.emit('opened', widget.id);
           runChallenge(widget, emitter);
       };
+
+      if (widget.params.layout === 'inline') {
+          widget.startChallenge();
+      }
   }
 
   function render(container, params = {}) {
@@ -3322,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,
           };