@oxy.so/bloom 2.10.0 → 2.11.0

package/lib/module/message-media/DocumentGrid.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+import { FileMessage } from "./FileMessage.js";
+import { resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The FILES tab beside {@link SharedMediaGrid}'s media tab.
+ *
+ * It is a list, not a grid of tiles, and the name is the pair's rather than the
+ * shape's: a document has no thumbnail worth three columns, and the two things a
+ * reader is scanning for — the file NAME and its size — are text that needs a
+ * line each.
+ *
+ * Every row is `FileMessage variant="compact"`, so the kind icons, the colours,
+ * the "2.4 MB · PDF" line and the download ring are the same ones the bubble
+ * draws. A second implementation of a file row is a second place for the size
+ * format to drift.
+ *
+ * The rows are always `incoming` tone: this list lives on the panel surface, not
+ * on a bubble.
+ */
+function DocumentGridComponent({
+  items,
+  onPressItem,
+  onDownloadItem,
+  onCancelItem,
+  divider = true,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, 'incoming'), [theme]);
+  const listName = accessibilityLabel ?? `Shared files, ${items.length} item${items.length === 1 ? '' : 's'}`;
+  return /*#__PURE__*/_jsx(View, {
+    role: "list",
+    accessibilityLabel: listName,
+    style: style ?? null,
+    testID: testID,
+    children: items.map((item, index) => /*#__PURE__*/_jsx(View, {
+      role: "listitem",
+      style: divider && index > 0 ? {
+        borderTopWidth: 1,
+        borderTopColor: paint.border
+      } : undefined,
+      children: /*#__PURE__*/_jsx(FileMessage, {
+        variant: "compact",
+        name: item.name,
+        kind: item.kind,
+        mimeType: item.mimeType,
+        sizeBytes: item.sizeBytes,
+        sizeLabel: item.sizeLabel,
+        typeLabel: item.typeLabel,
+        metaLabel: item.metaLabel,
+        progress: item.progress,
+        transfer: item.transfer,
+        onPress: onPressItem ? () => onPressItem(index) : undefined,
+        onDownload: onDownloadItem ? () => onDownloadItem(index) : undefined,
+        onCancel: onCancelItem ? () => onCancelItem(index) : undefined,
+        testID: testID ? `${testID}-row-${index}` : undefined
+      })
+    }, item.id))
+  });
+}
+export const DocumentGrid = /*#__PURE__*/memo(DocumentGridComponent);
+DocumentGrid.displayName = 'DocumentGrid';
+//# sourceMappingURL=DocumentGrid.js.map

