@ethora/chat-component-rn 26.10.1 → 26.10.3

package/src/components/VideoCalls/callActions.ts

@@ -0,0 +1,63 @@
+import { store } from '../../roomStore';
+import { declineIncomingCall, endCall } from '../../roomStore/callSlice';
+import { addRoomMessage } from '../../roomStore/roomsSlice';
+import { buildLocalCallLogMessage } from '../../helpers/callLogMessage';
+import {
+  CallSignalState,
+  sendCallStateSignal,
+} from '../../networking/callTokenStanza';
+import { translateKey } from '../../i18n/strings';
+
+/**
+ * Call teardown that doesn't need a mounted component.
+ *
+ * It used to live inside VideoCallOverlay, which meant only a rendered
+ * overlay could end a call. The LiveKit session now outlives the UI
+ * (callSessionController.ts), so the session's own "peer left" and
+ * "disconnected" events need the same teardown, with the same local log
+ * entry and the same signal to the peer.
+ */
+export const terminateActiveCall = (state: CallSignalState): void => {
+  // Write a local "call ended" log entry BEFORE endCall() wipes the call
+  // slice. The authoritative entry is a server call-state broadcast, but
+  // that isn't guaranteed to arrive, so we synthesize our own. It's
+  // deduped against any server copy by callId in addRoomMessage.
+  const snap = store.getState().call;
+  if (snap.phase === 'idle') {return;}
+  if (snap.roomJid && (snap.callId || snap.connectedAt)) {
+    const durationMs = snap.connectedAt
+      ? Math.max(0, Date.now() - snap.connectedAt)
+      : 0;
+    store.dispatch(
+      addRoomMessage({
+        roomJID: snap.roomJid,
+        message: buildLocalCallLogMessage({
+          callId: snap.callId || '',
+          direction: snap.direction === 'incoming' ? 'incoming' : 'outgoing',
+          durationMs,
+          kind: snap.kind === 'audio' ? 'audio' : 'video',
+          selfXmppUsername:
+            store.getState().chatSettingStore.user?.xmppUsername || '',
+        }),
+      })
+    );
+  }
+  sendCallStateSignal(state);
+  store.dispatch(endCall());
+};
+
+export const declineActiveCall = (): void => {
+  sendCallStateSignal('declined');
+  store.dispatch(declineIncomingCall());
+};
+
+/** `t` for code outside React, resolved by the same rule as useT. */
+export const translateCallString = (
+  key: string,
+  vars?: Record<string, string | number>
+): string => {
+  const settings = store.getState().chatSettingStore as any;
+  const locale =
+    settings?.uiLocale || settings?.config?.i18n?.locale || settings?.langSource;
+  return translateKey(key, locale, settings?.config?.i18n?.strings, vars);
+};

package/src/components/VideoCalls/callSessionController.ts

