@ethora/chat-component-rn 26.10.2 → 26.10.4

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -44,15 +44,25 @@ import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
 import { useLogout } from '../../../hooks/useLogout';
 import {
   ApiRoom,
+  createChatCall,
   ownAppId,
   postPrivateRoom,
 } from '../../../networking/api-requests/rooms.api';
 import EncryptionCard from '../../MainComponents/EncryptionCard';
+import { useSelector } from 'react-redux';
+import { store, type RootState } from '../../../roomStore';
+import { setCallError, startOutgoingCall } from '../../../roomStore/callSlice';
+import { sendCallInviteSignal } from '../../../networking/callTokenStanza';
+import { AudioCallIcon, VideoCallIcon } from '../../VideoCalls/CallIcons';
 import { accountNameOf } from '../../../helpers/accountName';
 import { setChatLanguage } from '../../../services/languageSettings';
 import { composeName } from '../../../helpers/displayName';
 import { isUnresolvedSenderId } from '../../../helpers/isUnresolvedSenderId';
 
+/** The user id part of `${appId}_${userId}[@host]` (or a bare id). */
+const userIdOf = (value?: string | null): string =>
+  String(value || '').split('@')[0].split('_').pop() || '';
+
 /** A name, unless it is only the account's id standing in for one. */
 const nameOrNothing = (name?: string | null): string => {
   const trimmed = String(name ?? '').trim();
@@ -239,7 +249,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         usersArrayLength
       );
 
-      if (!normalizedChat || !client) {return;}
+      if (!normalizedChat || !client) {return null;}
 
       dispatch(addRoomViaApi({ room: normalizedChat, xmpp: client }));
       dispatch(setCurrentRoom({ roomJID: normalizedChat?.jid || '' }));
@@ -251,11 +261,93 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         type: 'success',
         duration: 3000,
       });
+      return normalizedChat;
     } catch (error) {
       console.error('Error handling room creation:', error);
+      return null;
     }
   };
 
