@ethora/chat-component-rn 26.5.21 → 26.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.5.21",
+  "version": "26.6.11",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "module": "lib/module/main.js",
@@ -43,9 +43,11 @@
     ]
   },
   "peerDependencies": {
+    "@livekit/react-native": ">=2.7.0",
+    "@livekit/react-native-webrtc": ">=125.0.0",
     "@react-native-async-storage/async-storage": ">=1.21.0",
     "@react-native-community/netinfo": ">=11.0.0",
-    "expo-av": ">=15.0.0",
+    "expo-audio": ">=1.0.0",
     "expo-clipboard": ">=7.0.0",
     "expo-document-picker": ">=13.0.0",
     "expo-file-system": ">=19.0.0",
@@ -56,12 +58,22 @@
     "expo-video": ">=2.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
+    "react-native-callkeep": ">=4.3.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-get-random-values": ">=1.10.0",
     "react-native-reanimated": ">=3.0.0",
     "react-native-svg": ">=14.0.0"
   },
   "peerDependenciesMeta": {
+    "@livekit/react-native": {
+      "optional": true
+    },
+    "@livekit/react-native-webrtc": {
+      "optional": true
+    },
+    "react-native-callkeep": {
+      "optional": true
+    },
     "react-native-svg": {
       "optional": false
     },
@@ -77,7 +89,7 @@
     "react-native-gesture-handler": {
       "optional": true
     },
-    "expo-av": {
+    "expo-audio": {
       "optional": true
     },
     "expo-clipboard": {
@@ -136,6 +148,8 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
+    "@livekit/react-native": "2.7.6",
+    "@livekit/react-native-webrtc": "125.0.11",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/netinfo": "11.4.1",
     "@types/jest": "^29.5.12",
@@ -145,7 +159,7 @@
     "eslint": "^8.19.0",
     "eslint-config-expo": "~9.2.0",
     "expo": "~54.0.0",
-    "expo-av": "~16.0.8",
+    "expo-audio": "~1.1.1",
     "expo-build-properties": "^55.0.14",
     "expo-clipboard": "~8.0.8",
     "expo-document-picker": "~14.0.0",
@@ -156,11 +170,13 @@
     "expo-video": "~3.0.16",
     "jest": "^29.6.3",
     "jest-expo": "~54.0.0",
+    "livekit-client": "2.9.0",
     "patch-package": "^8.0.1",
     "prettier": "2.8.8",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-builder-bob": "^0.41.0",
+    "react-native-callkeep": "4.3.16",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-get-random-values": "~1.11.0",
     "react-native-reanimated": "~4.1.0",

package/src/components/MainComponents/ChatHeader.tsx

@@ -13,6 +13,8 @@ import { IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from './ProfileImagePlaceholder';
 import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon } from '../../assets/icons';
+import { CallButtons } from '../VideoCalls/CallButtons';
+import { LanguageSelectorButton } from './LanguageSelectorButton';
 import { useDispatch } from 'react-redux';
 import Composing from '../styled/StyledInputComponents/Composing';
 import {
@@ -30,6 +32,7 @@ import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { getElementFont } from '../../helpers/getElementFont';
+import { useT } from '../../i18n/useT';
 
 interface ChatHeaderProps {
   currentRoom: IRoom;
@@ -47,6 +50,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const roomState = useRoomState(currentRoom.jid).room;
   const composing = roomState?.composing;
   const { config } = useChatSettingState();
+  const t = useT();
 
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({ roomJID: chat.jid }));
@@ -172,7 +176,14 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   <ChatContainerHeaderLabel
                     style={[styles.subLabel, getElementFont(config, 'headerSubtitle')]}
                   >
-                    <Text>{`${currentRoom?.usersCnt} users`}</Text>
+                    <Text>
+                      {t(
+                        Number(currentRoom?.usersCnt) === 1
+                          ? 'header.userCountSingular'
+                          : 'header.userCountPlural',
+                        { count: Number(currentRoom?.usersCnt) || 0 }
+                      )}
+                    </Text>
                   </ChatContainerHeaderLabel>
                 )}
               </View>
@@ -180,13 +191,15 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           </ChatContainerHeaderBoxInfo>
         </CenterContainer>
 
-        {!config?.disableChatInfo?.disableRoomMenu ? (
-          <View style={styles.rightContainer}>
+        <View style={styles.rightContainer}>
+          {/* Renders nothing unless config.videoCalls is on and this is a
+              1:1 room, so it costs non-call hosts nothing. */}
+          <LanguageSelectorButton />
+          <CallButtons />
+          {!config?.disableChatInfo?.disableRoomMenu && (
             <RoomMenu handleLeaveClick={handleLeaveClick} />
-          </View>
-        ) : (
-          <View style={styles.rightContainer} />
-        )}
+          )}
+        </View>
       </ChatContainerHeader>
       {config?.chatHeaderAdditional?.enabled &&
           config.chatHeaderAdditional.element()}
@@ -209,8 +222,16 @@ const styles = StyleSheet.create({
     width: '15%',
   },
   rightContainer: {
-    alignItems: 'flex-end',
-    width: '15%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 4,
+    // Sized to its icons rather than a fixed 25%: the cluster is 1 to 4
+    // icons depending on config (globe, audio call, video call, room menu),
+    // and a fixed share either cramped them together or reserved dead space
+    // that the title could have used. `flexShrink: 0` keeps them intact
+    // while CenterContainer (flex:1, min-width:0) absorbs the difference.
+    flexShrink: 0,
   },
 });
 

package/src/components/MainComponents/ChatWrapper.tsx

@@ -129,6 +129,21 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     client.setActiveRoomJid?.(activeRoomJID || null);
   }, [client, activeRoomJID]);
 
