@ethora/chat-component-rn 26.7.10 → 26.8.1

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

@@ -13,6 +13,7 @@ import { deleteRoom as deleteRoomApi } from '../../../networking/api-requests/ro
 import { deleteRoom as deleteRoomAction } from '../../../roomStore/roomsSlice';
 import { Text } from 'react-native';
 import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
 
 interface DeleteChatModalProps {
   isModalOpen: boolean;
@@ -25,6 +26,7 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const t = useT();
   const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
 
   const handleOpenModal = () => setIsModalOpen(true);
@@ -37,16 +39,16 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
       handleCloseModal();
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Chat deleted successfully',
+        title: t('toast.successTitle'),
+        message: t('toast.chatDeletedSuccess'),
         type: 'success',
       });
     } catch (error) {
       console.error('Failed to delete chat:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
-        message: 'Failed to delete chat',
+        title: t('toast.error'),
+        message: t('toast.failedToDeleteChat'),
         type: 'error',
       });
     }
@@ -59,19 +61,19 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
           <CloseButton onPress={handleCloseModal}>
             <Text style={{ fontSize: 24 }}>&times;</Text>
           </CloseButton>
-          <ModalTitle>Delete this chat ?</ModalTitle>
+          <ModalTitle>{t('modal.deleteChat.title')}</ModalTitle>
 
           <GroupContainer>
             <Button
               onPress={handleCloseModal}
-              text={'Cancel'}
+              text={t('action.cancel')}
               style={{ width: '100%' }}
               unstyled
               variant="filled"
             />
             <Button
               onPress={handleDeleteChat}
