@ethora/chat-component-rn 26.10.5 → 26.10.6

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -26,6 +26,7 @@ import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import { getEmojiNativeById } from '../../helpers/emoji';
+import { getMessageCaption } from '../../helpers/caption';
 import {
   quickReactionIds,
   reactionPickerEnabled,
@@ -376,7 +377,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
               <Delimeter />
             </>
           )}
-          <MenuItem onPress={() => handleCopyMessage(message.body!)}>
+          <MenuItem onPress={() => handleCopyMessage(getMessageCaption(message) ?? message.body!)}>
             <Text style={[styles.menuText, themedStyles.text]}>
               {MESSAGE_INTERACTIONS.COPY}
             </Text>

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

@@ -430,6 +430,17 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
   };
 
+  // An album opens with its siblings; the viewer pages through them.
+  const albumSize = activeFile.siblings?.length ?? 0;
+  const albumIndex = activeFile.index ?? 0;
+  const goToSibling = (next: number) => {
+    const target = activeFile.siblings?.[next];
+    if (!target) {return;}
+    dispatch(
+      setActiveFile({ ...target, siblings: activeFile.siblings, index: next })
+    );
+  };
+
   const closeModal = () => {
     dispatch(
       setActiveFile({
@@ -606,6 +617,39 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         {getMediaComponent}
       </CenterContainer>
 
+      {albumSize > 1 && (
+        <View style={styles.albumNav} testID="file-preview-album-nav">
+          <TouchableOpacity
+            testID="file-preview-prev"
+            accessibilityRole="button"
+            accessibilityLabel={t('attachment.previous')}
+            disabled={albumIndex <= 0}
+            onPress={() => goToSibling(albumIndex - 1)}
+            hitSlop={12}
+            style={[styles.albumArrow, albumIndex <= 0 && styles.albumArrowOff]}
+          >
+            <Text style={[styles.albumArrowText, { color: theme.text }]}>{'\u2039'}</Text>
+          </TouchableOpacity>
+          <Text style={{ color: theme.textSecondary }}>
+            {t('attachment.position', { index: albumIndex + 1, total: albumSize })}
+          </Text>
+          <TouchableOpacity
+            testID="file-preview-next"
+            accessibilityRole="button"
+            accessibilityLabel={t('attachment.next')}
+            disabled={albumIndex >= albumSize - 1}
+            onPress={() => goToSibling(albumIndex + 1)}
+            hitSlop={12}
+            style={[
+              styles.albumArrow,
+              albumIndex >= albumSize - 1 && styles.albumArrowOff,
+            ]}
+          >
+            <Text style={[styles.albumArrowText, { color: theme.text }]}>{'\u203A'}</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
     </ModalContainerFullScreen>
   );
 };
@@ -629,6 +673,26 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '600',
   },
+  albumNav: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    paddingBottom: 24,
+  },
+  albumArrow: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  albumArrowOff: {
+    opacity: 0.3,
+  },
+  albumArrowText: {
+    fontSize: 32,
+    lineHeight: 36,
+  },
   videoMessage: {
     alignItems: 'center',
     gap: 8,

package/src/components/RoomComponents/LastMessageItem.tsx

@@ -7,12 +7,16 @@ import LastMessageEmoji from './styled/LastMessageEmoji';
 import LastMessageFile from './styled/LastMessageFile';
 import LastAudioMessage from './styled/LastAudioMessage';
 import LastMessageSealed from './styled/LastMessageSealed';
+import { getMessageAttachments } from '../../helpers/attachments';
+import { getMessageCaption } from '../../helpers/caption';
+import { useT } from '../../i18n/useT';
 
 interface LastMessageItemProps {
   lastMessage: LastMessage;
 }
 
 const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
+  const t = useT();
   const { body, emoji, mimetype } = lastMessage;
 
   if (lastMessage?.clientEncrypted === 'true') {
@@ -20,22 +24,29 @@ const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
   }
 
   if (mimetype) {
+    // What the row says about the file: its caption, else how many files
+    // there are; undefined keeps the single file's own name.
+    const count = getMessageAttachments(lastMessage).length;
+    const label =
+      getMessageCaption(lastMessage, { isMedia: true }) ??
+      (count > 1 ? t('attachment.count', { count }) : undefined);
+
     if (mimetype.startsWith('image/')) {
-      return <LastMessagePhoto {...lastMessage} />;
+      return <LastMessagePhoto {...lastMessage} label={label} />;
     }
 
     if (mimetype.startsWith('video/')) {
-      return <LastMessageVideo {...lastMessage} />;
+      return <LastMessageVideo {...lastMessage} label={label} />;
     }
 
     if (
       mimetype.startsWith('audio/') ||
       mimetype.includes('application/octet-stream')
     ) {
-      return <LastAudioMessage {...lastMessage} />;
+      return <LastAudioMessage {...lastMessage} label={label} />;
     }
 
-    return <LastMessageFile {...lastMessage} />;
+    return <LastMessageFile {...lastMessage} label={label} />;
   }
 
   if (emoji) {

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

@@ -10,7 +10,10 @@ import { View } from 'react-native';
 import { PlayIcon } from '../../../assets/icons';
 import { useTheme } from '../../../hooks/useTheme';
 
-interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
+interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {
+  /** Replaces the body: the caption, or the count of files. */
+  label?: string;
+}
 
 const PlayButton = styled.View`
   width: 20px;
@@ -29,7 +32,7 @@ const AudioRow = styled.View`
   gap: 6px;
 `;
 
-const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
+const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body, label }) => {
   const theme = useTheme();
   return (
     <LastRoomMessageContainer>
@@ -41,7 +44,7 @@ const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
           <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />
         </PlayButton>
         <LastRoomMessageText numberOfLines={1}>
-          {body?.trim() ? body : 'audio'}
+          {label ?? (body?.trim() ? body : 'audio')}
         </LastRoomMessageText>
       </AudioRow>
     </LastRoomMessageContainer>

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

@@ -20,7 +20,10 @@ interface LastMessageFileProps
   extends Pick<
     LastMessage,
     'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
-  > {}
+  > {
+  /** Replaces the file name: the caption, or the count of files. */
+  label?: string;
+}
 
 const fallbackImage =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
@@ -31,6 +34,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
   fileName,
   mimetype,
   locationPreview,
+  label,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
   const fileToken = useFileToken();
@@ -69,7 +73,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
         ) : (
           <FileIcon width={20} height={20} />
         )}
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{label ?? displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

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

@@ -29,7 +29,10 @@ interface LastMessagePhotoProps
   extends Pick<
     LastMessage,
     'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
-  > {}
+  > {
+  /** Replaces the file name: the caption, or the count of files. */
+  label?: string;
+}
 
 const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   user,
@@ -37,6 +40,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   originalName,
   fileName,
   mimetype,
+  label,
 }) => {
   const fileToken = useFileToken();
   // Bug #40: prefer the sender's original name over the stored hash
@@ -60,7 +64,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
             <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{label ?? displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

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

@@ -44,7 +44,10 @@ interface LastMessageVideoProps
   extends Pick<
     LastMessage,
     'user' | 'location' | 'originalName' | 'fileName' | 'mimetype'
-  > {}
+  > {
+  /** Replaces the file name: the caption, or the count of files. */
+  label?: string;
+}
 
 const LastMessageVideo: FC<LastMessageVideoProps> = ({
   user,
@@ -52,6 +55,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
   originalName,
   fileName,
   mimetype,
+  label,
 }) => {
   const fileToken = useFileToken();
   // Bug #40: prefer the sender's original name over the stored hash
@@ -76,7 +80,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{label ?? displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/Thread/ThreadWrapper.tsx

@@ -237,15 +237,11 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   );
 
   const sendMedia = useCallback(
-    (data: any, type: string) => {
-      return sendMessageMedia(
-        data,
-        type,
-        roomJid,
-        true,
-        isChecked,
-        createMainMessageForThread(activeMessage)
-      );
+    (data: any, type: string, caption?: { text: string }) => {
+      const mainMessage = createMainMessageForThread(activeMessage);
+      return caption
+        ? sendMessageMedia(data, type, roomJid, true, isChecked, mainMessage, undefined, caption)
+        : sendMessageMedia(data, type, roomJid, true, isChecked, mainMessage);
     },
     [activeMessage, isChecked, roomJid, sendMessageMedia]
   );

package/src/components/styled/MediaFilePreview.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView, ScrollView } from 'react-native';
 import {
   MediaContainer,
   MediaImage,
@@ -8,6 +8,7 @@ import { RemoveButton, RemoveButtonText } from './StyledComponents';
 import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
 import { useVideoPlayer, VideoView } from 'expo-video';
+import { useT } from '../../i18n/useT';
 
 interface MediaFilePreviewProps {
   filePreviews: MediaFile[];
@@ -62,42 +63,56 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
   handleRemoveImage,
 }) => {
   const [previewUri, setPreviewUri] = useState<string | null>(null);
+  const t = useT();
 
+  // The tray holds up to ten files, so it scrolls sideways rather than wrap.
   return (
-    <MediaContainer>
-      {filePreviews.map((file, index) => {
-        const isImage = file.type?.startsWith('image');
-        const isVideo = file.type?.startsWith('video');
-        return (
-          <View key={`${file.name}_${index}`}>
-            {isImage ? (
-              <MediaImage source={{ uri: file.uri }} />
-            ) : isVideo ? (
-              <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
-            ) : (
-              <View style={{ width: 70, height: 70, borderRadius: 8 }}>
-                <FileIcon width={70} height={70} />
-              </View>
-            )}
-            <RemoveButton onPress={() => handleRemoveImage(index)}>
-              <RemoveButtonText>&times;</RemoveButtonText>
-            </RemoveButton>
-          </View>
-        );
-      })}
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      testID="media-tray"
+    >
+      <MediaContainer>
+        {filePreviews.map((file, index) => {
+          const isImage = file.type?.startsWith('image');
+          const isVideo = file.type?.startsWith('video');
+          return (
+            <View key={`${file.name}_${index}`}>
+              {isImage ? (
+                <MediaImage source={{ uri: file.uri }} />
+              ) : isVideo ? (
+                <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
+              ) : (
+                <View style={{ width: 70, height: 70, borderRadius: 8 }}>
+                  <FileIcon width={70} height={70} />
+                </View>
+              )}
+              <RemoveButton
+                testID={`media-tray-remove-${index}`}
+                accessibilityRole="button"
+                accessibilityLabel={t('attachment.remove')}
+                onPress={() => handleRemoveImage(index)}
+              >
+                <RemoveButtonText>&times;</RemoveButtonText>
+              </RemoveButton>
+            </View>
+          );
+        })}
 
-      <Modal visible={!!previewUri} animationType="fade" transparent>
-        <SafeAreaView style={styles.modalContainer}>
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={() => setPreviewUri(null)}
-          >
-            <Text style={styles.closeText}>✕</Text>
-          </TouchableOpacity>
-          {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
-        </SafeAreaView>
-      </Modal>
-    </MediaContainer>
+        <Modal visible={!!previewUri} animationType="fade" transparent>
+          <SafeAreaView style={styles.modalContainer}>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setPreviewUri(null)}
+            >
+              <Text style={styles.closeText}>✕</Text>
+            </TouchableOpacity>
+            {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
+          </SafeAreaView>
+        </Modal>
+      </MediaContainer>
+    </ScrollView>
   );
 };
 

package/src/components/styled/MessageImage.tsx

@@ -36,6 +36,13 @@ interface CustomMessageImageProps {
    * route; rendering it inline is what left the bubbles blank.
    */
   locationPreview?: string;
+  /**
+   * Album mode: fill a tile of exactly this size (cover, square corners; the
+   * tile clips) instead of sizing itself to the picture.
+   */
+  tile?: { width: number; height: number };
+  /** Replaces the default "open this one file" tap, e.g. to open an album at an index. */
+  onOpen?: () => void;
 }
 
 /** Keep the personal file token out of the logs. */
@@ -51,6 +58,8 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   originalName,
   mimetype,
   locationPreview,
+  tile,
+  onOpen,
 }) => {
   // Preview first, original only as a fallback — mirrors the web client,
   // where the <img> src is the preview and `fileURL` is reserved for the
@@ -59,12 +68,13 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const [loading, setLoading] = useState(true);
   // Start with a neutral box; swap to the real aspect ratio once the
   // image's natural dimensions are known so it's shown scaled, not cropped.
-  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
+  const [measured, setDims] = useState<MediaDims>(defaultMediaDims());
+  const dims: MediaDims = tile ?? measured;
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!displayURL) {
+    if (!displayURL || tile) {
       return;
     }
     let active = true;
@@ -88,15 +98,21 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
     return () => {
       active = false;
     };
-  }, [displayURL]);
+  }, [displayURL, tile]);
 
   const handleOpen = () => {
+    if (onOpen) {
+      onOpen();
+      return;
+    }
     dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
   return (
-    <Container style={{ width: dims.width }}>
+    <Container
+      style={tile ? { width: dims.width, borderRadius: 0 } : { width: dims.width }}
+    >
       <TouchableOpacity onPress={handleOpen} activeOpacity={0.9}>
         {loading && (
           <View
@@ -117,7 +133,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
           style={{
             width: dims.width,
             height: dims.height,
-            borderRadius: 10,
+            borderRadius: tile ? 0 : 10,
             backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
           onLoadEnd={() => setLoading(false)}