package/lib/module/message-media/DocumentGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","useTheme","FileMessage","resolveMessageMediaPaint","jsx","_jsx","DocumentGridComponent","items","onPressItem","onDownloadItem","onCancelItem","divider","accessibilityLabel","style","testID","theme","paint","listName","length","role","children","map","item","index","borderTopWidth","borderTopColor","border","undefined","variant","name","kind","mimeType","sizeBytes","sizeLabel","typeLabel","metaLabel","progress","transfer","onPress","onDownload","onCancel","id","DocumentGrid","displayName"],"sourceRoot":"../../../src","sources":["message-media/DocumentGrid.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,wBAAwB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,qBAAqBA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,cAAc;EACdC,YAAY;EACZC,OAAO,GAAG,IAAI;EACdC,kBAAkB;EAClBC,KAAK;EACLC;AACiB,CAAC,EAAE;EACpB,MAAMC,KAAK,GAAGd,QAAQ,CAAC,CAAC;EACxB,MAAMe,KAAK,GAAGjB,OAAO,CAAC,MAAMI,wBAAwB,CAACY,KAAK,EAAE,UAAU,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEjF,MAAME,QAAQ,GACZL,kBAAkB,IAAI,iBAAiBL,KAAK,CAACW,MAAM,QAAQX,KAAK,CAACW,MAAM,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,EAAE;EAE5F,oBACEb,IAAA,CAACL,IAAI;IAACmB,IAAI,EAAC,MAAM;IAACP,kBAAkB,EAAEK,QAAS;IAACJ,KAAK,EAAEA,KAAK,IAAI,IAAK;IAACC,MAAM,EAAEA,MAAO;IAAAM,QAAA,EAClFb,KAAK,CAACc,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACrBlB,IAAA,CAACL,IAAI;MAEHmB,IAAI,EAAC,UAAU;MACfN,KAAK,EACHF,OAAO,IAAIY,KAAK,GAAG,CAAC,GAChB;QAAEC,cAAc,EAAE,CAAC;QAAEC,cAAc,EAAET,KAAK,CAACU;MAAO,CAAC,GACnDC,SACL;MAAAP,QAAA,eAEDf,IAAA,CAACH,WAAW;QACV0B,OAAO,EAAC,SAAS;QACjBC,IAAI,EAAEP,IAAI,CAACO,IAAK;QAChBC,IAAI,EAAER,IAAI,CAACQ,IAAK;QAChBC,QAAQ,EAAET,IAAI,CAACS,QAAS;QACxBC,SAAS,EAAEV,IAAI,CAACU,SAAU;QAC1BC,SAAS,EAAEX,IAAI,CAACW,SAAU;QAC1BC,SAAS,EAAEZ,IAAI,CAACY,SAAU;QAC1BC,SAAS,EAAEb,IAAI,CAACa,SAAU;QAC1BC,QAAQ,EAAEd,IAAI,CAACc,QAAS;QACxBC,QAAQ,EAAEf,IAAI,CAACe,QAAS;QACxBC,OAAO,EAAE9B,WAAW,GAAG,MAAMA,WAAW,CAACe,KAAK,CAAC,GAAGI,SAAU;QAC5DY,UAAU,EAAE9B,cAAc,GAAG,MAAMA,cAAc,CAACc,KAAK,CAAC,GAAGI,SAAU;QACrEa,QAAQ,EAAE9B,YAAY,GAAG,MAAMA,YAAY,CAACa,KAAK,CAAC,GAAGI,SAAU;QAC/Db,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQS,KAAK,EAAE,GAAGI;MAAU,CACvD;IAAC,GAvBGL,IAAI,CAACmB,EAwBN,CACP;EAAC,CACE,CAAC;AAEX;AAEA,OAAO,MAAMC,YAAY,gBAAG5C,IAAI,CAACQ,qBAAqB,CAAC;AACvDoC,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/message-media/FileMessage.js

