@usero/sdk 1.1.6 → 1.1.8

package/dist/plugins/user-test.js

@@ -4,7 +4,12 @@ var DEFAULT_API_URL = "https://usero.io";
 // src/plugins/user-test.ts
 var DEFAULT_OPTIONS = {
   queryParam: "usero_test",
-  chunkSeconds: 30,
+  // 10s (not 30) so at most ~10s of audio is at risk if the tab is torn
+  // down before a flush, and so a session shorter than the old 30s window
+  // still emits at least one chunk (previously its single buffered chunk was
+  // never flushed and its audio was lost). Tradeoff: ~3x the R2 writes /
+  // upload requests per session; 10s is an acceptable balance, don't go lower.
+  chunkSeconds: 10,
   apiUrl: DEFAULT_API_URL,
   testerName: "",
   hideIndicator: false
@@ -217,12 +222,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; }
 
@@ -691,7 +721,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) {
@@ -706,6 +739,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":
@@ -740,13 +775,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";
@@ -1325,8 +1370,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;
@@ -1336,12 +1386,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 {
@@ -1350,6 +1405,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;
@@ -1364,6 +1422,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;
@@ -1513,12 +1575,15 @@ function userTest(options = {}) {
         indicatorRoot: null,
         indicatorState: "recording",
         pageHideHandler: null,
+        visibilityHandler: null,
         options: { ...merged, apiUrl },
         tasks: [],
         tasksPanelOpen: readTasksPanelOpen(),
         outsidePointerHandler: null,
         keydownHandler: null,
         hasMicPermission: false,
+        micAcquiring: true,
+        micFailReason: null,
         muted: false,
         mutedSinceMs: null,
         mutedSegments: [],
@@ -1543,7 +1608,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);
@@ -1613,6 +1683,12 @@ function userTest(options = {}) {
       };
       store.pageHideHandler = pageHide;
       window.addEventListener("pagehide", pageHide);
+      const onVisibilityChange = () => {
+        if (document.visibilityState !== "hidden") return;
+        void finishFlow(store, ctx, { showThanks: false });
+      };
+      store.visibilityHandler = onVisibilityChange;
+      document.addEventListener("visibilitychange", onVisibilityChange);
       void (async () => {
         const adoptId = getAdoptSessionId();
         const created = adoptId ? await adoptSession(apiUrl, adoptId) : await createSession(apiUrl, slug, readTesterName(merged.testerName));
@@ -1648,6 +1724,10 @@ function userTest(options = {}) {
         window.removeEventListener("pagehide", store.pageHideHandler);
         store.pageHideHandler = null;
       }
+      if (store.visibilityHandler) {
+        document.removeEventListener("visibilitychange", store.visibilityHandler);
+        store.visibilityHandler = null;
+      }
       stopRecording(store);
       if (store.outsidePointerHandler) {
         document.removeEventListener("pointerdown", store.outsidePointerHandler, true);
@@ -1672,7 +1752,7 @@ function userTest(options = {}) {
     }
   };
 }
-var __test__ = { getTestSlug, pickMimeType, isMediaRecorderSupported };
+var __test__ = { getTestSlug, pickMimeType, isMediaRecorderSupported, micChipState };
 
 export { __test__, userTest };
 //# sourceMappingURL=user-test.js.map