@ethora/chat-component-rn 26.10.8 → 26.10.10

package/src/components/Modals/FilePreviewModal/useSaveFile.ts

@@ -0,0 +1,207 @@
+import { useCallback, useRef } from "react";
+import { Alert, Platform, Share } from "react-native";
+import * as FileSystem from "expo-file-system/legacy";
+import type { ModalFile } from "../../../types/types";
+import { withFileToken } from "../../../helpers/secureFileUrl";
+import { getMediaLibrary } from "../../../helpers/mediaLibraryRuntime";
+import { useToast } from "../../../context/ToastContext";
+import { useT } from "../../../i18n/useT";
+import {
+  getDisplayFileName,
+  getUniqueFileName,
+  sanitizeFileNameForPath,
+} from "../../../helpers/getDisplayFileName";
+
+export const isLocalFile = (url: string | undefined | null) =>
+  /^file:\/\//i.test(url || "");
+
+const fetchToCache = async (url: string, cachePath: string) =>
+  isLocalFile(url)
+    ? { status: 200, uri: url }
+    : FileSystem.downloadAsync(withFileToken(url), cachePath);
+
+/**
+ * Save button of the file viewers: pictures and videos to the gallery,
+ * anything else to Downloads (Android, through SAF) or the share sheet (iOS).
+ * Shared by the preview page and the media viewer opened from a chat profile.
+ */
+export const useSaveFile = () => {
+  const { showToast } = useToast();
+  const t = useT();
+  // 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);
+
+  return useCallback(
+    async (activeFile: ModalFile) => {
+      // Bug #40: prefer the sender's original name over the server's stored
+      // hash name when saving/sharing the file. Sanitized so it's safe to use
+      // as an actual path segment (strips path separators/control chars).
+      const displayFileName = sanitizeFileNameForPath(
+        getDisplayFileName({
+          originalName: activeFile.originalName,
+          fileName: activeFile.fileName,
+          location: activeFile.fileURL,
+          mimetype: activeFile.mimetype,
+        })
+      );
+
+      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();
+        }
+      };
+
+      await saveClick();
+    },
+    [showToast, t]
+  );
+};

package/src/components/Modals/MessageSearchModal/MessageSearchModal.tsx

@@ -46,13 +46,18 @@ import {
   useMessageSearch,
 } from './useMessageSearch';
 import { openSearchHit } from './openHit';
+import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 
 interface MessageSearchModalProps {
   handleCloseModal: () => void;
+  /** Search the open chat only: no "All chats" scope to switch to. */
+  chatOnly?: boolean;
 }
 
 const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
   handleCloseModal,
