@poolse/react-native 2.1.6 → 2.2.0

package/dist/index.cjs

@@ -4941,9 +4941,296 @@ function useAppStateLifecycle() {
   }, [poolse]);
 }
 
+// src/voice/webrtc-native.ts
+var cached;
+function loadNativeWebRtc() {
+  if (cached !== void 0) return cached;
+  try {
+    cached = __require("react-native-webrtc");
+  } catch {
+    cached = null;
+  }
+  return cached;
+}
+function isNativeWebRtcAvailable() {
+  return loadNativeWebRtc() != null;
+}
+function createNativeWebRtcAdapter() {
+  const native = loadNativeWebRtc();
+  if (!native) {
+    throw new Error(
+      "react-native-webrtc is not installed. Add it to enable poolse voice calls:\n  npx expo install react-native-webrtc\nIt contains native code, so it needs a development build \u2014 it will not run in Expo Go."
+    );
+  }
+  return {
+    createPeerConnection(iceServers) {
+      return new native.RTCPeerConnection({ iceServers });
+    },
+    getUserMedia() {
+      return native.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true },
+        video: false
+      });
+    },
+    playRemoteStream() {
+      return () => {
+      };
+    }
+  };
+}
+function VoiceRoomBar({ conversationId, labelFor, unavailableSlot }) {
+  const theme = usePoolseTheme();
+  const available = isNativeWebRtcAvailable();
+  const opts = react.useMemo(
+    () => available ? { webrtc: createNativeWebRtcAdapter() } : {},
+    [available]
+  );
+  const { status, participants, muted, join, leave, toggleMute, error } = react$1.useVoiceRoom(
+    available ? conversationId : null,
+    opts
+  );
+  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
+  const connected = status === "connected";
+  if (!available) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: [
+          styles23.bar,
+          { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }
+        ],
+        children: unavailableSlot ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: "Voice needs react-native-webrtc and a development build." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        styles23.bar,
+        { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles23.row, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [
+                styles23.dot,
+                { backgroundColor: connected ? theme.colors.brand : theme.colors.ink3 }
+              ]
+            }
+          ),
+          connected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles23.people, children: participants.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: "Waiting for others\u2026" }) : participants.map((p) => /* @__PURE__ */ jsxRuntime.jsx(ParticipantChip, { participant: p, label: label(p.userId) }, p.userId)) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: toggleMute,
+                accessibilityRole: "button",
+                accessibilityState: { selected: muted },
+                style: [
+                  styles23.btn,
+                  {
+                    borderColor: muted ? theme.colors.brand : theme.colors.border,
+                    backgroundColor: muted ? theme.colors.brandSoft : theme.colors.paper
+                  }
+                ],
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.colors.ink2 }, children: muted ? "Unmute" : "Mute" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: leave,
+                accessibilityRole: "button",
+                style: [styles23.btn, { borderColor: theme.colors.error }],
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.colors.error }, children: "Leave" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: status === "connecting" ? "Connecting\u2026" : "Talk to everyone here" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: () => void join(),
+                disabled: status === "connecting",
+                accessibilityRole: "button",
+                style: [styles23.btn, styles23.btnPrimary, { backgroundColor: theme.colors.brand }],
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.colors.onBrand, fontWeight: "600" }, children: status === "connecting" ? "Joining\u2026" : "Join Voice" })
+              }
+            )
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles23.error, { color: theme.colors.error }], children: error.message })
+      ]
+    }
+  );
+}
+function ParticipantChip({ participant, label }) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        styles23.chip,
+        {
+          backgroundColor: theme.colors.paper,
+          // The speaking ring is a border colour swap rather than an
+          // extra element, so the row never reflows mid-sentence.
+          borderColor: participant.speaking ? theme.colors.brand : theme.colors.border,
+          opacity: participant.muted ? 0.62 : 1
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: { color: theme.colors.ink2, fontSize: 13 }, numberOfLines: 1, children: [
+          label,
+          participant.isSelf ? " (you)" : ""
+        ] }),
+        participant.muted && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.colors.error, fontSize: 11, fontWeight: "700" }, children: "\u2715" })
+      ]
+    }
+  );
+}
+var styles23 = reactNative.StyleSheet.create({
+  bar: { paddingHorizontal: 14, paddingVertical: 8, borderBottomWidth: reactNative.StyleSheet.hairlineWidth },
+  row: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  people: { flexDirection: "row", alignItems: "center", gap: 6, flexShrink: 1, flexWrap: "wrap" },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 999,
+    borderWidth: 1
+  },
+  btn: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 999, borderWidth: 1 },
+  btnPrimary: { borderWidth: 0 },
+  hint: { fontSize: 13, flexShrink: 1 },
+  error: { fontSize: 12, marginTop: 6 }
+});
+function CallScreen({ userId, labelFor, calls: external }) {
+  const theme = usePoolseTheme();
+  const own = react$1.useCalls(external ? null : userId);
+  const calls = external ?? own;
+  const available = isNativeWebRtcAvailable();
+  const opts = react.useMemo(
+    () => available ? { webrtc: createNativeWebRtcAdapter() } : {},
+    [available]
+  );
+  const voice = react$1.useVoiceRoom(
+    calls.phase === "active" && available ? calls.activeConversationId : null,
+    opts
+  );
+  react.useEffect(() => {
+    if (calls.phase === "active" && voice.status === "idle") void voice.join();
+  }, [calls.phase, voice]);
+  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
+  const visible = calls.phase !== "idle";
+  const hangUp = () => {
+    voice.leave();
+    calls.reset();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible, animationType: "slide", transparent: false, onRequestClose: hangUp, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles24.screen, { backgroundColor: theme.colors.paper }], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles24.identity, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles24.who, { color: theme.colors.ink }], children: calls.phase === "ringing-in" && calls.incoming ? label(calls.incoming.callerUserId) : calls.outgoing ? calls.outgoing.calleeUserIds.map(label).join(", ") : "" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles24.state, { color: theme.colors.ink3 }], children: statusLine(calls, voice.status) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles24.actions, children: calls.phase === "ringing-in" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CallButton,
+        {
+          label: "Decline",
+          color: theme.colors.error,
+          onPress: () => void calls.decline()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CallButton,
+        {
+          label: "Accept",
+          color: theme.colors.brand,
+          onPress: () => void calls.accept()
+        }
+      )
+    ] }) : calls.phase === "ringing-out" ? /* @__PURE__ */ jsxRuntime.jsx(
+      CallButton,
+      {
+        label: "Cancel",
+        color: theme.colors.error,
+        onPress: () => void calls.cancel()
+      }
+    ) : calls.phase === "declined" || calls.phase === "busy" || calls.phase === "timed-out" ? /* @__PURE__ */ jsxRuntime.jsx(CallButton, { label: "Close", color: theme.colors.ink3, onPress: calls.reset }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CallButton,
+        {
+          label: voice.muted ? "Unmute" : "Mute",
+          color: theme.colors.ink2,
+          onPress: voice.toggleMute
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(CallButton, { label: "Hang up", color: theme.colors.error, onPress: hangUp })
+    ] }) }),
+    !available && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles24.warn, { color: theme.colors.error }], children: "react-native-webrtc is not installed \u2014 this call has no audio." }),
+    (calls.error ?? voice.error) && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles24.warn, { color: theme.colors.error }], children: (calls.error ?? voice.error)?.message })
+  ] }) });
+}
+function statusLine(calls, voiceStatus) {
+  switch (calls.phase) {
+    case "ringing-in":
+      return "Incoming call\u2026";
+    case "ringing-out":
+      return "Ringing\u2026";
+    case "declined":
+      return "Call declined";
+    case "busy":
+      return "Already on another call";
+    case "timed-out":
+      return "No answer";
+    case "active":
+      return voiceStatus === "connected" ? "Connected" : "Connecting\u2026";
+    default:
+      return "";
+  }
+}
+function CallButton({
+  label,
+  color,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress,
+      accessibilityRole: "button",
+      style: [styles24.callBtn, { backgroundColor: color }],
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles24.callBtnText, children: label })
+    }
+  );
+}
+var styles24 = reactNative.StyleSheet.create({
+  screen: { flex: 1, justifyContent: "space-between", paddingVertical: 72, paddingHorizontal: 24 },
+  identity: { alignItems: "center", gap: 8, marginTop: 48 },
+  who: { fontSize: 28, fontWeight: "600", textAlign: "center" },
+  state: { fontSize: 15 },
+  actions: { flexDirection: "row", justifyContent: "center", gap: 16 },
+  callBtn: {
+    paddingHorizontal: 26,
+    paddingVertical: 16,
+    borderRadius: 999,
+    minWidth: 128,
+    alignItems: "center"
+  },
+  callBtnText: { color: "#ffffff", fontSize: 16, fontWeight: "600" },
+  warn: { fontSize: 12, textAlign: "center", marginTop: 12 }
+});
+
 exports.AttachmentPicker = AttachmentPicker;
 exports.AttachmentPreview = AttachmentPreview;
 exports.Avatar = Avatar;
+exports.CallScreen = CallScreen;
 exports.ChatHeader = ChatHeader;
 exports.ConversationList = ConversationList;
 exports.ConversationView = ConversationView;
@@ -4968,8 +5255,11 @@ exports.ThreadView = ThreadView;
 exports.TypingIndicator = TypingIndicator;
 exports.UploadQueueStrip = UploadQueueStrip;
 exports.UserName = UserName;
+exports.VoiceRoomBar = VoiceRoomBar;
+exports.createNativeWebRtcAdapter = createNativeWebRtcAdapter;
 exports.defaultDarkTheme = defaultDarkTheme;
 exports.defaultLightTheme = defaultLightTheme;
+exports.isNativeWebRtcAvailable = isNativeWebRtcAvailable;
 exports.useAppStateLifecycle = useAppStateLifecycle;
 exports.useDisplayName = useDisplayName;
 exports.usePoolseTheme = usePoolseTheme;