@ethora/chat-component-rn 26.10.9 → 26.10.11

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

@@ -0,0 +1,191 @@
+/** @format */
+
+import React, { useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../../roomStore';
+import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+import { useLeaveRoom } from '../../../hooks/useLeaveRoom';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+import type { ChatTheme } from '../../../theme/theme';
+
+interface LeaveChatModalProps {
+  /** The room to leave; the modal is shown while this is set. */
+  roomJid: string | null;
+  onClose: () => void;
+  /** Called after the server took us out, before the modal closes. */
+  onLeft?: (jid: string) => void;
+}
+
+/**
+ * Telegram-style confirmation in front of every Leave: the chat's avatar and
+ * name, the question, Cancel and a red Leave. The leave itself runs here, so
+ * the card stays up with a spinner until the server answers and a failure is
+ * reported over it instead of after it has gone.
+ */
+const LeaveChatModal: React.FC<LeaveChatModalProps> = ({
+  roomJid,
+  onClose,
+  onLeft,
+}) => {
+  const t = useT();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const fileToken = useFileToken();
+  const leaveRoom = useLeaveRoom();
+  const room = useSelector((state: RootState) =>
+    roomJid ? state.rooms.rooms?.[roomJid] : undefined
+  );
+  const [leaving, setLeaving] = useState(false);
+
+  const name = room?.title || room?.name || '';
+
+  const close = () => {
+    if (!leaving) {onClose();}
+  };
+
+  const confirm = async () => {
+    if (!roomJid || leaving) {return;}
+    setLeaving(true);
+    const ok = await leaveRoom(roomJid);
+    setLeaving(false);
+    if (!ok) {
+      Alert.alert(t('toast.error'), t('toast.leaveFailed'));
+      return;
+    }
+    onLeft?.(roomJid);
+    onClose();
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={roomJid !== null}
+      animationType="fade"
+      onRequestClose={close}
+    >
+      <View style={styles.backdrop}>
+        <TouchableOpacity
+          testID="leave-backdrop"
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={close}
+        />
+        <View style={styles.card}>
+          <View style={styles.header}>
+            <ProfileImagePlaceholder
+              name={name}
+              size={40}
+              icon={appendFileToken(room?.icon, fileToken)}
+              disableOverlay
+            />
+            <Text style={styles.title} numberOfLines={1}>
+              {t('modal.leaveChat.title')}
+            </Text>
+          </View>
+          <Text style={styles.description}>
+            {name
+              ? t('modal.leaveChat.descriptionNamed', { name })
+              : t('modal.leaveChat.description')}
+          </Text>
+          <View style={styles.buttons}>
+            <TouchableOpacity
+              testID="leave-cancel"
+              activeOpacity={0.7}
+              disabled={leaving}
+              style={[styles.button, styles.cancel]}
+              onPress={close}
+            >
+              <Text style={styles.cancelLabel}>{t('action.cancel')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="leave-confirm"
+              activeOpacity={0.7}
+              disabled={leaving}
+              style={[styles.button, { backgroundColor: theme.danger }]}
+              onPress={confirm}
+            >
+              {leaving ? (
+                <ActivityIndicator color={theme.textOnPrimary} />
+              ) : (
+                <Text style={styles.leaveLabel}>{t('action.leave')}</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: theme.overlay,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 400,
+    borderRadius: 16,
+    backgroundColor: theme.surface,
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 12,
+  },
+  title: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    color: theme.text,
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 21,
+    color: theme.text,
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 20,
+  },
+  button: {
+    flex: 1,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancel: {
+    backgroundColor: theme.surfaceSecondary,
+  },
+  cancelLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: theme.text,
+  },
+  leaveLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.textOnPrimary,
+  },
+});
+
+export default LeaveChatModal;

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/FilePreviewModal/FilePreviewModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { withFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import {
@@ -10,26 +10,28 @@ import ModalHeaderComponent from '../ModalHeaderComponent';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useTheme } from '../../../hooks/useTheme';
 import { chatTextStyle } from '../../../helpers/typography';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 import Button from '../../styled/Button';
 import { RootState } from '../../../roomStore';
 import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
 import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
+import type { ModalFile } from '../../../types/types';
+import MediaViewer from './MediaViewer';
+import { isLocalFile, useSaveFile } from './useSaveFile';
+import { withChatSiblings } from '../../../helpers/roomMedia';
+import { loadRoomHistory } from '../../../helpers/loadRoomHistory';
+import { getGlobalXmppClient } from '../../../utils/clientRegistry';
+import { useFileToken } from '../../../hooks/useFileToken';
 import {
   ActivityIndicator,
-  Alert,
   Text,
   View,
   Platform,
   TouchableOpacity,
   StyleSheet,
-  Share,
 } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { PlayIcon } from '../../../assets/icons';
-import * as FileSystem from 'expo-file-system/legacy';
-import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
-import { useToast } from '../../../context/ToastContext';
 import { useT } from '../../../i18n/useT';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
@@ -44,7 +46,6 @@ import {
 } from '../../../helpers/videoCache';
 import {
   getDisplayFileName,
-  getUniqueFileName,
   sanitizeFileNameForPath,
 } from '../../../helpers/getDisplayFileName';
 
@@ -62,13 +63,12 @@ const GVIEW_PREVIEWABLE = new Set<string>([
   'application/rtf',
 ]);
 
-const isLocalFile = (url: string | undefined | null) =>
-  /^file:\/\//i.test(url || '');
+const isMedia = (mime: string | undefined | null) =>
+  !!mime && (mime.startsWith('image/') || mime.startsWith('video/'));
 
-const fetchToCache = async (url: string, cachePath: string) =>
-  isLocalFile(url)
-    ? { status: 200, uri: url }
-    : FileSystem.downloadAsync(withFileToken(url), cachePath);
+/** Older history pages the viewer asked for; one at a time per room. */
+const historyInFlight = new Set<string>();
+const HISTORY_PAGE_SIZE = 30;
 
 const isGviewPreviewable = (mime: string | undefined | null) => {
   if (!mime) {return false;}
@@ -246,11 +246,94 @@ interface FilePreviewModalProps {
   handleCloseModal: any;
 }
 
+/** The viewer on the store's `activeFile`, as opened from a message bubble. */
 const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   handleCloseModal,
 }) => {
   const dispatch = useDispatch();
-  const { showToast } = useToast();
+  const store = useStore<RootState>();
+  const { activeFile } = useSelector(
+    (state: RootState) => state.chatSettingStore
+  );
+  const { user, config } = useChatSettingState();
+  const fileToken = useFileToken();
+  const roomJid = activeFile?.source?.roomJid;
+  const room = useSelector((state: RootState) =>
+    roomJid ? state.rooms.rooms?.[roomJid] : undefined
+  );
+  const messages = room?.messages;
+
+  // A picture or video opened from a bubble pages through the whole chat;
+  // anything not in the loaded history keeps what it was opened with.
+  const file = useMemo(() => {
+    if (!activeFile?.fileURL || !isMedia(activeFile.mimetype)) {return activeFile;}
+    return (
+      withChatSiblings(activeFile, messages, {
+        me: user,
+        fileToken,
+        interactive: !config?.disableInteractions,
+        repliesOn: !config?.disableReplies,
+      }) ?? activeFile
+    );
+  }, [activeFile, messages, user, fileToken, config?.disableInteractions, config?.disableReplies]);
+
+  // On the oldest loaded file, ask for an older page: what it brings in
+  // shows up to the left of it.
+  const atOldest = !!file?.siblings && file.index === 0 && !!roomJid;
+  const historyComplete = !!room?.historyComplete;
+  useEffect(() => {
+    if (!atOldest || historyComplete || !roomJid) {return;}
+    loadRoomHistory({
+      client: getGlobalXmppClient(),
+      room: store.getState().rooms.rooms?.[roomJid],
+      inFlight: historyInFlight,
+      chatJID: roomJid,
+      max: HISTORY_PAGE_SIZE,
+    });
+  }, [atOldest, historyComplete, roomJid, store]);
+
+  if (!file?.fileURL) {return null;}
+
+  const closeModal = () => {
+    dispatch(
+      setActiveFile({
+        fileName: '',
+        fileURL: '',
+        mimetype: '',
+      })
+    );
+    handleCloseModal?.();
+  };
+
+  return (
+    <FilePreview
+      file={file}
+      onClose={closeModal}
+      onChangeFile={(next) => dispatch(setActiveFile(next))}
+    />
+  );
+};
+
+interface FilePreviewProps {
+  file: ModalFile;
+  onClose: () => void;
+  /** Another file of the album (siblings and index included). */
+  onChangeFile: (file: ModalFile) => void;
+  /** After the media viewer's Reply opened a thread. */
+  onReplyOpened?: () => void;
+}
+
+/**
+ * One file, full screen: pictures and videos in the Telegram-style
+ * MediaViewer, everything else (documents, PDFs, voice notes) on the
+ * plain preview page with the save button in its header.
+ */
+export const FilePreview: React.FC<FilePreviewProps> = ({
+  file: activeFile,
+  onClose,
+  onChangeFile,
+  onReplyOpened,
+}) => {
   const t = useT();
   const { config } = useChatSettingState();
   const theme = useTheme();
@@ -258,16 +341,6 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   // dark sits them on the secondary surface.
   const cardBackground = theme.dark ? theme.surfaceSecondary : '#FFF8ED';
 
-  // Cache the SAF directory the user granted so saving several documents
-  // in a row doesn't re-prompt for a folder every time (Android only).
-  const safDirUriRef = useRef<string | null>(null);
-
-  const { activeFile } = useSelector(
-    (state: RootState) => state.chatSettingStore
-  );
-
-  if (!activeFile) {return null;}
-
   // Bug #40: prefer the sender's original name over the server's stored
   // hash name everywhere this modal shows or saves/shares the file.
   // Sanitized so it's safe to use as an actual path segment (strips path
@@ -281,154 +354,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     })
   );
 