+  chatOnly = false,
 }) => {
   const t = useT();
   const dispatch = useDispatch();
@@ -71,7 +76,7 @@ const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
   const [query, setQuery] = useState('');
   const roomName = activeRoomJID ? activeRoomJID.split('@')[0] : undefined;
   const [scope, setScope] = useState<SearchScope>(
-    activeRoomJID ? 'chat' : 'all'
+    chatOnly || activeRoomJID ? 'chat' : 'all'
   );
 
   const [filtersOpen, setFiltersOpen] = useState(false);
@@ -182,34 +187,36 @@ const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
         />
       </View>
 
-      <View style={styles.scopeRow} accessibilityLabel={t('search.messages.scope')}>
-        {(['chat', 'all'] as SearchScope[]).map((value) => {
-          const active = scope === value;
-          const disabled = value === 'chat' && !roomName;
-          return (
-            <TouchableOpacity
-              key={value}
-              testID={`message-search-scope-${value}`}
-              disabled={disabled}
-              onPress={() => setScope(value)}
-              accessibilityState={{ selected: active, disabled }}
-              style={[
-                styles.scopeButton,
-                active && { borderColor: primary, backgroundColor: primary + '1F' },
-                disabled && styles.hitDisabled,
-              ]}
-            >
-              <Text style={[styles.scopeLabel, active && { color: primary }]}>
-                {t(
-                  value === 'chat'
-                    ? 'search.messages.scopeChat'
-                    : 'search.messages.scopeAll'
-                )}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
+      {!chatOnly && (
+        <View style={styles.scopeRow} accessibilityLabel={t('search.messages.scope')}>
+          {(['chat', 'all'] as SearchScope[]).map((value) => {
+            const active = scope === value;
+            const disabled = value === 'chat' && !roomName;
+            return (
+              <TouchableOpacity
+                key={value}
+                testID={`message-search-scope-${value}`}
+                disabled={disabled}
+                onPress={() => setScope(value)}
+                accessibilityState={{ selected: active, disabled }}
+                style={[
+                  styles.scopeButton,
+                  active && { borderColor: primary, backgroundColor: primary + '1F' },
+                  disabled && styles.hitDisabled,
+                ]}
+              >
+                <Text style={[styles.scopeLabel, active && { color: primary }]}>
+                  {t(
+                    value === 'chat'
+                      ? 'search.messages.scopeChat'
+                      : 'search.messages.scopeAll'
+                  )}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      )}
 
       <TouchableOpacity
         testID="message-search-filters-toggle"
@@ -368,7 +375,11 @@ const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
     <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={t('search.messages.title')}
+        headerTitle={
+          chatOnly && searchedRoom?.title
+            ? searchedRoom.title
+            : t('search.messages.title')
+        }
       />
       <FlatList
         style={styles.list}
@@ -484,4 +495,19 @@ const MessageSearchModal: React.FC<MessageSearchModalProps> = (props) => {
   return <MessageSearchModalContent {...props} />;
 };
 
+/**
+ * The chat profile's Search: the same search as the room list's, inside this
+ * chat only. Back returns to the profile it was opened from; opening a hit
+ * closes both and lands on the message in the chat.
+ */
+export const ChatMessageSearchModal: React.FC<MessageSearchModalProps> = () => {
+  const dispatch = useDispatch();
+  return (
+    <MessageSearchModal
+      chatOnly
+      handleCloseModal={() => dispatch(setActiveModal(MODAL_TYPES.CHAT_PROFILE))}
+    />
+  );
+};
+
 export default MessageSearchModal;

package/src/components/VideoCalls/useCallKeep.ts

@@ -2,8 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState, store } from '../../roomStore';
-import { acceptIncomingCall, declineIncomingCall } from '../../roomStore/callSlice';
-import { sendCallStateSignal } from '../../networking/callTokenStanza';
+import { acceptIncomingCall } from '../../roomStore/callSlice';
 import { declineActiveCallWhenOnline, terminateActiveCall } from './callActions';
 import { setCallMicEnabled, useCallSession } from './callSessionController';
 import { loadLiveKit } from './livekitRuntime';
@@ -162,8 +161,7 @@ export const useCallKeep = (): void => {
         snapshot.direction === 'incoming' &&
         snapshot.phase === 'ringing-incoming'
       ) {
-        sendCallStateSignal('declined');
-        dispatch(declineIncomingCall());
+        declineActiveCallWhenOnline();
         return;
       }
       // Ended from the Dynamic Island, the lock screen or a headset.

package/src/components/styled/MessageImage.tsx

@@ -11,6 +11,7 @@ import {
   setActiveModal,
 } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { useMediaSource } from '../../context/MediaSourceContext';
 import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
 import {
   defaultMediaDims,
@@ -72,6 +73,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const dims: MediaDims = tile ?? measured;
 
   const dispatch = useDispatch();
+  const source = useMediaSource();
 
   useEffect(() => {
     if (!displayURL || tile) {
@@ -105,7 +107,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
       onOpen();
       return;
     }
-    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
+    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName, source }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 

package/src/components/styled/VideoMessage.tsx

@@ -10,6 +10,7 @@ import {
   setActiveModal,
 } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { useMediaSource } from '../../context/MediaSourceContext';
 import { PlayIcon } from '../../assets/icons';
 import {
   defaultMediaDims,
@@ -155,6 +156,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   onOpen,
 }) => {
   const dispatch = useDispatch();
+  const source = useMediaSource();
   const [posterFailed, setPosterFailed] = useState(false);
 
   const handleOpen = () => {
@@ -162,7 +164,9 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
       onOpen();
       return;
     }
-    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
+    dispatch(
+      setActiveFile({ fileName, fileURL, mimetype, originalName, previewURL, source })
+    );
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 

package/src/context/MediaSourceContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { ModalFileSource } from '../types/types';
+
+/**
+ * The message a bubble's pictures and videos belong to. MediaMessage provides
+ * it, and the image / video / album components that open the viewer read it,
+ * so the viewer knows what its Reply and Delete act on without every card in
+ * between passing the message along.
+ */
+const MediaSourceContext = createContext<ModalFileSource | undefined>(undefined);
+
+export const MediaSourceProvider = MediaSourceContext.Provider;
+
+export const useMediaSource = () => useContext(MediaSourceContext);

package/src/helpers/constants/MODAL_COMPONENTS.tsx

@@ -7,7 +7,9 @@ import React from 'react';
 import { MODAL_TYPES } from './MODAL_TYPES';
 import ChatProfileModal from '../../components/Modals/ChatProfileModal/ChatProfileModal';
 import FilePreviewModal from '../../components/Modals/FilePreviewModal/FilePreviewModal';
-import MessageSearchModal from '../../components/Modals/MessageSearchModal/MessageSearchModal';
+import MessageSearchModal, {
+  ChatMessageSearchModal,
+} from '../../components/Modals/MessageSearchModal/MessageSearchModal';
 import PublicChatsModal from '../../components/Modals/PublicChatsModal/PublicChatsModal';
 import NewChatModal from '../../components/Modals/NewChatModal/NewChatModal';
 import BlockedUsersModal from '../../components/Modals/SettingsModals/BlockedUsers/BlockedUsersModal';
@@ -37,5 +39,6 @@ export const MODAL_COMPONENTS: Record<
   [MODAL_TYPES.BLOCKED_USERS]: BlockedUsersModal,
   [MODAL_TYPES.FILE_PREVIEW]: FilePreviewModal,
   [MODAL_TYPES.MESSAGE_SEARCH]: MessageSearchModal,
+  [MODAL_TYPES.CHAT_MESSAGE_SEARCH]: ChatMessageSearchModal,
   [MODAL_TYPES.PUBLIC_CHATS]: PublicChatsModal,
 };

package/src/helpers/constants/MODAL_TYPES.ts

@@ -28,5 +28,7 @@ export const MODAL_TYPES = {
   NEW_CHAT: 'new_chat',
 
   MESSAGE_SEARCH: 'message_search',
+  /** Message search locked to the open chat, reached from its profile. */
+  CHAT_MESSAGE_SEARCH: 'chat_message_search',
   PUBLIC_CHATS: 'public_chats',
 };

package/src/helpers/publicChatsEntry.ts

@@ -2,14 +2,15 @@ import type { IConfig } from '../types/types';
 
 /**
  * "Discover chats" lives in the room list menu sheet. A host that takes the
- * burger over (`headerMenu` as a function) or hides the menu
- * (`chatHeaderSettings.disableMenu`) would otherwise have no obvious way to
- * reach the directory, so it also gets a button of its own in the room list
- * header. `disableRoomMenu` removes the menu entry point, and with it the
- * button; `disablePublicChatsDirectory` removes the feature altogether.
+ * burger over (`headerMenu` as a function) would otherwise have no obvious
+ * way to reach the directory, so it also gets a button of its own in the
+ * room list header. `chatHeaderSettings.disableMenu` does not count: the
+ * header avatar still opens the sheet, Discover included, and a second
+ * compass next to it was a duplicate. `disableRoomMenu` removes the menu
+ * entry point, and with it the button; `disablePublicChatsDirectory`
+ * removes the feature altogether.
  */
 export const showsStandaloneDiscoverButton = (config?: IConfig): boolean =>
   !config?.disablePublicChatsDirectory &&
   !config?.disableRoomMenu &&
-  (Boolean(config?.chatHeaderSettings?.disableMenu) ||
-    typeof config?.headerMenu === 'function');
+  typeof config?.headerMenu === 'function';

package/src/helpers/roomMedia.ts

@@ -0,0 +1,126 @@
+import type { IMessage, ModalFile } from '../types/types';
+import { getAttachmentName, getMessageAttachments } from './attachments';
+import { getFileKind } from './fileKind';
+import { appendFileToken } from './secureFileUrl';
+import { parseMessageReference } from './parseMessageReference';
+import { composeName } from './displayName';
+import { isOwnMessage } from './isOwnMessage';
+
+export interface MediaOptions {
+  /** The signed-in user, as isOwnMessage takes it. */
+  me: Parameters<typeof isOwnMessage>[1];
+  fileToken?: string;
+  interactive: boolean;
+  repliesOn: boolean;
+}
+
+/**
+ * Every picture and video of the room's loaded history, newest first, each
+ * carrying the message it came from so the viewer's Reply and Delete act on
+ * the right one (same rules as a bubble: Delete on one's own, Reply where
+ * replies are on).
+ */
+export const collectRoomMedia = (
+  messages: IMessage[] | undefined,
+  roomJid: string,
+  { me, fileToken, interactive, repliesOn }: MediaOptions
+): ModalFile[] => {
+  const files: ModalFile[] = [];
+  for (let i = (messages?.length ?? 0) - 1; i >= 0; i--) {
+    const message = messages![i]!;
+    if (
+      message.isMediafile !== 'true' ||
+      message.isDeleted ||
+      message.pending ||
+      message.clientEncrypted === 'true' ||
+      !message.id
+    ) {
+      continue;
+    }
+    const parent = parseMessageReference(message);
+    const sentAt = new Date(message.date as any).getTime();
+    const source = {
+      messageId: message.id,
+      roomJid: message.roomJid || roomJid,
+      own: interactive && isOwnMessage(message, me),
+      replyTo:
+        interactive && repliesOn
+          ? parent
+            ? { id: parent.id, chatJID: parent.roomJid || message.roomJid || roomJid }
+            : { id: message.id, chatJID: message.roomJid || roomJid }
+          : undefined,
+      senderName:
+        composeName(message.user?.firstName, message.user?.lastName) ||
+        message.user?.name ||
+        undefined,
+      timestamp: Number.isFinite(sentAt) ? sentAt : undefined,
+    };
+    for (const attachment of getMessageAttachments(message)) {
+      if (!attachment.location) {continue;}
+      const kind = getFileKind({
+        mimetype: attachment.mimetype,
+        name: getAttachmentName(attachment),
+        url: attachment.location,
+        duration: attachment.duration,
+      });
+      if (kind !== 'image' && kind !== 'video') {continue;}
+      files.push({
+        fileName: getAttachmentName(attachment),
+        originalName: attachment.originalName,
+        fileURL: appendFileToken(attachment.location, fileToken) || attachment.location,
+        mimetype: attachment.mimetype || (kind === 'image' ? 'image/jpeg' : 'video/mp4'),
+        duration: attachment.duration,
+        previewURL: appendFileToken(attachment.locationPreview, fileToken),
+        source,
+      });
+    }
+  }
+  return files;
+};
+
+const sentAt = (message: IMessage) => new Date(message.date as any).getTime() || 0;
+
+/** A thread-only reply: shown in its thread, not in the channel. */
+const threadParentOf = (message: IMessage): string | null =>
+  message.mainMessage && message.showInChannel !== 'true'
+    ? parseMessageReference(message)?.id ?? null
+    : null;
+
+/** The file's address without its access token, which may differ per copy. */
+const bareUrl = (url: string | undefined) => (url || '').split('?')[0];
+
+/**
+ * The media feed the viewer pages through when a picture or video is opened
+ * from a bubble: every picture and video of the list that bubble sits in (the
+ * channel, or the one thread for a thread-only reply), oldest first so a
+ * swipe to the left goes forward in time, the way the chat reads. The opened
+ * file comes back with that feed as its siblings; null when the file is not
+ * in the loaded history (the caller then keeps what it was opened with).
+ */
+export const withChatSiblings = (
+  file: ModalFile,
+  messages: IMessage[] | undefined,
+  options: MediaOptions
+): ModalFile | null => {
+  const source = file.source;
+  if (!source || !messages?.length) {return null;}
+  const opened = messages.find((m) => String(m.id) === String(source.messageId));
+  if (!opened) {return null;}
+
+  const thread = threadParentOf(opened);
+  // collectRoomMedia walks from the end, so newest-first in gives oldest
+  // first out, with an album's files still in their own order.
+  const scoped = messages
+    .filter((m) => threadParentOf(m) === thread)
+    .sort((a, b) => sentAt(b) - sentAt(a));
+  const feed = collectRoomMedia(scoped, source.roomJid, options);
+
+  const url = bareUrl(file.fileURL);
+  const index = feed.findIndex(
+    (f) =>
+      f.source?.messageId === source.messageId && bareUrl(f.fileURL) === url
+  );
+  if (index < 0) {return null;}
+  // The bubble's own rules for Reply and Delete stay with the opened file.
+  return { ...feed[index]!, source, siblings: feed, index };
+};