@ethora/chat-component-rn 26.10.5 → 26.10.6

package/src/components/MainComponents/MediaMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { IMessage } from '../../types/types';
+import { IAttachment, IMessage } from '../../types/types';
 import FileDownload from '../styled/UnsupportedType';
 import CustomMessageImage from '../styled/MessageImage';
 import CustomMessageVideo from '../styled/VideoMessage';
@@ -11,7 +11,9 @@ import {
   Text,
   View,
 } from 'react-native';
-import { isLikelyAudio } from '../../helpers/mimeToExtension';
+import { getAttachmentName, getMessageAttachments } from '../../helpers/attachments';
+import { getMessageCaption } from '../../helpers/caption';
+import { getFileKind, isAlbumKind } from '../../helpers/fileKind';
 import { getDisplayFileName } from '../../helpers/getDisplayFileName';
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
@@ -19,6 +21,10 @@ import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
 import { useTheme } from '../../hooks/useTheme';
 import SealedAttachment from './SealedAttachment';
+import AlbumGrid from './AlbumGrid';
+import MediaCaption from '../MessageBubble/MediaCaption';
+import MediaUploadOverlay from './MediaUploadOverlay';
+import { requestMediaRetry } from '../../helpers/mediaSendRetry';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -156,160 +162,270 @@ const PendingMediaMessage: React.FC<{
   );
 };
 
