@ethora/chat-component-rn 26.8.6 → 26.8.8

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { canEditMessage } from '../../e2ee';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -21,6 +22,7 @@ import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import { getEmojiNativeById } from '../../helpers/emoji';
 import {
   quickReactionIds,
@@ -60,6 +62,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   onOpenEmojiPicker,
 }) => {
   const { showToast } = useToast();
+  const t = useT();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
   const overlayId = useId();
   const theme = useTheme();
@@ -143,15 +146,15 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       await Clipboard.setStringAsync(text);
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Copied to clipboard!',
+        title: t('toast.successTitle'),
+        message: t('toast.copied'),
         type: 'success',
       });
     } catch (err) {
       console.log(err);
       showToast({
         id: Date.now().toString(),
-        title: 'Copy failed',
+        title: t('toast.copyFailed'),
         message: (err as Error)?.message || 'Unknown error',
         type: 'error',
       });
@@ -362,9 +365,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
           </MenuItem>
           {isUser && (
             <>
-              {/* Edit only for non-media messages (upstream guard) +
-                  consistent label styling (menuText). */}
-              {message?.isMediafile !== 'true' && (
+              {message?.isMediafile !== 'true' && canEditMessage(message) && (
                 <>
                   <Delimeter />
                   <MenuItem onPress={handleEditMessage}>

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

@@ -1,5 +1,6 @@
 /** @format */
 
+import { composeName } from '../../../helpers/displayName';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
@@ -268,7 +269,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const confirmRemoveMember = (user: RoomMember) => {
     Alert.alert(
       t('modal.chatProfile.removeMember'),
-      `${user.firstName} ${user.lastName}`.trim(),
+      composeName(user.firstName, user.lastName),
       [
         { text: t('action.cancel'), style: 'cancel' },
         {
@@ -287,7 +288,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         id: user._id,
         firstName: user.firstName,
         lastName: user.lastName,
-        name: `${user.firstName} ${user.lastName}`,
+        name: composeName(user.firstName, user.lastName),
+        profileImage: user.profileImage,
         userJID: user?.xmppUsername,
         token: '',
         refreshToken: '',
@@ -377,7 +379,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       console.warn('[ethora-rn] mute toggle failed', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
+        title: t('toast.error'),
         message: t('toast.muteFailed'),
         type: 'error',
       });
@@ -488,7 +490,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const query = memberQuery.trim().toLowerCase();
   const visibleMembers = query
     ? members.filter((user) =>
-        `${user.firstName ?? ''} ${user.lastName ?? ''}`
+        composeName(user.firstName, user.lastName)
           .toLowerCase()
           .includes(query)
       )
@@ -648,7 +650,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                         disabled={!!config?.disableChatInfo?.disableMemberTap}
                       >
                         <ProfileImagePlaceholder
-                          name={`${user.firstName} ${user.lastName}`}
+                          name={composeName(user.firstName, user.lastName)}
+                          icon={appendFileToken(user.profileImage, fileToken) || null}
                           size={40}
                         />
                         <View style={styles.memberText}>

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

@@ -72,7 +72,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
       });
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
+        title: t('toast.successTitle'),
         message: t('modal.report.chatTitle'),
         type: 'success',
       });
@@ -81,7 +81,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
       console.error('Failed to report chat:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
+        title: t('toast.error'),
         message: t('modal.report.chatTitle'),
         type: 'error',
       });

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { withFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import {
@@ -16,6 +16,7 @@ import { RootState } from '../../../roomStore';
 import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
 import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
 import {
+  ActivityIndicator,
   Alert,
   Text,
   View,
@@ -29,10 +30,18 @@ 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';
 import AudioMessage from '../../styled/AudioMessage';
 import { isLikelyAudio } from '../../../helpers/mimeToExtension';
+import {
+  downloadVideoToCache,
+  findCachedVideo,
+  isRemoteUrl,
+  isStreamingUnsupported,
+  markStreamingUnsupported,
+} from '../../../helpers/videoCache';
 import {
   getDisplayFileName,
   getUniqueFileName,
@@ -52,6 +61,15 @@ const GVIEW_PREVIEWABLE = new Set<string>([
   'text/csv',
   'application/rtf',
 ]);
+
+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);
+
 const isGviewPreviewable = (mime: string | undefined | null) => {
   if (!mime) {return false;}
   return GVIEW_PREVIEWABLE.has(mime.toLowerCase().split(';')[0]!.trim());
@@ -62,52 +80,163 @@ const isGviewPreviewable = (mime: string | undefined | null) => {
 // the area with the surrounding letterbox painted as the view's own
 // (transparent → theme) background, NOT black. `textureView` so the play
 // overlay composites on top and nothing is clipped on Android.
-const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
+//
+// The clip is streamed when the server allows it. AVPlayer does not play
+// from a server that ignores byte-range requests (it answers 200 instead of
+// 206 and the player stops with "server is not correctly configured"), so
+// a failed stream falls back to a downloaded copy in the cache — which is
+// also what a reopened video plays from.
+const ModalVideo: React.FC<{ uri: string; mimetype?: string }> = ({
+  uri,
+  mimetype,
+}) => {
+  const theme = useTheme();
+  const remote = isRemoteUrl(uri);
+  // What the player is given; null until we know where to play from.
+  const [source, setSource] = useState<string | null>(remote ? null : uri);
   const [showPlay, setShowPlay] = useState(true);
+  // null = not downloading, otherwise 0..1 (0 while the size is unknown).
+  const [progress, setProgress] = useState<number | null>(null);
+  const [failed, setFailed] = useState(false);
+  const wantsPlay = useRef(false);
+  const downloadStarted = useRef(false);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
 
-  const player = useVideoPlayer(uri, (p) => {
+  const download = useCallback(() => {
+    if (downloadStarted.current) {return;}
+    downloadStarted.current = true;
+    setProgress(0);
+    downloadVideoToCache(uri, mimetype, (fraction) => {
+      if (mounted.current) {setProgress(fraction);}
+    })
+      .then((localUri) => {
+        if (!mounted.current) {return;}
+        setProgress(null);
+        setSource(localUri);
+      })
+      .catch((err) => {
+        console.warn('video download failed', err);
+        if (!mounted.current) {return;}
+        setProgress(null);
+        setFailed(true);
+      });
+  }, [mimetype, uri]);
+
+  useEffect(() => {
+    if (!remote) {return;}
+    let active = true;
+    findCachedVideo(uri, mimetype).then((cached) => {
+      if (!active) {return;}
+      if (cached) {
+        setSource(cached);
+      } else if (isStreamingUnsupported(uri)) {
+        download();
+      } else {
+        setSource(uri);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [download, mimetype, remote, uri]);
+
+  const player = useVideoPlayer(source, (p) => {
     p.muted = false;
+    // A player made for the downloaded copy picks up a play the user
+    // already asked for.
+    if (wantsPlay.current) {p.play();}
   });
 
   useEffect(() => {
-    const sub = player.addListener('playingChange', ({ isPlaying }) => {
+    const playing = player.addListener('playingChange', ({ isPlaying }) => {
       if (isPlaying) {setShowPlay(false);}
     });
-    return () => sub.remove();
-  }, [player]);
+    const status = player.addListener('statusChange', (event) => {
+      if (event.status !== 'error') {return;}
+      if (source === uri && remote) {
+        markStreamingUnsupported(uri);
+        download();
+      } else {
+        setFailed(true);
+      }
+    });
+    return () => {
+      playing.remove();
+      status.remove();
+    };
+  }, [download, player, remote, source, uri]);
 
   const handlePlay = () => {
+    wantsPlay.current = true;
     setShowPlay(false);
     player.play();
   };
 
+  if (failed) {
+    return (
+      <View style={styles.videoMessage}>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
+          This video can't be played
+        </Text>
+        <Text style={{ color: theme.textSecondary, textAlign: 'center' }}>
+          Tap the save icon above to download it.
+        </Text>
+      </View>
+    );
+  }
+
+  const loading = progress !== null || source === null;
+
   return (
     <View style={{ flex: 1, width: '100%' }}>
-      <VideoView
-        player={player}
-        style={{ flex: 1, backgroundColor: 'transparent' }}
-        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.
-      />
-      {/* Play affordance shown immediately on open; tapping starts
-          playback and the native controls take over. */}
-      {showPlay && (
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onPress={handlePlay}
-          style={StyleSheet.absoluteFill}
-        >
-          <View style={styles.playOverlay}>
-            <View style={styles.playButton}>
-              <PlayIcon width={28} height={28} />
-            </View>
+      {/* No surface while the copy downloads: the failed stream would
+          show the system's "can't play" glyph under the spinner. */}
+      {!loading && (
+        <VideoView
+          player={player}
+          style={{ flex: 1, backgroundColor: 'transparent' }}
+          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.
+        />
+      )}
+      {loading ? (
+        <View style={styles.playOverlay} pointerEvents="none">
+          <View style={styles.playButton}>
+            <ActivityIndicator color="#FFFFFF" />
           </View>
-        </TouchableOpacity>
+          {!!progress && (
+            <Text style={[styles.progress, { color: theme.textSecondary }]}>
+              {Math.round(progress * 100)}%
+            </Text>
+          )}
+        </View>
+      ) : (
+        showPlay && (
+          // Play affordance shown immediately on open; tapping starts
+          // playback and the native controls take over.
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={handlePlay}
+            style={StyleSheet.absoluteFill}
+          >
+            <View style={styles.playOverlay}>
+              <View style={styles.playButton}>
+                <PlayIcon width={28} height={28} />
+              </View>
+            </View>
+          </TouchableOpacity>
+        )
       )}
     </View>
   );
@@ -122,6 +251,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const t = useT();
   const { config } = useChatSettingState();
   const theme = useTheme();
   // Info / audio cards: light keeps its warm tint (not in the palette),
@@ -175,14 +305,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
     try {
       const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
+      const download = await fetchToCache(activeFile.fileURL, filePath);
 
       if (download.status === 200) {
         await getMediaLibrary()?.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
-          title: 'Success',
-          message: 'Save successful',
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
           type: 'success',
         });
       } else {
@@ -222,7 +352,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   const saveFileToDownloads = async () => {
     try {
       const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
+      const download = await fetchToCache(activeFile.fileURL, filePath);
 
       if (download.status !== 200) {
         Alert.alert('Error', 'Failed to save the file.');
@@ -266,8 +396,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
         showToast({
           id: Date.now().toString(),
-          title: 'Success',
-          message: 'Save successful',
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
           type: 'success',
         });
         return;
@@ -332,7 +462,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           />
         );
       case activeFile.mimetype.startsWith('video/'):
-        return <ModalVideo uri={withFileToken(activeFile.fileURL)} />;
+        return (
+          <ModalVideo
+            // Remount per file: the player state belongs to one clip.
+            key={activeFile.fileURL}
+            uri={withFileToken(activeFile.fileURL)}
+            mimetype={activeFile.mimetype}
+          />
+        );
       case activeFile.mimetype.includes('application/octet-stream'):
         return (
           <View
@@ -394,13 +531,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             />
           </View>
         );
-      case activeFile.mimetype === 'application/pdf':
+      case activeFile.mimetype === 'application/pdf' &&
+        !(Platform.OS === 'android' && isLocalFile(activeFile.fileURL)):
         return <PdfViewer pdfUrl={withFileToken(activeFile.fileURL)} />;
       default: {
         // 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).
-        if (isGviewPreviewable(activeFile.mimetype)) {
+        if (isGviewPreviewable(activeFile.mimetype) && !isLocalFile(activeFile.fileURL)) {
           return (
             <DocumentViewer
               url={activeFile.fileURL}
@@ -440,7 +578,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={closeModal}
-        headerTitle={'File preview'}
+        headerTitle={t('modal.filePreview.title')}
         titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>
@@ -486,6 +624,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  progress: {
+    marginTop: 10,
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  videoMessage: {
+    alignItems: 'center',
+    gap: 8,
+    padding: 20,
+  },
 });
 
 export default FilePreviewModal;

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

@@ -25,6 +25,10 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     let cancelled = false;
     const run = async () => {
       try {
+        if (/^file:\/\//i.test(pdfUrl)) {
+          setLocalUri(pdfUrl);
+          return;
+        }
         const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
         const result = await FileSystem.downloadAsync(withFileToken(pdfUrl), target);
         if (cancelled) {return;}

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

@@ -16,6 +16,17 @@ interface ModalProps {
   setOpenModal: (value?: ModalType) => any;
 }
 
+/** Screens reached from Settings: closing them goes back there. */
+const SETTINGS_SCREENS = new Set<string>([
+  MODAL_TYPES.MANAGE_DATA,
+  MODAL_TYPES.VISIBILITY,
+  MODAL_TYPES.REFERRALS,
+  MODAL_TYPES.DOCUMENT_SHARES,
+  MODAL_TYPES.PROFILE_SHARES,
+  MODAL_TYPES.BLOCKED_USERS,
+  MODAL_TYPES.CHANGE_PASSWORD,
+]);
+
 const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
   const dispatch = useDispatch();
   const handleCloseModal = () => setOpenModal();
@@ -29,15 +40,9 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
 
     if (!ModalComponent) {return null;}
 
-    const handleClose =
-      modal === MODAL_TYPES.MANAGE_DATA ||
-      modal === MODAL_TYPES.VISIBILITY ||
-      modal === MODAL_TYPES.REFERRALS ||
-      modal === MODAL_TYPES.DOCUMENT_SHARES ||
-      modal === MODAL_TYPES.PROFILE_SHARES ||
-      modal === MODAL_TYPES.BLOCKED_USERS
-        ? handleBackButtonClick
-        : handleCloseModal;
+    const handleClose = SETTINGS_SCREENS.has(modal)
+      ? handleBackButtonClick
+      : handleCloseModal;
 
     return <ModalComponent handleCloseModal={handleClose} />;
   };
@@ -75,15 +80,38 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
     }
   }
 
+  // Screens under Settings are pages too: they slide in over Settings and
+  // a swipe from the left edge takes them back to it, same as the header's
+  // back button. Settings stays mounted underneath the whole time, so the
+  // slide reveals it - not the chat list - and nothing is rebuilt once the
+  // page has gone. The elements below keep the same shape as the plain
+  // branch, so Settings is the same instance before, during and after.
+  const subScreen = modal && SETTINGS_SCREENS.has(modal) ? modal : undefined;
+  const SubScreenComponent = subScreen ? MODAL_COMPONENTS[subScreen] : undefined;
+  const SettingsComponent = MODAL_COMPONENTS[MODAL_TYPES.SETTINGS];
+  const underneath =
+    SubScreenComponent && SettingsComponent ? (
+      <SettingsComponent handleCloseModal={handleCloseModal} />
+    ) : (
+      renderModalContent()
+    );
+
   return (
     modal && (
-      <ModalBackground
-        id="modal-background"
-        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
-      >
-        {renderModalContent()}
-        {children}
-      </ModalBackground>
+      <>
+        <ModalBackground
+          id="modal-background"
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+        >
+          {underneath}
+          {children}
+        </ModalBackground>
+        {SubScreenComponent && (
+          <SwipeBackLayer onClose={handleBackButtonClick}>
+            {(close) => <SubScreenComponent handleCloseModal={close} />}
+          </SwipeBackLayer>
+        )}
+      </>
     )
   );
 };

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

@@ -187,16 +187,16 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Room created successfully',
+        title: t('toast.successTitle'),
+        message: t('toast.roomCreatedSuccess'),
         type: 'success',
       });
     } catch (error) {
       console.error('Error handling room creation:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
-        message: 'Failed to create room',
+        title: t('toast.error'),
+        message: t('toast.failedToCreateRoom'),
         type: 'error',
       });
     }
@@ -258,8 +258,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
           showToast({
             id: Date.now().toString(),
-            title: 'Success',
-            message: 'Room created successfully',
+            title: t('toast.successTitle'),
+            message: t('toast.roomCreatedSuccess'),
             type: 'success',
           });
           handleCloseModal();
@@ -267,8 +267,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
           console.error('Failed to create room:', error);
           showToast({
             id: Date.now().toString(),
-            title: 'Error',
-            message: 'Failed to create room',
+            title: t('toast.error'),
+            message: t('toast.failedToCreateRoom'),
             type: 'error',
           });
         }