@@ -0,0 +1,421 @@
+import { useSyncExternalStore } from 'react';
+import { Platform } from 'react-native';
+import { store } from '../../roomStore';
+import { setCallError, setCallPhase } from '../../roomStore/callSlice';
+import { ensureLiveKitGlobals, loadLiveKit } from './livekitRuntime';
+import { terminateActiveCall, translateCallString } from './callActions';
+
+/**
+ * The LiveKit connection of the current call, owned outside React.
+ *
+ * It used to live in VideoCallSession's effect, so the connection was as
+ * long-lived as that component instance. Minimizing swapped the Modal for a
+ * floating View, React remounted the session, the effect cleanup
+ * disconnected, and the peer saw us leave (and hung up). The web SDK avoids
+ * that by keeping one LiveKitRoom element mounted across both layouts; the
+ * RN equivalent is to not tie the room to a component at all.
+ *
+ * Lifetime is driven by the call slice: a session exists while the call is
+ * 'connecting' or 'in-call' with a token, and is torn down by a store
+ * subscription the moment that stops being true (hangup, remote end,
+ * logout's resetCall), whether or not any call UI is mounted. Components
+ * only read the snapshot and call the controls.
+ */
+
+export interface CallSessionSnapshot {
+  /** A LiveKit room exists for the current call. */
+  active: boolean;
+  connected: boolean;
+  /** Translated, dismissible camera/mic problem. Never fails the call. */
+  deviceError: string | null;
+  micOn: boolean;
+  cameraOn: boolean;
+  speakerOn: boolean;
+  /** `{ participant, publication, source }` for `<VideoTrack />`, live and unmuted only. */
+  remoteVideo: any;
+  localVideo: any;
+  remoteName: string | null;
+  remoteJoined: boolean;
+  /** Peer joined but has no live microphone. */
+  remoteMicMuted: boolean;
+  /**
+   * When the call truly connected: the later of the two LiveKit `joinedAt`
+   * stamps. The server sets them, so both sides count from the same moment
+   * (web's useSharedCallElapsed). Null until the peer is in.
+   */
+  anchorAt: number | null;
+}
+
+const IDLE: CallSessionSnapshot = {
+  active: false,
+  connected: false,
+  deviceError: null,
+  micOn: true,
+  cameraOn: false,
+  speakerOn: false,
+  remoteVideo: null,
+  localVideo: null,
+  remoteName: null,
+  remoteJoined: false,
+  remoteMicMuted: false,
+  anchorAt: null,
+};
+
+interface Session {
+  key: string;
+  room: any;
+  kind: 'audio' | 'video';
+  disposed: boolean;
+  everJoined: boolean;
+}
+
+let session: Session | null = null;
+let snapshot: CallSessionSnapshot = IDLE;
+const listeners = new Set<() => void>();
+let storeUnsubscribe: (() => void) | null = null;
+
+const emit = (patch: Partial<CallSessionSnapshot>) => {
+  snapshot = { ...snapshot, ...patch };
+  listeners.forEach((listener) => listener());
+};
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+const getSnapshot = () => snapshot;
+
+export const useCallSession = (): CallSessionSnapshot =>
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+const sessionKey = (livekitUrl: string, token: string) => `${livekitUrl}|${token}`;
+
+// A device (camera/mic) permission/availability problem during enable,
+// distinct from a connect failure. Mirrors the web SDK's humanizeDeviceError.
+const humanizeDeviceError = (error: unknown): string => {
+  const name = (error as { name?: string })?.name || '';
+  const text = String((error as Error)?.message || '').toLowerCase();
+  if (name === 'NotAllowedError' || text.includes('permission') || text.includes('denied')) {
+    return translateCallString('call.error.deviceBlocked');
+  }
+  if (name === 'NotFoundError' || text.includes('not found')) {
+    return translateCallString('call.error.deviceNotFound');
+  }
+  if (name === 'NotReadableError' || text.includes('in use')) {
+    return translateCallString('call.error.deviceInUse');
+  }
+  return translateCallString('call.error.deviceGeneric');
+};
+
+// Only a live, unmuted track gets a video surface, so the stage never
+// flips between an avatar and a black frame (web's hasLiveVideo).
+const liveVideoRef = (participant: any, Track: any) => {
+  if (!participant) {return null;}
+  const publication = participant.getTrackPublication?.(Track.Source.Camera);
+  if (!publication?.track || publication.isMuted) {return null;}
+  return { participant, publication, source: Track.Source.Camera };
+};
+
+const joinedAtMs = (participant: any): number => {
+  const value = participant?.joinedAt;
+  const ms = value ? new Date(value).getTime() : 0;
+  return Number.isFinite(ms) ? ms : 0;
+};
+
+const resync = () => {
+  const current = session;
+  const runtime = loadLiveKit();
+  if (!current || current.disposed || !runtime) {return;}
+  const { Track } = runtime;
+  const room = current.room;
+
+  const remote = Array.from(room.remoteParticipants?.values?.() || [])[0] as any;
+  if (remote) {current.everJoined = true;}
+
+  const remoteMic = remote?.getTrackPublication?.(Track.Source.Microphone);
+  const localJoined = joinedAtMs(room.localParticipant);
+  const remoteJoinedAt = joinedAtMs(remote);
+
+  emit({
+    remoteJoined: !!remote,
+    remoteName: remote?.name || remote?.identity || null,
+    remoteVideo: liveVideoRef(remote, Track),
+    localVideo: liveVideoRef(room.localParticipant, Track),
+    remoteMicMuted: !!remote && (!remoteMic || remoteMic.isMuted !== false),
+    anchorAt:
+      remote && localJoined && remoteJoinedAt
+        ? Math.max(localJoined, remoteJoinedAt)
+        : remote
+          ? snapshot.anchorAt ?? Date.now()
+          : null,
+  });
+};
+
+export const stopCallSession = (): void => {
+  const current = session;
+  if (!current) {return;}
+  current.disposed = true;
+  session = null;
+  try {
+    current.room.removeAllListeners?.();
+    void current.room.disconnect();
+  } catch {
+    // Already gone.
+  }
+  try {
+    void loadLiveKit()?.AudioSession?.stopAudioSession();
+  } catch {
+    // Never let teardown throw.
+  }
+  snapshot = IDLE;
+  listeners.forEach((listener) => listener());
+};
+
+// Tear the session down as soon as the call slice says there is no call to
+// carry it any more, independent of what UI happens to be mounted.
+const ensureStoreWatcher = () => {
+  if (storeUnsubscribe) {return;}
+  storeUnsubscribe = store.subscribe(() => {
+    if (!session) {return;}
+    const call = store.getState().call;
+    const live =
+      !!call.token && (call.phase === 'connecting' || call.phase === 'in-call');
+    if (!live || !session.key.endsWith(`|${call.token}`)) {
+      stopCallSession();
+    }
+  });
+};
+
+export interface StartCallSessionOptions {
+  token: string;
+  livekitUrl: string;
+  kind: 'audio' | 'video';
+  startWithMicOn?: boolean;
+  startWithCameraOn?: boolean;
+}
+
+/**
+ * Join the LiveKit room for the current call. Idempotent per (url, token):
+ * calling it again from a remounted overlay re-attaches to the same room.
+ */
+export const startCallSession = ({
+  token,
+  livekitUrl,
+  kind,
+  startWithMicOn = true,
+  startWithCameraOn = true,
+}: StartCallSessionOptions): void => {
+  const key = sessionKey(livekitUrl, token);
+  if (session?.key === key) {return;}
+  stopCallSession();
+  ensureStoreWatcher();
+
+  const runtime = loadLiveKit();
+  if (!runtime) {
+    store.dispatch(setCallError(translateCallString('call.error.sdkMissing')));
+    return;
+  }
+  if (!token || !livekitUrl) {
+    store.dispatch(setCallError(translateCallString('call.error.missingConfig')));
+    return;
+  }
+
+  ensureLiveKitGlobals(runtime);
+  const { Room, RoomEvent, AudioSession } = runtime;
+
+  // adaptiveStream + dynacast keep mobile data and battery sane: the SDK
+  // drops resolution for a small tile and stops publishing layers nobody
+  // subscribes to. Both are safe defaults for 1:1.
+  const room = new Room({ adaptiveStream: true, dynacast: true });
+  const current: Session = { key, room, kind, disposed: false, everJoined: false };
+  session = current;
+  snapshot = {
+    ...IDLE,
+    active: true,
+    micOn: startWithMicOn,
+    cameraOn: kind === 'video' && startWithCameraOn,
+    // Video calls belong on the loudspeaker, audio calls on the earpiece.
+    speakerOn: kind === 'video',
+  };
+  listeners.forEach((listener) => listener());
+
+  const onChange = () => {
+    if (!current.disposed) {resync();}
+  };
+
+  room
+    .on(RoomEvent.TrackSubscribed, onChange)
+    .on(RoomEvent.TrackUnsubscribed, onChange)
+    .on(RoomEvent.TrackPublished, onChange)
+    .on(RoomEvent.TrackUnpublished, onChange)
+    .on(RoomEvent.LocalTrackPublished, onChange)
+    .on(RoomEvent.LocalTrackUnpublished, onChange)
+    .on(RoomEvent.TrackMuted, onChange)
+    .on(RoomEvent.TrackUnmuted, onChange)
+    .on(RoomEvent.ParticipantConnected, onChange)
+    .on(RoomEvent.MediaDevicesError, (error: unknown) => {
+      if (current.disposed) {return;}
+      emit({ deviceError: humanizeDeviceError(error) });
+    })
+    .on(RoomEvent.ParticipantDisconnected, () => {
+      if (current.disposed) {return;}
+      resync();
+      // 1:1 semantics, as web's PeerLeaveWatcher: once the peer had been
+      // in the room, their leaving IS the end of the call. Before they
+      // join (outgoing "Ringing...") an empty room is expected.
+      if (current.everJoined && (room.remoteParticipants?.size ?? 0) === 0) {
+        terminateActiveCall('ended');
+      }
+    })
+    .on(RoomEvent.Disconnected, () => {
+      if (current.disposed) {return;}
+      emit({ connected: false });
+      terminateActiveCall('ended');
+    });
+
+  (async () => {
+    // Joining the LiveKit room is the only step whose failure should fail
+    // the call (bad token, network, server down). Device setup below is
+    // best-effort.
+    try {
+      // Claims audio focus and sets the right native audio mode. Must
+      // start BEFORE connecting or the first seconds route to the earpiece
+      // on Android even for a video call.
+      await AudioSession.startAudioSession();
+      await room.connect(livekitUrl, token);
+    } catch (error: any) {
+      if (current.disposed) {return;}
+      stopCallSession();
+      store.dispatch(
+        setCallError(
+          String(error?.message || '') ||
+            translateCallString('call.error.connectFailed')
+        )
+      );
+      return;
+    }
+    if (current.disposed) {return;}
+
+    // Devices are best-effort: a blocked permission or the iOS Simulator
+    // (no camera at all) must not kill a call that connected fine.
+    try {
+      await room.localParticipant.setMicrophoneEnabled(startWithMicOn);
+    } catch (error) {
+      if (!current.disposed) {emit({ deviceError: humanizeDeviceError(error) });}
+    }
+    if (kind === 'video') {
+      try {
+        await room.localParticipant.setCameraEnabled(startWithCameraOn);
+      } catch (error) {
+        if (!current.disposed) {
+          emit({ cameraOn: false, deviceError: humanizeDeviceError(error) });
+        }
+      }
+    }
+    if (current.disposed) {return;}
+
+    try {
+      await AudioSession.setAppleAudioConfiguration?.({
+        audioCategory: 'playAndRecord',
+        audioCategoryOptions: kind === 'video' ? ['defaultToSpeaker'] : [],
+        audioMode: kind === 'video' ? 'videoChat' : 'voiceChat',
+      });
+    } catch {
+      // iOS-only helper.
+    }
+
+    emit({ connected: true });
+    resync();
+    store.dispatch(setCallPhase('in-call'));
+  })();
+};
+
+// ---- controls -----------------------------------------------------------
+
+export const toggleCallMic = async (): Promise<void> => {
+  const current = session;
+  if (!current) {return;}
+  const next = !snapshot.micOn;
+  emit({ micOn: next });
+  try {
+    await current.room.localParticipant.setMicrophoneEnabled(next);
+  } catch (error) {
+    if (!current.disposed) {
+      emit({ micOn: !next, deviceError: humanizeDeviceError(error) });
+    }
+  }
+};
+
+export const toggleCallCamera = async (): Promise<void> => {
+  const current = session;
+  if (!current) {return;}
+  const next = !snapshot.cameraOn;
+  emit({ cameraOn: next });
+  try {
+    await current.room.localParticipant.setCameraEnabled(next);
+    resync();
+  } catch (error) {
+    if (!current.disposed) {
+      emit({ cameraOn: !next, deviceError: humanizeDeviceError(error) });
+    }
+  }
+};
+
+export const switchCallCamera = async (): Promise<void> => {
+  const current = session;
+  const runtime = loadLiveKit();
+  if (!current || !runtime) {return;}
+  try {
+    const publication = current.room.localParticipant.getTrackPublication?.(
+      runtime.Track.Source.Camera
+    );
+    const track = publication?.track;
+    // `restartTrack` with the flipped facingMode is the portable way to
+    // switch cameras; the RN SDK's `_switchCamera` helper is internal.
+    await track?.restartTrack?.({
+      facingMode:
+        track?.mediaStreamTrack?.getSettings?.().facingMode === 'environment'
+          ? 'user'
+          : 'environment',
+    });
+    resync();
+  } catch {
+    // Single camera, or the track is mid-restart.
+  }
+};
+
+export const toggleCallSpeaker = async (): Promise<void> => {
+  const runtime = loadLiveKit();
+  if (!session || !runtime) {return;}
+  const next = !snapshot.speakerOn;
+  emit({ speakerOn: next });
+  try {
+    if (Platform.OS === 'android') {
+      // On Android `selectAudioOutput` device ids are the literal strings
+      // 'speaker' / 'earpiece'.
+      await runtime.AudioSession.selectAudioOutput(next ? 'speaker' : 'earpiece');
+    } else {
+      await runtime.AudioSession.setAppleAudioConfiguration?.({
+        audioCategory: 'playAndRecord',
+        audioCategoryOptions: next ? ['defaultToSpeaker'] : [],
+        audioMode: next ? 'videoChat' : 'voiceChat',
+      });
+    }
+  } catch {
+    emit({ speakerOn: !next });
+  }
+};
+
+export const dismissCallDeviceError = (): void => {
+  emit({ deviceError: null });
+};
+
+/** Reset module state. Test seam only. */
+export const __resetCallSessionForTests = (): void => {
+  stopCallSession();
+  storeUnsubscribe?.();
+  storeUnsubscribe = null;
+};