-  const requestStoragePermission = async () => {
-    const MediaLibrary = getMediaLibrary();
-    if (!MediaLibrary?.requestPermissionsAsync) {return false;}
-    try {
-      const { status } = await MediaLibrary.requestPermissionsAsync();
-      return status === 'granted';
-    } catch (error) {
-      console.error('Error requesting permission:', error);
-      return false;
-    }
-  };
-
-  const saveToGallery = async () => {
-    const hasPermission = await requestStoragePermission();
-    if (!hasPermission) {
-      Alert.alert(
-        'Permission Denied',
-        'Storage permission is required to save files to the gallery.'
-      );
-      return;
-    }
-
-    try {
-      const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await fetchToCache(activeFile.fileURL, filePath);
-
-      if (download.status === 200) {
-        await getMediaLibrary()?.saveToLibraryAsync(download.uri);
-        showToast({
-          id: Date.now().toString(),
-          title: t('toast.successTitle'),
-          message: t('toast.saveSuccessful'),
-          type: 'success',
-        });
-      } else {
-        Alert.alert('Error', 'Failed to save the file.');
-      }
-    } catch (err) {
-      Alert.alert('Error', `Failed to save the file: ${displayFileName}`);
-    }
-  };
-
-  // Best-effort existing-name lookup for the Android SAF branch below: SAF
-  // hands back content URIs, not plain names, so this decodes each one and
-  // takes its last path segment. If the provider's URI shape doesn't match
-  // what we expect, we fail open (empty set) rather than block the save -
-  // worst case we skip de-duplication, we never crash the save flow.
-  const listSafDirectoryNames = async (
-    saf: any,
-    dirUri: string
-  ): Promise<Set<string>> => {
-    try {
-      const uris: string[] = await saf.readDirectoryAsync(dirUri);
-      const names = uris.map((uri) => {
-        try {
-          const decoded = decodeURIComponent(uri);
-          const last = decoded.split('/').pop() || '';
-          return last.includes(':') ? last.split(':').pop() || '' : last;
-        } catch {
-          return '';
-        }
-      });
-      return new Set(names.filter(Boolean));
-    } catch {
-      return new Set<string>();
-    }
-  };
-
-  const saveFileToDownloads = async () => {
-    try {
-      const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await fetchToCache(activeFile.fileURL, filePath);
-
-      if (download.status !== 200) {
-        Alert.alert('Error', 'Failed to save the file.');
-        return;
-      }
-
-      if (Platform.OS === 'android') {
-        const saf = (FileSystem as any).StorageAccessFramework;
-        let dirUri = safDirUriRef.current;
-        if (!dirUri) {
-          const perm = await saf.requestDirectoryPermissionsAsync();
-          if (!perm.granted) {
-            Alert.alert(
-              'Permission Denied',
-              'Storage permission is required to save the file.'
-            );
-            return;
-          }
-          dirUri = perm.directoryUri;
-          safDirUriRef.current = dirUri;
-        }
-
-        // Avoid silently overwriting a different attachment that happens
-        // to share the same display name (common now that we prefer the
-        // human-picked name over the unique server hash - bug #40) by
-        // suffixing " (1)", " (2)", ... on a collision.
-        const existingNames = await listSafDirectoryNames(saf, dirUri as string);
-        const uniqueName = await getUniqueFileName(
-          displayFileName,
-          async (candidate) => existingNames.has(candidate)
-        );
-        const baseName = uniqueName.replace(/\.[^/.]+$/, '');
-        const mime = activeFile.mimetype || 'application/octet-stream';
-        const base64 = await FileSystem.readAsStringAsync(download.uri, {
-          encoding: FileSystem.EncodingType.Base64,
-        });
-        const destUri = await saf.createFileAsync(dirUri, baseName, mime);
-        await FileSystem.writeAsStringAsync(destUri, base64, {
-          encoding: FileSystem.EncodingType.Base64,
-        });
-
-        showToast({
-          id: Date.now().toString(),
-          title: t('toast.successTitle'),
-          message: t('toast.saveSuccessful'),
-          type: 'success',
-        });
-        return;
-      }
-
-      // iOS (and any non-Android): there is no app-writable "Downloads"
-      // folder, and MediaLibrary only accepts images/videos — which is why
-      // documents previously hit the success toast without ever being
-      // saved. Present the system share sheet so the user can "Save to
-      // Files", AirDrop, etc. The sheet itself is the confirmation (the
-      // user may cancel), so we don't show a "Save successful" toast here.
-      await Share.share({
-        url: download.uri,
-        title: displayFileName,
-      });
-    } catch (err) {
-      console.error('Error saving file:', err);
-      Alert.alert('Error', 'Failed to save the file.');
-    }
-  };
-
-  const saveClick = async () => {
-    if (
-      activeFile.mimetype.startsWith('image/') ||
-      activeFile.mimetype.startsWith('video/')
-    ) {
-      await saveToGallery();
-    } else {
-      await saveFileToDownloads();
-    }
-  };
+  const saveFile = useSaveFile();
+  const saveClick = () => saveFile(activeFile);
 
   // An album opens with its siblings; the viewer pages through them.
   const albumSize = activeFile.siblings?.length ?? 0;
@@ -436,21 +363,24 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   const goToSibling = (next: number) => {
     const target = activeFile.siblings?.[next];
     if (!target) {return;}
-    dispatch(
-      setActiveFile({ ...target, siblings: activeFile.siblings, index: next })
-    );
+    onChangeFile({ ...target, siblings: activeFile.siblings, index: next });
   };
+  const closeModal = onClose;
 
-  const closeModal = () => {
-    dispatch(
-      setActiveFile({
-        fileName: '',
-        fileURL: '',
-        mimetype: '',
-      })
+  if (
+    activeFile.mimetype.startsWith('image/') ||
+    activeFile.mimetype.startsWith('video/')
+  ) {
+    return (
+      <MediaViewer
+        file={activeFile}
+        onClose={onClose}
+        onPage={goToSibling}
+        onSave={saveClick}
+        onReplyOpened={onReplyOpened}
+      />
     );
-    handleCloseModal?.();
-  };
+  }
 
   // NOTE: plain computed value, NOT useMemo. It sits AFTER the
   // `if (!activeFile) return` guard above, so as a hook it would run