@ai-matrx/meet 0.11.28 → 0.11.30

package/dist/skins/meet.cjs

@@ -330,6 +330,12 @@ function recordingLabel(state) {
 }
 
 // src/core/attendance.ts
+var IDLE_MEDIA_REGION = {
+  permission: { microphone: "unknown", camera: "unknown" },
+  audioOutput: "ok",
+  notice: null,
+  offer: null
+};
 var IDLE_TRACK = { enabled: false, unavailable: null };
 var IDLE_MEDIA = {
   microphone: IDLE_TRACK,
@@ -481,28 +487,158 @@ var REACTION_TTL_MS = 5e3;
 // src/react/root.tsx
 var import_react3 = require("react");
 
-// src/core/observation.ts
-function observedRole(role, standing) {
-  if (role === "host" || role === "cohost") return role;
-  return isLinkFollower(standing) ? "guest" : "participant";
-}
-function observedDevice(track) {
-  if (track.enabled) return "on";
-  const refused = track.unavailable;
-  if (refused === null) return "muted_by_me";
-  switch (refused.code) {
+// src/core/media-supervisor.ts
+function classifyDeviceFailure(error, permission) {
+  if (permission === "denied") return "denied";
+  switch (error.code) {
     case "permission-denied":
-      return "unavailable:denied";
+      if (/by system/i.test(error.message) || permission === "granted") return "blocked_os";
+      return "denied";
     case "device-not-found":
-      return "unavailable:none";
+      return "none";
     case "device-in-use":
-      return "unavailable:busy";
+      return "busy";
     case "insecure-context":
-      return "unavailable:blocked_site";
+      return "blocked_site";
+    default:
+      return "failed";
+  }
+}
+function deviceNoticeCode(kind, reason) {
+  if (reason === "denied" || reason === "blocked_site" || reason === "blocked_os") {
+    return kind === "microphone" ? "mic-blocked" : "camera-blocked";
+  }
+  return "device-lost";
+}
+function deviceUnavailableReason(track, permission) {
+  if (track.enabled) return null;
+  if (permission === "denied") return "denied";
+  const refused = track.unavailable;
+  if (refused === null) return null;
+  return refused.reason ?? classifyDeviceFailure({ code: refused.code, message: refused.message }, permission);
+}
+function deviceChipLabel(kind, reason) {
+  const what = kind === "microphone" ? "Mic" : "Camera";
+  switch (reason) {
+    case "denied":
+    case "blocked_site":
+    case "blocked_os":
+      return `${what} blocked`;
+    case "none":
+      return kind === "microphone" ? "No microphone found" : "No camera found";
+    case "busy":
+      return `${what} in use by another app`;
+    case "revoked":
+      return `${what} access was turned off`;
     default:
-      return "unavailable:failed";
+      return `${what} didn't start`;
   }
 }
+function deviceFixSteps(kind, reason, where) {
+  const device = kind === "microphone" ? "Microphone" : "Camera";
+  const lower = device.toLowerCase();
+  switch (reason) {
+    case "denied":
+    case "revoked":
+    case "blocked_site":
+      switch (where.browser) {
+        case "firefox":
+          return [`Click the crossed-out ${lower} icon in the address bar`, "Clear the Blocked setting", "Press Try again and choose Allow"];
+        case "safari":
+          return where.os === "ios" ? [`Settings \u203A Apps \u203A Safari \u203A ${device}`, "Choose Allow", "Return here and press Try again"] : ["Safari \u203A Settings for This Website", `Set ${device} to Allow`, "Press Try again"];
+        default:
+          return ["Click the icon left of the web address", `Set ${device} to Allow`, "Press Try again"];
+      }
+    case "blocked_os": {
+      const app = where.browser === "chrome" ? "Google Chrome" : where.browser === "edge" ? "Microsoft Edge" : where.browser === "firefox" ? "Firefox" : "your browser";
+      if (where.os === "mac") return [`System Settings \u203A Privacy & Security \u203A ${device}`, `Turn on ${app}`, "Reopen the browser if asked, then Try again"];
+      if (where.os === "windows") return [`Settings \u203A Privacy & security \u203A ${device}`, `Turn on ${device} access for apps`, "Press Try again"];
+      return [`Allow ${lower} access for ${app} in your system settings`, "Press Try again"];
+    }
+    case "busy":
+      return [`Close other apps using the ${lower} (Zoom, Teams, another tab)`, "Press Try again"];
+    case "none":
+      return [`Connect a ${lower}`, "Press Try again"];
+    default:
+      return [`Pick another ${lower} in Settings`, "Press Try again"];
+  }
+}
+function detectBrowser(userAgent) {
+  if (/Edg\//.test(userAgent)) return "edge";
+  if (/Firefox\//.test(userAgent)) return "firefox";
+  if (/Chrome\/|Chromium\/|CriOS\//.test(userAgent)) return "chrome";
+  if (/Safari\//.test(userAgent)) return "safari";
+  return "other";
+}
+function detectOs(userAgent, maxTouchPoints = 0) {
+  if (/iPhone|iPad|iPod/.test(userAgent)) return "ios";
+  if (/Macintosh/.test(userAgent)) return maxTouchPoints > 1 ? "ios" : "mac";
+  if (/Android/.test(userAgent)) return "android";
+  if (/Windows/.test(userAgent)) return "windows";
+  if (/Linux|CrOS/.test(userAgent)) return "linux";
+  return "other";
+}
+function webMediaPlatform() {
+  const scope = globalThis;
+  const nav = scope.navigator;
+  if (nav === void 0) return null;
+  const ua = nav.userAgent ?? "";
+  const reading = (state) => state === "granted" || state === "denied" || state === "prompt" ? state : "unknown";
+  const query = async (kind) => {
+    try {
+      return await nav.permissions?.query({ name: kind }) ?? null;
+    } catch {
+      return null;
+    }
+  };
+  return {
+    browser: detectBrowser(ua),
+    os: detectOs(ua, nav.maxTouchPoints ?? 0),
+    async queryPermission(kind) {
+      return reading((await query(kind))?.state);
+    },
+    watchPermission(kind, onChange) {
+      let status = null;
+      let stopped = false;
+      void query(kind).then((found) => {
+        if (stopped || found === null) return;
+        status = found;
+        found.onchange = () => onChange(reading(found.state));
+      });
+      return () => {
+        stopped = true;
+        if (status !== null) status.onchange = null;
+      };
+    },
+    async listDevices() {
+      try {
+        return await nav.mediaDevices?.enumerateDevices() ?? [];
+      } catch {
+        return [];
+      }
+    },
+    onVisible(callback) {
+      const doc = scope.document;
+      if (doc === void 0) return () => void 0;
+      const handler = () => {
+        if (doc.visibilityState === "visible") callback();
+      };
+      doc.addEventListener("visibilitychange", handler);
+      return () => doc.removeEventListener("visibilitychange", handler);
+    }
+  };
+}
+
+// src/core/observation.ts
+function observedRole(role, standing) {
+  if (role === "host" || role === "cohost") return role;
+  return isLinkFollower(standing) ? "guest" : "participant";
+}
+function observedDevice(track, permission = "unknown") {
+  if (track.enabled) return "on";
+  const reason = deviceUnavailableReason(track, permission);
+  return reason === null ? "muted_by_me" : `unavailable:${reason}`;
+}
 function endedRecord(snapshot, given) {
   const record = snapshot?.meeting ?? given;
   return record !== null && record.endedAt !== null;
@@ -534,9 +670,10 @@ function observe(input) {
     hostPresent: inCall && snapshot !== null ? snapshot.participants.some((p) => ADMITTER_ROLES.has(p.role)) : snapshot !== null && isWaitingPhase(snapshot.phase) ? snapshot.waiting?.admittersPresent ?? null : null,
     lobbyCount: canAdmit && snapshot !== null ? snapshot.lobby.filter((entry) => entry.state === "knocking").length : 0,
     recording: snapshot?.recording === "recording" || snapshot?.recording === "stopping",
-    audioBlocked: null,
-    camera: deviceInPlay && snapshot !== null ? observedDevice(snapshot.media.camera) : null,
-    microphone: deviceInPlay && snapshot !== null ? observedDevice(snapshot.media.microphone) : null
+    // S6c: the autoplay region is known only inside the room (no remote audio exists elsewhere).
+    audioBlocked: inCall && snapshot !== null ? snapshot.mediaRegion.audioOutput === "blocked" : null,
+    camera: deviceInPlay && snapshot !== null ? observedDevice(snapshot.media.camera, snapshot.mediaRegion.permission.camera) : null,
+    microphone: deviceInPlay && snapshot !== null ? observedDevice(snapshot.media.microphone, snapshot.mediaRegion.permission.microphone) : null
   };
 }
 function staticObservation(phase, reason = null) {
@@ -574,14 +711,14 @@ function participantAttributes(p) {
     "data-meet-participant-role": observedRole(p.role, p.standing),
     "data-meet-participant-self": String(p.isLocal)
   };
-  const quality = observedQuality(p.quality);
+  const quality = p.reconnecting === true ? "reconnecting" : observedQuality(p.quality);
   if (quality !== null) attrs["data-meet-participant-connection"] = quality;
   return attrs;
 }
-function microphoneNoticeCode(track) {
-  const refused = track.unavailable;
-  if (refused === null) return null;
-  return refused.code === "permission-denied" || refused.code === "insecure-context" ? "mic-blocked" : "device-lost";
+function microphoneNoticeCode(track, permission = "unknown") {
+  const reason = deviceUnavailableReason(track, permission);
+  if (reason === null) return null;
+  return deviceNoticeCode("microphone", reason) === "mic-blocked" ? "mic-blocked" : "device-lost";
 }
 
 // src/react/provider.tsx
@@ -1358,6 +1495,26 @@ function useConsentNotice() {
   if (agent === null) return null;
   return `${agent.displayName} is in this meeting: it is transcribing what is said and writing notes everyone here can read.`;
 }
+function useMediaSupervisor() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const engine = host?.engine ?? null;
+  return {
+    region: snapshot?.mediaRegion ?? IDLE_MEDIA_REGION,
+    where: (0, import_react5.useMemo)(() => {
+      const platform = webMediaPlatform();
+      return { browser: platform?.browser ?? "other", os: platform?.os ?? "other" };
+    }, []),
+    enableAudio: (0, import_react5.useCallback)(async () => engine?.enableAudio(), [engine]),
+    acceptOffer: (0, import_react5.useCallback)(async () => engine?.acceptDeviceOffer(), [engine]),
+    dismissOffer: (0, import_react5.useCallback)(() => engine?.dismissDeviceOffer(), [engine]),
+    dismissNotice: (0, import_react5.useCallback)(() => engine?.dismissDeviceNotice(), [engine]),
+    retry: (0, import_react5.useCallback)(
+      async (kind) => kind === "microphone" ? engine?.setMicrophoneEnabled(true) : engine?.setCameraEnabled(true),
+      [engine]
+    )
+  };
+}
 function useLocalMedia() {
   const snapshot = useMeetSnapshot();
   return snapshot?.media ?? IDLE_MEDIA;
@@ -1694,6 +1851,7 @@ function useMeetCore() {
       reason: snapshot?.reason ?? null,
       phaseNotice: snapshot?.phaseNotice ?? null,
       connection: snapshot?.connection ?? "stable",
+      connectionBanner: snapshot?.connectionBanner ?? false,
       share: snapshot?.share ?? NO_SHARE,
       call: snapshot?.call ?? null,
       actions
@@ -2976,7 +3134,8 @@ function ParticipantTile({
             participant.displayName,
             participant.isLocal ? " (you)" : "",
             participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "AI" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RoleBadge, { role: participant.role, standing: participant.standing })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RoleBadge, { role: participant.role, standing: participant.standing }),
+            participant.reconnecting === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Reconnecting\u2026" }) : null
           ] }),
           !participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QualityBars, { quality: participant.quality })
@@ -3019,6 +3178,12 @@ function QualityBars({ quality }) {
   const label = quality === "lost" ? "Connection lost" : quality === "poor" ? "Poor connection" : `Connection ${quality}`;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SignalIcon, { bars, width: 14, height: 14 }) });
 }
+var CONNECTION_BANNER = {
+  signal_reconnecting: "Reconnecting\u2026",
+  reconnecting: "Reconnecting\u2026",
+  offline: "You're offline. Reconnecting when your internet is back\u2026",
+  server_unreachable: "Can't reach the meeting server. Retrying\u2026"
+};
 function Stage({ pageSize }) {
   const stage = useStage(pageSize);
   const columns = gridColumns(stage.tiles.length);
@@ -3439,12 +3604,83 @@ function Toast({ text, failed, onDone }) {
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 14, height: 14 }) })
   ] });
 }