package/src/components/VideoCalls/useDraggable.ts

@@ -0,0 +1,46 @@
+import { useMemo, useRef } from 'react';
+import { Animated, PanResponder } from 'react-native';
+
+/**
+ * Drag a floating element around (web's useDraggable, for the self-view
+ * tile and the minimized call panel). The offset is kept between drags.
+ *
+ * The responder only claims the gesture once the finger actually moves a
+ * few points, so taps still reach the buttons inside the dragged element.
+ */
+export const useDraggable = () => {
+  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const offset = useRef({ x: 0, y: 0 });
+
+  const panHandlers = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_event, gesture) =>
+          Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4,
+        onPanResponderGrant: () => {
+          position.setOffset(offset.current);
+          position.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: Animated.event(
+          [null, { dx: position.x, dy: position.y }],
+          { useNativeDriver: false }
+        ),
+        onPanResponderRelease: (_event, gesture) => {
+          offset.current = {
+            x: offset.current.x + gesture.dx,
+            y: offset.current.y + gesture.dy,
+          };
+          position.flattenOffset();
+        },
+        onPanResponderTerminate: () => {
+          position.flattenOffset();
+        },
+      }).panHandlers,
+    [position]
+  );
+
+  return {
+    panHandlers,
+    style: { transform: position.getTranslateTransform() },
+  };
+};