+  // Open (or create) the 1:1 room with the profile's user. Shared by
+  // "Message" and the call buttons, which need the room's JID to dial.
+  const ensurePrivateRoom = useCallback(async (
+    e2ee = false
+  ): Promise<{
+    jid: string;
+    bareName: string;
+    peerXmppUsername: string | null;
+    peerDisplay: string;
+  } | null> => {
+    const peerDisplay = nameOrNothing(selectedUser?.name);
+    if (config?.newArch) {
+      const target = selectedUser?.userJID ?? (selectedUser?.id || '');
+      // Reuse the 1:1 room we already have with this user instead of
+      // POSTing /chats/private again: repeating it for an existing room
+      // has been seen to inflate the server's usersCnt and member list.
+      const peerLocal = String(target).split('@')[0];
+      const existing = Object.values(store.getState().rooms.rooms || {}).find(
+        (room: any) =>
+          room?.type === 'private' &&
+          !!peerLocal &&
+          [...(room.roomMembers || []), ...(room.members || [])].some(
+            // REST rows carry the bare user id, stanza rows `${appId}_${id}`:
+            // compare on the user id part.
+            (m: any) => userIdOf(m?.xmppUsername || m?._id) === userIdOf(peerLocal)
+          )
+      ) as any;
+      if (existing?.jid && !e2ee) {
+        dispatch(setCurrentRoom({ roomJID: existing.jid }));
+        return {
+          jid: existing.jid,
+          bareName: existing.jid.split('@')[0],
+          peerXmppUsername: peerLocal || null,
+          peerDisplay: peerDisplay || nameOrNothing(existing.title),
+        };
+      }
+      const newRoom = await postPrivateRoom(target, e2ee);
+      const created = await handleRoomCreation(newRoom, 2);
+      if (!created?.jid) {return null;}
+      return {
+        jid: created.jid,
+        bareName: created.jid.split('@')[0],
+        peerXmppUsername: String(target).split('@')[0] || null,
+        peerDisplay: peerDisplay || nameOrNothing((created as any).title),
+      };
+    }
+
+    const selectedUserUsername = walletToUsername(selectedUser?.id || '');
+    const myUsername = walletToUsername(user.defaultWallet.walletAddress);
+
+    const roomJid = [myUsername, selectedUserUsername]
+      .sort()
+      .join('.')
+      .toLowerCase();
+
+    const combinedUsersName = [
+      user.firstName,
+      selectedUser?.name?.split(' ')?.[0] || '',
+    ]
+      .sort()
+      .join(' and ');
+
+    const newRoomJid =
+      (await client?.createPrivateRoomStanza(
+        combinedUsersName,
+        `Private chat ${combinedUsersName}`,
+        roomJid
+      )) || '';
+
+    if (!newRoomJid) {return null;}
+    await client?.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
+    await client?.getRoomsStanza();
+    return {
+      jid: newRoomJid,
+      bareName: newRoomJid.split('@')[0],
+      peerXmppUsername: selectedUserUsername || null,
+      peerDisplay,
+    };
+  }, [selectedUser, config?.newArch, client, user]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const openPrivateRoom = useCallback(async (e2ee: boolean) => {
     showToast({
       id: Date.now().toString(),
@@ -264,43 +356,62 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
       type: 'info',
       duration: 3000,
     });
-    if (config?.newArch) {
-      const newRoom = await postPrivateRoom(
-        selectedUser?.userJID ?? (selectedUser?.id || ''),
-        e2ee
-      );
-      handleRoomCreation(newRoom, 2);
-    } else {
-      const selectedUserUsername = walletToUsername(selectedUser?.id || '');
-      const myUsername = walletToUsername(user.defaultWallet.walletAddress);
-
-      const roomJid = [myUsername, selectedUserUsername]
-        .sort()
-        .join('.')
-        .toLowerCase();
-
-      const combinedUsersName = [
-        user.firstName,
-        selectedUser?.name?.split(' ')?.[0] || '',
-      ]
-        .sort()
-        .join(' and ');
-
-      const newRoomJid =
-        (await client?.createPrivateRoomStanza(
-          combinedUsersName,
-          `Private chat ${combinedUsersName}`,
-          roomJid
-        )) || '';
-
-      if (newRoomJid) {
-        await client?.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
-        await client?.getRoomsStanza();
-      }
+    await ensurePrivateRoom(e2ee);
+    dispatch(setActiveModal(undefined));
+  }, [ensurePrivateRoom, t]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Calls from the profile, as on web: open the 1:1 room, then dial it the
+  // same way the chat header does.
+  const videoCallsConfig = config?.videoCalls;
+  const canCall =
+    videoCallsConfig?.enabled === true &&
+    Boolean(videoCallsConfig?.livekitUrl?.trim()) &&
+    (videoCallsConfig?.allowedRoomTypes || ['private']).includes('private');
+  const isAudioCallsEnabled = canCall && videoCallsConfig?.enableAudioCalls === true;
+  const isCallBusy = useSelector((state: RootState) => state.call.phase !== 'idle');
+
+  const handleCall = useCallback(async (kind: 'audio' | 'video') => {
+    if (isCallBusy) {return;}
+    let room: Awaited<ReturnType<typeof ensurePrivateRoom>> = null;
+    try {
+      room = await ensurePrivateRoom();
+    } catch (error) {
+      console.warn('Could not open the private chat for a call:', error);
+    }
+    if (!room) {return;}
+
+    dispatch(
+      startOutgoingCall({
+        roomJid: room.jid,
+        roomName: room.peerDisplay || room.bareName,
+        roomBareName: room.bareName,
+        kind,
+        peerXmppUsername: room.peerXmppUsername,
+      })
+    );
+
+    // The server drops `kind` on the relayed call-token, so signal the peer
+    // directly first, as CallButtons does.
+    if (room.peerXmppUsername) {
+      sendCallInviteSignal(kind, {
+        peerXmppUsername: room.peerXmppUsername,
+        roomBareName: room.bareName,
+      });
     }
 
+    // Close the profile so the call screen isn't behind it.
     dispatch(setActiveModal(undefined));
-  }, [selectedUser, t]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    try {
+      await createChatCall(room.bareName, { kind });
+    } catch (error) {
+      dispatch(
+        setCallError(
+          error instanceof Error ? error.message : t('call.error.connectFailed')
+        )
+      );
+    }
+  }, [ensurePrivateRoom, isCallBusy, t]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handlePrivateMessage = useCallback(
     () => openPrivateRoom(false),
@@ -374,6 +485,26 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
                       ]
                     : []),
                 ]),