+function MediaNotices() {
+  const media = useLocalMedia();
+  const { region, where, enableAudio, acceptOffer, dismissOffer, dismissNotice, retry } = useMediaSupervisor();
+  const [fixing, setFixing] = (0, import_react10.useState)(null);
+  const chips = ["microphone", "camera"].flatMap((kind) => {
+    const reason = deviceUnavailableReason(media[kind], region.permission[kind]);
+    return reason === null ? [] : [{ kind, reason }];
+  });
+  const fixReason = fixing === null ? null : chips.find((chip) => chip.kind === fixing)?.reason ?? null;
+  const notice = region.notice;
+  const offer = region.offer;
+  const name = (kind) => kind === "microphone" ? "Microphone" : "Camera";
+  if (chips.length === 0 && region.audioOutput !== "blocked" && notice === null && offer === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__media-notices", children: [
+    region.audioOutput === "blocked" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__media-pill", role: "alert", "data-meet-notice": "audio-blocked", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Sound is paused in this tab" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void enableAudio(), children: "Enable sound" })
+    ] }) : null,
+    chips.map(({ kind, reason }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__media-pill", role: "status", "data-meet-notice": deviceNoticeCode(kind, reason), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: deviceChipLabel(kind, reason) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__primary mx-meet__primary--small",
+          "aria-label": kind === "microphone" ? "Fix microphone" : "Fix camera",
+          "aria-expanded": fixing === kind,
+          onClick: () => setFixing(fixing === kind ? null : kind),
+          children: "Fix"
+        }
+      )
+    ] }, kind)),
+    fixing !== null && fixReason !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__popover mx-meet__fix-sheet", role: "dialog", "aria-label": `Fix ${name(fixing).toLowerCase()}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { className: "mx-meet__fix-steps", children: deviceFixSteps(fixing, fixReason, where).map((step) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: step }, step)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__fix-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__primary mx-meet__primary--small",
+            onClick: () => {
+              const kind = fixing;
+              setFixing(null);
+              void retry(kind);
+            },
+            children: "Try again"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Close", onClick: () => setFixing(null), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 14, height: 14 }) })
+      ] })
+    ] }) : null,
+    notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: "mx-meet__media-pill",
+        role: "status",
+        ...notice.outcome === "lost" ? { "data-meet-notice": "device-lost" } : {},
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: notice.outcome === "switched" ? `${notice.from || name(notice.kind)} disconnected \xB7 now using ${notice.to || "the default"}` : `${notice.from || name(notice.kind)} disconnected` }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismissNotice, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 14, height: 14 }) })
+        ]
+      }
+    ) : null,
+    offer !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__media-pill", role: "status", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: `New ${offer.kind}: ${offer.label || name(offer.kind)}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void acceptOffer(), children: "Use it" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismissOffer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 14, height: 14 }) })
+    ] }) : null
+  ] });
+}
 function MeetingOverlays() {
   const reactions = useReactions();
   const { notice, dismiss } = useModerationNotice();
   const room = useRoom();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReactionOverlay, { reactions }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MediaNotices, {}),
     notice !== null && notice.kind !== "removed" ? (
       // A host's request ("the host is asking you to unmute"), not an error:
       // an assertive status, so it is announced at once without being filed
@@ -4726,7 +4962,7 @@ function MeetSkinRoom({
       headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
       isHost ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HostMenu, {}) : null
     ] }),
