@poolse/react 2.14.0 → 2.15.0

package/dist/index.d.cts

@@ -532,6 +532,17 @@ interface UseCallRoom {
     activeDevices: Partial<Record<CallDeviceKind, string>>;
     /** Move the call onto another camera, microphone or output. */
     selectDevice: (kind: CallDeviceKind, deviceId: string) => Promise<void>;
+    /**
+     * Re-read the device list.
+     *
+     * Called for you on connect and whenever devices change, so this is
+     * for the case neither covers: a browser only reveals device ids and
+     * labels once the page holds a matching permission, and the moment
+     * that permission lands is not an event you can subscribe to. Call it
+     * when opening a picker and the list will be right by the time it is
+     * on screen.
+     */
+    refreshDevices: () => void;
     /**
      * Everyone else has gone and is not coming back.
      *

package/dist/index.d.ts

@@ -532,6 +532,17 @@ interface UseCallRoom {
     activeDevices: Partial<Record<CallDeviceKind, string>>;
     /** Move the call onto another camera, microphone or output. */
     selectDevice: (kind: CallDeviceKind, deviceId: string) => Promise<void>;
+    /**
+     * Re-read the device list.
+     *
+     * Called for you on connect and whenever devices change, so this is
+     * for the case neither covers: a browser only reveals device ids and
+     * labels once the page holds a matching permission, and the moment
+     * that permission lands is not an event you can subscribe to. Call it
+     * when opening a picker and the list will be right by the time it is
+     * on screen.
+     */
+    refreshDevices: () => void;
     /**
      * Everyone else has gone and is not coming back.
      *

package/dist/index.js

@@ -1081,6 +1081,7 @@ function useCallRoom(conversationId, opts) {
   const optsRef = useRef(opts);
   optsRef.current = opts;
   const joined = useRef(false);
+  const held = useRef(null);
   const room = useMemo(() => {
     if (!conversationId) return null;
     return poolse.call(conversationId, {
@@ -1120,6 +1121,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) => {
@@ -1135,6 +1137,7 @@ function useCallRoom(conversationId, opts) {
       offAlone();
       offDevices();
       offError();
+      held.current = null;
       if (joined.current) {
         joined.current = false;
         room.leave();
@@ -1142,14 +1145,19 @@ function useCallRoom(conversationId, opts) {
     };
   }, [room, sync, refreshDevices]);
   const join = 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)));
@@ -1191,6 +1199,9 @@ function useCallRoom(conversationId, opts) {
     await room.switchCamera();
     setFacing(room.getFacingMode());
   }, [room]);
+  const refresh = useCallback(() => {
+    if (room) refreshDevices(room);
+  }, [room, refreshDevices]);
   const selectDevice = useCallback(
     async (kind, deviceId) => {
       if (!room) return;
@@ -1211,6 +1222,7 @@ function useCallRoom(conversationId, opts) {
     alone,
     devices,
     activeDevices,
+    refreshDevices: refresh,
     error,
     sfuAvailable,
     join,
@@ -1252,12 +1264,14 @@ function useVoiceRoom(conversationId, opts = {}) {
   const [error, setError] = useState(null);
   const optsRef = useRef(opts);
   const joined = useRef(false);
+  const held = useRef(null);
   const room = useMemo(
     () => conversationId ? poolse.realtime.voice(conversationId, optsRef.current) : null,
     [poolse, conversationId]
   );
   useEffect(() => {
     if (!room) return;
+    held.current = room;
     setStatus(room.getStatus());
     setParticipants(room.getParticipants());
     setMuted(room.isMuted());
@@ -1268,6 +1282,7 @@ function useVoiceRoom(conversationId, opts = {}) {
       offStatus();
       offRoster();
       offError();
+      held.current = null;
       if (joined.current) {
         joined.current = false;
         room.leave();
@@ -1275,10 +1290,15 @@ function useVoiceRoom(conversationId, opts = {}) {
     };
   }, [room]);
   const join = 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)));
@@ -1304,10 +1324,22 @@ function useCalls(userId, opts = {}) {
   const ringTimeoutMs = opts.ringTimeoutMs ?? 45e3;
   const poolse = usePoolse();
   const [phase, setPhase] = useState("idle");
+  const phaseRef = useRef("idle");
+  phaseRef.current = phase;
   const [incoming, setIncoming] = useState(null);
   const [outgoing, setOutgoing] = useState(null);
   const [activeConversationId, setActiveConversationId] = useState(null);
+  const [activeCallId, setActiveCallId] = useState(null);
   const [error, setError] = useState(null);
+  const incomingRef = useRef(null);
+  incomingRef.current = incoming;
+  const outgoingRef = useRef(null);
+  outgoingRef.current = outgoing;
+  const activeCallIdRef = useRef(null);
+  activeCallIdRef.current = activeCallId;
+  const isCurrent = useCallback((callId) => {
+    return callId === activeCallIdRef.current || callId === incomingRef.current?.callId || callId === outgoingRef.current?.callId;
+  }, []);
   const actionsRef = useRef({
     cancel: async () => {
     },
@@ -1318,40 +1350,45 @@ function useCalls(userId, opts = {}) {
   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();
@@ -1361,7 +1398,7 @@ function useCalls(userId, opts = {}) {
       offEnded();
       offCancelled();
     };
-  }, [calls]);
+  }, [calls, isCurrent]);
   const call = useCallback(
     async (conversationId, media2 = "audio") => {
       if (!calls) return;
@@ -1369,6 +1406,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)));
@@ -1384,6 +1422,7 @@ function useCalls(userId, opts = {}) {
       try {
         await calls.accept(target);
         setActiveConversationId(target.conversationId);
+        setActiveCallId(target.callId);
         setPhase("active");
         setIncoming(null);
       } catch (err) {
@@ -1402,6 +1441,7 @@ function useCalls(userId, opts = {}) {
         setError(err instanceof Error ? err : new Error(String(err)));
       } finally {
         setIncoming(null);
+        setActiveCallId(null);
         setPhase("idle");
       }
     },
@@ -1415,6 +1455,7 @@ function useCalls(userId, opts = {}) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setOutgoing(null);
+      setActiveCallId(null);
       setPhase("idle");
     }
   }, [calls, outgoing]);
@@ -1432,7 +1473,7 @@ function useCalls(userId, opts = {}) {
   }, [phase, ringTimeoutMs]);
   const hangUp = 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) {
@@ -1449,13 +1490,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 = useCallback(() => {
     setPhase("idle");
     setIncoming(null);
     setOutgoing(null);
     setActiveConversationId(null);
+    setActiveCallId(null);
     setError(null);
   }, []);
   const media = incoming?.media ?? outgoing?.media ?? "audio";