@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/calls/p2p/signalStanza.ts

@@ -0,0 +1,205 @@
+import { Element } from 'ltx';
+import { xml } from '@xmpp/client';
+
+// Wire format of the peer to peer call signalling. It travels as a direct
+// XMPP chat message between the two users, no server involvement:
+//
+//   <message type="chat" to="<peer bare jid>">
+//     <body>system</body>
+//     <data type="call-p2p" callId="..." signal="offer|answer|candidate|end"
+//           payload="<JSON string>"/>
+//   </message>
+//
+// payload is the SDP init ({type, sdp}) for offer/answer, the
+// RTCIceCandidateInit for candidate and {reason} for end. This module only
+// builds and parses stanzas, so it stays unit testable without a connection.
+
+export const P2P_SIGNAL_TYPE = 'call-p2p';
+
+export type P2PSignalName = 'offer' | 'answer' | 'candidate' | 'end';
+
+export interface P2PSdpPayload {
+  type: 'offer' | 'answer';
+  sdp: string;
+}
+
+export interface P2PCandidatePayload {
+  candidate: string;
+  sdpMid?: string | null;
+  sdpMLineIndex?: number | null;
+  usernameFragment?: string | null;
+}
+
+export interface P2PEndPayload {
+  reason?: string;
+}
+
+export type P2PSignalPayload =
+  | P2PSdpPayload
+  | P2PCandidatePayload
+  | P2PEndPayload;
+
+export interface P2PSignal {
+  callId: string;
+  signal: P2PSignalName;
+  payload: P2PSignalPayload;
+  /** Sender's bare JID as written in `from` (lower-cased), '' when missing. */
+  fromBare: string;
+  /** Sender's xmpp localpart (the part before '@'), '' when missing. */
+  fromLocal: string;
+  /**
+   * Age of the stanza from the server's stanza-id timestamp, null when the
+   * stanza carries none (direct messages often do not).
+   */
+  ageMs: number | null;
+  /** Carries <delay/>: it was stored offline and replayed, so it is stale. */
+  delayed: boolean;
+}
+
+// SDP for a call with audio + video + data-less sections is a few KB; this
+// only guards against a hostile peer pushing megabytes through an attribute.
+const MAX_SDP_LENGTH = 64 * 1024;
+const MAX_REASON_LENGTH = 64;
+
+// A signal older than this (by the server's own timestamp) is not part of a
+// live negotiation. Call-tokens use 5 s; signalling gets more headroom because
+// candidates can queue behind a slow permission prompt on the sender, but
+// anything the server replays after a reconnect is far older.
+export const MAX_P2P_SIGNAL_AGE_MS = 15_000;
+
+let outgoingCounter = 0;
+
+export const buildP2PSignalStanza = (params: {
+  to: string;
+  callId: string;
+  signal: P2PSignalName;
+  payload?: P2PSignalPayload;
+}): Element => {
+  outgoingCounter = (outgoingCounter + 1) % 1_000_000;
+  return xml(
+    'message',
+    {
+      to: params.to,
+      type: 'chat',
+      id: `call-p2p-${Date.now()}-${outgoingCounter}`,
+    },
+    xml('body', {}, 'system'),
+    xml('data', {
+      type: P2P_SIGNAL_TYPE,
+      callId: params.callId,
+      signal: params.signal,
+      // JSON.stringify escapes newlines in the SDP, so the attribute survives
+      // XML attribute-value normalisation on the receiving parser.
+      payload: JSON.stringify(params.payload ?? {}),
+    }),
+    // Signalling is only meaningful live: keep it out of the archive and the
+    // offline store (a replayed offer for a finished call is just noise).
+    xml('no-store', { xmlns: 'urn:xmpp:hints' }),
+    xml('no-permanent-store', { xmlns: 'urn:xmpp:hints' })
+  ) as unknown as Element;
+};
+
+const SIGNAL_NAMES: ReadonlySet<string> = new Set([
+  'offer',
+  'answer',
+  'candidate',
+  'end',
+]);
+
+const validatePayload = (
+  signal: P2PSignalName,
+  raw: unknown
+): P2PSignalPayload | null => {
+  if (!raw || typeof raw !== 'object') return null;
+  const p = raw as Record<string, unknown>;
+  if (signal === 'offer' || signal === 'answer') {
+    if (p.type !== signal) return null;
+    if (typeof p.sdp !== 'string' || !p.sdp || p.sdp.length > MAX_SDP_LENGTH) {
+      return null;
+    }
+    return { type: signal, sdp: p.sdp };
+  }
+  if (signal === 'candidate') {
+    if (typeof p.candidate !== 'string' || p.candidate.length > 2048) {
+      return null;
+    }
+    return {
+      candidate: p.candidate,
+      sdpMid: typeof p.sdpMid === 'string' ? p.sdpMid : null,
+      sdpMLineIndex:
+        typeof p.sdpMLineIndex === 'number' ? p.sdpMLineIndex : null,
+      usernameFragment:
+        typeof p.usernameFragment === 'string' ? p.usernameFragment : null,
+    };
+  }
+  return {
+    reason:
+      typeof p.reason === 'string'
+        ? p.reason.slice(0, MAX_REASON_LENGTH)
+        : undefined,
+  };
+};
+
+// Same trick as the call-token freshness check: the server stamps a
+// microsecond id on archived stanzas and the first 13 digits are epoch ms.
+const stanzaAgeMs = (stanza: Element, now: number): number | null => {
+  const id = String(stanza.getChild('stanza-id')?.attrs?.id || '').trim();
+  if (!id) return null;
+  const match = id.match(/\d{13,}/)?.[0];
+  if (!match) return null;
+  const ts = Number(match.slice(0, 13));
+  return Number.isFinite(ts) && ts > 0 ? Math.abs(now - ts) : null;
+};
+
+/**
+ * Reads a `call-p2p` message. Returns null for anything that is not a
+ * well formed signal (wrong type, unknown signal, bad JSON, bad payload).
+ */
+export const parseP2PSignalStanza = (
+  stanza: Element,
+  now: number = Date.now()
+): P2PSignal | null => {
+  const data = stanza?.getChild?.('data');
+  if (!data || String(data.attrs?.type || '').toLowerCase() !== P2P_SIGNAL_TYPE) {
+    return null;
+  }
+  const callId = String(data.attrs?.callId || data.attrs?.callid || '').trim();
+  const signal = String(data.attrs?.signal || '')
+    .trim()
+    .toLowerCase();
+  if (!callId || !SIGNAL_NAMES.has(signal)) return null;
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(String(data.attrs?.payload || '{}'));
+  } catch {
+    return null;
+  }
+  const payload = validatePayload(signal as P2PSignalName, parsed);
+  if (!payload) return null;
+
+  const fromBare = String(stanza.attrs?.from || '')
+    .split('/')[0]
+    .trim()
+    .toLowerCase();
+  return {
+    callId,
+    signal: signal as P2PSignalName,
+    payload,
+    fromBare,
+    fromLocal: fromBare.split('@')[0],
+    ageMs: stanzaAgeMs(stanza, now),
+    delayed: !!stanza.getChild?.('delay'),
+  };
+};
+
+/**
+ * Whether a parsed signal belongs to a live negotiation. An `end` is always
+ * accepted unless replayed (it only ever acts on a call that is still
+ * active, and stopping a call late is better than never).
+ */
+export const isP2PSignalFresh = (signal: P2PSignal): boolean => {
+  if (signal.delayed) return false;
+  if (signal.signal === 'end') return true;
+  return signal.ageMs === null || signal.ageMs <= MAX_P2P_SIGNAL_AGE_MS;
+};