-    core.connection !== "stable" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
+    core.connectionBanner && core.connection !== "stable" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__banner", role: "status", "data-meet-notice": `connection-${core.connection}`, children: CONNECTION_BANNER[core.connection] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShareNotice, {}),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Stage, {}),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Captions, {}),
@@ -4760,7 +4996,7 @@ var REFUSED_TITLES = {
   registration_required: "Register to join this meeting"
 };
 function ExitScreen({ onLeave }) {
-  const { phase, reason, host, snapshot, actions, call } = useMeetCore();
+  const { phase, reason, host, snapshot, actions, call, connection } = useMeetCore();
   const [busy, setBusy] = (0, import_react10.useState)(false);
   const failure = snapshot?.failure ?? null;
   const rejoin = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -4816,7 +5052,7 @@ function ExitScreen({ onLeave }) {
         break;
       case "disconnected":
         title = "You lost your connection to the meeting";
-        line = failure?.remedy ?? "Check your internet connection, then rejoin.";
+        line = connection === "offline" ? "You're offline. You'll rejoin automatically when your internet is back." : connection === "server_unreachable" ? "Can't reach the meeting server. You'll rejoin automatically when it answers." : failure?.remedy ?? "Check your internet connection, then rejoin.";
         notice = "disconnected";
         actionsNode = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
           rejoin,