@@ -0,0 +1,281 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { formatFileSize } from "../file-upload/shared.js";
+import { RiCheckLine } from "../icons/remix/RiCheckLine.js";
+import { RiDownload2Line } from "../icons/remix/RiDownload2Line.js";
+import { RiFileCodeLine } from "../icons/remix/RiFileCodeLine.js";
+import { RiFileExcel2Line } from "../icons/remix/RiFileExcel2Line.js";
+import { RiFileImageLine } from "../icons/remix/RiFileImageLine.js";
+import { RiFileMusicLine } from "../icons/remix/RiFileMusicLine.js";
+import { RiFilePaper2Line } from "../icons/remix/RiFilePaper2Line.js";
+import { RiFilePdf2Line } from "../icons/remix/RiFilePdf2Line.js";
+import { RiFileTextLine } from "../icons/remix/RiFileTextLine.js";
+import { RiFileWord2Line } from "../icons/remix/RiFileWord2Line.js";
+import { RiFileZipLine } from "../icons/remix/RiFileZipLine.js";
+import { RiVideoLine } from "../icons/remix/RiVideoLine.js";
+import { borderRadius, space } from "../styles/tokens.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MediaFailure, MediaProgressRing, useHovered, useMessageMediaCss } from "./parts.js";
+import { fileKindFor, fileMetaLine, fileTypeLabel, MESSAGE_MEDIA_RADIUS, MESSAGE_MEDIA_WIDTH, resolveFileKindPaint, resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** One glyph per kind. The colour is `resolveFileKindPaint`'s job, not this map's. */
+const KIND_ICONS = {
+  pdf: RiFilePdf2Line,
+  doc: RiFileWord2Line,
+  sheet: RiFileExcel2Line,
+  slides: RiFilePaper2Line,
+  zip: RiFileZipLine,
+  audio: RiFileMusicLine,
+  video: RiVideoLine,
+  image: RiFileImageLine,
+  code: RiFileCodeLine,
+  other: RiFileTextLine
+};
+const DISC_SIZE = {
+  bubble: 44,
+  compact: 36
+};
+
+/**
+ * A file attachment, in a bubble or in the shared-files list.
+ *
+ * THE RING IS THE BUTTON. The download / cancel control and the progress
+ * indicator are one control, not a button beside a bar: the thing you press to
+ * cancel is the thing that is showing you how far it got, and splitting them
+ * gives the row two controls for one transfer.
+ *
+ * `compact` is the same row at 36px with no bubble inset — the Files tab of a
+ * chat's info panel. It is a variant rather than a second component because the
+ * two differ in geometry only, and a second component would grow its own
+ * opinion about the meta line within a week.
+ *
+ * The kind COLOUR survives both tones (see `resolveFileKindPaint`): on the accent
+ * bubble the disc becomes a near-white plate and the hue is darkened onto it,
+ * rather than the colour being dropped because the bubble is already coloured.
+ */
+function FileMessageComponent({
+  name,
+  kind,
+  mimeType,
+  sizeBytes,
+  sizeLabel,
+  typeLabel,
+  metaLabel,
+  progress,
+  transfer = 'idle',
+  onPress,
+  onDownload,
+  onCancel,
+  onRetry,
+  state = 'idle',
+  variant = 'bubble',
+  radius = MESSAGE_MEDIA_RADIUS,
+  width,
+  accessibilityLabel,
+  downloadLabel = 'Download',
+  cancelLabel = 'Cancel',
+  tone = 'incoming',
+  onColor,
+  bubbleColor,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useMessageMediaCss();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor), [theme, tone, onColor, bubbleColor]);
+  const resolvedKind = kind ?? fileKindFor(name, mimeType);
+  const kindPaint = useMemo(() => resolveFileKindPaint(theme, resolvedKind, paint), [theme, resolvedKind, paint]);
+  const [hovered, handlers] = useHovered();
+  const size = sizeLabel ?? (typeof sizeBytes === 'number' ? formatFileSize(sizeBytes) : undefined);
+  const type = typeLabel ?? fileTypeLabel(name, mimeType);
+  const meta = fileMetaLine([size, type, metaLabel]);
+  const disc = DISC_SIZE[variant];
+  const Glyph = KIND_ICONS[resolvedKind];
+  const transferring = transfer === 'downloading' || transfer === 'uploading';
+  const done = transfer === 'done';
+  const rowStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: space.md,
+    minWidth: 0,
+    ...(variant === 'bubble' ? {
+      width: width ?? MESSAGE_MEDIA_WIDTH,
+      paddingTop: space.sm,
+      paddingBottom: space.sm,
+      paddingLeft: space.sm,
+      paddingRight: space.sm,
+      borderRadius: radius,
+      backgroundColor: hovered && onPress ? paint.wash : 'transparent'
+    } : {
+      width: width,
+      paddingTop: space.sm,
+      paddingBottom: space.sm,
+      backgroundColor: hovered && onPress ? paint.wash : 'transparent'
+    }),
+    '--bloom-message-media-ring': paint.ring
+  };
+
+  // The identity half: what the row's own press target covers.
+  const identity = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: disc,
+        height: disc,
+        borderRadius: borderRadius.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: kindPaint.disc
+      },
+      testID: testID ? `${testID}-disc` : undefined,
+      children: /*#__PURE__*/_jsx(Glyph, {
+        width: Math.round(disc * 0.48),
+        height: Math.round(disc * 0.48),
+        fill: kindPaint.glyph
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexGrow: 1,
+        flexShrink: 1,
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        numberOfLines: 1,
+        style: {
+          color: paint.text
+        },
+        children: name
+      }), meta ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-regular",
+        numberOfLines: 1,
+        style: {
+          color: paint.textMuted
+        },
+        testID: testID ? `${testID}-meta` : undefined,
+        children: meta
+      }) : null]
+    })]
+  });
+
+  // The trailing action is a CONTROL of its own — it must not sit inside the
+  // row's press target, or it is a button inside a button (invalid HTML, and
+  // one action announced twice).
+  const trailing = /*#__PURE__*/_jsx(_Fragment, {
+    children: transferring ? /*#__PURE__*/_jsx(MediaProgressRing, {
+      progress: progress,
+      size: 32,
+      color: paint.accent,
+      track: paint.rail,
+      fill: "transparent",
+      glyph: onCancel ? 'cancel' : 'none',
+      onPress: onCancel,
+      accessibilityLabel: onCancel ? cancelLabel : downloadLabel,
+      ring: paint.ring,
+      testID: testID ? `${testID}-progress` : undefined
+    }) : done ? /*#__PURE__*/_jsx(View, {
+      role: "img",
+      accessibilityLabel: "Downloaded",
+      style: {
+        width: 32,
+        height: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: borderRadius.full,
+        backgroundColor: paint.wash
+      },
+      testID: testID ? `${testID}-done` : undefined,
+      children: /*#__PURE__*/_jsx(RiCheckLine, {
+        width: 16,
+        height: 16,
+        fill: paint.textMuted
+      })
+    }) : onDownload ? /*#__PURE__*/_jsx(DownloadButton, {
+      label: downloadLabel,
+      paint: paint,
+      onPress: onDownload,
+      testID: testID
+    }) : null
+  });
+  const rowName = accessibilityLabel ?? fileMetaLine([name, meta]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: style ?? null,
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: rowStyle,
+      ...handlers,
+      testID: testID ? `${testID}-row` : undefined,
+      children: [onPress ? /*#__PURE__*/_jsx(Pressable, {
+        ...webDataSet({
+          bloomMessageMediaPressable: ''
+        }),
+        role: "button",
+        accessibilityLabel: rowName,
+        onPress: onPress,
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: space.md,
+          flexGrow: 1,
+          flexShrink: 1,
+          minWidth: 0
+        },
+        testID: testID ? `${testID}-open` : undefined,
+        children: identity
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: space.md,
+          flexGrow: 1,
+          flexShrink: 1,
+          minWidth: 0
+        },
+        children: identity
+      }), trailing]
+    }), state === 'failed' ? /*#__PURE__*/_jsx(MediaFailure, {
+      paint: paint,
+      onRetry: onRetry,
+      testID: testID ? `${testID}-failed` : undefined
+    }) : null]
+  });
+}
+function DownloadButton({
+  label,
+  paint,
+  onPress,
+  testID
+}) {
+  const [hovered, handlers] = useHovered();
+  const style = {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: borderRadius.full,
+    backgroundColor: hovered ? paint.washStrong : paint.wash,
+    '--bloom-message-media-ring': paint.ring
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webDataSet({
+      bloomMessageMediaPressable: ''
+    }),
+    ...handlers,
+    role: "button",
+    accessibilityLabel: label,
+    onPress: onPress,
+    style: style,
+    testID: testID ? `${testID}-download` : undefined,
+    children: /*#__PURE__*/_jsx(RiDownload2Line, {
+      width: 16,
+      height: 16,
+      fill: paint.text
+    })
+  });
+}
+export const FileMessage = /*#__PURE__*/memo(FileMessageComponent);
+FileMessage.displayName = 'FileMessage';
+//# sourceMappingURL=FileMessage.js.map

