@tn3w/openage 1.0.3 → 1.0.5

package/README.md

@@ -95,6 +95,10 @@ OpenAge.execute(widgetId);
 await OpenAge.challenge(params);
 ```
 
+Runtime errors keep the popup open long enough to explain what happened.
+If no camera is available, OpenAge tells the user to plug one in and closes
+the popup automatically after 5 seconds.
+
 ## Main Params
 
 | Param     | Values                            |

package/dist/openage.esm.js

@@ -893,6 +893,52 @@ const STYLES = `
 .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 ──────────────────────────────── */
@@ -1019,6 +1065,17 @@ function challengeTemplate() {
   `;
 }
 
+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: '✕',
@@ -1040,7 +1097,7 @@ function resultTemplate(outcome, message) {
 
 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`;
 
@@ -1052,12 +1109,13 @@ const MEDIAPIPE_MODEL =
     'face_landmarker.task';
 
 const FACEAPI_CDN =
-    'https://cdn.jsdelivr.net/npm/' + 'face-api.js@0.22.2/dist/face-api.min.js';
+    '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;
@@ -1538,8 +1596,20 @@ class Widget {
         }
     }
 
-    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() {
@@ -2717,6 +2787,64 @@ function sleep(ms) {
     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.';
+}
+
+async function showErrorStep(widget, error) {
+    const message = resolveChallengeErrorMessage(error);
+
+    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';
 
@@ -2797,9 +2925,7 @@ async function runServerless(widget, emitter) {
         emitResult(widget, emitter, result);
     } catch (error) {
         cleanupLocal();
-        widget.showResult('fail', 'Verification failed');
-        emitter.emit('error', error, widget.id);
-        params.errorCallback?.(error);
+        await handleChallengeError(widget, emitter, error);
     }
 }
 
@@ -2931,9 +3057,7 @@ async function runServer(widget, emitter) {
         cleanupVM(transport);
     } catch (error) {
         cleanupVM();
-        widget.showResult('fail', 'Verification failed');
-        emitter.emit('error', error, widget.id);
-        params.errorCallback?.(error);
+        await handleChallengeError(widget, emitter, error);
     }
 }