-              text={'Delete'}
+              text={t('action.delete')}
               style={{
                 width: '100%',
                 borderWidth: 1,

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { withFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import {
   CenterContainer,
@@ -26,17 +25,12 @@ import {
 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 * as MediaLibrary from 'expo-media-library';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
-import { isLikelyAudio } from '../../../helpers/mimeToExtension';
-import {
-  getDisplayFileName,
-  getUniqueFileName,
-  sanitizeFileNameForPath,
-} from '../../../helpers/getDisplayFileName';
+import { ensureFilenameHasExtension, isLikelyAudio } from '../../../helpers/mimeToExtension';
 
 // MIME types Google's gview embed renders reliably. Everything else
 // falls through to the info-card so the user can still download.
@@ -88,10 +82,9 @@ const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
         contentFit="contain"
         nativeControls
         surfaceType="textureView"
-        // Fullscreen stays available by default on both expo-video lines:
-        // `allowsFullscreen` (SDK 54, default true) was replaced by
-        // `fullscreenOptions.enable` (SDK 57, default true). Passing neither
-        // keeps this file compiling against both.
+        // expo-video 3 replaced the boolean `allowsFullscreen` prop with
+        // `fullscreenOptions`; `enable` is that boolean's direct successor.
+        fullscreenOptions={{ enable: true }}
       />
       {/* Play affordance shown immediately on open; tapping starts
           playback and the native controls take over. */}
@@ -133,22 +126,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   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
-  // separators/control chars) when writing to disk below.
-  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';
@@ -169,11 +147,16 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
+
+      const filePath = FileSystem.cacheDirectory + fileName;
+      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
 
       if (download.status === 200) {
-        await getMediaLibrary()?.saveToLibraryAsync(download.uri);
+        await MediaLibrary.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
           title: 'Success',
@@ -184,40 +167,18 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         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>();
+      Alert.alert('Error', `Failed to save the file: ${activeFile.fileName}`);
     }
   };
 
   const saveFileToDownloads = async () => {
     try {
-      const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
+      const filePath = FileSystem.cacheDirectory + fileName;
+      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
 
       if (download.status !== 200) {
         Alert.alert('Error', 'Failed to save the file.');
@@ -240,16 +201,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           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 baseName = fileName.replace(/\.[^/.]+$/, '');
         const mime = activeFile.mimetype || 'application/octet-stream';
         const base64 = await FileSystem.readAsStringAsync(download.uri, {
           encoding: FileSystem.EncodingType.Base64,
@@ -276,7 +228,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       // user may cancel), so we don't show a "Save successful" toast here.
       await Share.share({
         url: download.uri,
-        title: displayFileName,
+        title: fileName,
       });
     } catch (err) {
       console.error('Error saving file:', err);
@@ -319,15 +271,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           <FullScreenImage
             source={{
               uri:
-                withFileToken(activeFile.fileURL) ||
+                activeFile.fileURL ||
                 'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg',
             }}
             resizeMode="contain"
-            accessibilityLabel={displayFileName}
+            accessibilityLabel={activeFile.fileName}
           />
         );
       case activeFile.mimetype.startsWith('video/'):
-        return <ModalVideo uri={withFileToken(activeFile.fileURL)} />;
+        return <ModalVideo uri={activeFile.fileURL} />;
       case activeFile.mimetype.includes('application/octet-stream'):
         return (
           <View
@@ -343,7 +295,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               Voice message
             </Text>
             <AudioMessage
-              src={withFileToken(activeFile.fileURL)}
+              src={activeFile.fileURL}
               mimeType={activeFile.mimetype}
               fileName={activeFile.fileName}
               originalName={activeFile.originalName}
@@ -377,10 +329,13 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             }}
           >
             <Text style={{ fontSize: 16, fontWeight: '600' }}>
-              {displayFileName}
+              {ensureFilenameHasExtension(
+                activeFile.originalName || activeFile.fileName,
+                activeFile.mimetype
+              )}
             </Text>
             <AudioMessage
-              src={withFileToken(activeFile.fileURL)}
+              src={activeFile.fileURL}
               mimeType={activeFile.mimetype}
               fileName={activeFile.fileName}
               originalName={activeFile.originalName}
@@ -390,8 +345,12 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           </View>
         );
       case activeFile.mimetype === 'application/pdf':
-        return <PdfViewer pdfUrl={withFileToken(activeFile.fileURL)} />;
+        return <PdfViewer pdfUrl={activeFile.fileURL} />;
       default: {
+        const displayName = ensureFilenameHasExtension(
+          activeFile.fileName,
+          activeFile.mimetype
+        );
         // Office docs (.docx / .xlsx / .pptx / .doc / .xls / .ppt /
         // .txt / .csv / .rtf) → render inline via Google's gview embed
         // — fixes the "blank preview" complaint for docs (bug #9).
@@ -399,7 +358,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           return (
             <DocumentViewer
               url={activeFile.fileURL}
-              fileName={displayFileName}
+              fileName={displayName}
             />
           );
         }
@@ -416,7 +375,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             }}
           >
             <Text style={{ fontSize: 16, fontWeight: '600' }}>
-              {displayFileName}
+              {displayName}
             </Text>
             <Text style={{ color: '#666' }}>
               {activeFile.mimetype || 'unknown type'}

package/src/components/Modals/FilePreviewModal/PdfView.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { withFileToken } from '../../../helpers/secureFileUrl';
 import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import * as FileSystem from 'expo-file-system/legacy';
@@ -26,7 +25,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     const run = async () => {
       try {
         const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
-        const result = await FileSystem.downloadAsync(withFileToken(pdfUrl), target);
+        const result = await FileSystem.downloadAsync(pdfUrl, target);
         if (cancelled) {return;}
         setLocalUri(result.uri);
       } catch (e: any) {

package/src/components/Modals/Modal/Modal.tsx

@@ -37,13 +37,6 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
 
     return <ModalComponent handleCloseModal={handleClose} />;
   };
-  // Modals that present themselves (a real RN <Modal>, so the dim covers
-  // the whole window rather than stopping at this component's frame) must
-  // not also sit inside the shared in-tree backdrop — that would dim twice.
-  if (modal === MODAL_TYPES.NEW_CHAT) {
-    return <>{renderModalContent()}{children}</>;
-  }
-
   return (
     modal && (
       <ModalBackground

package/src/components/Modals/NewChatModal/ModalContent.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { PickedImage } from '../../../helpers/pickImageAsset';
 import {
   ModalContainer,
   CloseButton,
@@ -20,13 +19,12 @@ type ModalContentProps = {
   roomName: string;
   roomDescription: string;
   chatType: ChatAccessOption;
-  profileImage: string | PickedImage | null;
+  profileImage: string | File | null;
   setActiveTab: (tab: '0' | '1' | null) => void;
   handleRoomNameChange: (e: string) => void;
   setRoomDescription: (description: string) => void;
   setChatType: (type: ChatAccessOption) => void;
-  setProfileImage: (image: string | PickedImage | null) => void;
-  onUploadImage: () => void;
+  setProfileImage: (image: string | File | null) => void;
   selectedUsers: any[];
   setSelectedUsers: (users: any[]) => void;
   handleCreateRoom: () => void;
@@ -42,7 +40,6 @@ const ModalContent: React.FC<ModalContentProps> = ({
   roomDescription,
   chatType,
   profileImage,
-  onUploadImage,
   setActiveTab,
   handleRoomNameChange,
   setChatType,
@@ -65,7 +62,7 @@ const ModalContent: React.FC<ModalContentProps> = ({
           <ModalTitle>Create New Chat</ModalTitle>
           <ProfileImagePlaceholder
             size={120}
-            upload={{ active: true, onUpload: onUploadImage }}
+            upload={{ active: true, onUpload: setProfileImage }}
             remove={{
               enabled: true,
               onRemoveClick: () => setProfileImage(null),