@poolse/react 2.14.1 → 2.15.1

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)));
@@ -1256,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());
@@ -1272,6 +1282,7 @@ function useVoiceRoom(conversationId, opts = {}) {
       offStatus();
       offRoster();
       offError();
+      held.current = null;
       if (joined.current) {
         joined.current = false;
         room.leave();
@@ -1279,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)));
@@ -1308,10 +1324,23 @@ 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 [activeMedia, setActiveMedia] = 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 () => {
     },
@@ -1322,40 +1351,49 @@ 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);
+      setActiveMedia(null);
     });
-    const offBusy = calls.onBusy(() => {
+    const offBusy = calls.onBusy((call2) => {
+      if (!isCurrent(call2.callId)) return;
       setPhase("busy");
       setOutgoing(null);
+      setActiveCallId(null);
+      setActiveMedia(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);
+      setActiveMedia(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);
+      setActiveMedia(null);
     });
     return () => {
       offIncoming();
@@ -1365,7 +1403,7 @@ function useCalls(userId, opts = {}) {
       offEnded();
       offCancelled();
     };
-  }, [calls]);
+  }, [calls, isCurrent]);
   const call = useCallback(
     async (conversationId, media2 = "audio") => {
       if (!calls) return;
@@ -1373,6 +1411,8 @@ function useCalls(userId, opts = {}) {
       try {
         const placed = await calls.invite(conversationId, media2);
         setOutgoing(placed);
+        setActiveCallId(placed.callId);
+        setActiveMedia(placed.media);
         setPhase("ringing-out");
       } catch (err) {
         setError(err instanceof Error ? err : new Error(String(err)));
@@ -1388,6 +1428,8 @@ function useCalls(userId, opts = {}) {
       try {
         await calls.accept(target);
         setActiveConversationId(target.conversationId);
+        setActiveCallId(target.callId);
+        setActiveMedia(target.media);
         setPhase("active");
         setIncoming(null);
       } catch (err) {
@@ -1406,6 +1448,8 @@ function useCalls(userId, opts = {}) {
         setError(err instanceof Error ? err : new Error(String(err)));
       } finally {
         setIncoming(null);
+        setActiveCallId(null);
+        setActiveMedia(null);
         setPhase("idle");
       }
     },
@@ -1419,6 +1463,8 @@ function useCalls(userId, opts = {}) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setOutgoing(null);
+      setActiveCallId(null);
+      setActiveMedia(null);
       setPhase("idle");
     }
   }, [calls, outgoing]);
@@ -1436,7 +1482,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) {
@@ -1453,16 +1499,20 @@ function useCalls(userId, opts = {}) {
       setIncoming(null);
       setOutgoing(null);
       setActiveConversationId(null);
+      setActiveCallId(null);
+      setActiveMedia(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);
+    setActiveMedia(null);
     setError(null);
   }, []);
-  const media = incoming?.media ?? outgoing?.media ?? "audio";
+  const media = incoming?.media ?? outgoing?.media ?? activeMedia ?? "audio";
   return {
     phase,
     incoming,