+  // Pull the MUC roster as soon as a room opens (not just when the
+  // profile modal is opened — see ChatProfileModal). Message sender
+  // names fall back to the raw jid when a message doesn't carry its
+  // own senderFirstName/senderLastName, and that fallback depends on
+  // usersSet being populated; without this, any room the reader hasn't
+  // separately opened the profile modal for shows jids instead of names.
+  useEffect(() => {
+    if (!client || !activeRoomJID) {return;}
+    try {
+      client.getRoomMembersStanza?.(activeRoomJID);
+    } catch {
+      /* non-fatal */
+    }
+  }, [client, activeRoomJID]);
+
   const seededRoomJID = useMemo(
     () =>
       roomJID

package/src/components/MainComponents/LanguageSelectorButton.tsx

@@ -0,0 +1,53 @@
+import React, { FC, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
+import { useT } from '../../i18n/useT';
+import { GlobeIcon, LanguageSelectorModal } from './LanguageSelectorModal';
+
+/**
+ * Globe button in the chat header that opens the reader's language picker.
+ *
+ * Renders only when translation is on. A host that drives the reader's
+ * language from its own settings screen (via `config.translates
+ * .readerLocale`) can hide this with `showLanguageSelector: false` rather
+ * than shipping two competing controls.
+ */
+export const LanguageSelectorButton: FC = () => {
+  const { config } = useChatSettingState();
+  const t = useT();
+  const [open, setOpen] = useState(false);
+
+  const translates = config?.translates;
+  const enabled = Boolean(translates?.enabled || config?.enableTranslates);
+  if (!enabled || translates?.showLanguageSelector === false) {
+    return null;
+  }
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('language.select')}
+        onPress={() => setOpen(true)}
+        style={styles.button}
+        hitSlop={8}
+      >
+        <GlobeIcon color={getIconColor(config)} size={20} />
+      </TouchableOpacity>
+      <LanguageSelectorModal visible={open} onClose={() => setOpen(false)} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default LanguageSelectorButton;

package/src/components/MainComponents/LanguageSelectorModal.tsx

@@ -0,0 +1,276 @@
+import React, { FC, useCallback } from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+import { useDispatch } from 'react-redux';
+import {
+  setLangSource,
+  setTranslateMode,
+} from '../../roomStore/chatSettingsSlice';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { LANGUAGE_OPTIONS } from '../../helpers/constants/LANGUAGE_OPTIONS';
+import { Iso639_1Codes } from '../../types/models/language.model';
+import {
+  canReaderChooseTranslateMode,
+  resolveTranslateMode,
+} from '../../utils/translateModePolicy';
+import { useT } from '../../i18n/useT';
+import { toBaseLanguage } from '../../i18n/strings';
+import { getIconColor } from '../../helpers/getIconColor';
+
+const TEXT_PRIMARY = '#141414';
+const TEXT_MUTED = '#8C8C8C';
+const DIVIDER = '#F0F0F0';
+
+/**
+ * Ported verbatim from the web SDK's GlobeIcon (src/assets/icons.tsx) so
+ * both platforms draw the same mark. The previous RN shape was hand-rolled
+ * on a 24-box with two mirrored beziers whose meridian bulged only ~21% of
+ * the radius, which collapsed into a thin lens rather than reading as a
+ * sphere.
+ */
+export const GlobeIcon: FC<{ color?: string; size?: number }> = ({
+  color = '#8C8C8C',
+  size = 20,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Circle cx="10" cy="10" r="7.5" stroke={color} strokeWidth={1.5} />
+    <Path
+      d="M2.5 10h15M10 2.5c2 2.1 3 4.7 3 7.5s-1 5.4-3 7.5c-2-2.1-3-4.7-3-7.5s1-5.4 3-7.5Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </Svg>
+);
+
+/**
+ * The reader's language control.
+ *
+ * One switch drives two things on purpose: the language messages get
+ * translated INTO, and (through useT falling back to `langSource`) the
+ * language the interface itself is in. A reader who picks Français expects
+ * the whole chat in French, not French messages inside an English UI.
+ *
+ * The auto/manual switcher only renders when the host hasn't pinned
+ * `config.translates.forceType`, and the language list only when
+ * `showLanguageList` isn't false, for hosts that drive the reader's
+ * language from their own settings screen via `readerLocale`.
+ */
+export const LanguageSelectorModal: FC<{
+  visible: boolean;
+  onClose: () => void;
+}> = ({ visible, onClose }) => {
+  const dispatch = useDispatch();
+  const t = useT();
+  const { config, langSource, translateMode } = useChatSettingState();
+
+  const translates = config?.translates;
+  const effectiveMode = resolveTranslateMode(translates, translateMode);
+  const showModeSwitcher = canReaderChooseTranslateMode(translates);
+  const showLanguageList = translates?.showLanguageList !== false;
+  const activeLocale = translates?.readerLocale || langSource;
+
+  const selectLanguage = useCallback(
+    (id: Iso639_1Codes) => {
+      dispatch(setLangSource(id));
+      onClose();
+    },
+    [dispatch, onClose]
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      {/* Backdrop closes on tap; the card swallows the press so a tap
+          inside it doesn't dismiss. */}
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <Pressable style={styles.card} onPress={() => {}}>
+          <Text style={styles.title}>{t('language.select')}</Text>
+
+          {showModeSwitcher && (
+            <View style={styles.section}>
+              <Text style={styles.sectionLabel}>
+                {t('translation.modeLabel')}
+              </Text>
+              <View style={styles.segmented}>
+                {(['auto', 'manual'] as const).map((mode) => {
+                  const selected = effectiveMode === mode;
+                  return (
+                    <TouchableOpacity
+                      key={mode}
+                      accessibilityRole="radio"
+                      accessibilityState={{ selected }}
+                      onPress={() => dispatch(setTranslateMode(mode))}
+                      style={[
+                        styles.segment,
+                        selected && styles.segmentSelected,
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.segmentText,
+                          selected && styles.segmentTextSelected,
+                        ]}
+                      >
+                        {mode === 'auto'
+                          ? t('translation.modeAuto')
+                          : t('translation.modeManual')}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+          )}
+
+          {showLanguageList && (
+            <View style={styles.section}>
+              <Text style={styles.sectionLabel}>{t('language.select')}</Text>
+              <ScrollView style={styles.list}>
+                {LANGUAGE_OPTIONS.map((option) => {
+                  // Compare on the base language so a reader on "fr" still
+                  // sees "Français" (id fr-CA) ticked.
+                  const selected =
+                    !!activeLocale &&
+                    toBaseLanguage(activeLocale) === toBaseLanguage(option.id);
+                  return (
+                    <TouchableOpacity
+                      key={option.id}
+                      accessibilityRole="radio"
+                      accessibilityState={{ selected }}
+                      onPress={() => selectLanguage(option.id)}
+                      style={styles.listRow}
+                    >
+                      <Text
+                        style={[
+                          styles.listRowText,
+                          selected && styles.listRowTextSelected,
+                        ]}
+                      >
+                        {option.name}
+                      </Text>
+                      {selected && (
+                        <Text
+                          style={[
+                            styles.check,
+                            { color: getIconColor(config) },
+                          ]}
+                        >
+                          ✓
+                        </Text>
+                      )}
+                    </TouchableOpacity>
+                  );
+                })}
+              </ScrollView>
+            </View>
+          )}
+
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <Text style={[styles.closeText, { color: getIconColor(config) }]}>
+              {t('action.cancel')}
+            </Text>
+          </TouchableOpacity>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 420,
+    maxHeight: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 20,
+    padding: 20,
+    gap: 16,
+  },
+  title: {
+    fontSize: 18,
+    color: TEXT_PRIMARY,
+  },
+  section: {
+    gap: 8,
+  },
+  sectionLabel: {
+    fontSize: 13,
+    color: TEXT_MUTED,
+  },
+  segmented: {
+    flexDirection: 'row',
+    borderRadius: 12,
+    backgroundColor: '#F5F7F9',
+    padding: 4,
+    gap: 4,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 9,
+    alignItems: 'center',
+  },
+  segmentSelected: {
+    backgroundColor: '#fff',
+  },
+  segmentText: {
+    fontSize: 14,
+    color: TEXT_MUTED,
+  },
+  segmentTextSelected: {
+    color: TEXT_PRIMARY,
+    fontWeight: '600',
+  },
+  list: {
+    maxHeight: 260,
+  },
+  listRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: DIVIDER,
+  },
+  listRowText: {
+    fontSize: 16,
+    color: TEXT_PRIMARY,
+  },
+  listRowTextSelected: {
+    fontWeight: '600',
+  },
+  check: {
+    fontSize: 16,
+  },
+  closeButton: {
+    alignItems: 'center',
+    paddingVertical: 12,
+  },
+  closeText: {
+    fontSize: 15,
+  },
+});
+
+export default LanguageSelectorModal;

package/src/components/MainComponents/MediaMessage.tsx

@@ -183,6 +183,11 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
           <CustomMessageVideo
             fileName={displayName}
             fileURL={location || ''}
+            // `messageText` is the message's locationPreview — the poster
+            // frame the backend generated for this video. Handing it over
+            // lets the bubble render as a still + play badge instead of
+            // mounting a video surface per row (see VideoMessage).
+            previewURL={messageText}
             mimetype={mimeType}
           />
         );

package/src/components/MainComponents/RoomList.tsx

@@ -25,6 +25,7 @@ import Button from '../styled/Button';
 import { HeaderRoomList } from '../Header/HeaderRoomList';
 import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useT } from '../../i18n/useT';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -40,6 +41,7 @@ const RoomList: React.FC<RoomListProps> = ({
   onRoomClick,
 }) => {
   const { config } = useChatSettingState();
+  const t = useT();
 
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -178,6 +180,20 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
+              {/* Search sits ABOVE the list rather than in its
+                  ListHeaderComponent. As a list header it was simply the
+                  first scrolling row, so the moment you scrolled the rooms
+                  it slid up and disappeared behind the opaque header band.
+                  Fixed here it stays reachable, which is the entire point
+                  of a search field over a long list. */}
+              <View style={styles.searchBar}>
+                <SearchInput
+                  icon={<SearchIcon height={20} />}
+                  value={searchTerm}
+                  onChangeText={handleSearchChange}
+                  placeholder={t('search.placeholder')}
+                />
+              </View>
               <FlatList
                 data={filteredChats}
                 keyExtractor={(item) => item.jid}
@@ -195,14 +211,6 @@ const RoomList: React.FC<RoomListProps> = ({
                     <ChatRoomItem chat={item} config={config} />
                   </Pressable>
                 )}
-                ListHeaderComponent={
-                  <SearchInput
-                    icon={<SearchIcon height={20} />}
-                    value={searchTerm}
-                    onChangeText={handleSearchChange}
-                    placeholder="Search..."
-                  />
-                }
                 style={styles.chatList}
               />
 
@@ -241,9 +249,19 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between',
   },
+  searchBar: {
+    // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
+    // height. In a column parent that flex resolves VERTICALLY against a
+    // parent with no height of its own and collapses the field to nothing
+    // but its magnifier. As a row it resolves to width, which is what it
+    // meant back when the field was a list-header child.
+    flexDirection: 'row',
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    backgroundColor: '#FAFAFA',
+  },
   chatList: {
     flex: 1,
-    paddingTop: 8,
     paddingHorizontal: 16,
     backgroundColor: '#FAFAFA',
   },