package/src/calls/p2p/webrtcRuntime.ts

@@ -0,0 +1,60 @@
+/**
+ * Optional-dependency bridge for the WebRTC classes behind peer to peer calls.
+ *
+ * LiveKit's React Native SDK already ships a fork of react-native-webrtc,
+ * `@livekit/react-native-webrtc`. The p2p path uses ITS RTCPeerConnection and
+ * mediaDevices rather than adding the upstream `react-native-webrtc` package:
+ * two copies of the WebRTC native classes in one app do not link. Like every
+ * other call dependency it is an optional peer, so it is required lazily and
+ * a host without it simply cannot take or place a p2p call (a call-token for
+ * one is declined, see callTokenStanza).
+ */
+
+export interface WebRTCRuntime {
+  /** `RTCPeerConnection` constructor of the fork. */
+  RTCPeerConnection: any;
+  /** `mediaDevices.getUserMedia` of the fork. */
+  mediaDevices: any;
+  /** `MediaStream` constructor of the fork. */
+  MediaStream: any;
+  /** `<RTCView streamURL={...} />` renderer. */
+  RTCView: any;
+  /**
+   * `RTCAudioSession`: tells WebRTC when CallKit activates/deactivates the
+   * iOS audio session. Null on builds that lack it.
+   */
+  RTCAudioSession: any;
+}
+
+let cached: WebRTCRuntime | null | undefined;
+
+export const loadWebRTC = (): WebRTCRuntime | null => {
+  if (cached !== undefined) {
+    return cached;
+  }
+  try {
+    const webrtc = require('@livekit/react-native-webrtc');
+    if (!webrtc?.RTCPeerConnection || !webrtc?.mediaDevices) {
+      cached = null;
+    } else {
+      cached = {
+        RTCPeerConnection: webrtc.RTCPeerConnection,
+        mediaDevices: webrtc.mediaDevices,
+        MediaStream: webrtc.MediaStream,
+        RTCView: webrtc.RTCView,
+        RTCAudioSession: webrtc.RTCAudioSession ?? null,
+      };
+    }
+  } catch {
+    cached = null;
+  }
+  return cached;
+};
+
+/** True when this build can run a peer to peer call. */
+export const isP2PAvailable = (): boolean => loadWebRTC() !== null;
+
+/** Reset memoised state. Test seam only. */
+export const __resetWebRTCRuntimeForTests = (): void => {
+  cached = undefined;
+};