package/lib/module/message-media/FileMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Pressable","View","webDataSet","formatFileSize","RiCheckLine","RiDownload2Line","RiFileCodeLine","RiFileExcel2Line","RiFileImageLine","RiFileMusicLine","RiFilePaper2Line","RiFilePdf2Line","RiFileTextLine","RiFileWord2Line","RiFileZipLine","RiVideoLine","borderRadius","space","useTheme","Text","MediaFailure","MediaProgressRing","useHovered","useMessageMediaCss","fileKindFor","fileMetaLine","fileTypeLabel","MESSAGE_MEDIA_RADIUS","MESSAGE_MEDIA_WIDTH","resolveFileKindPaint","resolveMessageMediaPaint","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","KIND_ICONS","pdf","doc","sheet","slides","zip","audio","video","image","code","other","DISC_SIZE","bubble","compact","FileMessageComponent","name","kind","mimeType","sizeBytes","sizeLabel","typeLabel","metaLabel","progress","transfer","onPress","onDownload","onCancel","onRetry","state","variant","radius","width","accessibilityLabel","downloadLabel","cancelLabel","tone","onColor","bubbleColor","style","testID","theme","paint","resolvedKind","kindPaint","hovered","handlers","size","undefined","type","meta","disc","Glyph","transferring","done","rowStyle","flexDirection","alignItems","gap","md","minWidth","paddingTop","sm","paddingBottom","paddingLeft","paddingRight","backgroundColor","wash","ring","identity","children","height","full","justifyContent","Math","round","fill","glyph","flexGrow","flexShrink","numberOfLines","color","text","textMuted","trailing","accent","track","rail","role","DownloadButton","label","rowName","bloomMessageMediaPressable","washStrong","FileMessage","displayName"],"sourceRoot":"../../../src","sources":["message-media/FileMessage.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/message-media/GifMessage.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { RiPlayFill } from "../icons/remix/RiPlayFill.js";
+import { borderRadius } from "../styles/tokens.js";
+import { useTheme } from "../theme/use-theme.js";
+import { MediaFailure, MediaImage, MediaOverlay, MediaPill, MediaPressable, MediaProgressRing } from "./parts.js";
+import { fitMedia, MESSAGE_MEDIA_RADIUS, resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A looping GIF.
+ *
+ * The PILL is not decoration — it is the only thing that tells a reader this
+ * frame moves, which matters when it has not started (or never will: Android's
+ * `Image` decodes an animated GIF as a still unless the app enables the animated
+ * decoders in its Fresco config, so `playing={false}` plus the play glyph is the
+ * honest state there rather than a bug to hide).
+ *
+ * A GIF is capped NARROWER than a photo (220 rather than 260): they are usually
+ * low-resolution and scaling one to the full bubble width makes the artefacts
+ * the subject.
+ */
+function GifMessageComponent({
+  source,
+  sourceVariant,
+  aspectRatio = 1.4,
+  maxWidth = 220,
+  maxHeight = 260,
+  radius = MESSAGE_MEDIA_RADIUS,
+  placeholderColor,
+  badgeLabel = 'GIF',
+  playing = true,
+  onPress,
+  state = 'idle',
+  progress,
+  onRetry,
+  accessibilityLabel = 'GIF',
+  tone = 'incoming',
+  onColor,
+  bubbleColor,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor), [theme, tone, onColor, bubbleColor]);
+  const {
+    width,
+    height
+  } = fitMedia(aspectRatio, maxWidth, maxHeight);
+  const sending = state === 'sending';
+  const frame = {
+    width,
+    height,
+    borderRadius: radius,
+    overflow: 'hidden',
+    position: 'relative'
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width
+    }, style ?? null],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(MediaPressable, {
+      accessibilityLabel: accessibilityLabel,
+      onPress: onPress,
+      ring: paint.ring,
+      style: frame,
+      ariaBusy: sending,
+      testID: testID ? `${testID}-frame` : undefined,
+      children: [/*#__PURE__*/_jsx(MediaImage, {
+        source: source,
+        sourceVariant: sourceVariant,
+        radius: radius,
+        placeholder: placeholderColor ?? paint.placeholder
+      }), !playing && !sending ? /*#__PURE__*/_jsx(MediaOverlay, {
+        scrim: "rgba(0, 0, 0, 0.25)",
+        children: /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          style: {
+            width: 40,
+            height: 40,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: borderRadius.full,
+            backgroundColor: paint.scrim
+          },
+          children: /*#__PURE__*/_jsx(RiPlayFill, {
+            width: 20,
+            height: 20,
+            fill: paint.onScrim
+          })
+        })
+      }) : null, sending ? /*#__PURE__*/_jsx(MediaOverlay, {
+        scrim: paint.scrim,
+        children: /*#__PURE__*/_jsx(MediaProgressRing, {
+          progress: progress,
+          color: paint.onScrim,
+          track: "rgba(255, 255, 255, 0.3)",
+          fill: "rgba(0, 0, 0, 0.35)",
+          glyph: "none",
+          accessibilityLabel: "Sending GIF",
+          ring: paint.ring
+        })
+      }) : null, /*#__PURE__*/_jsx(MediaPill, {
+        label: badgeLabel,
+        paint: paint,
+        position: {
+          left: 8,
+          bottom: 8
+        },
+        testID: testID ? `${testID}-badge` : undefined
+      })]
+    }), state === 'failed' ? /*#__PURE__*/_jsx(MediaFailure, {
+      paint: paint,
+      onRetry: onRetry
+    }) : null]
+  });
+}
+export const GifMessage = /*#__PURE__*/memo(GifMessageComponent);
+GifMessage.displayName = 'GifMessage';
+//# sourceMappingURL=GifMessage.js.map

