@ethora/chat-component-rn 26.10.5 → 26.10.7

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)}

package/src/components/styled/SendInput.tsx

@@ -17,6 +17,7 @@ import { getElementFont } from '../../helpers/getElementFont';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
+import { mediaFileCap, mediaSizeLimit } from '../../helpers/mediaLimits';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -44,14 +45,6 @@ import {
 // receivers draw it without downloading and decoding the clip first.
 const VOICE_PRESET = { ...RecordingPresets.HIGH_QUALITY, isMeteringEnabled: true };
 
-// iOS photos default to HEIC; many web backends (incl. ours) 500 on
-// HEIC uploads because they can't decode it. Convert to JPEG before
-// upload — JPEG is universally supported. JPEGs pass through.
-// Server rejects uploads over its body-size cap with HTTP 413 (Request
-// Entity Too Large). Guard client-side so the user gets a clear message
-// instead of a silent failed bubble. 50 MB matches the backend limit.
-const MAX_MEDIA_BYTES = 50 * 1024 * 1024;
-
 const formatBytes = (bytes: number): string => {
   if (bytes >= 1024 * 1024) {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
@@ -89,7 +82,11 @@ interface SendInputProps {
   sendMessage: (message: string) => void;
   isLoading: boolean;
   editMessage?: string;
-  sendMedia: (data: any, type: string) => void;
+  /**
+   * Sends one message carrying `data` (a file or the picked list). The typed
+   * text, when there is any, goes with it as the caption.
+   */
+  sendMedia: (data: any, type: string, caption?: { text: string }) => unknown;
   config?: IConfig;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -164,25 +161,64 @@ const SendInput: React.FC<SendInputProps> = ({
   // "Document" row or a dev-mode double-run of the sheet's close callback.
   const pickingDocRef = useRef(false);
 
-  const handleFileSelect = (files: MediaFile[]) => {
-    // Enforce the upload size cap before anything reaches the network.
-    // The backend rejects oversized bodies with HTTP 413; catching it
-    // here gives a clear message instead of a silent failed bubble.
-    const limit = maxMediaBytes ?? MAX_MEDIA_BYTES;
-    const oversize = files.find(
-      (f) => typeof f.size === 'number' && f.size > limit
-    );
-    if (oversize) {
-      Alert.alert(
-        'File too large',
-        `"${oversize.name}" is ${formatBytes(oversize.size!)}. The maximum allowed size is ${Math.round(
-          limit / (1024 * 1024)
-        )} MB.`
-      );
-      return;
+  /**
+   * Adds picked files to the tray. The tray is a list, not a slot: a second
+   * pick or a camera shot appends. Enforces the per-message file cap and the
+   * per-file size cap before anything reaches the network; the size cap is
+   * the upload limit (50 MB, or the sealed-file limit in an e2ee room),
+   * lowered by `config.attachments.maxSizeMB`. The backend rejects oversized
+   * bodies with HTTP 413, so catching them here gives a clear message.
+   */
+  const handleFileSelect = (incoming: MediaFile[]) => {
+    if (incoming.length === 0) {return;}
+    const limit = mediaSizeLimit(config, maxMediaBytes);
+    const fitting = incoming.filter((file) => {
+      if (typeof file.size === 'number' && file.size > limit) {
+        Alert.alert(
+          t('attachment.tooLarge', {
+            name: file.name,
+            max: formatBytes(limit),
+          })
+        );
+        return false;
+      }
+      return true;
+    });
+    const cap = mediaFileCap(config);
+    const room = cap - filePreviewsRef.current.length;
+    if (fitting.length === 0) {return;}
+    if (room <= 0 || fitting.length > room) {
+      Alert.alert(t('attachment.limit', { count: cap }));
     }
-    filePreviewsRef.current = files;
-    setFilePreviews([...files]);
+    const accepted = fitting.slice(0, Math.max(0, room));
+    if (accepted.length === 0) {return;}
+    const next = [...filePreviewsRef.current, ...accepted];
+    filePreviewsRef.current = next;
+    setFilePreviews(next);
+  };
+
+  /** One picked image or video as the file the tray and the upload carry. */
+  const assetToFile = async (
+    asset: ImagePicker.ImagePickerAsset,
+    fallbackPrefix: string
+  ): Promise<MediaFile> => {
+    if (asset.type === 'video') {
+      return {
+        uri: asset.uri,
+        type: asset.mimeType || 'video/mp4',
+        name: asset.fileName || asset.uri.split('/').pop() || `${fallbackPrefix}_${Date.now()}.mp4`,
+        size: (asset as any).fileSize,
+      };
+    }
+    // Videos pass through unchanged; only images get the HEIC→JPEG
+    // normalization (manipulator is image-only).
+    const normalized = await normalizeImageAsset(asset);
+    return {
+      uri: normalized.uri,
+      type: normalized.mime,
+      name: normalized.name,
+      size: (asset as any).fileSize,
+    };
   };
 
   // Both pickers use expo-image-picker / expo-document-picker. They
@@ -205,33 +241,14 @@ const SendInput: React.FC<SendInputProps> = ({
     }
 
     try {
+      // Camera is a single shot per tap; the shot joins the tray.
       const result = await ImagePicker.launchCameraAsync({
         mediaTypes: ['images', 'videos'],
         quality: 0.9,
         videoQuality: ImagePicker.UIImagePickerControllerQualityType.Medium,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
-      const asset = result.assets[0];
-      if (asset.type === 'video') {
-        handleFileSelect([
-          {
-            uri: asset.uri,
-            type: asset.mimeType || 'video/mp4',
-            name: asset.fileName || asset.uri.split('/').pop() || `camera_${Date.now()}.mp4`,
-            size: (asset as any).fileSize,
-          },
-        ]);
-        return;
-      }
-      const normalized = await normalizeImageAsset(asset);
-      handleFileSelect([
-        {
-          uri: normalized.uri,
-          type: normalized.mime,
-          name: normalized.name,
-          size: (asset as any).fileSize,
-        },
-      ]);
+      handleFileSelect([await assetToFile(result.assets[0], 'camera')]);
     } catch (error) {
       console.error('Camera error:', error);
     }
@@ -244,38 +261,29 @@ const SendInput: React.FC<SendInputProps> = ({
       return;
     }
 
+    // The library takes as many as the tray has room for (at least one).
+    const remaining = mediaFileCap(config) - filePreviewsRef.current.length;
+    if (remaining <= 0) {
+      Alert.alert(t('attachment.limit', { count: mediaFileCap(config) }));
+      return;
+    }
+
     try {
       const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ['images', 'videos'],
         allowsEditing: false,
         quality: 0.9,
+        allowsMultipleSelection: true,
+        selectionLimit: remaining,
         preferredAssetRepresentationMode:
           ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
       });
-      if (result.canceled || !result.assets?.[0]) {return;}
-      const asset = result.assets[0];
-      // Videos pass through unchanged; only images get the HEIC→JPEG
-      // normalization (manipulator is image-only).
-      if (asset.type === 'video') {
-        handleFileSelect([
-          {
-            uri: asset.uri,
-            type: asset.mimeType || 'video/mp4',
-            name: asset.fileName || asset.uri.split('/').pop() || `gallery_${Date.now()}.mp4`,
-            size: (asset as any).fileSize,
-          },
-        ]);
-        return;
+      if (result.canceled || !result.assets?.length) {return;}
+      const picked: MediaFile[] = [];
+      for (const asset of result.assets) {
+        picked.push(await assetToFile(asset, 'gallery'));
       }
-      const normalized = await normalizeImageAsset(asset);
-      handleFileSelect([
-        {
-          uri: normalized.uri,
-          type: normalized.mime,
-          name: normalized.name,
-          size: (asset as any).fileSize,
-        },
-      ]);
+      handleFileSelect(picked);
     } catch (error) {
       console.error('Gallery error:', error);
     }
@@ -336,19 +344,18 @@ const SendInput: React.FC<SendInputProps> = ({
     try {
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
-        multiple: false,
+        multiple: true,
         copyToCacheDirectory: true,
       });
-      if (result.canceled || !result.assets?.[0]) {return;}
-      const asset = result.assets[0];
-      handleFileSelect([
-        {
+      if (result.canceled || !result.assets?.length) {return;}
+      handleFileSelect(
+        result.assets.map((asset) => ({
           uri: asset.uri,
           type: asset.mimeType || 'application/octet-stream',
           name: asset.name || `file_${Date.now()}`,
           size: asset.size ?? undefined,
-        },
-      ]);
+        }))
+      );
     } catch (err) {
       console.error('DocumentPicker error:', err);
     } finally {
@@ -383,6 +390,11 @@ const SendInput: React.FC<SendInputProps> = ({
   const libraryPermissionCheckedRef = useRef(false);
 
   const handleAttachPress = () => {
+    const cap = mediaFileCap(config);
+    if (filePreviewsRef.current.length >= cap) {
+      Alert.alert(t('attachment.limit', { count: cap }));
+      return;
+    }
     if (libraryPermissionCheckedRef.current) {
       setShowMediaMenu(true);
       return;
@@ -594,17 +606,19 @@ const SendInput: React.FC<SendInputProps> = ({
     setFilePreviews([]);
 
     try {
-      for (const file of filesToSend) {
-        try {
-          await sendMedia(file, file.type);
-        } catch (err) {
-          console.error(err);
-          return;
-        }
-      }
-      if (messageToSend) {
+      if (filesToSend.length > 0) {
+        // The files go as ONE message. The text typed with them is its
+        // caption, never a separate text message.
+        await sendMedia(
+          filesToSend,
+          filesToSend[0]!.type,
+          messageToSend ? { text: messageToSend } : undefined
+        );
+      } else if (messageToSend) {
         sendMessage(messageToSend);
       }
+    } catch (err) {
+      console.error(err);
     } finally {
       sendingRef.current = false;
     }

package/src/components/styled/VideoMessage.tsx

@@ -29,6 +29,10 @@ interface CustomMessageVideoProps {
   mimetype: string;
   /** The backend-generated poster frame (message.locationPreview). */
   previewURL?: string;
+  /** Album mode: fill a tile of exactly this size (square corners; the tile clips). */
+  tile?: { width: number; height: number };
+  /** Replaces the default "open this one file" tap, e.g. to open an album at an index. */
+  onOpen?: () => void;
 }
 
 const PlayBadge: React.FC = () => (
@@ -51,11 +55,13 @@ const PosterVideo: React.FC<{
   previewURL: string;
   onOpen: () => void;
   onPosterError: () => void;
-}> = ({ previewURL, onOpen, onPosterError }) => {
-  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
+  tile?: { width: number; height: number };
+}> = ({ previewURL, onOpen, onPosterError, tile }) => {
+  const [measured, setDims] = useState<MediaDims>(defaultMediaDims());
+  const dims: MediaDims = tile ?? measured;
 
   useEffect(() => {
-    if (!previewURL) {
+    if (!previewURL || tile) {
       return;
     }
     let active = true;
@@ -73,12 +79,16 @@ const PosterVideo: React.FC<{
     return () => {
       active = false;
     };
-  }, [previewURL]);
+  }, [previewURL, tile]);
 
   return (
     <Pressable
       onPress={onOpen}
-      style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+      style={[
+        styles.wrapper,
+        { width: dims.width, height: dims.height },
+        tile && styles.tileWrapper,
+      ]}
       accessibilityRole="button"
       accessibilityLabel="Play video"
     >
@@ -115,13 +125,18 @@ const PosterVideo: React.FC<{
  */
 const PlaceholderVideo: React.FC<{
   onOpen: () => void;
-}> = ({ onOpen }) => {
-  const dims = defaultMediaDims();
+  tile?: { width: number; height: number };
+}> = ({ onOpen, tile }) => {
+  const dims = tile ?? defaultMediaDims();
 
   return (
     <Pressable
       onPress={onOpen}
-      style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+      style={[
+        styles.wrapper,
+        { width: dims.width, height: dims.height },
+        tile && styles.tileWrapper,
+      ]}
       accessibilityRole="button"
       accessibilityLabel="Play video"
     >
@@ -136,11 +151,17 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   fileURL,
   mimetype,
   previewURL,
+  tile,
+  onOpen,
 }) => {
   const dispatch = useDispatch();
   const [posterFailed, setPosterFailed] = useState(false);
 
   const handleOpen = () => {
+    if (onOpen) {
+      onOpen();
+      return;
+    }
     dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
@@ -150,6 +171,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
       <PosterVideo
         previewURL={previewURL}
         onOpen={handleOpen}
+        tile={tile}
         onPosterError={() => {
           if (isSecureFileUrl(previewURL)) {
             requestFileTokenRecovery();
@@ -160,7 +182,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
     );
   }
 
-  return <PlaceholderVideo onOpen={handleOpen} />;
+  return <PlaceholderVideo onOpen={handleOpen} tile={tile} />;
 };
 
 export default CustomMessageVideo;
@@ -171,6 +193,9 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: '#000',
   },
+  tileWrapper: {
+    borderRadius: 0,
+  },
   video: {
     width: '100%',
     height: '100%',

package/src/context/xmppProvider.tsx

@@ -63,6 +63,7 @@ import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
 import { secureUserStorage } from '../helpers/secureUserStorage';
 import { clearPersistedState } from '../roomStore/persistence';
 import { pushLog as devPushLog } from '../utils/devLogger';
+import { computeReadWatermark } from '../helpers/readReceipts';
 
 interface InitMode {
   current: 'provider' | 'chat';
@@ -794,6 +795,26 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
     let lastMessagesRef: any = null;
     let lastStampedMs = 0;
     let flushTimer: ReturnType<typeof setTimeout> | null = null;
+    // Room whose XEP-0333 marker is waiting on the 2 s debounce below. Set
+    // only while that room is the one on screen.
+    let pendingMarkerJid: string | null = null;
+
+    // Sends the waiting marker now: the debounce is cut short because the
+    // user left the room or the app, so it would otherwise be lost. The room
+    // counts as on screen for this one call (it was when the marker was
+    // queued); the jump window, the scroll boundary and the disable flags
+    // still apply inside computeReadWatermark.
+    const flushPendingMarker = () => {
+      const jid = pendingMarkerJid;
+      pendingMarkerJid = null;
+      if (!jid) {return;}
+      const st = store.getState();
+      const watermark = computeReadWatermark(
+        { ...st, rooms: { ...st.rooms, visibleRoomJID: jid } } as any,
+        jid
+      );
+      if (watermark) {client?.sendDisplayedMarkerStanza?.(watermark, jid);}
+    };
 
     const advance = () => {
       const s = store.getState();
@@ -826,9 +847,13 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         setLastViewedTimestamp({ chatJID: jid, timestamp: newest })
       );
 
+      // Another room took over the debounce: send the old room's marker first.
+      if (pendingMarkerJid && pendingMarkerJid !== jid) {flushPendingMarker();}
       if (flushTimer) {clearTimeout(flushTimer);}
       if (client?.flushLastViewedToPrivateStoreStanza) {
+        if (s.rooms?.visibleRoomJID === jid) {pendingMarkerJid = jid;}
         flushTimer = setTimeout(() => {
+          pendingMarkerJid = null;
           // Re-read fresh state rather than closing over `boundaryTs`:
           // the user may have scrolled back to the bottom (clearing the
           // boundary) in the 2s between the stamp and this flush, and
@@ -845,6 +870,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
               ),
             })
             .catch(() => {});
+          // XEP-0333 read marker, on the same debounce as the private-store
+          // write above. computeReadWatermark sends nothing unless the room is
+          // still on screen, no jump window is open and the newest message
+          // is someone else's.
+          const watermark = computeReadWatermark(freshState, jid);
+          if (watermark) {client.sendDisplayedMarkerStanza?.(watermark, jid);}
         }, 2000);
       }
     };
@@ -854,6 +885,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
     return () => {
       unsub();
       if (flushTimer) {clearTimeout(flushTimer);}
+      flushPendingMarker();
     };
   }, [isVisible, client]);
 

package/src/e2ee/fileEnvelope.ts

@@ -12,7 +12,7 @@ import {
   type Progress,
 } from './fileCipher';
 
-export { parseSealedMediaBody } from './sealedBody';
+export { parseSealedMediaBody, parseSealedMediaPayload } from './sealedBody';
 
 const MAGIC = Uint8Array.from([0x45, 0x54, 0x48, 0x4f, 0x46, 0x49, 0x4c, 0x45]);
 const VERSION = 1;

package/src/e2ee/sealedBody.ts

@@ -1,17 +1,56 @@
-export function parseSealedMediaBody(body?: string): string[] | undefined {
+import type { IMentionSpan } from '../types/models/message.model';
+import { normalizeCaptionInput } from '../helpers/caption';
+
+/** What a sealed media <body> carries besides the keys. */
+export interface SealedMediaPayload {
+  keys: string[];
+  /** The text typed with the files. Sealed here, never on <data>. */
+  caption?: string;
+  captionMentions?: IMentionSpan[];
+}
+
+/**
+ * Pulls the attachment keys (and the caption, when there is one) out of a
+ * decrypted media <body>: `{v:1,keys:[...],caption?,captionMentions?}`, which
+ * the sender writes in place of the usual literal "media". Undefined for
+ * anything else, so an ordinary media message falls through untouched.
+ */
+export function parseSealedMediaPayload(
+  body?: string
+): SealedMediaPayload | undefined {
   const text = String(body || '').trim();
   if (!text.startsWith('{')) {return undefined;}
 
   try {
-    const parsed = JSON.parse(text) as { v?: unknown; keys?: unknown };
+    const parsed = JSON.parse(text) as {
+      v?: unknown;
+      keys?: unknown;
+      caption?: unknown;
+      captionMentions?: unknown;
+    };
     if (parsed?.v !== 1 || !Array.isArray(parsed.keys)) {return undefined;}
     const keys = parsed.keys.filter(
       (k): k is string => typeof k === 'string' && k.length > 0
     );
-    return keys.length === parsed.keys.length && keys.length > 0
-      ? keys
-      : undefined;
+    if (!(keys.length === parsed.keys.length && keys.length > 0)) {
+      return undefined;
+    }
+
+    const caption = normalizeCaptionInput({
+      text: typeof parsed.caption === 'string' ? parsed.caption : '',
+      mentions: parsed.captionMentions as IMentionSpan[] | undefined,
+    });
+    return {
+      keys,
+      ...(caption ? { caption: caption.caption } : {}),
+      ...(caption?.mentions ? { captionMentions: caption.mentions } : {}),
+    };
   } catch {
     return undefined;
   }
 }
+
+/** The attachment keys out of a sealed media <body>; see parseSealedMediaPayload. */
+export function parseSealedMediaBody(body?: string): string[] | undefined {
+  return parseSealedMediaPayload(body)?.keys;
+}