package/src/calls/senderTrust.ts

@@ -0,0 +1,40 @@
+// Which senders may steer a call's network targets.
+//
+// A call-token can carry two attributes that decide WHERE media goes: the
+// LiveKit `livekitUrl` and, for p2p, the `ice` list (TURN servers and their
+// credentials). Honouring them from an arbitrary sender would let any user
+// ring a victim with a forged call-token and route their camera and
+// microphone to a server the sender controls once the call is accepted. The
+// backend sends every genuine call-token from the app's system account, and
+// ejabberd stamps the real JID on every message a client sends, so a normal
+// user cannot appear as that account.
+//
+// The system account's local part is `<appId>_<appId>`: the 24 hex character
+// app id, an underscore, the same 24 hex characters again.
+
+const SYSTEM_ACCOUNT_LOCAL = /^([0-9a-fA-F]{24})_\1$/;
+
+/**
+ * True when `fromJid` is the app's system account. The resource is ignored.
+ * When `expectedDomain` is given the sender must also be on that XMPP domain,
+ * so a same-looking account on a federated server is not accepted. A missing
+ * or malformed JID is never trusted.
+ */
+export const isSystemAccountSender = (
+  fromJid: unknown,
+  expectedDomain?: string | null
+): boolean => {
+  const from = typeof fromJid === 'string' ? fromJid.trim() : '';
+  if (!from) return false;
+  const bare = from.split('/')[0];
+  const at = bare.indexOf('@');
+  if (at <= 0 || bare.indexOf('@', at + 1) !== -1) return false;
+  const local = bare.slice(0, at);
+  const domain = bare.slice(at + 1).toLowerCase();
+  if (!domain) return false;
+  if (!SYSTEM_ACCOUNT_LOCAL.test(local)) return false;
+  const expected = String(expectedDomain || '')
+    .trim()
+    .toLowerCase();
+  return !expected || domain === expected;
+};

package/src/calls/startCall.ts