package/lib/module/message-media/GifMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","RiPlayFill","borderRadius","useTheme","MediaFailure","MediaImage","MediaOverlay","MediaPill","MediaPressable","MediaProgressRing","fitMedia","MESSAGE_MEDIA_RADIUS","resolveMessageMediaPaint","jsx","_jsx","jsxs","_jsxs","GifMessageComponent","source","sourceVariant","aspectRatio","maxWidth","maxHeight","radius","placeholderColor","badgeLabel","playing","onPress","state","progress","onRetry","accessibilityLabel","tone","onColor","bubbleColor","style","testID","theme","paint","width","height","sending","frame","overflow","position","children","ring","ariaBusy","undefined","placeholder","scrim","pointerEvents","alignItems","justifyContent","full","backgroundColor","fill","onScrim","color","track","glyph","label","left","bottom","GifMessage","displayName"],"sourceRoot":"../../../src","sources":["message-media/GifMessage.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/message-media/ImageMessage.js

@@ -0,0 +1,135 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { space } from "../styles/tokens.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MediaFailure, MediaImage, MediaOverlay, MediaPressable, MediaProgressRing, SpoilerCover } from "./parts.js";
+import { fitMedia, MESSAGE_MEDIA_RADIUS, MESSAGE_MEDIA_WIDTH, resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One photo in a bubble.
+ *
+ * THE CORNERS ARE A PROP, NOT A CONSTANT. A photo is usually flush with the
+ * bubble's edge, so the corner it shares with the bubble has to be the BUBBLE's
+ * radius or the two draw two different arcs a pixel apart — which is why
+ * `radius` is here and why `message-bubble`'s `media` slot passes its own.
+ *
+ * `spoiler` is a real cover, not an opacity: see `SpoilerCover` for why the
+ * native one is opaque. Revealing is LOCAL state that latches — once shown, the
+ * photo stays shown, because a spoiler that re-hides on every re-render is a
+ * photo nobody can look at.
+ *
+ * Accessibility: the frame is a `button` NAMED by `accessibilityLabel` (default
+ * "Photo"). Nothing inside it announces — the `Image` is `accessible={false}` —
+ * so the name is the only thing a screen reader has, and a hidden spoiler says
+ * so in its hint rather than by changing the name.
+ */
+function ImageMessageComponent({
+  source,
+  sourceVariant,
+  aspectRatio = 1.4,
+  maxWidth = MESSAGE_MEDIA_WIDTH,
+  maxHeight = 320,
+  radius = MESSAGE_MEDIA_RADIUS,
+  placeholderColor,
+  caption,
+  spoiler = false,
+  spoilerLabel = 'Tap to view',
+  onReveal,
+  state = 'idle',
+  progress,
+  onPress,
+  onCancel,
+  onRetry,
+  accessibilityLabel = 'Photo',
+  tone = 'incoming',
+  onColor,
+  bubbleColor,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor), [theme, tone, onColor, bubbleColor]);
+  const [revealed, setRevealed] = useState(false);
+  const hidden = spoiler && !revealed;
+  const {
+    width,
+    height
+  } = fitMedia(aspectRatio, maxWidth, maxHeight);
+  const handlePress = useCallback(() => {
+    if (hidden) {
+      setRevealed(true);
+      onReveal?.();
+      return;
+    }
+    onPress?.(0);
+  }, [hidden, onPress, onReveal]);
+  const frame = {
+    width,
+    height,
+    borderRadius: radius,
+    overflow: 'hidden',
+    position: 'relative'
+  };
+  const sending = state === 'sending';
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width
+    }, style ?? null],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(MediaPressable, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: hidden ? spoilerLabel : undefined,
+      onPress: onPress || hidden ? handlePress : undefined,
+      ring: paint.ring,
+      style: frame,
+      ariaBusy: sending,
+      testID: testID ? `${testID}-frame` : undefined,
+      children: [/*#__PURE__*/_jsx(MediaImage, {
+        source: source,
+        sourceVariant: sourceVariant,
+        radius: radius,
+        placeholder: placeholderColor ?? paint.placeholder,
+        testID: testID ? `${testID}-image` : undefined
+      }), hidden ? /*#__PURE__*/_jsx(SpoilerCover, {
+        label: spoilerLabel,
+        paint: paint,
+        radius: radius,
+        testID: testID ? `${testID}-spoiler` : undefined
+      }) : null, sending ? /*#__PURE__*/_jsx(MediaOverlay, {
+        scrim: paint.scrim,
+        children: /*#__PURE__*/_jsx(MediaProgressRing, {
+          progress: progress,
+          color: paint.onScrim,
+          track: "rgba(255, 255, 255, 0.3)",
+          fill: "rgba(0, 0, 0, 0.35)",
+          glyph: onCancel ? 'cancel' : 'none',
+          onPress: onCancel,
+          accessibilityLabel: onCancel ? 'Cancel' : 'Sending photo',
+          ring: paint.ring,
+          testID: testID ? `${testID}-progress` : undefined
+        })
+      }) : null]
+    }), caption ? /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingTop: space.sm
+      },
+      children: typeof caption === 'string' ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-regular",
+        style: {
+          color: paint.text
+        },
+        children: caption
+      }) : caption
+    }) : null, state === 'failed' ? /*#__PURE__*/_jsx(MediaFailure, {
+      paint: paint,
+      onRetry: onRetry,
+      testID: testID ? `${testID}-failed` : undefined
+    }) : null]
+  });
+}
+export const ImageMessage = /*#__PURE__*/memo(ImageMessageComponent);
+ImageMessage.displayName = 'ImageMessage';
+//# sourceMappingURL=ImageMessage.js.map

package/lib/module/message-media/ImageMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","useState","View","space","useTheme","Text","MediaFailure","MediaImage","MediaOverlay","MediaPressable","MediaProgressRing","SpoilerCover","fitMedia","MESSAGE_MEDIA_RADIUS","MESSAGE_MEDIA_WIDTH","resolveMessageMediaPaint","jsx","_jsx","jsxs","_jsxs","ImageMessageComponent","source","sourceVariant","aspectRatio","maxWidth","maxHeight","radius","placeholderColor","caption","spoiler","spoilerLabel","onReveal","state","progress","onPress","onCancel","onRetry","accessibilityLabel","tone","onColor","bubbleColor","style","testID","theme","paint","revealed","setRevealed","hidden","width","height","handlePress","frame","borderRadius","overflow","position","sending","children","accessibilityHint","undefined","ring","ariaBusy","placeholder","label","scrim","color","onScrim","track","fill","glyph","paddingTop","sm","variant","text","ImageMessage","displayName"],"sourceRoot":"../../../src","sources":["message-media/ImageMessage.tsx"],"mappings":"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","ignoreList":[]}