@nualang/nualang-ui-components 0.1.1422 → 0.1.1423

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGame/RoleplayGame.js

@@ -119,10 +119,11 @@ function RoleplayGame({
     classes
   } = useStyles();
   const theme = useTheme();
+  const isDisabled = isGameHidden || isRoleplayEmpty;
   return /*#__PURE__*/_jsxs(ListItem, {
     alignItems: "flex-start",
-    disabled: isGameHidden || isRoleplayEmpty,
-    onClick: authenticated ? () => handleSelectRoleplayGame(gameId) : () => handleSignIn(),
+    disabled: isDisabled,
+    onClick: isDisabled ? undefined : authenticated ? () => handleSelectRoleplayGame(gameId) : () => handleSignIn(),
     button: true,
     divider: true,
     classes: {
@@ -143,7 +144,11 @@ function RoleplayGame({
       },
       "&:focus": {
         backgroundColor: "transparent"
-      }
+      },
+      ...(isDisabled && {
+        opacity: 0.5,
+        pointerEvents: "none"
+      })
     },
     children: [/*#__PURE__*/_jsx(ListItemAvatar, {
       children: gameIcon ? /*#__PURE__*/_jsx(Avatar, {

package/dist/hooks/useRecognition.js

@@ -9,14 +9,46 @@ const ENDPOINT = import.meta.env.REACT_APP_GCLOUD_SPEECH || "wss://speech-rec-se
 const socket = io(ENDPOINT, {
   withCredentials: true,
   autoConnect: false,
-  transports: ["websocket", "polling"] // use WebSocket, fallback to polling if necessary
-});
-socket.on("connect_error", error => {
-  // revert to classic upgrade
-  // socket.io.opts.transports = ["polling", "websocket"];
-  console.error(error);
+  transports: ["websocket", "polling"],
+  // use WebSocket, fallback to polling if necessary
+  // Without this, when websocket is listed first and fails outright (e.g. a
+  // school firewall blocking the WS upgrade), engine.io does NOT fall back to
+  // polling for that attempt - it just fails the whole connect_error and retries
+  // websocket again on the next reconnection attempt, looping forever on
+  // networks that block websocket entirely.
+  tryAllTransports: true
 });
 
+/**
+ * Builds a single diagnostic message for a connect_error analytics event.
+ * `error.message` for a WebSocket transport failure is (by design of the
+ * browser WebSocket API) always the generic string "websocket error" - the
+ * spec deliberately withholds the underlying reason (DNS/TLS/refused/timed
+ * out) from JS to avoid leaking network topology info to a page. `error.type`
+ * and `error.description` are the only other fields engine.io-client
+ * attaches, and for polling transport failures `description` is often the
+ * XHR object (so `description.status` gives the HTTP status code) - folded
+ * into one field here rather than several, since they're only ever useful
+ * together and only for this one event.
+ */
+function describeConnectError(error) {
+  const description = error?.description;
+  let descriptionDetail = "none";
+  if (description && typeof description === "object") {
+    if (typeof description.status === "number") {
+      descriptionDetail = `http_status_${description.status}`;
+    } else if (description.message) {
+      descriptionDetail = `${description.message}`;
+    }
+  } else if (description) {
+    descriptionDetail = `${description}`;
+  }
+  const transport = socket.io?.engine?.transport?.name;
+  return {
+    A4_error_message: `${error?.message} (type=${error?.type}, description=${descriptionDetail}, transport=${transport}, online=${navigator.onLine})`
+  };
+}
+
 // audioStream constraints
 const constraints = {
   audio: true,
@@ -24,6 +56,21 @@ const constraints = {
 };
 const version = ["v1", "v2"].includes(import.meta.env.REACT_APP_SPEECH_RECOGNITION_VERSION) ? import.meta.env.REACT_APP_SPEECH_RECOGNITION_VERSION : "v1";
 const audioRecordingLimit = 60000;
+
+// Safari (16.4+) exposes a page-global AudioSession whose category WebKit
+// otherwise flips to playback-only when TTS/<audio> plays, after which
+// getUserMedia throws "AudioSession category is not compatible with audio
+// capture". Pinning it to "play-and-record" keeps mic capture available even
+// after audio playback. No-op where the API is unsupported (Chrome/Firefox).
+function ensurePlayAndRecordAudioSession() {
+  try {
+    if (typeof navigator !== "undefined" && navigator.audioSession) {
+      navigator.audioSession.type = "play-and-record";
+    }
+  } catch (error) {
+    logger.warn(`Failed to set audioSession type: ${error}`);
+  }
+}
 export default function useRecognition(props = {}) {
   const {
     currentPhraseText,
@@ -98,6 +145,12 @@ export default function useRecognition(props = {}) {
       throw e;
     }
   }
+
+  // Set as early as the exercise mounts, before any TTS playback can claim a
+  // playback-only session on Safari.
+  useEffect(() => {
+    ensurePlayAndRecordAudioSession();
+  }, []);
   useEffect(() => {
     function onConnect() {
       hasAlertedConnectionErrorRef.current = false;
@@ -105,9 +158,13 @@ export default function useRecognition(props = {}) {
       // socket.io.engine.transport.name is "polling" here only when the
       // websocket attempt failed and it fell back - the clearest signal we
       // have that a student couldn't connect via websocket.
+      const transport = socket.io.engine.transport.name;
       trackConnectionDiagnostics("speech_recognition_socket_connected", {
-        A4_transport: socket.io.engine.transport.name
+        A4_transport: transport
       });
+      if (transport === "polling") {
+        recognitionAlert("Using a slower backup connection for speech - ask your school's IT team to allow WebSocket connections.", "warning");
+      }
     }
     function onDisconnect() {
       setIsSocketConnected(false);
@@ -151,9 +208,7 @@ export default function useRecognition(props = {}) {
     }
     function onConnectError(error) {
       console.error(error);
-      trackConnectionDiagnostics("speech_recognition_connect_error", {
-        A4_error_message: `${error?.message}`
-      });
+      trackConnectionDiagnostics("speech_recognition_connect_error", describeConnectError(error));
       // Without this, a blocked/failed connection (e.g. a school network
       // firewall blocking the websocket) leaves the mic button silently
       // disabled with no feedback to the student.
@@ -342,6 +397,8 @@ export default function useRecognition(props = {}) {
         }
       };
       if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        // Re-assert in case TTS playback downgraded the session since mount.
+        ensurePlayAndRecordAudioSession();
         navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).then(() => {
           isStartingRef.current = false;
           // socket.connected is checked directly (not the isSocketConnected

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1422",
+  "version": "0.1.1423",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -83,7 +83,7 @@
     "react-swipeable-views-utils": "^0.14.0",
     "regenerator-runtime": "^0.14.1",
     "rehype-raw": "^7.0.0",
-    "socket.io-client": "^4.7.1",
+    "socket.io-client": "^4.8.3",
     "styled-components": "^6.3.8",
     "tss-react": "^4.9.16",
     "uifx": "^2.0",