@usero/sdk 1.1.5 → 1.1.7

package/dist/plugins/user-test.cjs

@@ -219,12 +219,37 @@ function buildIndicator(host, store, callbacks) {
 			color: #fcd34d;
 		}
 		.mic[data-mic-state="muted"]:hover { background: rgba(251, 191, 36, 0.26); }
-		.mic[data-mic-state="none"] {
-			background: rgba(255,255,255,0.04);
-			color: rgba(255,255,255,0.55);
+		/* Connecting: getUserMedia pending. Steady amber tint reads as "working",
+		   distinct from the live red pulse and the failed state below. The icon
+		   gets a gentle non-pulsing breathe so it feels alive without alarming. */
+		.mic[data-mic-state="connecting"] {
+			background: rgba(251, 191, 36, 0.14);
+			border-color: rgba(251, 191, 36, 0.32);
+			color: #fcd34d;
 			cursor: default;
 		}
-		.mic[data-mic-state="none"]:hover { background: rgba(255,255,255,0.04); }
+		.mic[data-mic-state="connecting"]:hover { background: rgba(251, 191, 36, 0.14); }
+		.mic[data-mic-state="connecting"] .mic-icon {
+			color: #fbbf24;
+			animation: micBreathe 1.4s ease-in-out infinite;
+		}
+		/* Failed terminal state, actionable. Tappable affordance: clearer border,
+		   pointer cursor, brightens on hover/focus to invite the retry tap. */
+		.mic[data-mic-state="none"] {
+			background: rgba(255,255,255,0.05);
+			border-color: rgba(255,255,255,0.14);
+			color: rgba(255,255,255,0.72);
+			cursor: pointer;
+		}
+		.mic[data-mic-state="none"]:hover {
+			background: rgba(255,255,255,0.12);
+			border-color: rgba(255,255,255,0.24);
+			color: #fff;
+		}
+		@keyframes micBreathe {
+			0%, 100% { opacity: 0.55; }
+			50% { opacity: 1; }
+		}
 		.mic-icon { width: 13px; height: 13px; display: inline-block; flex-shrink: 0; }
 		.mic-label { font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
 
@@ -693,7 +718,10 @@ function micChipState(store) {
   if (store.indicatorState === "finishing" || store.indicatorState === "done" || store.indicatorState === "error") {
     return "inactive";
   }
-  if (!store.hasMicPermission) return "none";
+  if (!store.hasMicPermission) {
+    if (store.micAcquiring) return "connecting";
+    return "none";
+  }
   return store.muted ? "muted" : "recording";
 }
 function renderIndicatorState(store) {
@@ -708,6 +736,8 @@ function renderIndicatorState(store) {
   dot.setAttribute("data-state", store.indicatorState);
   const chipState = micChipState(store);
   mic.setAttribute("data-mic-state", chipState === "inactive" ? "none" : chipState);
+  mic.removeAttribute("data-mic-fail");
+  if (chipState === "none") mic.setAttribute("data-mic-fail", store.micFailReason ?? "blocked");
   switch (store.indicatorState) {
     case "recording":
     case "no-audio":
@@ -742,13 +772,23 @@ function renderIndicatorState(store) {
       mic.setAttribute("aria-pressed", "true");
       mic.removeAttribute("tabindex");
       break;
-    case "none":
-      micIcon.innerHTML = MIC_MUTED_ICON_SVG;
-      micLabel.textContent = "No mic, replay only";
-      mic.setAttribute("aria-label", "Microphone not granted, replay only");
+    case "connecting":
+      micIcon.innerHTML = MIC_ICON_SVG;
+      micLabel.textContent = "Connecting mic";
+      mic.setAttribute("aria-label", "Connecting microphone");
       mic.setAttribute("aria-pressed", "false");
       mic.setAttribute("tabindex", "-1");
       break;
+    case "none": {
+      micIcon.innerHTML = MIC_MUTED_ICON_SVG;
+      const failLabel = store.micFailReason === "not-found" ? "No mic found, tap to retry" : "Mic blocked, tap to retry";
+      const failAria = store.micFailReason === "not-found" ? "No microphone found, tap to retry. Replay continues." : "Microphone blocked, tap to retry. Replay continues.";
+      micLabel.textContent = failLabel;
+      mic.setAttribute("aria-label", failAria);
+      mic.setAttribute("aria-pressed", "false");
+      mic.removeAttribute("tabindex");
+      break;
+    }
     case "inactive":
       micIcon.innerHTML = MIC_ICON_SVG;
       micLabel.textContent = store.indicatorState === "finishing" ? "Saving" : store.indicatorState === "done" ? "Saved" : "Save failed";
@@ -1327,8 +1367,13 @@ function enqueueChunk(store, ctx, blob) {
   });
 }
 async function startRecording(store, ctx) {
+  store.micAcquiring = true;
+  store.micFailReason = null;
+  renderIndicatorState(store);
   if (!isMediaRecorderSupported()) {
     ctx.logger.warn("MediaRecorder not supported, continuing without audio");
+    store.micAcquiring = false;
+    store.micFailReason = "unsupported";
     store.indicatorState = "no-audio";
     renderIndicatorState(store);
     return;
@@ -1338,12 +1383,17 @@ async function startRecording(store, ctx) {
     stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   } catch (err) {
     ctx.logger.warn("mic permission denied or unavailable", err);
+    store.micAcquiring = false;
+    const name = err instanceof Error ? err.name : "";
+    store.micFailReason = name === "NotFoundError" || name === "DevicesNotFoundError" ? "not-found" : "blocked";
     store.indicatorState = "no-audio";
     renderIndicatorState(store);
     return;
   }
   store.stream = stream;
   store.hasMicPermission = true;
+  store.micAcquiring = false;
+  store.micFailReason = null;
   const mimeType = pickMimeType();
   let recorder;
   try {
@@ -1352,6 +1402,9 @@ async function startRecording(store, ctx) {
     ctx.logger.error("MediaRecorder construction failed", err);
     stream.getTracks().forEach((t) => t.stop());
     store.stream = null;
+    store.hasMicPermission = false;
+    store.micAcquiring = false;
+    store.micFailReason = "unsupported";
     store.indicatorState = "no-audio";
     renderIndicatorState(store);
     return;
@@ -1366,6 +1419,10 @@ async function startRecording(store, ctx) {
     ctx.logger.error("MediaRecorder error", event);
   });
   recorder.start(store.options.chunkSeconds * 1e3);
+  if (store.indicatorState === "no-audio") {
+    store.indicatorState = "recording";
+  }
+  renderIndicatorState(store);
 }
 function toggleMute(store) {
   if (!store.stream || !store.hasMicPermission) return false;
@@ -1521,6 +1578,8 @@ function userTest(options = {}) {
         outsidePointerHandler: null,
         keydownHandler: null,
         hasMicPermission: false,
+        micAcquiring: true,
+        micFailReason: null,
         muted: false,
         mutedSinceMs: null,
         mutedSegments: [],
@@ -1545,7 +1604,12 @@ function userTest(options = {}) {
       };
       const onToggleTasks = () => setPanelOpen(!store.tasksPanelOpen);
       const onToggleMute = () => {
-        if (!store.hasMicPermission) return;
+        if (!store.hasMicPermission) {
+          if (!store.micAcquiring && store.indicatorState !== "finishing" && store.indicatorState !== "done" && store.indicatorState !== "error") {
+            void startRecording(store, ctx);
+          }
+          return;
+        }
         const ok = toggleMute(store);
         if (!ok) return;
         if (store.muted) showMuteToast(store);
@@ -1674,7 +1738,7 @@ function userTest(options = {}) {
     }
   };
 }
-var __test__ = { getTestSlug, pickMimeType, isMediaRecorderSupported };
+var __test__ = { getTestSlug, pickMimeType, isMediaRecorderSupported, micChipState };
 
 exports.__test__ = __test__;
 exports.userTest = userTest;