package/src/helpers/createRoomFromApi.tsx

@@ -1,3 +1,4 @@
+import { uniqueMembers } from './uniqueMembers';
 import { ApiRoom, IRoom } from '../types/types';
 import type { LastMessage } from '../types/models/message.model';
 
@@ -81,6 +82,7 @@ export const createRoomFromApi = (
     const lastMessage = mapApiLastMessage(room?.lastMessage, jid);
     const roomData: IRoom = {
       ...room,
+      ...(Array.isArray(room?.members) ? { members: uniqueMembers(room.members) } : {}),
       id: (room as any)?._id || '',
       jid,
       name: room?.title || '',

package/src/helpers/incomingCallFromPush.ts

@@ -58,7 +58,7 @@ export const handleCallPush = (
     (room: any) =>
       (room?.jid || '').split('@')[0] === parsed.roomBareName ||
       room?.jid === parsed.roomRef
-  ) as { jid?: string; name?: string } | undefined;
+  ) as { jid?: string; name?: string; title?: string } | undefined;
 
   const roomJid =
     resolved?.jid ||
@@ -70,7 +70,7 @@ export const handleCallPush = (
   store.dispatch(
     setIncomingCallToken({
       roomJid,
-      roomName: parsed.callerName || resolved?.name || null,
+      roomName: parsed.callerName || resolved?.title || resolved?.name || null,
       roomBareName: parsed.roomBareName,
       token: parsed.token,
       kind: parsed.kind,

package/src/helpers/roomUserCount.ts

@@ -2,7 +2,7 @@ import { IRoom } from '../types/types';
 
 type CountSource =
   | Pick<IRoom, 'members' | 'usersCnt'>
-  | { members?: unknown; usersCnt?: unknown }
+  | { members?: unknown; usersCnt?: unknown; type?: unknown }
   | null
   | undefined;
 
@@ -17,11 +17,15 @@ export const getRoomUserCount = (room: CountSource): number => {
     typeof room?.usersCnt === 'number' && Number.isFinite(room.usersCnt)
       ? room.usersCnt
       : 0;
-  return Math.max(cnt, members);
+  const total = Math.max(cnt, members);
+  // A private chat is two people by definition; the server's usersCnt has
+  // been seen to drift above that (3 for a 1:1 room).
+  return (room as { type?: unknown })?.type === 'private' ? Math.min(total, 2) : total;
 };
 
 /** True when the room is known to have more users than members loaded. */
 export const isRoomMembersTruncated = (room: CountSource): boolean => {
+  if ((room as { type?: unknown })?.type === 'private') {return false;}
   const members = Array.isArray(room?.members) ? room.members.length : 0;
   const cnt =
     typeof room?.usersCnt === 'number' && Number.isFinite(room.usersCnt)

package/src/helpers/uniqueMembers.ts

@@ -0,0 +1,26 @@
+/**
+ * Drop repeated entries from a room's member list, keeping the first.
+ *
+ * The same person could appear twice in a 1:1 chat ("Members: 3", four
+ * rows): the list came back from the server with repeats after the private
+ * chat was requested again for an existing room. Members are keyed by
+ * whatever identity the entry carries: xmppUsername, then _id, then the
+ * JID's localpart.
+ */
+export const uniqueMembers = <T,>(members: T[] | undefined | null): T[] => {
+  if (!Array.isArray(members)) {return [];}
+  const seen = new Set<string>();
+  const out: T[] = [];
+  for (const member of members) {
+    const m = member as any;
+    const key = String(
+      m?.xmppUsername || m?._id || String(m?.jid || '').split('@')[0] || ''
+    ).trim();
+    if (key) {
+      if (seen.has(key)) {continue;}
+      seen.add(key);
+    }
+    out.push(member);
+  }
+  return out;
+};

package/src/hooks/useLeaveRoom.ts

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { deleteRoom } from '../roomStore/roomsSlice';
+import { leaveRoom } from '../networking/api-requests/rooms.api';
+import { useXmppClient } from '../context/xmppProvider';
+
+/** Rooms with a leave request in flight: a second tap waits for the first. */
+const inFlight = new Set<string>();
+
+/**
+ * Leave a chat, shared by the room-list swipe, the chat header and the chat
+ * profile. The server goes first: if it refuses, the chat stays where it is
+ * (dropping it locally would only have it come back on the next /chats/my).
+ * Then the unavailable presence to the MUC and the room out of the store.
+ * Resolves false on failure, so the caller can say so in its own way.
+ */
+export const useLeaveRoom = () => {
+  const dispatch = useDispatch();
+  const { client } = useXmppClient();
+  return useCallback(
+    async (jid: string): Promise<boolean> => {
+      if (!jid || inFlight.has(jid)) {return true;}
+      inFlight.add(jid);
+      try {
+        await leaveRoom(jid.split('@')[0]);
+      } catch (error) {
+        console.warn('[ethora-rn] leave failed', error);
+        return false;
+      } finally {
+        inFlight.delete(jid);
+      }
+      try {
+        client?.leaveTheRoomStanza?.(jid);
+      } catch (error) {
+        console.error('Failed to leave the room:', error);
+      }
+      dispatch(deleteRoom({ jid }));
+      return true;
+    },
+    [client, dispatch]
+  );
+};