+            ...(canCall && !isCallBusy
+              ? [
+                  {
+                    key: 'video-call',
+                    label: isAudioCallsEnabled ? t('action.videoCall') : t('action.call'),
+                    icon: (color: string) => <VideoCallIcon color={color} />,
+                    onPress: () => void handleCall('video'),
+                  },
+                  ...(isAudioCallsEnabled
+                    ? [
+                        {
+                          key: 'audio-call',
+                          label: t('action.audioCall'),
+                          icon: (color: string) => <AudioCallIcon color={color} />,
+                          onPress: () => void handleCall('audio'),
+                        },
+                      ]
+                    : []),
+                ]
+              : []),
             {
               key: 'share',
               label: t('action.share'),
@@ -381,7 +512,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
               onPress: handleShare,
             },
           ],
-    [isOwnProfile, t, handleShare, handlePrivateMessage, handleEncryptedPrivateMessage, canStartEncrypted, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
+    [isOwnProfile, t, handleShare, handlePrivateMessage, handleEncryptedPrivateMessage, canStartEncrypted, handleLogout, canCall, isCallBusy, isAudioCallsEnabled, handleCall] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // Collapsed, the hero's round buttons are gone — the "…" menu carries

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '../../hooks/useTheme';
 import { resolveTheme } from '../../theme/theme';
 import { BellOffIcon, LockIcon } from '../../assets/icons';
 import { useT } from '../../i18n/useT';
+import { formatCallLogLabel } from '../../helpers/callLogMessage';
 import { composeName } from '../../helpers/displayName';
 import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
 
@@ -75,13 +76,19 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
       return {
         ...message,
+        // A call-log entry's body is English frozen at receive time; rebuild
+        // it from the callLog meta so the preview follows the current
+        // language like the transcript does (mirrors web's ChatRoomItem).
+        body: message.callLog
+          ? formatCallLogLabel(message.callLog, t, message.body)
+          : message.body,
         user: {
           ...message.user,
           name: safeName,
         },
       };
     },
