@poolse/react 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -4,6 +4,48 @@ All notable changes to `@poolse/react` are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions follow
 [semver](https://semver.org).
 
+## [2.15.0] — 2026-08-23
+
+### Fixed
+
+- **Answering a call then hanging up left the other side in it.**
+  `accept()` clears `incoming`, and a callee never had an `outgoing`, so
+  `hangUp()` resolved no call id and returned before signalling. The
+  call id of the call in progress is now tracked in its own right.
+- **A late `call:cancelled` tore down a live call.** The guard fell
+  through whenever `incoming` was null — exactly the state `accept()`
+  leaves behind — so a caller's ring timeout firing as the callee
+  answered dropped the callee straight out of the call.
+- **Every call signal is now matched to the call it belongs to.**
+  `accepted`, `declined`, `busy`, `ended` and `cancelled` are ignored
+  unless they name the call this client is actually in. A signal about a
+  previous call could previously end the current one.
+- **A room could be left connected with nothing holding it.** If a call
+  ended while its media was still connecting, the cleanup ran before
+  `join()` resolved, found nothing to release, and the connection
+  completed into a room no component held — audio still flowing, no UI,
+  and no way to hang up. Both `useCallRoom` and `useVoiceRoom` now
+  release a room that was superseded mid-connect.
+- **`markBusy` could reject a call the user was being shown.** The
+  decision ran inside a `setPhase` updater; updaters must be pure, and
+  React may run them more than once.
+
+## [2.14.1] — 2026-08-23
+
+### Added
+
+- **`useCallRoom().refreshDevices`** — re-read the device list on
+  demand. Devices are already re-read on connect and on hardware
+  changes; this covers the case neither does, which is that a browser
+  only reveals device ids and labels once the page holds a matching
+  permission, and that moment is not subscribable. Call it when opening
+  a picker.
+
+### Fixed
+
+- Device lists inherited the `MediaDeviceInfo` spread bug from
+  `@poolse/sdk`. See its 2.14.1 entry.
+
 ## [2.14.0] — 2026-08-23
 
 ### Added

package/dist/index.cjs

@@ -1082,6 +1082,7 @@ function useCallRoom(conversationId, opts) {
   const optsRef = react.useRef(opts);
   optsRef.current = opts;
   const joined = react.useRef(false);
+  const held = react.useRef(null);
   const room = react.useMemo(() => {
     if (!conversationId) return null;
     return poolse.call(conversationId, {
@@ -1121,6 +1122,7 @@ function useCallRoom(conversationId, opts) {
     }
     setStatus(room.getStatus());
     setParticipants(room.getParticipants());
+    held.current = room;
     setAlone(false);
     const offStatus = room.onStatus(setStatus);
     const offRoster = room.onParticipants((next) => {
@@ -1136,6 +1138,7 @@ function useCallRoom(conversationId, opts) {
       offAlone();
       offDevices();
       offError();
+      held.current = null;
       if (joined.current) {
         joined.current = false;
         room.leave();
@@ -1143,14 +1146,19 @@ function useCallRoom(conversationId, opts) {
     };
   }, [room, sync, refreshDevices]);
   const join = react.useCallback(async () => {
-    if (!room) return false;
+    const target = room;
+    if (!target) return false;
     setError(null);
     try {
-      const connected = await room.join();
+      const connected = await target.join();
+      if (held.current !== target) {
+        if (connected) target.leave();
+        return false;
+      }
       joined.current = connected;
       setSfuAvailable(connected);
-      sync(room);
-      if (connected) refreshDevices(room);
+      sync(target);
+      if (connected) refreshDevices(target);
       return connected;
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1192,6 +1200,9 @@ function useCallRoom(conversationId, opts) {
     await room.switchCamera();
     setFacing(room.getFacingMode());
   }, [room]);
+  const refresh = react.useCallback(() => {
+    if (room) refreshDevices(room);
+  }, [room, refreshDevices]);
   const selectDevice = react.useCallback(
     async (kind, deviceId) => {
       if (!room) return;
@@ -1212,6 +1223,7 @@ function useCallRoom(conversationId, opts) {
     alone,
     devices,
     activeDevices,
+    refreshDevices: refresh,
     error,
     sfuAvailable,
     join,
@@ -1253,12 +1265,14 @@ function useVoiceRoom(conversationId, opts = {}) {
   const [error, setError] = react.useState(null);
   const optsRef = react.useRef(opts);
   const joined = react.useRef(false);
+  const held = react.useRef(null);
   const room = react.useMemo(
     () => conversationId ? poolse.realtime.voice(conversationId, optsRef.current) : null,
     [poolse, conversationId]
   );
   react.useEffect(() => {
     if (!room) return;
+    held.current = room;
     setStatus(room.getStatus());
     setParticipants(room.getParticipants());
     setMuted(room.isMuted());
@@ -1269,6 +1283,7 @@ function useVoiceRoom(conversationId, opts = {}) {
       offStatus();
       offRoster();
       offError();
+      held.current = null;
       if (joined.current) {
         joined.current = false;
         room.leave();
@@ -1276,10 +1291,15 @@ function useVoiceRoom(conversationId, opts = {}) {
     };
   }, [room]);
   const join = react.useCallback(async () => {
-    if (!room) return;
+    const target = room;
+    if (!target) return;
     setError(null);
     try {
-      await room.join();
+      await target.join();
+      if (held.current !== target) {
+        target.leave();
+        return;
+      }
       joined.current = true;
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1305,10 +1325,22 @@ function useCalls(userId, opts = {}) {
   const ringTimeoutMs = opts.ringTimeoutMs ?? 45e3;
   const poolse = usePoolse();
   const [phase, setPhase] = react.useState("idle");
+  const phaseRef = react.useRef("idle");
+  phaseRef.current = phase;
   const [incoming, setIncoming] = react.useState(null);
   const [outgoing, setOutgoing] = react.useState(null);
   const [activeConversationId, setActiveConversationId] = react.useState(null);
+  const [activeCallId, setActiveCallId] = react.useState(null);
   const [error, setError] = react.useState(null);
+  const incomingRef = react.useRef(null);
+  incomingRef.current = incoming;
+  const outgoingRef = react.useRef(null);
+  outgoingRef.current = outgoing;
+  const activeCallIdRef = react.useRef(null);
+  activeCallIdRef.current = activeCallId;
+  const isCurrent = react.useCallback((callId) => {
+    return callId === activeCallIdRef.current || callId === incomingRef.current?.callId || callId === outgoingRef.current?.callId;
+  }, []);
   const actionsRef = react.useRef({
     cancel: async () => {
     },
@@ -1319,40 +1351,45 @@ function useCalls(userId, opts = {}) {
   react.useEffect(() => {
     if (!calls) return;
     const offIncoming = calls.onIncoming((call2) => {
-      setPhase((current) => {
-        if (current !== "idle") {
-          void calls.markBusy(call2).catch(() => {
-          });
-          return current;
-        }
-        setIncoming(call2);
-        return "ringing-in";
-      });
+      if (phaseRef.current !== "idle") {
+        void calls.markBusy(call2).catch(() => {
+        });
+        return;
+      }
+      setIncoming(call2);
+      setPhase("ringing-in");
     });
     const offAccepted = calls.onAccepted((call2) => {
+      if (outgoingRef.current && call2.callId !== outgoingRef.current.callId) return;
       setPhase("active");
       setActiveConversationId(call2.conversationId);
+      setActiveCallId(call2.callId);
     });
-    const offDeclined = calls.onDeclined(() => {
+    const offDeclined = calls.onDeclined((call2) => {
+      if (!isCurrent(call2.callId)) return;
       setPhase("declined");
       setOutgoing(null);
+      setActiveCallId(null);
     });
-    const offBusy = calls.onBusy(() => {
+    const offBusy = calls.onBusy((call2) => {
+      if (!isCurrent(call2.callId)) return;
       setPhase("busy");
       setOutgoing(null);
+      setActiveCallId(null);
     });
-    const offEnded = calls.onEnded(() => {
+    const offEnded = calls.onEnded((call2) => {
+      if (!isCurrent(call2.callId)) return;
       setPhase("idle");
       setIncoming(null);
       setOutgoing(null);
       setActiveConversationId(null);
+      setActiveCallId(null);
     });
     const offCancelled = calls.onCancelled((call2) => {
-      setIncoming((current) => {
-        if (current && current.callId !== call2.callId) return current;
-        setPhase("idle");
-        return null;
-      });
+      if (call2.callId !== incomingRef.current?.callId) return;
+      setIncoming(null);
+      setPhase("idle");
+      setActiveCallId(null);
     });
     return () => {
       offIncoming();
@@ -1362,7 +1399,7 @@ function useCalls(userId, opts = {}) {
       offEnded();
       offCancelled();
     };
-  }, [calls]);
+  }, [calls, isCurrent]);
   const call = react.useCallback(
     async (conversationId, media2 = "audio") => {
       if (!calls) return;
@@ -1370,6 +1407,7 @@ function useCalls(userId, opts = {}) {
       try {
         const placed = await calls.invite(conversationId, media2);
         setOutgoing(placed);
+        setActiveCallId(placed.callId);
         setPhase("ringing-out");
       } catch (err) {
         setError(err instanceof Error ? err : new Error(String(err)));
@@ -1385,6 +1423,7 @@ function useCalls(userId, opts = {}) {
       try {
         await calls.accept(target);
         setActiveConversationId(target.conversationId);
+        setActiveCallId(target.callId);
         setPhase("active");
         setIncoming(null);
       } catch (err) {
@@ -1403,6 +1442,7 @@ function useCalls(userId, opts = {}) {
         setError(err instanceof Error ? err : new Error(String(err)));
       } finally {
         setIncoming(null);
+        setActiveCallId(null);
         setPhase("idle");
       }
     },
@@ -1416,6 +1456,7 @@ function useCalls(userId, opts = {}) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setOutgoing(null);
+      setActiveCallId(null);
       setPhase("idle");
     }
   }, [calls, outgoing]);
@@ -1433,7 +1474,7 @@ function useCalls(userId, opts = {}) {
   }, [phase, ringTimeoutMs]);
   const hangUp = react.useCallback(async () => {
     const conversationId = activeConversationId ?? incoming?.conversationId ?? outgoing?.conversationId;
-    const callId = incoming?.callId ?? outgoing?.callId;
+    const callId = activeCallId ?? incoming?.callId ?? outgoing?.callId;
     try {
       if (!calls || !callId || !conversationId) return;
       if (phase === "ringing-out" && outgoing) {
@@ -1450,13 +1491,15 @@ function useCalls(userId, opts = {}) {
       setIncoming(null);
       setOutgoing(null);
       setActiveConversationId(null);
+      setActiveCallId(null);
     }
-  }, [calls, phase, incoming, outgoing, activeConversationId]);
+  }, [calls, phase, incoming, outgoing, activeConversationId, activeCallId]);
   const reset = react.useCallback(() => {
     setPhase("idle");
     setIncoming(null);
     setOutgoing(null);
     setActiveConversationId(null);
+    setActiveCallId(null);
     setError(null);
   }, []);
   const media = incoming?.media ?? outgoing?.media ?? "audio";