@ethora/chat-component-rn 26.10.4 → 26.10.6

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;
+}

package/src/helpers/albumLayout.ts

@@ -0,0 +1,207 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Geometry for a multi-media album bubble. Pure numbers and RN style objects,
+ * so AlbumGrid stays a dumb renderer and the rules are testable without a
+ * renderer.
+ *
+ *   1 item   full width, 4:3
+ *   2 items  side by side, 2:1 (square cells)
+ *   3 items  one large cell on the left, two stacked on the right
+ *   4 items  2 x 2
+ *   5+ items 2 x 2 showing the first four, the last cell carries "+N"
+ */
+
+/** Gap between neighbouring tiles. */
+export const ALBUM_GAP = 3;
+/** Radius of a tile corner that sits on the bubble's own corner. */
+export const ALBUM_OUTER_RADIUS = 10;
+/** Radius of every other tile corner, the ones that face a neighbour. */
+export const ALBUM_INNER_RADIUS = 3;
+
+export interface AlbumCellPlacement {
+  /** 0-based grid column and row of the tile's top-left cell. */
+  column: number;
+  row: number;
+  columnSpan: number;
+  rowSpan: number;
+}
+
+export type AlbumKind = 'full' | 'pair' | 'hero' | 'quad';
+
+export interface AlbumLayout {
+  kind: AlbumKind;
+  /** Number of tiles actually drawn. */
+  visible: number;
+  /** Items folded into the "+N" overlay on the last visible tile. */
+  hidden: number;
+  /** Relative width of each grid column. */
+  columns: number[];
+  /** Relative height of each grid row. */
+  rows: number[];
+  /** Width divided by height of the whole grid. */
+  aspectRatio: number;
+  /** One entry per visible tile, in order. */
+  placements: AlbumCellPlacement[];
+}
+
+const cell = (
+  column: number,
+  row: number,
+  rowSpan = 1
+): AlbumCellPlacement => ({ column, row, columnSpan: 1, rowSpan });
+
+const LAYOUTS: Record<AlbumKind, Omit<AlbumLayout, 'visible' | 'hidden'>> = {
+  full: {
+    kind: 'full',
+    columns: [1],
+    rows: [1],
+    aspectRatio: 4 / 3,
+    placements: [cell(0, 0)],
+  },
+  pair: {
+    kind: 'pair',
+    columns: [1, 1],
+    rows: [1],
+    aspectRatio: 2,
+    placements: [cell(0, 0), cell(1, 0)],
+  },
+  hero: {
+    kind: 'hero',
+    columns: [2, 1],
+    rows: [1, 1],
+    aspectRatio: 4 / 3,
+    placements: [cell(0, 0, 2), cell(1, 0), cell(1, 1)],
+  },
+  quad: {
+    kind: 'quad',
+    columns: [1, 1],
+    rows: [1, 1],
+    aspectRatio: 1,
+    placements: [cell(0, 0), cell(1, 0), cell(0, 1), cell(1, 1)],
+  },
+};
+
+/** Layout for `count` media tiles. Counts below 1 are treated as 1. */
+export const getAlbumLayout = (count: number): AlbumLayout => {
+  const total = Math.max(1, Math.floor(Number.isFinite(count) ? count : 1));
+  const kind: AlbumKind =
+    total === 1 ? 'full' : total === 2 ? 'pair' : total === 3 ? 'hero' : 'quad';
+  const base = LAYOUTS[kind];
+  const visible = base.placements.length;
+  return {
+    ...base,
+    columns: [...base.columns],
+    rows: [...base.rows],
+    placements: base.placements.map((placement) => ({ ...placement })),
+    visible,
+    hidden: Math.max(0, total - visible),
+  };
+};
+
+/** Splits `total` across weighted tracks, leaving `gap` between neighbours. */
+const trackSizes = (weights: number[], total: number, gap: number): number[] => {
+  const room = total - gap * (weights.length - 1);
+  const sum = weights.reduce((acc, weight) => acc + weight, 0);
+  return weights.map((weight) => (room * weight) / sum);
+};
+
+export interface AlbumFrame {
+  width: number;
+  height: number;
+  /** One absolutely positioned style per visible tile, in order. */
+  tiles: ViewStyle[];
+}
+
+/** Pixel frame of the grid and of every tile for a grid `width` wide. */
+export const getAlbumFrame = (layout: AlbumLayout, width: number): AlbumFrame => {
+  const height = Math.round(width / layout.aspectRatio);
+  const colWidths = trackSizes(layout.columns, width, ALBUM_GAP);
+  const rowHeights = trackSizes(layout.rows, height, ALBUM_GAP);
+  const offset = (sizes: number[], index: number) =>
+    sizes.slice(0, index).reduce((acc, size) => acc + size + ALBUM_GAP, 0);
+  const span = (sizes: number[], index: number, count: number) =>
+    sizes.slice(index, index + count).reduce((acc, size) => acc + size, 0) +
+    ALBUM_GAP * (count - 1);
+
+  return {
+    width,
+    height,
+    tiles: layout.placements.map((placement, position) => ({
+      position: 'absolute',
+      left: Math.round(offset(colWidths, placement.column)),
+      top: Math.round(offset(rowHeights, placement.row)),
+      width: Math.round(span(colWidths, placement.column, placement.columnSpan)),
+      height: Math.round(span(rowHeights, placement.row, placement.rowSpan)),
+      overflow: 'hidden',
+      ...getTileBorderRadius(layout, position),
+    })),
+  };
+};
+
+/**
+ * Which corners of one tile lie on the bubble's outer edge. Only those get
+ * the large radius; corners that face a neighbour get the small inner one.
+ */
+export interface TileCorners {
+  topLeft: boolean;
+  topRight: boolean;
+  bottomRight: boolean;
+  bottomLeft: boolean;
+}
+
+const corners = (
+  topLeft: boolean,
+  topRight: boolean,
+  bottomRight: boolean,
+  bottomLeft: boolean
+): TileCorners => ({ topLeft, topRight, bottomRight, bottomLeft });
+
+const OUTER_CORNERS: Record<AlbumKind, TileCorners[]> = {
+  full: [corners(true, true, true, true)],
+  pair: [corners(true, false, false, true), corners(false, true, true, false)],
+  // Hero: the tall left cell owns both left corners; the right column owns
+  // its top-right and bottom-right corners respectively.
+  hero: [
+    corners(true, false, false, true),
+    corners(false, true, false, false),
+    corners(false, false, true, false),
+  ],
+  quad: [
+    corners(true, false, false, false),
+    corners(false, true, false, false),
+    corners(false, false, false, true),
+    corners(false, false, true, false),
+  ],
+};
+
+/** Outer-corner flags for the tile at `position` (0-based) of `layout`. */
+export const getTileCorners = (
+  layout: AlbumLayout,
+  position: number
+): TileCorners => {
+  const found = OUTER_CORNERS[layout.kind][position];
+  return found ? { ...found } : corners(false, false, false, false);
+};
+
+/** The four border radii of one tile, as RN style props. */
+export const getTileBorderRadius = (
+  layout: AlbumLayout,
+  position: number
+): Pick<
+  ViewStyle,
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomRightRadius'
+  | 'borderBottomLeftRadius'
+> => {
+  const c = getTileCorners(layout, position);
+  const radius = (outer: boolean) =>
+    outer ? ALBUM_OUTER_RADIUS : ALBUM_INNER_RADIUS;
+  return {
+    borderTopLeftRadius: radius(c.topLeft),
+    borderTopRightRadius: radius(c.topRight),
+    borderBottomRightRadius: radius(c.bottomRight),
+    borderBottomLeftRadius: radius(c.bottomLeft),
+  };
+};