@ethora/chat-component-rn 26.5.20 → 26.6.10

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -6,12 +6,16 @@ import {
 } from './styledModalComponents';
 import { BackIcon, MoreIcon, QrIcon } from '../../assets/icons';
 import Button from '../styled/Button';
-import { Text } from 'react-native';
+import { Text, StyleProp, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { resolveHeaderHeight } from '../../helpers/headerLayout';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
   headerTitle?: string;
+  /** Optional size/weight override for the header title text. */
+  titleStyle?: StyleProp<TextStyle>;
   rightMenu?: React.ReactNode;
   leftMenu?: React.ReactNode;
 }
@@ -19,6 +23,7 @@ interface ModalHeaderComponentProps {
 const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   handleCloseModal,
   headerTitle,
+  titleStyle,
   rightMenu,
   leftMenu,
 }) => {
@@ -28,15 +33,27 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   // mounted by ReduxWrapper, so this reads the live per-device inset
   // (notch / Dynamic Island / nothing).
   const insets = useSafeAreaInsets();
+  const { config } = useChatSettingState();
+  // Same band height as the in-chat header, sitting BELOW the status-bar
+  // inset. Total = inset + band; paddingTop carries the inset and the band
+  // is the content area (centered via HeaderContainer's align-items:center),
+  // so both headers match in visible height regardless of device notch.
+  const band = resolveHeaderHeight(config?.headerLayout?.height);
   return (
-    <HeaderContainer style={{ paddingTop: insets.top + 8 }}>
+    <HeaderContainer
+      style={{
+        paddingTop: insets.top,
+        paddingBottom: 0,
+        height: insets.top + band,
+      }}
+    >
       <HeaderLeft>
         {leftMenu ? (
           leftMenu
         ) : (
           <>
             <Button EndIcon={<BackIcon />} onPress={handleCloseModal} />
-            <Text>{headerTitle ?? 'Go back'}</Text>
+            <Text style={titleStyle}>{headerTitle ?? 'Go back'}</Text>
           </>
         )}
       </HeaderLeft>

package/src/components/UsersList/UsersList.tsx

@@ -19,6 +19,7 @@ import { debounce } from '../../helpers/debounce';
 import { StyledInput } from '../styled/StyledInputComponents/StyledInputComponents';
 import { useRoomState } from '../../hooks/useRoomState';
 import { Text, View } from 'react-native';
+import { useT } from '../../i18n/useT';
 
 interface UsersListProps {
   selectedUsers: RoomMember[];
@@ -36,6 +37,7 @@ const UsersList: React.FC<UsersListProps> = ({
   filter,
 }) => {
   const { usersSet } = useRoomState();
+  const t = useT();
   const [searchTerm, setSearchTerm] = useState('');
   const [filteredUsers, setFilteredUsers] = useState<RoomMember[]>([]);
 
@@ -80,7 +82,7 @@ const UsersList: React.FC<UsersListProps> = ({
       )}
 
       <StyledInput
-        placeholder="Search users..."
+        placeholder={t('modal.selectUsers.searchPlaceholder')}
         value={searchTerm}
         onChangeText={setSearchTerm}
         style={{ width: '100%' }}

package/src/components/VideoCalls/CallButtons.tsx

@@ -0,0 +1,171 @@
+import React, { FC, useCallback } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { setCallError, startOutgoingCall } from '../../roomStore/callSlice';
+import { sendCallInviteSignal } from '../../networking/callTokenStanza';
+import { createChatCall } from '../../networking/api-requests/rooms.api';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { AudioCallIcon, VideoCallIcon } from './CallIcons';
+import { useT } from '../../i18n/useT';
+import { getIconColor } from '../../helpers/getIconColor';
+
+/**
+ * The audio / video call entry points for the chat header.
+ *
+ * Kept as its own component (rather than inlined into ChatHeader like the
+ * web SDK does) so the whole call feature stays inside components/VideoCalls
+ * and ChatHeader gains exactly one line. It renders nothing at all when
+ * calls are off, which is the common case.
+ *
+ * Gating mirrors the web rules: calls need `config.videoCalls.enabled`, a
+ * `livekitUrl`, a 1:1 (private) room, and no other call already running.
+ * Audio is a second opt-in on top of that (`enableAudioCalls`).
+ */
+export const CallButtons: FC = () => {
+  const dispatch = useDispatch();
+  const t = useT();
+  const { config, user } = useChatSettingState();
+  const call = useSelector((state: RootState) => state.call);
+  const currentRoom = useSelector((state: RootState) => {
+    const jid = state.rooms.activeRoomJID;
+    return jid ? state.rooms.rooms[jid] : null;
+  });
+
+  const videoCallsConfig = config?.videoCalls;
+  const allowedRoomTypes = videoCallsConfig?.allowedRoomTypes || ['private'];
+  const isVideoCallsEnabled = videoCallsConfig?.enabled === true;
+  const isPrivateRoom = currentRoom?.type === 'private';
+  const isRoomAllowed = isPrivateRoom && allowedRoomTypes.includes('private');
+  const hasLivekitUrl = Boolean(videoCallsConfig?.livekitUrl?.trim());
+  const isCallBusy = call.phase !== 'idle';
+  const canCall = isVideoCallsEnabled && isRoomAllowed && hasLivekitUrl;
+  const isAudioCallsEnabled =
+    canCall && videoCallsConfig?.enableAudioCalls === true;
+
+  const iconColor = getIconColor(config);
+
+  const placeCall = useCallback(
+    async (kind: 'audio' | 'video') => {
+      if (!canCall || isCallBusy || !currentRoom?.jid) {
+        return;
+      }
+
+      // The call API expects the bare room name (e.g. "${appId}_<uuid>"),
+      // which createRoomFromApi stores as the JID localpart.
+      // `currentRoom.name` looks tempting but actually holds the display
+      // title (the other party's "First Last"), so passing it produces
+      // nonsense URLs like /v1/chats/call/create/test2%20test2.
+      const chatName = currentRoom.jid.split('@')[0];
+      if (!chatName) {return;}
+
+      // Resolve the peer xmpp localpart so we can XMPP-signal them when we
+      // hang up or cancel, without this they'd keep ringing forever.
+      const selfLocal = String(user?.xmppUsername || '').split('@')[0];
+      const peer = (currentRoom.members || []).find((member: any) => {
+        const mLocal = String(member?.xmppUsername || '').split('@')[0];
+        return mLocal && mLocal !== selfLocal;
+      });
+      const peerXmppUsername = peer?.xmppUsername || null;
+
+      // 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();
+      const isBadTitle =
+        !rawTitle ||
+        ['deleted', 'deleted user', 'unknown', 'null'].includes(
+          rawTitle.toLowerCase()
+        );
+      const peerDisplay = peer
+        ? `${peer.firstName || ''} ${peer.lastName || ''}`.trim() ||
+          (peer as any).name ||
+          ''
+        : '';
+      const dialName =
+        (isBadTitle ? peerDisplay : rawTitle) || peerDisplay || chatName;
+
+      dispatch(
+        startOutgoingCall({
+          roomJid: currentRoom.jid,
+          roomName: dialName,
+          roomBareName: chatName,
+          kind,
+          peerXmppUsername,
+        })
+      );
+
+      // Server's broadcast call-token currently drops the `kind` attribute,
+      // so signal it directly to the peer first. Direct chat is fast
+      // (~50ms) and almost always lands before the server-relayed token
+      // (~200-300ms), so the callee enters the right UI mode.
+      if (peerXmppUsername) {
+        sendCallInviteSignal(kind, {
+          peerXmppUsername,
+          roomBareName: chatName,
+        });
+      }
+
+      try {
+        await createChatCall(chatName, { kind });
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : t('call.error.connectFailed');
+        dispatch(setCallError(message));
+      }
+    },
+    [canCall, isCallBusy, currentRoom, user?.xmppUsername, dispatch, t]
+  );
+
+  if (!canCall || isCallBusy) {
+    return null;
+  }
+
+  return (
+    <View style={styles.row}>
+      {isAudioCallsEnabled && (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={t('call.action.startAudioCall')}
+          onPress={() => {
+            void placeCall('audio');
+          }}
+          style={styles.button}
+          hitSlop={8}
+        >
+          <AudioCallIcon color={iconColor} size={22} />
+        </TouchableOpacity>
+      )}
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.startVideoCall')}
+        onPress={() => {
+          void placeCall('video');
+        }}
+        style={styles.button}
+        hitSlop={8}
+      >
+        <VideoCallIcon color={iconColor} size={22} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default CallButtons;

package/src/components/VideoCalls/CallIcons.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import Svg, { Path, Rect, Line, Circle } from 'react-native-svg';
+
+/**
+ * Call-control glyph set, 24px, mirrored from the web SDK's inline icons
+ * (components/VideoCalls/VideoCallSession.tsx) so the two platforms read
+ * the same. The "off" variants overlay a diagonal slash: a thick `cutColor`
+ * line under a thin icon-color line, so the slash stays legible against the
+ * glyph on any button background.
+ *
+ * Hosts can replace any of these through `config.videoCalls.icons`.
+ */
+
+interface IconProps {
+  color?: string;
+  cutColor?: string;
+  size?: number;
+}
+
+const DANGER = '#E53935';
+
+const Slash: React.FC<{ color: string; cutColor: string }> = ({
+  color,
+  cutColor,
+}) => (
+  <>
+    <Line
+      x1="3"
+      y1="3"
+      x2="21"
+      y2="21"
+      stroke={cutColor}
+      strokeWidth={4}
+      strokeLinecap="round"
+    />
+    <Line
+      x1="3"
+      y1="3"
+      x2="21"
+      y2="21"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    />
+  </>
+);
+
+export const MicOnIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="8.5" y="2" width="7" height="12" rx="3.5" fill={color} />
+    <Path
+      d="M5 11a7 7 0 0 0 14 0"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      fill="none"
+    />
+    <Line
+      x1="12"
+      y1="18"
+      x2="12"
+      y2="22"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const MicOffIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  cutColor = DANGER,
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="8.5" y="2" width="7" height="12" rx="3.5" fill={color} />
+    <Path
+      d="M5 11a7 7 0 0 0 14 0"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      fill="none"
+    />
+    <Line
+      x1="12"
+      y1="18"
+      x2="12"
+      y2="22"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    />
+    <Slash color={color} cutColor={cutColor} />
+  </Svg>
+);
+
+export const CameraOnIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="2" y="6" width="13" height="12" rx="3" fill={color} />
+    <Path d="M15 11l6-3.5v9L15 13v-2z" fill={color} />
+  </Svg>
+);
+
+export const CameraOffIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  cutColor = DANGER,
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="2" y="6" width="13" height="12" rx="3" fill={color} />
+    <Path d="M15 11l6-3.5v9L15 13v-2z" fill={color} />
+    <Slash color={color} cutColor={cutColor} />
+  </Svg>
+);
+
+export const HangUpIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M2.5 14.2c-.7-.7-.6-1.9.2-2.5C5 9.9 8.4 8.9 12 8.9s7 1 9.3 2.8c.8.6.9 1.8.2 2.5l-1.6 1.6c-.6.6-1.5.7-2.2.2l-2-1.4a1.7 1.7 0 0 1-.7-1.4v-1.1c-1-.3-2-.4-3-.4s-2 .1-3 .4v1.1c0 .6-.3 1.1-.7 1.4l-2 1.4c-.7.5-1.6.4-2.2-.2l-1.6-1.6z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export const AudioCallIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M6.6 2h2.2c.5 0 .9.3 1 .8l.9 3.4c.1.4 0 .8-.4 1.1L8.7 8.6a13 13 0 0 0 6.7 6.7l1.3-1.6c.3-.3.7-.5 1.1-.4l3.4.9c.5.1.8.5.8 1v2.2c0 1.4-1.2 2.6-2.6 2.5A18.4 18.4 0 0 1 2.1 4.6C2 3.2 3.2 2 4.6 2h2z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export const VideoCallIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="2" y="6" width="13" height="12" rx="3" fill={color} />
+    <Path d="M15 11l6-3.5v9L15 13v-2z" fill={color} />
+  </Svg>
+);
+
+export const SwitchCameraIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M9 4h6l1.2 2H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.8L9 4z"
+      stroke={color}
+      strokeWidth={1.8}
+      fill="none"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M9.5 12.5A2.5 2.5 0 0 1 14 11m.5 2.5A2.5 2.5 0 0 1 10 15"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      fill="none"
+    />
+    <Path d="M14 9.5V11h-1.5M10 16.5V15h1.5" stroke={color} strokeWidth={1.8} />
+  </Svg>
+);
+
+export const SpeakerIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M4 9h3l4-4v14l-4-4H4V9z" fill={color} />
+    <Path
+      d="M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      fill="none"
+    />
+  </Svg>
+);
+
+export const SpeakerOffIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  cutColor = DANGER,
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M4 9h3l4-4v14l-4-4H4V9z" fill={color} />
+    <Slash color={color} cutColor={cutColor} />
+  </Svg>
+);
+
+export const MinimizeIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 14h5v5M19 10h-5V5"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </Svg>
+);
+
+export const ExpandIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M9 4H4v5M15 20h5v-5"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </Svg>
+);
+
+export const PersonIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="8" r="4" fill={color} />
+    <Path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" fill={color} />
+  </Svg>
+);