@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/assets/icons.tsx

@@ -720,7 +720,25 @@ export const ArowDownIcon = ({
   </Svg>
 );
 
-export const DoubleTick = ({ fill = '#fff', color = '#0052CD', ...props }) => (
+export const SingleTick = ({ stroke = '#16A34A', ...props }) => (
+  <Svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    {...props}
+  >
+    <Path
+      d="M4 8.5L7 11.5L12 5.5"
+      stroke={stroke}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const DoubleTick = ({ fill = '#fff', color = '#0052CD', stroke = '#16A34A', ...props }) => (
   <Svg
     width="16"
     height="16"
@@ -730,7 +748,7 @@ export const DoubleTick = ({ fill = '#fff', color = '#0052CD', ...props }) => (
   >
     <Path
       d="M1.75 9.75L4.25 12.25M7.75 8.25L10.25 5.75M5.75 9.75L8.25 12.25L14.25 5.75"
-      stroke="#16A34A"
+      stroke={stroke}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"

package/src/components/MainComponents/AlbumGrid.tsx

@@ -0,0 +1,183 @@
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useDispatch } from 'react-redux';
+import { IAttachment, ModalFile } from '../../types/types';
+import CustomMessageImage from '../styled/MessageImage';
+import CustomMessageVideo from '../styled/VideoMessage';
+import { getAttachmentName } from '../../helpers/attachments';
+import { getFileKind } from '../../helpers/fileKind';
+import { getAlbumFrame, getAlbumLayout } from '../../helpers/albumLayout';
+import { MEDIA_MAX_W } from '../../helpers/mediaDimensions';
+import { appendFileToken } from '../../helpers/secureFileUrl';
+import { useFileToken } from '../../hooks/useFileToken';
+import { useT } from '../../i18n/useT';
+import {
+  setActiveFile,
+  setActiveModal,
+} from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import MediaUploadOverlay from './MediaUploadOverlay';
+
+interface AlbumGridProps {
+  /** The pictures and videos of one message, in order. */
+  attachments: IAttachment[];
+  /** Width of the whole grid; the bubble's media width by default. */
+  width?: number;
+  /** Re-runs the upload of the tile at this position (a failed outgoing file). */
+  onRetryTile?: (position: number) => void;
+}
+
+/**
+ * Photo and video album of a message with several media files. The geometry
+ * comes from getAlbumLayout / getAlbumFrame; every tile is the ordinary
+ * picture or video component sized to its cell. A tap opens the viewer on
+ * that file with the whole album as its siblings, so the viewer can page
+ * through files the grid does not show. The last tile of a long album carries
+ * a "+N" overlay for the files folded behind it.
+ */
+const AlbumGrid: React.FC<AlbumGridProps> = ({
+  attachments,
+  width = MEDIA_MAX_W,
+  onRetryTile,
+}) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const fileToken = useFileToken();
+
+  const layout = useMemo(
+    () => getAlbumLayout(attachments.length),
+    [attachments.length]
+  );
+  const frame = useMemo(() => getAlbumFrame(layout, width), [layout, width]);
+
+  const siblings: ModalFile[] = useMemo(
+    () =>
+      attachments.map((attachment) => ({
+        fileName: getAttachmentName(attachment),
+        originalName: attachment.originalName,
+        fileURL: appendFileToken(attachment.location, fileToken) || '',
+        mimetype: attachment.mimetype || '',
+        duration: attachment.duration,
+      })),
+    [attachments, fileToken]
+  );
+
+  const openAt = useCallback(
+    (index: number) => {
+      const target = siblings[index];
+      // A file still on its way up has no server copy to open yet.
+      if (!target || !target.fileURL || attachments[index]?.uploadStatus) {return;}
+      dispatch(setActiveFile({ ...target, siblings, index }));
+      dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
+    },
+    [attachments, dispatch, siblings]
+  );
+
+  return (
+    <View
+      testID="album-grid"
+      style={[styles.grid, { width: frame.width, height: frame.height }]}
+    >
+      {attachments.slice(0, layout.visible).map((attachment, position) => {
+        const style = frame.tiles[position]!;
+        const tile = {
+          width: Number(style.width),
+          height: Number(style.height),
+        };
+        const fileName = getAttachmentName(attachment);
+        const kind = getFileKind({
+          mimetype: attachment.mimetype,
+          name: fileName,
+          url: attachment.location,
+          duration: attachment.duration,
+        });
+        // An outgoing tile shows the file on this device until its upload
+        // has given it a server copy.
+        const outgoing = Boolean(attachment.uploadStatus);
+        const fileURL = outgoing
+          ? attachment.localUrl || ''
+          : appendFileToken(attachment.location, fileToken) || '';
+        const preview = outgoing
+          ? attachment.localUrl || undefined
+          : appendFileToken(attachment.locationPreview, fileToken);
+        const showMore = position === layout.visible - 1 && layout.hidden > 0;
+        const open = () => openAt(position);
+
+        return (
+          <View
+            key={attachment.attachmentId || `${position}-${fileName}`}
+            testID={`album-tile-${position}`}
+            style={style}
+          >
+            {kind === 'video' ? (
+              <CustomMessageVideo
+                fileName={fileName}
+                originalName={attachment.originalName}
+                fileURL={fileURL}
+                previewURL={preview}
+                mimetype={attachment.mimetype || ''}
+                tile={tile}
+                onOpen={outgoing ? undefined : open}
+              />
+            ) : (
+              <CustomMessageImage
+                fileName={fileName}
+                originalName={attachment.originalName}
+                fileURL={fileURL}
+                locationPreview={preview}
+                mimetype={attachment.mimetype || ''}
+                tile={tile}
+                onOpen={outgoing ? undefined : open}
+              />
+            )}
+            {outgoing && attachment.uploadStatus && (
+              <MediaUploadOverlay
+                status={attachment.uploadStatus}
+                progress={attachment.uploadProgress}
+                onRetry={onRetryTile ? () => onRetryTile(position) : undefined}
+              />
+            )}
+            {showMore && (
+              <Pressable
+                testID="album-more"
+                accessibilityRole="button"
+                accessibilityLabel={t('attachment.moreLabel', {
+                  count: layout.hidden,
+                })}
+                onPress={open}
+                style={styles.more}
+              >
+                <Text style={styles.moreText}>
+                  {t('attachment.moreCount', { count: layout.hidden })}
+                </Text>
+              </Pressable>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export default AlbumGrid;
+
+const styles = StyleSheet.create({
+  grid: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: 10,
+  },
+  more: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Sits on the photo itself, so it stays hard-coded: it must read on the
+    // picture, not on the theme.
+    backgroundColor: 'rgba(8, 12, 24, 0.5)',
+  },
+  moreText: {
+    color: '#FFFFFF',
+    fontSize: 28,
+    fontWeight: '600',
+  },
+});

package/src/components/MainComponents/ChatRoom.tsx

@@ -201,14 +201,16 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     );
 
     const sendMedia = useCallback(
-      (data: any, type: string) => {
+      (data: any, type: string, caption?: { text: string }) => {
         // Return the promise so callers can sequence the follow-up
         // text send AFTER the upload finishes (consumer expectation:
         // media first, text second — never interleaved).
         if (store.getState().rooms.jumpWindow) {
           dispatch(clearJumpWindow());
         }
-        return sendMessageMedia(data, type, activeRoomJID || '');
+        return caption
+          ? sendMessageMedia(data, type, activeRoomJID || '', false, false, '', undefined, caption)
+          : sendMessageMedia(data, type, activeRoomJID || '');
       },
       [activeRoomJID, dispatch],
     );

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,