-    [usersSet]
+    [usersSet, t]
   );
 
   const lastMessage = useMemo(() => {

package/src/components/VideoCalls/ActiveCallBar.tsx

@@ -0,0 +1,176 @@
+import React, { FC, useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { RootState } from '../../roomStore';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import { ExpandIcon, HangUpIcon, MicOffIcon, MicOnIcon } from './CallIcons';
+import { toggleCallMic, useCallSession } from './callSessionController';
+import { terminateActiveCall } from './callActions';
+import { registerCallBarHost, setCallMinimized, useCallUi } from './callUiStore';
+import { formatCallDuration, useSharedCallElapsed } from './VideoCallSession';
+
+const DANGER = '#E53935';
+const ON_BAR = '#FFFFFF';
+const CONTROL = 'rgba(255, 255, 255, 0.2)';
+
+/** True while a call is up and minimized, i.e. the strip should show. */
+const useShowCallBar = (): boolean => {
+  const { minimized } = useCallUi();
+  const active = useSelector(
+    (state: RootState) =>
+      !!state.call.token &&
+      (state.call.phase === 'connecting' || state.call.phase === 'in-call')
+  );
+  const { config } = useChatSettingState();
+  return minimized && active && config?.videoCalls?.enabled === true;
+};
+
+/**
+ * The minimized call: a strip with who, how long, mic, expand and hang up.
+ * Tapping anywhere on it (outside the buttons) brings the call back
+ * full-screen, like Telegram's "return to call" bar.
+ */
+export const ActiveCallBar: FC<{ topInset?: number }> = ({ topInset = 0 }) => {
+  const t = useT();
+  const theme = useTheme();
+  const { icons } = useChatSettingState().config?.videoCalls || {};
+  const peerName = useSelector((state: RootState) => state.call.roomName);
+  const session = useCallSession();
+  const elapsed = useSharedCallElapsed(session.anchorAt);
+
+  const name = peerName || session.remoteName || t('call.unknownCaller');
+  const status =
+    elapsed !== null
+      ? formatCallDuration(elapsed)
+      : !session.connected
+        ? t('call.status.connecting')
+        : !session.remoteJoined
+          ? t('call.status.waitingForPeer')
+          : t('call.status.inCall');
+  const statusLine = session.remoteMicMuted
+    ? `${status} · ${t('call.peerMuted', { name })}`
+    : status;
+  const expand = () => setCallMinimized(false);
+
+  return (
+    <Pressable
+      onPress={expand}
+      accessibilityRole="button"
+      accessibilityLabel={t('call.action.expand')}
+      style={[styles.bar, { backgroundColor: theme.success, paddingTop: 8 + topInset }]}
+    >
+      <View style={styles.info}>
+        <Text numberOfLines={1} style={styles.name}>
+          {name}
+        </Text>
+        <Text numberOfLines={1} style={styles.status}>
+          {statusLine}
+        </Text>
+      </View>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={session.micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
+        onPress={toggleCallMic}
+        style={[styles.button, { backgroundColor: session.micOn ? CONTROL : DANGER }]}
+        hitSlop={6}
+      >
+        {session.micOn
+          ? (icons?.micOn ?? <MicOnIcon color={ON_BAR} size={18} />)
+          : (icons?.micOff ?? <MicOffIcon color={ON_BAR} size={18} />)}
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.expand')}
+        onPress={expand}
+        style={[styles.button, { backgroundColor: CONTROL }]}
+        hitSlop={6}
+      >
+        <ExpandIcon color={ON_BAR} size={18} />
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.hangUp')}
+        onPress={() => terminateActiveCall('ended')}
+        style={[styles.button, { backgroundColor: DANGER }]}
+        hitSlop={6}
+      >
+        {icons?.hangup ?? <HangUpIcon color={ON_BAR} size={18} />}
+      </TouchableOpacity>
+    </Pressable>
+  );
+};
+
+/**
+ * Mounted under each SDK header (chat and room list). Registers the header
+ * as a place for the strip and renders it while this header is the current
+ * host and a call is minimized; renders nothing otherwise.
+ */
+export const HeaderCallBar: FC = () => {
+  const [hostId, setHostId] = useState<number | null>(null);
+  const { barHost } = useCallUi();
+  const show = useShowCallBar();
+
+  // Returns its own unregister, which is the effect's cleanup.
+  useEffect(() => registerCallBarHost(setHostId), []);
+
+  if (!show || hostId === null || barHost !== hostId) {return null;}
+  return <ActiveCallBar />;
+};
+
+/**
+ * The overlay's fallback when no SDK header is on screen: the same strip,
+ * docked to the top under the status bar.
+ */
+export const DockedCallBar: FC = () => {
+  const insets = useSafeAreaInsets();
+  const { barHost } = useCallUi();
+  const show = useShowCallBar();
+  if (!show || barHost !== null) {return null;}
+  return (
+    <View style={styles.docked} pointerEvents="box-none">
+      <ActiveCallBar topInset={insets.top} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  info: {
+    flex: 1,
+    minWidth: 0,
+  },
+  name: {
+    color: ON_BAR,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  status: {
+    color: 'rgba(255, 255, 255, 0.85)',
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+  },
+  button: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  docked: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1001,
+    elevation: 12,
+  },
+});

package/src/components/VideoCalls/CallButtons.tsx

@@ -71,7 +71,11 @@ export const CallButtons: FC = () => {
       // Don't show "deleted" / "Deleted User" / "Unknown" as the dial
       // screen title when the chat title is one of the server sentinels.
       // Prefer the peer's first+last name, falling back to the bare chat name.
-      const rawTitle = String(currentRoom.name || '').trim();
+      // `title` is what the header shows ("John Pauliller"); on new-arch
+      // private rooms `name` is the bare room id.
+      const rawTitle = String(
+        (currentRoom as any).title || currentRoom.name || ''
+      ).trim();
       const isBadTitle =
         !rawTitle ||
         ['deleted', 'deleted user', 'unknown', 'null'].includes(