@@ -0,0 +1,56 @@
+import { store } from '../roomStore';
+import { setOutgoingCallRoute } from '../roomStore/callSlice';
+import { createChatCall } from '../networking/api-requests/rooms.api';
+import { reportCallEnded } from '../networking/api-requests/callState.api';
+import { sendCallStateSignal } from '../networking/callTokenStanza';
+import type { CallKindName } from './callMode';
+
+/**
+ * Second half of placing a call, shared by every dial entry point (chat
+ * header, profile modal): POST /v1/chats/call/create and record how the server
+ * decided to carry the call in the call slice. The caller has already
+ * dispatched startOutgoingCall.
+ *
+ * Throws when the request fails (the entry point shows the message). A p2p
+ * answer that lands after the user already cancelled is cleaned up here: the
+ * server has already rung the callee, and nothing else knows its callId.
+ */
+export async function requestOutgoingCall(params: {
+  chatName: string;
+  kind: CallKindName;
+  peerXmppUsername?: string | null;
+}): Promise<void> {
+  const startedAt = store.getState().call.startedAt;
+  const result = await createChatCall(params.chatName, { kind: params.kind });
+
+  const current = store.getState().call;
+  const stillCurrent =
+    current.phase !== 'idle' &&
+    current.direction === 'outgoing' &&
+    current.startedAt === startedAt;
+
+  if (!stillCurrent) {
+    if (result.mode === 'p2p') {
+      reportCallEnded(result.callId);
+      if (params.peerXmppUsername) {
+        sendCallStateSignal('cancelled', {
+          peerXmppUsername: params.peerXmppUsername,
+          callId: result.callId,
+          roomBareName: params.chatName,
+        });
+      }
+    }
+    return;
+  }
+
+  store.dispatch(
+    setOutgoingCallRoute({
+      startedAt,
+      callId: result.callId,
+      mode: result.mode,
+      group: result.group,
+      livekitUrl: result.livekitUrl,
+      iceServers: result.iceServers,
+    })
+  );
+}

package/src/components/Booking/BookingIcons.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Svg, { Line, Rect } from 'react-native-svg';
+
+interface IconProps {
+  color?: string;
+  size?: number;
+}
+
+/** Calendar glyph for the header's "Schedule a call" button. */
+export const ScheduleCallIcon: React.FC<IconProps> = ({
+  color = '#000000',
+  size = 22,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect
+      x="3.5"
+      y="5"
+      width="17"
+      height="15.5"
+      rx="2.5"
+      stroke={color}
+      strokeWidth={1.8}
+    />
+    <Line x1="3.5" y1="10" x2="20.5" y2="10" stroke={color} strokeWidth={1.8} />
+    <Line
+      x1="8"
+      y1="3"
+      x2="8"
+      y2="6.5"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+    />
+    <Line
+      x1="16"
+      y1="3"
+      x2="16"
+      y2="6.5"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+    />
+  </Svg>
+);

package/src/components/Booking/ScheduleCallButton.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useT } from '../../i18n/useT';
+import { getIconColor } from '../../helpers/getIconColor';
+import { scheduledCallUi } from '../../booking/scheduledCallStore';
+import { ScheduleCallIcon } from './BookingIcons';
+
+/**
+ * "Schedule a call" next to the call buttons of the room header. Renders
+ * nothing unless calls are on and calls are allowed in this kind of room
+ * (`videoCalls.allowedRoomTypes`, private and group by default) and `scheduledCalls.enabled`
+ * is not false, so a host that does
+ * not use calls sees no change.
+ */
+export const ScheduleCallButton: React.FC = () => {
+  const t = useT();
+  const { config } = useChatSettingState();
+  const room = useSelector((state: RootState) => {
+    const jid = state.rooms.activeRoomJID;
+    return jid ? state.rooms.rooms[jid] : null;
+  });
+
+  const calls = config?.videoCalls;
+  // 1:1 and members-only group rooms by default (the room types a call can run
+  // in), narrowed or widened by the host's videoCalls.allowedRoomTypes.
+  const allowed = ((calls?.allowedRoomTypes as string[] | undefined) || [
+    'private',
+    'group',
+  ]).includes(String(room?.type || ''));
+  if (
+    calls?.enabled !== true ||
+    config?.scheduledCalls?.enabled === false ||
+    !room?.jid ||
+    !allowed
+  ) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      testID="schedule-call-button"
+      accessibilityRole="button"
+      accessibilityLabel={t('booking.scheduleCallLabel')}
+      onPress={() => scheduledCallUi.openCreate(room.jid)}
+      style={styles.button}
+      hitSlop={8}
+    >
+      <ScheduleCallIcon color={getIconColor(config)} size={22} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScheduleCallButton;