@ethora/chat-component-rn 26.8.6 → 26.8.7

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,
@@ -33,6 +34,13 @@ 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 +60,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 +79,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>
   );
@@ -175,7 +303,7 @@ 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);
@@ -222,7 +350,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.');
@@ -332,7 +460,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 +529,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}
@@ -486,6 +622,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/UserProfileModal/UserProfileModal.tsx

@@ -17,6 +17,7 @@ import {
   EditIcon,
   IconDoc,
   LeaveIcon,
+  LockIcon,
   LogoutIcon,
   ProfileIcon,
   ShareIcon,
@@ -43,7 +44,21 @@ import {
 import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
 import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
 import { useLogout } from '../../../hooks/useLogout';
-import { ApiRoom, postPrivateRoom } from '../../../networking/api-requests/rooms.api';
+import {
+  ApiRoom,
+  ownAppId,
+  postPrivateRoom,
+} from '../../../networking/api-requests/rooms.api';
+import EncryptionCard from '../../MainComponents/EncryptionCard';
+import { accountNameOf } from '../../../helpers/accountName';
+import { composeName } from '../../../helpers/displayName';
+import { isUnresolvedSenderId } from '../../../helpers/isUnresolvedSenderId';
+
+/** A name, unless it is only the account's id standing in for one. */
+const nameOrNothing = (name?: string | null): string => {
+  const trimmed = String(name ?? '').trim();
+  return isUnresolvedSenderId(trimmed) ? '' : trimmed;
+};
 import {
   getUserFiles,
   isMediaFile,
@@ -196,8 +211,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
 
   const handleShare = useCallback(async () => {
     const name =
-      profileUser?.name ||
-      `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim();
+      nameOrNothing(profileUser?.name) ||
+      composeName(profileUser?.firstName, profileUser?.lastName);
     const id =
       profileUser?.userJID ||
       profileUser?.defaultWallet?.walletAddress ||
@@ -238,7 +253,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     }
   };
 
-  const handlePrivateMessage = useCallback(async () => {
+  const openPrivateRoom = useCallback(async (e2ee: boolean) => {
     showToast({
       id: Date.now().toString(),
       title: 'Room creation',
@@ -248,7 +263,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     });
     if (config?.newArch) {
       const newRoom = await postPrivateRoom(
-        selectedUser?.userJID ?? (selectedUser?.id || '')
+        selectedUser?.userJID ?? (selectedUser?.id || ''),
+        e2ee
       );
       handleRoomCreation(newRoom, 2);
     } else {
@@ -283,6 +299,17 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     dispatch(setActiveModal(undefined));
   }, [selectedUser]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const handlePrivateMessage = useCallback(
+    () => openPrivateRoom(false),
+    [openPrivateRoom]
+  );
+  const handleEncryptedPrivateMessage = useCallback(
+    () => openPrivateRoom(true),
+    [openPrivateRoom]
+  );
+  const canStartEncrypted =
+    config?.e2ee?.enabled === true && !!config?.newArch;
+
   const openFile = (file: UserFile) => {
     dispatch(
       setActiveFile({
@@ -333,6 +360,16 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
                     icon: (color: string) => <ChatIcon color={color} />,
                     onPress: handlePrivateMessage,
                   },
+                  ...(canStartEncrypted
+                    ? [
+                        {
+                          key: 'encrypted-message',
+                          label: t('action.encryptedMessage'),
+                          icon: (color: string) => <LockIcon color={color} />,
+                          onPress: handleEncryptedPrivateMessage,
+                        },
+                      ]
+                    : []),
                 ]),
             {
               key: 'share',
@@ -341,7 +378,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
               onPress: handleShare,
             },
           ],
-    [isOwnProfile, t, handleShare, handlePrivateMessage, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
+    [isOwnProfile, t, handleShare, handlePrivateMessage, handleEncryptedPrivateMessage, canStartEncrypted, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // Collapsed, the hero's round buttons are gone — the "…" menu carries
@@ -373,8 +410,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   }
 
   const displayName =
-    profileUser?.name ||
-    `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim() ||
+    nameOrNothing(profileUser?.name) ||
+    composeName(profileUser?.firstName, profileUser?.lastName) ||
     t('modal.profile.title');
   const heroImage =
     appendFileToken(profileUser?.profileImage, fileToken) || null;
@@ -529,6 +566,14 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </Text>
           </View>
 
+          {!isOwnProfile && config?.e2ee?.enabled === true && (
+            <EncryptionCard
+              account={accountNameOf(profileUser, ownAppId())}
+              style={styles.card}
+              testID="user-profile-e2ee"
+            />
+          )}
+
           {tabs.length > 0 && (
             <View style={styles.card}>
               <View style={styles.tabsRow}>

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

@@ -1,5 +1,6 @@
 /** @format */
 
+import EncryptionCard from '../../MainComponents/EncryptionCard';
 import React, { useCallback, useMemo } from 'react';
 import {
   StyleSheet,
@@ -159,6 +160,10 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
           </View>
         ) : null}
 
+        {config?.e2ee?.enabled === true ? (
+          <EncryptionCard style={styles.card} testID="settings-e2ee" />
+        ) : null}
+
         {options.map((option) => (
           <TouchableOpacity
             key={option.key}

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -20,6 +20,10 @@ import LastMessageItem from './LastMessageItem';
 import { LastRoomMessageText } from './styled/StyledRoomComponents';
 import { useTheme } from '../../hooks/useTheme';
 import { resolveTheme } from '../../theme/theme';
+import { LockIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
+import { composeName } from '../../helpers/displayName';
+import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
 
 interface ChatRoomItemProps {
   chat: IRoom;
@@ -37,6 +41,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   // Rows can be rendered with an explicit `config` prop (tests, hosts
   // composing their own list); honour its colours over the store's.
   const storeTheme = useTheme();
+  const t = useT();
   const theme = useMemo(
     () => (config ? resolveTheme(config) : storeTheme),
     [config, storeTheme]
@@ -61,19 +66,12 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
       const localId = rawUserId.split('@')[0];
       const entry = usersSet?.[localId] ?? usersSet?.[rawUserId];
       const fromUsersSet = entry
-        ? `${entry.firstName ?? ''} ${entry.lastName ?? ''}`.trim()
+        ? composeName(entry.firstName, entry.lastName)
         : '';
 
-      // usersSet first, exactly like Message.tsx: it's the live store, so
-      // a renamed user updates here too. The message's own `name` is the
-      // fallback that carries broadcast/system senders ("Ethora"), which
-      // never appear in usersSet.
+      const ownName = String(message?.user?.name || '').trim();
       const safeName =
-        fromUsersSet ||
-        String(message?.user?.name || '').trim() ||
-        localId ||
-        rawUserId ||
-        'Unknown';
+        fromUsersSet || (isUnresolvedSenderId(ownName) ? '' : ownName);
 
       return {
         ...message,
@@ -176,7 +174,21 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           }}
         >
           <ChatInfo>
-            <ChatName text={displayName} />
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+              <View style={{ flexShrink: 1 }}>
+                <ChatName text={displayName} />
+              </View>
+              {chat?.e2ee && (
+                <View
+                  accessible
+                  accessibilityRole="image"
+                  accessibilityLabel={t('e2ee.roomEncrypted')}
+                  testID="room-e2ee-lock"
+                >
+                  <LockIcon width={13} height={13} color={theme.textSecondary} />
+                </View>
+              )}
+            </View>
           </ChatInfo>
           {stamp ? (
             <UserCount

package/src/components/RoomComponents/LastMessageItem.tsx

@@ -6,6 +6,7 @@ import LastMessagePhoto from './styled/LastMessagePhoto';
 import LastMessageEmoji from './styled/LastMessageEmoji';
 import LastMessageFile from './styled/LastMessageFile';
 import LastAudioMessage from './styled/LastAudioMessage';
+import LastMessageSealed from './styled/LastMessageSealed';
 
 interface LastMessageItemProps {
   lastMessage: LastMessage;
@@ -14,6 +15,10 @@ interface LastMessageItemProps {
 const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
   const { body, emoji, mimetype } = lastMessage;
 
+  if (lastMessage?.clientEncrypted === 'true') {
+    return <LastMessageSealed {...lastMessage} />;
+  }
+
   if (mimetype) {
     if (mimetype.startsWith('image/')) {
       return <LastMessagePhoto {...lastMessage} />;

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -33,7 +33,9 @@ const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
   const theme = useTheme();
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName numberOfLines={1}>{user?.name ?? ''}</LastRoomMessageName>
+      {!!user?.name && (
+        <LastRoomMessageName numberOfLines={1}>{user.name}</LastRoomMessageName>
+      )}
       <AudioRow>
         <PlayButton>
           <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -43,7 +43,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
 
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',
@@ -67,7 +67,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
             }}
           />
         ) : (
-          <FileIcon style={{ width: '20px', height: '20px' }} />
+          <FileIcon width={20} height={20} />
         )}
         <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -47,7 +47,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
     : 'file';
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',

package/src/components/RoomComponents/styled/LastMessageSealed.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { LastMessage } from '../../../types/types';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+} from './StyledRoomComponents';
+import { LockIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+
+interface LastMessageSealedProps extends Pick<LastMessage, 'user'> {}
+
+const LastMessageSealed: FC<LastMessageSealedProps> = ({ user }) => {
+  const t = useT();
+  const theme = useTheme();
+  const name = user?.name;
+
+  return (
+    <LastRoomMessageContainer>
+      {!!name && <LastRoomMessageName>{name}:</LastRoomMessageName>}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+        <LockIcon width={14} height={14} color={theme.textSecondary} />
+        <LastRoomMessageText>{t('media.sealedFile')}</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessageSealed;

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -62,7 +62,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
     : 'file';
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',

package/src/components/Thread/ThreadWrapper.tsx

@@ -23,6 +23,8 @@ import MessageList from '../MainComponents/MessageList';
 import ModalHeaderComponent from '../Modals/ModalHeaderComponent';
 import { setCloseActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
 import { EditWrapper } from '../MainComponents/EditWrapper';
+import EncryptedSendNotice from '../MainComponents/EncryptedSendNotice';
+import { MAX_SEAL_BYTES } from '../../e2ee/limits';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
@@ -85,6 +87,10 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   // Same field the room header and the list show (`name` can be the id).
   const roomDisplayName = String(room?.title || room?.name || 'chat').trim();
 
+  const e2eeRoom = !!room?.e2ee;
+  const e2eeOn = config?.e2ee?.enabled === true;
+  const maxMediaBytes = e2eeRoom && e2eeOn ? MAX_SEAL_BYTES : undefined;
+
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
 
@@ -233,6 +239,10 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
               DockTag === View ? { paddingBottom: dockPadding } : null,
             ]}
           >
+            {e2eeRoom && !e2eeOn && !editAction?.isEdit ? (
+              <EncryptedSendNotice />
+            ) : (
+            <>
             <Pressable
               testID="thread-also-send"
               accessibilityRole="checkbox"
@@ -274,11 +284,14 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
               sendMedia={sendMedia}
               sendMessage={editAction?.isEdit ? sendEditMessage : sendMessage}
               config={config}
+              maxMediaBytes={maxMediaBytes}
               onFocus={sendStartComposing}
               onBlur={sendEndComposing}
               isLoading={!!room?.isLoading}
               isMessageProcessing={isLastMessageFromUserAndProcessing(roomJid)}
             />
+            </>
+            )}
           </DockTag>
         </KeyboardAvoidingView>