@tn3w/openage 1.0.3 → 1.0.5

package/dist/openage.umd.js

@@ -899,6 +899,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 +1071,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 +1103,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`;
 
@@ -1058,12 +1115,13 @@
       '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;
@@ -1544,8 +1602,20 @@
           }
       }
 
-      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() {
@@ -2723,6 +2793,64 @@
       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';
 
@@ -2803,9 +2931,7 @@
           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);
       }
   }
 
@@ -2937,9 +3063,7 @@
           cleanupVM(transport);
       } catch (error) {
           cleanupVM();
-          widget.showResult('fail', 'Verification failed');
-          emitter.emit('error', error, widget.id);
-          params.errorCallback?.(error);
+          await handleChallengeError(widget, emitter, error);
       }
   }