@ethora/chat-component-rn 26.10.10 → 26.10.11

package/src/components/Modals/ChatProfileModal/ReportChatModal.tsx

@@ -19,21 +19,19 @@ import { getIconColor } from '../../../helpers/getIconColor';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useTheme } from '../../../hooks/useTheme';
 import type { ChatTheme } from '../../../theme/theme';
+import {
+  buildReportRoomPayload,
+  OTHER_REPORT_CATEGORY,
+  REPORT_CATEGORIES,
+} from '../../../helpers/reportRoom';
 
 /**
- * Category ids go to `POST /v1/chats/reports/{chatName}` as-is; the labels
- * come from the i18n table, which already carried `report.category.*`
- * strings in all six locales with nothing rendering them until now.
+ * The ids are UI ids: helpers/reportRoom maps each one onto the category
+ * value `POST /v1/chats/reports/{chatName}` accepts and builds the
+ * non-empty text it requires. Labels come from the `report.category.*`
+ * strings.
  */
-const CATEGORIES = [
-  'spam',
-  'violence',
-  'childAbuse',
-  'pornography',
-  'personalDetails',
-  'illegalDrugs',
-  'other',
-] as const;
+const CATEGORIES = [...REPORT_CATEGORIES, OTHER_REPORT_CATEGORY];
 
 interface ReportChatModalProps {
   visible: boolean;
@@ -66,17 +64,19 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
 
   const submit = async () => {
     if (!category || sending) {return;}
+    const payload = buildReportRoomPayload(
+      roomJid || activeRoom?.jid || '',
+      category,
+      details
+    );
+    if (!payload) {return;}
     setSending(true);
     try {
-      await postReportRoom({
-        chatName: (roomJid || activeRoom?.jid || '').split('@')[0],
-        category,
-        text: details.trim() || undefined,
-      });
+      await postReportRoom(payload);
       showToast({
         id: Date.now().toString(),
         title: t('toast.successTitle'),
-        message: t('modal.report.chatTitle'),
+        message: t('toast.reportSent'),
         type: 'success',
       });
       close();
@@ -85,7 +85,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
       showToast({
         id: Date.now().toString(),
         title: t('toast.error'),
-        message: t('modal.report.chatTitle'),
+        message: t('toast.reportFailed'),
         type: 'error',
       });
     } finally {
@@ -110,7 +110,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
         <View style={styles.card}>
           <Text style={styles.title}>{t('modal.report.chatTitle')}</Text>
           <View style={styles.categories}>
-            {CATEGORIES.map((id) => {
+            {CATEGORIES.map(({ id, labelKey }) => {
               const selected = category === id;
               return (
                 <TouchableOpacity
@@ -126,13 +126,13 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
                   <Text
                     style={[styles.categoryLabel, selected && { color: primary }]}
                   >
-                    {t(`report.category.${id}`)}
+                    {t(labelKey)}
                   </Text>
                 </TouchableOpacity>
               );
             })}
           </View>
-          {category === 'other' && (
+          {category === OTHER_REPORT_CATEGORY.id && (
             <TextInput
               testID="report-details"
               style={styles.input}

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

@@ -33,7 +33,6 @@ import { useTheme } from '../../../hooks/useTheme';
 import type { ChatTheme } from '../../../theme/theme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { getElementFont } from '../../../helpers/getElementFont';
-import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import {
   setActiveFile,
@@ -44,7 +43,6 @@ import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
 import { useLogout } from '../../../hooks/useLogout';
 import {
   ApiRoom,
-  createChatCall,
   ownAppId,
   postPrivateRoom,
 } from '../../../networking/api-requests/rooms.api';
@@ -53,9 +51,14 @@ import { useSelector } from 'react-redux';
 import { store, type RootState } from '../../../roomStore';
 import { setCallError, startOutgoingCall } from '../../../roomStore/callSlice';
 import { sendCallInviteSignal } from '../../../networking/callTokenStanza';
+import { requestOutgoingCall } from '../../../calls/startCall';
+import { isCallRoomTypeAllowed } from '../../../calls/callMode';
 import { AudioCallIcon, VideoCallIcon } from '../../VideoCalls/CallIcons';
 import { accountNameOf } from '../../../helpers/accountName';
-import { setChatLanguage } from '../../../services/languageSettings';
+import {
+  chatLanguageChoices,
+  setChatLanguage,
+} from '../../../services/languageSettings';
 import { composeName } from '../../../helpers/displayName';
 import { isUnresolvedSenderId } from '../../../helpers/isUnresolvedSenderId';
 
@@ -158,15 +161,26 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     [files]
   );
 
+  // The install's translateLanguages (get-config) when the host passed
+  // them; none means no translation server, so no Language tab.
+  const languageChoices = useMemo(() => chatLanguageChoices(config), [config]);
+
   const tabs = useMemo(
     () =>
       profileTabs({
         isOwnProfile,
-        translatesEnabled: !!config?.translates?.enabled,
+        translatesEnabled:
+          !!config?.translates?.enabled && languageChoices.length > 0,
         hasMedia: media.length > 0,
         hasDocuments: documents.length > 0,
       }),
-    [isOwnProfile, config?.translates?.enabled, media.length, documents.length]
+    [
+      isOwnProfile,
+      config?.translates?.enabled,
+      languageChoices.length,
+      media.length,
+      documents.length,
+    ]
   );
 
   // Keep the selected tab valid as the lists load in.
@@ -366,7 +380,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   const canCall =
     videoCallsConfig?.enabled === true &&
     Boolean(videoCallsConfig?.livekitUrl?.trim()) &&
-    (videoCallsConfig?.allowedRoomTypes || ['private']).includes('private');
+    isCallRoomTypeAllowed('private', videoCallsConfig?.allowedRoomTypes);
   const isAudioCallsEnabled = canCall && videoCallsConfig?.enableAudioCalls === true;
   const isCallBusy = useSelector((state: RootState) => state.call.phase !== 'idle');
 
@@ -403,7 +417,11 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     dispatch(setActiveModal(undefined));
 
     try {
-      await createChatCall(room.bareName, { kind });
+      await requestOutgoingCall({
+        chatName: room.bareName,
+        kind,
+        peerXmppUsername: room.peerXmppUsername || null,
+      });
     } catch (error) {
       dispatch(
         setCallError(
@@ -556,8 +574,9 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     if (activeTab === 'language') {
       return (
         <View>
-          {LANGUAGE_OPTIONS.map((option) => {
-            const selected = langSource === option.id;
+          {languageChoices.map((option) => {
+            const selected =
+              String(langSource || '').toLowerCase() === option.id.toLowerCase();
             return (
               <TouchableOpacity
                 key={option.id}

package/src/components/Modals/UserSettingsModal/LanguageCard.tsx

@@ -94,13 +94,15 @@ const LanguageCard: React.FC<LanguageCardProps> = ({ style, testID }) => {
         appChoices,
         appCurrent
       )}
-      {group(
-        'chat',
-        t('settings.language.chat'),
-        t('settings.language.chatHint'),
-        chatChoices,
-        chatCurrent
-      )}
+      {/* No translate languages from get-config: no translation server. */}
+      {chatChoices.length > 0 &&
+        group(
+          'chat',
+          t('settings.language.chat'),
+          t('settings.language.chatHint'),
+          chatChoices,
+          chatCurrent
+        )}
     </View>
   );
 };

package/src/components/VideoCalls/ActiveCallBar.tsx

@@ -9,6 +9,7 @@ import { useT } from '../../i18n/useT';
 import { ExpandIcon, HangUpIcon, MicOffIcon, MicOnIcon } from './CallIcons';
 import { toggleCallMic, useCallSession } from './callSessionController';
 import { terminateActiveCall } from './callActions';
+import { callCanRenderSession } from './callLive';
 import {
   registerCallBarHost,
   setCallBarAnchor,
@@ -33,10 +34,8 @@ 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 active = useSelector((state: RootState) =>
+    callCanRenderSession(state.call)
   );
   const { config } = useChatSettingState();
   return minimized && active && config?.videoCalls?.enabled === true;
@@ -62,7 +61,9 @@ export const ActiveCallBar: FC = () => {
       : !session.connected
         ? t('call.status.connecting')
         : !session.remoteJoined
-          ? t('call.status.waitingForPeer')
+          ? session.isGroup
+            ? t('call.status.waitingForOthers')
+            : t('call.status.waitingForPeer')
           : t('call.status.inCall');
   const statusLine = session.remoteMicMuted
     ? `${status} · ${t('call.peerMuted', { name })}`

package/src/components/VideoCalls/CallButtons.tsx

@@ -4,7 +4,8 @@ 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 { requestOutgoingCall } from '../../calls/startCall';
+import { isCallRoomTypeAllowed } from '../../calls/callMode';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { AudioCallIcon, VideoCallIcon } from './CallIcons';
 import { useT } from '../../i18n/useT';
@@ -19,7 +20,8 @@ import { getIconColor } from '../../helpers/getIconColor';
  * 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.
+ * `livekitUrl`, a 1:1 (private) or members-only group room (subject to
+ * `allowedRoomTypes`, default both), and no other call already running.
  * Audio is a second opt-in on top of that (`enableAudioCalls`).
  */
 export const CallButtons: FC = () => {
@@ -33,10 +35,14 @@ export const CallButtons: FC = () => {
   });
 
   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 isGroupRoom = currentRoom?.type === 'group';
+  // 1:1 chats and members-only group chats can call, subject to the host's
+  // videoCalls.allowedRoomTypes (default: both). Public rooms never do.
+  const isRoomAllowed = isCallRoomTypeAllowed(
+    currentRoom?.type,
+    videoCallsConfig?.allowedRoomTypes
+  );
   const hasLivekitUrl = Boolean(videoCallsConfig?.livekitUrl?.trim());
   const isCallBusy = call.phase !== 'idle';
   const canCall = isVideoCallsEnabled && isRoomAllowed && hasLivekitUrl;
@@ -60,12 +66,16 @@ export const CallButtons: FC = () => {
       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.
+      // hang up or cancel, without this they'd keep ringing forever. A group
+      // call has no single peer to signal; the server rings every member and
+      // LiveKit carries the call.
       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 peer = isGroupRoom
+        ? undefined
+        : (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
@@ -96,6 +106,7 @@ export const CallButtons: FC = () => {
           roomBareName: chatName,
           kind,
           peerXmppUsername,
+          isGroup: isGroupRoom,
         })
       );
 
@@ -111,7 +122,7 @@ export const CallButtons: FC = () => {
       }
 
       try {
-        await createChatCall(chatName, { kind });
+        await requestOutgoingCall({ chatName, kind, peerXmppUsername });
       } catch (error) {
         const message =
           error instanceof Error
@@ -120,7 +131,7 @@ export const CallButtons: FC = () => {
         dispatch(setCallError(message));
       }
     },
-    [canCall, isCallBusy, currentRoom, user?.xmppUsername, dispatch, t]
+    [canCall, isCallBusy, currentRoom, isGroupRoom, user?.xmppUsername, dispatch, t]
   );
 
   if (!canCall || isCallBusy) {

package/src/components/VideoCalls/CallControlBar.tsx

@@ -0,0 +1,131 @@
+import React, { FC } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { VideoCallIcons } from '../../types/types';
+import {
+  CameraOffIcon,
+  CameraOnIcon,
+  HangUpIcon,
+  MicOffIcon,
+  MicOnIcon,
+  SpeakerIcon,
+  SpeakerOffIcon,
+  SwitchCameraIcon,
+} from './CallIcons';
+import {
+  switchCallCamera,
+  toggleCallCamera,
+  toggleCallMic,
+  toggleCallSpeaker,
+} from './callSessionController';
+import type { CallSessionSnapshot } from './callSessionTypes';
+import { useT } from '../../i18n/useT';
+
+const TEXT_ON_DARK = '#FFFFFF';
+const DANGER = '#E53935';
+const CONTROL_IDLE = 'rgba(255, 255, 255, 0.16)';
+
+interface CallControlBarProps {
+  session: Pick<CallSessionSnapshot, 'micOn' | 'cameraOn' | 'speakerOn'>;
+  isVideo: boolean;
+  icons?: VideoCallIcons;
+  onHangup: () => void;
+}
+
+/**
+ * The row of round buttons at the foot of the call screen: mic, camera (and
+ * its flip), speaker and hang up. Shared by the 1:1 and the group layout; the
+ * controls act on whichever transport carries the call.
+ */
+export const CallControlBar: FC<CallControlBarProps> = ({
+  session,
+  isVideo,
+  icons,
+  onHangup,
+}) => {
+  const t = useT();
+  const insets = useSafeAreaInsets();
+  const { micOn, cameraOn, speakerOn } = session;
+
+  return (
+    <View style={[styles.controls, { paddingBottom: 20 + insets.bottom }]}>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
+        onPress={toggleCallMic}
+        style={[styles.controlButton, { backgroundColor: micOn ? CONTROL_IDLE : DANGER }]}
+      >
+        {micOn
+          ? (icons?.micOn ?? <MicOnIcon color={TEXT_ON_DARK} />)
+          : (icons?.micOff ?? <MicOffIcon color={TEXT_ON_DARK} />)}
+      </TouchableOpacity>
+
+      {isVideo && (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={
+            cameraOn ? t('call.action.stopCamera') : t('call.action.startCamera')
+          }
+          onPress={toggleCallCamera}
+          style={[styles.controlButton, { backgroundColor: cameraOn ? CONTROL_IDLE : DANGER }]}
+        >
+          {cameraOn
+            ? (icons?.cameraOn ?? <CameraOnIcon color={TEXT_ON_DARK} />)
+            : (icons?.cameraOff ?? <CameraOffIcon color={TEXT_ON_DARK} />)}
+        </TouchableOpacity>
+      )}
+
+      {isVideo && cameraOn && (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={t('call.action.switchCamera')}
+          onPress={switchCallCamera}
+          style={[styles.controlButton, { backgroundColor: CONTROL_IDLE }]}
+        >
+          <SwitchCameraIcon color={TEXT_ON_DARK} />
+        </TouchableOpacity>
+      )}
+
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={speakerOn ? t('call.action.speakerOff') : t('call.action.speakerOn')}
+        onPress={toggleCallSpeaker}
+        style={[styles.controlButton, { backgroundColor: CONTROL_IDLE }]}
+      >
+        {speakerOn ? <SpeakerIcon color={TEXT_ON_DARK} /> : <SpeakerOffIcon color={TEXT_ON_DARK} />}
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.hangUp')}
+        onPress={onHangup}
+        style={[styles.controlButton, styles.hangupButton]}
+      >
+        {icons?.hangup ?? <HangUpIcon color={TEXT_ON_DARK} />}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+    paddingTop: 20,
+    paddingHorizontal: 16,
+  },
+  controlButton: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  hangupButton: {
+    backgroundColor: DANGER,
+  },
+});
+
+export default CallControlBar;

package/src/components/VideoCalls/CallVideo.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { loadWebRTC } from '../../calls/p2p/webrtcRuntime';
+import { loadLiveKit } from './livekitRuntime';
+
+interface CallVideoProps {
+  /**
+   * What the session snapshot hands out: a LiveKit track reference
+   * (`{ participant, publication, source }`) or a p2p stream handle
+   * (`{ streamURL }`).
+   */
+  source: any;
+  style?: StyleProp<ViewStyle>;
+  objectFit?: 'contain' | 'cover';
+  mirror?: boolean;
+  zOrder?: number;
+}
+
+/**
+ * One video surface of a call, whichever transport it came from: LiveKit's
+ * `<VideoTrack />` for a room track, the fork's `<RTCView />` for the stream
+ * of a peer to peer connection. Renders nothing when the matching native
+ * package is missing.
+ */
+export const CallVideo: FC<CallVideoProps> = ({
+  source,
+  style,
+  objectFit,
+  mirror,
+  zOrder,
+}) => {
+  if (!source) {return null;}
+
+  if (typeof source.streamURL === 'string') {
+    const RTCView = loadWebRTC()?.RTCView;
+    return RTCView ? (
+      <RTCView
+        streamURL={source.streamURL}
+        style={style}
+        objectFit={objectFit}
+        mirror={mirror}
+        zOrder={zOrder}
+      />
+    ) : null;
+  }
+
+  const VideoTrack = loadLiveKit()?.VideoTrack;
+  return VideoTrack ? (
+    <VideoTrack
+      trackRef={source}
+      style={style}
+      objectFit={objectFit}
+      mirror={mirror}
+      zOrder={zOrder}
+    />
+  ) : null;
+};
+
+export default CallVideo;