-const MediaMessage: React.FC<MediaMessageProps> = ({
-  mimeType,
-  location: rawLocation,
-  messageText: rawMessageText,
+interface AttachmentCardProps {
+  attachment: IAttachment;
+  /** Position in the message; the voice waveform belongs to #0 only. */
+  index: number;
+  message?: IMessage;
+  isUser: boolean;
+  fileToken?: string | null;
+}
+
+/** One file of a message: the picture, video, player or file card it gets. */
+const AttachmentCard: React.FC<AttachmentCardProps> = ({
+  attachment,
+  index,
   message,
   isUser,
+  fileToken,
 }) => {
-  const fileToken = useFileToken();
-  const theme = useTheme();
+  const mimeType = attachment.mimetype || '';
+  const rawLocation = attachment.location;
+  const rawPreview = attachment.locationPreview;
   const location = appendFileToken(rawLocation, fileToken);
-  const messageText = appendFileToken(rawMessageText, fileToken);
+  const previewText = appendFileToken(rawPreview, fileToken);
+  const originalName = attachment.originalName;
+  const duration = attachment.duration ?? (message as any)?.duration;
+  const waveForm = index === 0 ? (message as any)?.waveForm : undefined;
 
-  if (message?.clientEncrypted === 'true') {
-    return <SealedAttachment message={message} isUser={isUser} />;
-  }
+  const displayName = getDisplayFileName({
+    originalName,
+    fileName: attachment.fileName,
+    location: rawLocation || rawPreview,
+    mimetype: mimeType,
+  });
+  const kind = getFileKind({
+    mimetype: mimeType,
+    name: displayName,
+    url: rawLocation,
+    duration,
+    waveForm,
+    originalName,
+  });
 
-  if (mimeType) {
-    const displayName = getDisplayFileName({
-      originalName: (message as any)?.originalName,
-      fileName: message?.fileName,
-      location: rawLocation || rawMessageText,
-      mimetype: mimeType,
-    });
-    const isAudioPayload = isLikelyAudio(
-      mimeType,
-      displayName,
-      rawLocation,
-      {
-        duration: (message as any)?.duration,
-        waveForm: (message as any)?.waveForm,
-        originalName: (message as any)?.originalName,
-      }
+  // The sender's own voice note plays from its local file while it
+  // uploads, waveform and all - no placeholder card in between.
+  const localPreview = attachment.localUrl;
+  if (message?.pending && kind === 'audio' && (localPreview || previewText || location)) {
+    return (
+      <AudioMessage
+        src={localPreview || previewText || location || ''}
+        mimeType={mimeType}
+        fileName={displayName}
+        duration={duration}
+        waveForm={waveForm}
+        isUser={isUser}
+      />
     );
-    // The sender's own voice note plays from its local file while it
-    // uploads, waveform and all — no placeholder card in between.
-    if (message?.pending && isAudioPayload && (messageText || location)) {
+  }
+  if (message?.pending) {
+    return (
+      <PendingMediaMessage
+        fileName={displayName}
+        mimeType={mimeType}
+        previewUri={localPreview || previewText || location || ''}
+        isUser={isUser}
+        size={index === 0 ? message?.size : attachment.size}
+      />
+    );
+  }
+
+  switch (kind) {
+    case 'image':
+      return (
+        <CustomMessageImage
+          fileName={displayName}
+          originalName={originalName}
+          // Full-size original: opened by the preview modal.
+          fileURL={location || previewText || ''}
+          // ...and the thumbnail the bubble actually renders, which is
+          // what the web client shows too.
+          locationPreview={previewText}
+          mimetype={mimeType}
+        />
+      );
+    case 'video':
+      return (
+        <CustomMessageVideo
+          fileName={displayName}
+          originalName={originalName}
+          fileURL={location || ''}
+          // The message's locationPreview is the poster frame the backend
+          // generated for this video. Handing it over lets the bubble render
+          // as a still + play badge instead of mounting a video surface per
+          // row (see VideoMessage).
+          previewURL={previewText}
+          mimetype={mimeType}
+        />
+      );
+    case 'audio':
+      // Covers audio/*, octet-stream voice notes and the voice-message
+      // heuristics of isLikelyAudio (customer-reported #9 voicemail fix):
+      // a voicemail shipped as octet-stream with no audio extension still
+      // gets the player instead of a broken `.bin` file card.
       return (
         <AudioMessage
-          src={messageText || location || ''}
+          src={location || ''}
           mimeType={mimeType}
           fileName={displayName}
-          duration={(message as any)?.duration}
-          waveForm={(message as any)?.waveForm}
+          originalName={originalName}
+          duration={duration}
+          waveForm={waveForm}
           isUser={isUser}
         />
       );
-    }
-    if (message?.pending) {
+    default:
       return (
-        <PendingMediaMessage
+        <FileDownload
+          fileURL={location ? location : ''}
           fileName={displayName}
-          mimeType={mimeType}
-          previewUri={messageText || location || ''}
+          mimetype={mimeType}
           isUser={isUser}
-          size={message?.size}
+          originalName={originalName}
+          duration={duration}
+          waveForm={waveForm}
         />
       );
-    }
-    switch (true) {
-      case mimeType.startsWith('image/'):
-        return (
-          <CustomMessageImage
-            fileName={displayName}
-            originalName={(message as any)?.originalName}
-            // Full-size original: opened by the preview modal.
-            fileURL={location || messageText || ''}
-            // ...and the thumbnail the bubble actually renders, which is
-            // what the web client shows too.
-            locationPreview={messageText}
-            mimetype={mimeType}
-          />
-        );
-      case mimeType.startsWith('video/'):
-        return (
-          <CustomMessageVideo
-            fileName={displayName}
-            originalName={(message as any)?.originalName}
-            fileURL={location || ''}
-            // `messageText` is the message's locationPreview — the poster
-            // frame the backend generated for this video. Handing it over
-            // lets the bubble render as a still + play badge instead of
-            // mounting a video surface per row (see VideoMessage).
-            previewURL={messageText}
-            mimetype={mimeType}
-          />
-        );
-      case mimeType.startsWith('audio/'): {
-        return (
-          <AudioMessage
-            src={location || ''}
-            mimeType={mimeType}
-            fileName={displayName}
-            originalName={(message as any)?.originalName}
-            duration={(message as any)?.duration}
-            waveForm={(message as any)?.waveForm}
-            isUser={isUser}
-          />
-        );
-      }
-      case mimeType.includes('application/octet-stream'): {
-        return (
-          <AudioMessage
-            src={location || ''}
-            mimeType={mimeType}
-            fileName={displayName}
-            originalName={(message as any)?.originalName}
-            duration={(message as any)?.duration}
-            waveForm={(message as any)?.waveForm}
-            isUser={isUser}
-          />
-        );
-      }
-      default: {
-        // Some senders (notably the web app's voice-message uploader)
-        // ship audio as `application/octet-stream` with no audio file
-        // extension. `isLikelyAudio` recognises those via the URL path,
-        // filename, or voice-message naming hints (voicemail-,
-        // voice-note-, recording-, …) so we still render the AudioMessage
-        // player instead of falling through to the generic FileDownload
-        // card (where the voicemail rendered as a broken `.bin`
-        // attachment). Customer-reported #9 voicemail fix.
-        if (isAudioPayload) {
-          return (
-            <AudioMessage
-              src={location || ''}
-              mimeType={mimeType}
-              fileName={displayName}
-              originalName={(message as any)?.originalName}
-              duration={(message as any)?.duration}
-              waveForm={(message as any)?.waveForm}
-              isUser={isUser}
-            />
-          );
+  }
+};
+
+const MediaMessage: React.FC<MediaMessageProps> = ({
+  mimeType,
+  location: rawLocation,
+  messageText: rawMessageText,
+  message,
+  isUser,
+}) => {
+  const fileToken = useFileToken();
+  const theme = useTheme();
+
+  // Order of truth: the message's own attachments, else its flat fields, else
+  // the props the bubble was handed (a bare file with no message around it).
+  const attachments = useMemo(
+    () =>
+      getMessageAttachments(
+        message ?? {
+          location: rawLocation,
+          locationPreview: rawMessageText,
+          mimetype: mimeType,
         }
-        return (
-          <FileDownload
-            fileURL={location ? location : ''}
-            fileName={displayName}
-            mimetype={mimeType}
-            isUser={isUser}
-            originalName={(message as any)?.originalName}
-            duration={(message as any)?.duration}
-            waveForm={(message as any)?.waveForm}
-          />
-        );
-      }
-    }
+      ),
+    [message, rawLocation, rawMessageText, mimeType]
+  );
+  const caption = message ? getMessageCaption(message) : undefined;
+
+  if (message?.clientEncrypted === 'true') {
+    // A sealed file has nothing to show until it is opened, so each one is a
+    // card of its own (SealedAttachment); the caption came out of the
+    // encrypted body.
+    return (
+      <>
+        <SealedAttachment message={message} isUser={isUser} />
+        <MediaCaption text={caption} isUser={isUser} />
+      </>
+    );
+  }
+
+  if (attachments.length === 0) {
+    return <Text style={{ color: theme.text }}>Unsupported media type</Text>;
   }
-  return <Text style={{ color: theme.text }}>Unsupported media type</Text>;
+
+  // A file of an outgoing multi-file message carries its upload state. It is
+  // "reachable" through its local copy, not a server one, until the send lands.
+  const isOutgoingFile = (attachment: IAttachment) =>
+    Boolean(message?.pending) &&
+    Boolean(attachment.uploadStatus || attachment.localUrl);
+
+  const card = (attachment: IAttachment, index: number) => {
+    const body = (
+      <AttachmentCard
+        key={attachment.attachmentId || `${index}-${attachment.location}`}
+        attachment={attachment}
+        index={index}
+        message={message}
+        isUser={isUser}
+        fileToken={fileToken}
+      />
+    );
+    // In a multi-file message each file gets its own progress and Retry.
+    if (!attachment.uploadStatus || attachments.length < 2) {return body;}
+    return (
+      <View
+        key={`tile-${attachment.attachmentId || index}`}
+        style={styles.uploadTile}
+        testID={`media-upload-tile-${index}`}
+      >
+        {body}
+        <MediaUploadOverlay
+          status={attachment.uploadStatus}
+          progress={attachment.uploadProgress}
+          onRetry={message?.id ? () => requestMediaRetry(message.id, index) : undefined}
+        />
+      </View>
+    );
+  };
+
+  // Pictures and videos share one album when there are two or more of them;
+  // documents and voice notes follow as one card each. A lone picture is the
+  // ordinary bubble picture, exactly as a single-file message always was.
+  const album = attachments.filter(
+    (attachment) =>
+      (Boolean(attachment.location) || isOutgoingFile(attachment)) &&
+      isAlbumKind(
+        getFileKind({
+          mimetype: attachment.mimetype,
+          name: getAttachmentName(attachment),
+          url: attachment.location,
+          duration: attachment.duration,
+        })
+      )
+  );
+  const useAlbum = album.length >= 2;
+  const rest = useAlbum
+    ? attachments.filter((attachment) => !album.includes(attachment))
+    : attachments;
+
+  // One file and no text: the card alone, no wrapper around it.
+  if (!useAlbum && attachments.length === 1 && !caption) {
+    return card(attachments[0]!, 0);
+  }
+
+  return (
+    <View style={styles.stack}>
+      {useAlbum && (
+        <AlbumGrid
+          attachments={album}
+          onRetryTile={
+            message?.id
+              ? (position) =>
+                  requestMediaRetry(
+                    message.id,
+                    attachments.indexOf(album[position]!)
+                  )
+              : undefined
+          }
+        />
+      )}
+      {rest.map((attachment) => card(attachment, attachments.indexOf(attachment)))}
+      <MediaCaption text={caption} isUser={isUser} />
+    </View>
+  );
 };
 
 export default MediaMessage;
 
 const styles = StyleSheet.create({
+  stack: {
+    alignItems: 'flex-start',
+    gap: 4,
+  },
+  // Frames one file of a multi-file message so its upload overlay covers it.
+  uploadTile: {
+    position: 'relative',
+    alignSelf: 'stretch',
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
   pendingImageWrapper: {
     width: pendingImageDims.width,
     height: pendingImageDims.height,

package/src/components/MainComponents/MediaUploadOverlay.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useT } from '../../i18n/useT';
+
+interface MediaUploadOverlayProps {
+  /** `uploading` shows progress; `failed` shows the reason and a Retry. */
+  status: 'uploading' | 'failed';
+  /** 0 to 100, while uploading. */
+  progress?: number;
+  /** Re-runs this file's upload. Only offered for a failed file. */
+  onRetry?: () => void;
+}
+
+/**
+ * Covers one tile of an outgoing media message while its file uploads, and
+ * offers Retry when it did not. The scrim sits on the picture itself, so its
+ * colours are fixed rather than taken from the theme.
+ */
+const MediaUploadOverlay: React.FC<MediaUploadOverlayProps> = ({
+  status,
+  progress = 0,
+  onRetry,
+}) => {
+  const t = useT();
+  const percent = Math.min(100, Math.max(0, Math.round(progress)));
+
+  if (status === 'failed') {
+    return (
+      <View testID="media-upload-overlay" style={styles.overlay}>
+        <Text style={styles.failedText}>{t('attachment.uploadFailed')}</Text>
+        {onRetry && (
+          <Pressable
+            testID="media-upload-retry"
+            accessibilityRole="button"
+            accessibilityLabel={t('attachment.retryUpload')}
+            onPress={onRetry}
+            style={styles.retry}
+          >
+            <Text style={styles.retryText}>{t('attachment.retryUpload')}</Text>
+          </Pressable>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View testID="media-upload-overlay" style={styles.overlay}>
+      <ActivityIndicator size="small" color="#FFFFFF" />
+      <Text style={styles.progressText}>{`${percent}%`}</Text>
+      <View style={styles.track} accessibilityRole="progressbar">
+        <View style={[styles.fill, { width: `${percent}%` }]} />
+      </View>
+    </View>
+  );
+};
+
+export default MediaUploadOverlay;
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    padding: 8,
+    backgroundColor: 'rgba(8, 12, 24, 0.5)',
+  },
+  progressText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 3,
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  fill: {
+    height: 3,
+    backgroundColor: '#FFFFFF',
+  },
+  failedText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  retry: {
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 14,
+    backgroundColor: '#FFFFFF',
+  },
+  retryText: {
+    color: '#111827',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+});

package/src/components/MessageBubble/MediaCaption.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
+
+interface MediaCaptionProps {
+  text?: string;
+  isUser: boolean;
+}
+
+/**
+ * The text sent with a media message, under the media inside the bubble.
+ * Plain text: mention spans are stored on the message but not rendered here.
+ */
+const MediaCaption: React.FC<MediaCaptionProps> = ({ text, isUser }) => {
+  const theme = useTheme();
+  const { config } = useChatSettingState();
+  if (!text) {return null;}
+  const typography = config?.typography?.messageText;
+  return (
+    <Text
+      testID="media-caption"
+      style={[
+        styles.caption,
+        { color: isUser ? theme.messageTextUser : theme.messageText },
+        typography?.fontSize ? { fontSize: typography.fontSize } : null,
+        typography?.fontWeight ? { fontWeight: typography.fontWeight as any } : null,
+      ]}
+    >
+      {text}
+    </Text>
+  );
+};
+
+export default MediaCaption;
+
+const styles = StyleSheet.create({
+  caption: {
+    fontSize: 16,
+    paddingHorizontal: 12,
+    paddingTop: 6,
+    paddingBottom: 2,
+    alignSelf: 'stretch',
+  },
+});

package/src/components/MessageBubble/Message.tsx

@@ -1,4 +1,5 @@
 import React, {
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -15,7 +16,7 @@ import {
   Text,
   Keyboard,
 } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { Avatar } from './Avatar';
 import { BubbleHighlight } from './BubbleHighlight';
@@ -43,7 +44,7 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { chatTextStyle } from '../../helpers/typography';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
-import { DoubleTick, LockIcon, LockOffIcon } from '../../assets/icons';
+import { DoubleTick, LockIcon, LockOffIcon, SingleTick } from '../../assets/icons';
 import { useT } from '../../i18n/useT';
 import { useFileToken } from '../../hooks/useFileToken';
 import {
@@ -66,6 +67,17 @@ import {
   requestUsers,
   subscribeUserResolver,
 } from '../../helpers/userResolver';
+import {
+  deliveredToOthers,
+  describeReceipt,
+  getReceiptStatus,
+  receiptNameFor,
+  selectSeenBy,
+  statusOf,
+} from '../../helpers/readReceipts';
+
+// Shared empty result for the seen-by selector (keeps shallowEqual cheap).
+const NO_RECEIPT_VIEWERS: string[] = [];
 
 // Stable-width stand-in for the sender name while its lookup is pending.
 const SENDER_NAME_PLACEHOLDER = '\u2026';
@@ -507,6 +519,42 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const isPending =
     !isFailed && (idSet.has(message.id) || message?.pending || false);
 
+  // Delivery and read state of our own messages (XEP-0184 / XEP-0333). The
+  // seen list is a small array compared shallowly, so a bubble only renders
+  // again when its own readers change, not on every message in the room.
+  // Same identity the list uses to decide ownership (MessageList passes
+  // xmppUsername || walletAddress), so the tick and the watermark agree.
+  const selfXmppUsername = user?.xmppUsername || user?.walletAddress || '';
+  const seenBy = useSelector(
+    (state: RootState) =>
+      isUser
+        ? selectSeenBy(state, message.roomJid, String(message.id), selfXmppUsername)
+        : NO_RECEIPT_VIEWERS,
+    shallowEqual
+  );
+  const readStatus = statusOf(
+    seenBy,
+    isUser ? deliveredToOthers(message, selfXmppUsername) : []
+  );
+  const reduxStore = useStore<RootState>();
+  // Touch (no hover on mobile): the details sheet names who read or got it.
+  const onReceiptPress = useCallback(() => {
+    const state = reduxStore.getState();
+    const room = state.rooms.rooms[message.roomJid];
+    const details = getReceiptStatus(message, room, selfXmppUsername);
+    Alert.alert(
+      describeReceipt({
+        status: details.status,
+        isGroup: room?.type !== 'private',
+        seenBy: details.seenBy,
+        deliveredTo: details.deliveredTo,
+        nameOf: (xmppUsername) =>
+          receiptNameFor(state.rooms.usersSet, xmppUsername),
+        t,
+      })
+    );
+  }, [reduxStore, message, selfXmppUsername, t]);
+
   const onRetryPress = () => {
     if (isFailed) {retryMessage(message.id);}
   };
@@ -667,7 +715,27 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           {timeLabel}
         </Text>
         {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
-          <DoubleTick />
+          <Pressable
+            onPress={onReceiptPress}
+            hitSlop={10}
+            accessibilityRole="button"
+            accessibilityLabel={
+              readStatus === 'seen'
+                ? t('message.receipt.read')
+                : readStatus === 'delivered'
+                  ? t('message.receipt.delivered')
+                  : t('message.receipt.sent')
+            }
+            testID="message-receipt-tick"
+          >
+            {readStatus === 'sent' ? (
+              <SingleTick stroke={theme.textMuted} />
+            ) : (
+              <DoubleTick
+                stroke={readStatus === 'seen' ? theme.primary : theme.textMuted}
+              />
+            )}
+          </Pressable>
         )}
       </CustomTimestampRow>