@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/mediaViewer/MediaViewerChrome.js

@@ -0,0 +1,164 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import dayjs from 'dayjs';
+import { Touchable } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useChatContext } from '../../ChatContext';
+import { TIME_FORMAT } from '../../Constant';
+import { useLabels } from '../../hooks/useLabels';
+import { formatLabel } from '../../i18n';
+import { Icon } from '../Icon';
+import { CloseIcon } from '../MediaControls';
+/**
+ * The viewer's bars, as in Telegram's: a close button and "3 of 12" on top; the caption, the
+ * sender and when it was sent at the bottom, over a shade so they read on any photo.
+ */
+export function MediaViewerChrome(t0) {
+  const $ = _c(24);
+  const {
+    message,
+    index,
+    count,
+    onClose
+  } = t0;
+  const insets = useSafeAreaInsets();
+  const labels = useLabels();
+  const {
+    getLocale
+  } = useChatContext();
+  let t1;
+  if ($[0] !== getLocale || $[1] !== labels || $[2] !== message) {
+    const sentAt = message?.createdAt != null ? dayjs(message.createdAt).locale(getLocale()) : undefined;
+    t1 = sentAt ? formatLabel(labels.mediaViewerDate, {
+      date: sentAt.format(sentAt.isSame(dayjs(), "year") ? "D MMM" : "D MMM YYYY"),
+      time: sentAt.format(TIME_FORMAT)
+    }) : undefined;
+    $[0] = getLocale;
+    $[1] = labels;
+    $[2] = message;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const date = t1;
+  let t2;
+  if ($[4] !== insets.top) {
+    t2 = [styles.top, {
+      paddingTop: insets.top
+    }];
+    $[4] = insets.top;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <View style={styles.close}><Icon name="close" color="#FFFFFF" size={24} fallback={<CloseIcon color="#FFFFFF" size={24} />} /></View>;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== onClose) {
+    t4 = <Touchable onPress={onClose} accessibilityRole="button" accessibilityLabel="Close">{t3}</Touchable>;
+    $[7] = onClose;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== count || $[10] !== index || $[11] !== labels) {
+    t5 = count > 1 && <Text style={styles.counter} accessibilityRole="header">{formatLabel(labels.mediaViewerCounter, {
+        index: index + 1,
+        count
+      })}</Text>;
+    $[9] = count;
+    $[10] = index;
+    $[11] = labels;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== t2 || $[14] !== t4 || $[15] !== t5) {
+    t6 = <View style={t2} pointerEvents="box-none">{t4}{t5}</View>;
+    $[13] = t2;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== date || $[18] !== insets.bottom || $[19] !== message) {
+    t7 = !!message && <View style={[styles.bottom, {
+      paddingBottom: insets.bottom + 12
+    }]} pointerEvents="none">{!!message.text && <Text style={styles.caption} numberOfLines={4}>{message.text}</Text>}{!!message.user?.name && <Text style={styles.name} numberOfLines={1}>{message.user.name}</Text>}{!!date && <Text style={styles.date}>{date}</Text>}</View>;
+    $[17] = date;
+    $[18] = insets.bottom;
+    $[19] = message;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  let t8;
+  if ($[21] !== t6 || $[22] !== t7) {
+    t8 = <>{t6}{t7}</>;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  return t8;
+}
+const styles = StyleSheet.create({
+  top: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)'
+  },
+  close: {
+    width: 56,
+    height: 56,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  counter: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '500',
+    marginStart: 6
+  },
+  bottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingTop: 12,
+    paddingHorizontal: 16,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)'
+  },
+  caption: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    lineHeight: 21,
+    marginBottom: 10
+  },
+  name: {
+    color: '#FFFFFF',
+    fontSize: 15,
+    fontWeight: '500'
+  },
+  date: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: 13,
+    marginTop: 2
+  }
+});
+//# sourceMappingURL=MediaViewerChrome.js.map

package/lib/components/mediaViewer/MediaViewerChrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewerChrome.js","names":["React","StyleSheet","Text","View","dayjs","Touchable","useSafeAreaInsets","useChatContext","TIME_FORMAT","useLabels","formatLabel","Icon","CloseIcon","MediaViewerChrome","t0","$","_c","message","index","count","onClose","insets","labels","getLocale","t1","sentAt","createdAt","locale","undefined","mediaViewerDate","date","format","isSame","time","t2","top","styles","paddingTop","t3","Symbol","for","close","t4","t5","counter","mediaViewerCounter","t6","t7","bottom","paddingBottom","text","caption","user","name","t8","create","position","left","right","flexDirection","alignItems","backgroundColor","width","height","justifyContent","color","fontSize","fontWeight","marginStart","paddingHorizontal","lineHeight","marginBottom","marginTop"],"sources":["../../../src/components/mediaViewer/MediaViewerChrome.tsx"],"sourcesContent":["import React from 'react'\nimport { StyleSheet, Text, View } from 'react-native'\nimport dayjs from 'dayjs'\nimport { Touchable } from 'react-native-gesture-handler'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nimport { useChatContext } from '../../ChatContext'\nimport { TIME_FORMAT } from '../../Constant'\nimport { useLabels } from '../../hooks/useLabels'\nimport { formatLabel } from '../../i18n'\nimport { IMessage } from '../../Models'\nimport { Icon } from '../Icon'\nimport { CloseIcon } from '../MediaControls'\n\nexport interface MediaViewerChromeProps {\n  message: IMessage | undefined\n  index: number\n  count: number\n  onClose: () => void\n}\n\n/**\n * The viewer's bars, as in Telegram's: a close button and \"3 of 12\" on top; the caption, the\n * sender and when it was sent at the bottom, over a shade so they read on any photo.\n */\nexport function MediaViewerChrome ({ message, index, count, onClose }: MediaViewerChromeProps) {\n  const insets = useSafeAreaInsets()\n  const labels = useLabels()\n  const { getLocale } = useChatContext()\n\n  const sentAt = message?.createdAt != null ? dayjs(message.createdAt).locale(getLocale()) : undefined\n  const date = sentAt\n    ? formatLabel(labels.mediaViewerDate, {\n      date: sentAt.format(sentAt.isSame(dayjs(), 'year') ? 'D MMM' : 'D MMM YYYY'),\n      time: sentAt.format(TIME_FORMAT),\n    })\n    : undefined\n\n  return (\n    <>\n      <View style={[styles.top, { paddingTop: insets.top }]} pointerEvents='box-none'>\n        <Touchable onPress={onClose} accessibilityRole='button' accessibilityLabel='Close'>\n          <View style={styles.close}>\n            <Icon name='close' color='#FFFFFF' size={24} fallback={<CloseIcon color='#FFFFFF' size={24} />} />\n          </View>\n        </Touchable>\n        {count > 1 && (\n          <Text style={styles.counter} accessibilityRole='header'>\n            {formatLabel(labels.mediaViewerCounter, { index: index + 1, count })}\n          </Text>\n        )}\n      </View>\n      {!!message && (\n        <View style={[styles.bottom, { paddingBottom: insets.bottom + 12 }]} pointerEvents='none'>\n          {!!message.text && <Text style={styles.caption} numberOfLines={4}>{message.text}</Text>}\n          {!!message.user?.name && <Text style={styles.name} numberOfLines={1}>{message.user.name}</Text>}\n          {!!date && <Text style={styles.date}>{date}</Text>}\n        </View>\n      )}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  top: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    flexDirection: 'row',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)',\n  },\n  close: {\n    width: 56,\n    height: 56,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  counter: {\n    color: '#FFFFFF',\n    fontSize: 18,\n    fontWeight: '500',\n    marginStart: 6,\n  },\n  bottom: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    paddingTop: 12,\n    paddingHorizontal: 16,\n    backgroundColor: 'rgba(0, 0, 0, 0.3)',\n  },\n  caption: {\n    color: '#FFFFFF',\n    fontSize: 16,\n    lineHeight: 21,\n    marginBottom: 10,\n  },\n  name: {\n    color: '#FFFFFF',\n    fontSize: 15,\n    fontWeight: '500',\n  },\n  date: {\n    color: 'rgba(255, 255, 255, 0.7)',\n    fontSize: 13,\n    marginTop: 2,\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/mediaViewer/MediaViewerHost.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MediaGallery } from './gallery';
+/**
+ * The chat's one media viewer. Nothing is mounted until a photo is opened; then the photos are
+ * read once, so messages arriving while it is open do not shift the page under the finger.
+ */
+export declare function MediaViewerHost({ gallery }: {
+    gallery: MediaGallery;
+}): React.JSX.Element | null;
+//# sourceMappingURL=MediaViewerHost.d.ts.map

package/lib/components/mediaViewer/MediaViewerHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewerHost.d.ts","sourceRoot":"","sources":["../../../src/components/mediaViewer/MediaViewerHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAkB,MAAM,WAAW,CAAA;AAGxD;;;GAGG;AACH,wBAAgB,eAAe,CAAE,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4BAqBtE"}

package/lib/components/mediaViewer/MediaViewerHost.js

@@ -0,0 +1,76 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useMemo } from 'react';
+import { useOpenMediaId } from './gallery';
+import { MediaViewer } from './MediaViewer';
+
+/**
+ * The chat's one media viewer. Nothing is mounted until a photo is opened; then the photos are
+ * read once, so messages arriving while it is open do not shift the page under the finger.
+ */
+export function MediaViewerHost(t0) {
+  const $ = _c(14);
+  const {
+    gallery
+  } = t0;
+  const openId = useOpenMediaId(gallery);
+  let t1;
+  bb0: {
+    if (openId == null) {
+      t1 = null;
+      break bb0;
+    }
+    let items;
+    let t2;
+    if ($[0] !== gallery || $[1] !== openId) {
+      items = gallery.getItems();
+      let t3;
+      if ($[4] !== openId) {
+        t3 = item => item._id === openId;
+        $[4] = openId;
+        $[5] = t3;
+      } else {
+        t3 = $[5];
+      }
+      t2 = items.findIndex(t3);
+      $[0] = gallery;
+      $[1] = openId;
+      $[2] = items;
+      $[3] = t2;
+    } else {
+      items = $[2];
+      t2 = $[3];
+    }
+    const index = t2;
+    let t3;
+    if ($[6] !== index || $[7] !== items) {
+      t3 = index < 0 ? null : {
+        items,
+        index
+      };
+      $[6] = index;
+      $[7] = items;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    t1 = t3;
+  }
+  const gallerySnapshot = t1;
+  if (!gallerySnapshot) {
+    return null;
+  }
+  const t2 = String(openId);
+  let t3;
+  if ($[9] !== gallery.close || $[10] !== gallerySnapshot.index || $[11] !== gallerySnapshot.items || $[12] !== t2) {
+    t3 = <MediaViewer key={t2} items={gallerySnapshot.items} initialIndex={gallerySnapshot.index} onClose={gallery.close} />;
+    $[9] = gallery.close;
+    $[10] = gallerySnapshot.index;
+    $[11] = gallerySnapshot.items;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return t3;
+}
+//# sourceMappingURL=MediaViewerHost.js.map

package/lib/components/mediaViewer/MediaViewerHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewerHost.js","names":["React","useMemo","useOpenMediaId","MediaViewer","MediaViewerHost","t0","$","_c","gallery","openId","t1","bb0","items","t2","getItems","t3","item","_id","findIndex","index","gallerySnapshot","String","close"],"sources":["../../../src/components/mediaViewer/MediaViewerHost.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\n\nimport { MediaGallery, useOpenMediaId } from './gallery'\nimport { MediaViewer } from './MediaViewer'\n\n/**\n * The chat's one media viewer. Nothing is mounted until a photo is opened; then the photos are\n * read once, so messages arriving while it is open do not shift the page under the finger.\n */\nexport function MediaViewerHost ({ gallery }: { gallery: MediaGallery }) {\n  const openId = useOpenMediaId(gallery)\n  const gallerySnapshot = useMemo(() => {\n    if (openId == null)\n      return null\n    const items = gallery.getItems()\n    const index = items.findIndex(item => item._id === openId)\n    return index < 0 ? null : { items, index }\n  }, [gallery, openId])\n\n  if (!gallerySnapshot)\n    return null\n\n  return (\n    <MediaViewer\n      key={String(openId)}\n      items={gallerySnapshot.items}\n      initialIndex={gallerySnapshot.index}\n      onClose={gallery.close}\n    />\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAAuBC,cAAc,QAAQ,WAAW;AACxD,SAASC,WAAW,QAAQ,eAAe;;AAE3C;AACA;AACA;AACA;AACA,OAAO,SAAAC,gBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAA0B;IAAAC;EAAA,IAAAH,EAAsC;EACrE,MAAAI,MAAA,GAAeP,cAAc,CAACM,OAAO,CAAC;EAAA,IAAAE,EAAA;EAAAC,GAAA;IAEpC,IAAIF,MAAM,IAAI,IAAI;MAChBC,EAAA,GAAO,IAAI;MAAX,MAAAC,GAAA;IAAW;IAAA,IAAAC,KAAA;IAAA,IAAAC,EAAA;IAAA,IAAAP,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,MAAA;MACbG,KAAA,GAAcJ,OAAO,CAAAM,QAAS,CAAC,CAAC;MAAA,IAAAC,EAAA;MAAA,IAAAT,CAAA,QAAAG,MAAA;QACFM,EAAA,GAAAC,IAAA,IAAQA,IAAI,CAAAC,GAAI,KAAKR,MAAM;QAAAH,CAAA,MAAAG,MAAA;QAAAH,CAAA,MAAAS,EAAA;MAAA;QAAAA,EAAA,GAAAT,CAAA;MAAA;MAA3CO,EAAA,GAAAD,KAAK,CAAAM,SAAU,CAACH,EAA2B,CAAC;MAAAT,CAAA,MAAAE,OAAA;MAAAF,CAAA,MAAAG,MAAA;MAAAH,CAAA,MAAAM,KAAA;MAAAN,CAAA,MAAAO,EAAA;IAAA;MAAAD,KAAA,GAAAN,CAAA;MAAAO,EAAA,GAAAP,CAAA;IAAA;IAA1D,MAAAa,KAAA,GAAcN,EAA4C;IAAA,IAAAE,EAAA;IAAA,IAAAT,CAAA,QAAAa,KAAA,IAAAb,CAAA,QAAAM,KAAA;MACnDG,EAAA,GAAAI,KAAK,GAAG,CAA2B,GAAnC,IAAmC,GAAnC;QAAAP,KAAA;QAAAO;MAAkC,CAAC;MAAAb,CAAA,MAAAa,KAAA;MAAAb,CAAA,MAAAM,KAAA;MAAAN,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IAA1CI,EAAA,GAAOK,EAAmC;EAAA;EAL5C,MAAAK,eAAA,GAAwBV,EAMH;EAErB,IAAI,CAACU,eAAe;IAAA,OACX,IAAI;EAAA;EAIJ,MAAAP,EAAA,GAAAQ,MAAM,CAACZ,MAAM,CAAC;EAAA,IAAAM,EAAA;EAAA,IAAAT,CAAA,QAAAE,OAAA,CAAAc,KAAA,IAAAhB,CAAA,SAAAc,eAAA,CAAAD,KAAA,IAAAb,CAAA,SAAAc,eAAA,CAAAR,KAAA,IAAAN,CAAA,SAAAO,EAAA;IADrBE,EAAA,IAAC,WAAW,CACL,GAAc,CAAd,CAAAF,EAAa,CAAC,CACZ,KAAqB,CAArB,CAAAO,eAAe,CAAAR,KAAK,CAAC,CACd,YAAqB,CAArB,CAAAQ,eAAe,CAAAD,KAAK,CAAC,CAC1B,OAAa,CAAb,CAAAX,OAAO,CAAAc,KAAK,CAAC,GACtB;IAAAhB,CAAA,MAAAE,OAAA,CAAAc,KAAA;IAAAhB,CAAA,OAAAc,eAAA,CAAAD,KAAA;IAAAb,CAAA,OAAAc,eAAA,CAAAR,KAAA;IAAAN,CAAA,OAAAO,EAAA;IAAAP,CAAA,OAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAA,OALFS,EAKE;AAAA","ignoreList":[]}

package/lib/components/mediaViewer/MediaViewerPage.d.ts

@@ -0,0 +1,25 @@
+import React, { RefObject } from 'react';
+import { ImageProps } from 'react-native';
+import { IMessage } from '../../Models';
+export interface MediaViewerPageProps {
+    message: IMessage;
+    index: number;
+    width: number;
+    height: number;
+    /** The page's full width, gap included: what the pager scrolls by. */
+    pageWidth: number;
+    listRef: RefObject<{
+        scrollToOffset: (params: {
+            offset: number;
+            animated?: boolean;
+        }) => void;
+    } | null>;
+    imageProps?: Partial<ImageProps>;
+    onZoomStateChange: (index: number, isZoomed: boolean) => void;
+}
+/**
+ * One photo in the viewer, fitted to the screen and zoomable. Panned to its edge while zoomed,
+ * it hands the swipe on to the pager, as Telegram's viewer does.
+ */
+export declare function MediaViewerPage({ message, index, width, height, pageWidth, listRef, imageProps, onZoomStateChange }: MediaViewerPageProps): React.JSX.Element;
+//# sourceMappingURL=MediaViewerPage.d.ts.map

package/lib/components/mediaViewer/MediaViewerPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewerPage.d.ts","sourceRoot":"","sources":["../../../src/components/mediaViewer/MediaViewerPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAS,UAAU,EAAoB,MAAM,cAAc,CAAA;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAwBvC,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,QAAQ,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,SAAS,CAAC;QAAE,cAAc,EAAE,CAAC,MAAM,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;SAAE,KAAK,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC,CAAA;IACvG,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAC9D;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAAE,oBAAoB,qBAuB1I"}

package/lib/components/mediaViewer/MediaViewerPage.js

@@ -0,0 +1,194 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useEffect, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import Zoom from 'react-native-zoom-reanimated';
+// Sizes are read once per photo for the life of the app: paging back to a photo must not wait
+// on another round trip before it can lay out.
+const sizes = new Map();
+function useImageSize(uri) {
+  const $ = _c(8);
+  let t0;
+  if ($[0] !== uri) {
+    t0 = () => uri ? sizes.get(uri) : undefined;
+    $[0] = uri;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const [size, setSize] = useState(t0);
+  let t1;
+  let t2;
+  if ($[2] !== uri) {
+    t1 = () => {
+      if (!uri || sizes.has(uri)) {
+        return;
+      }
+      let isCurrent = true;
+      Image.getSize(uri, (width, height) => {
+        sizes.set(uri, {
+          width,
+          height
+        });
+        if (isCurrent) {
+          setSize({
+            width,
+            height
+          });
+        }
+      }, _temp);
+      return () => {
+        isCurrent = false;
+      };
+    };
+    t2 = [uri];
+    $[2] = uri;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== size || $[6] !== uri) {
+    t3 = uri ? size ?? sizes.get(uri) : undefined;
+    $[5] = size;
+    $[6] = uri;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+function _temp() {}
+/**
+ * One photo in the viewer, fitted to the screen and zoomable. Panned to its edge while zoomed,
+ * it hands the swipe on to the pager, as Telegram's viewer does.
+ */
+export function MediaViewerPage(t0) {
+  const $ = _c(31);
+  const {
+    message,
+    index,
+    width,
+    height,
+    pageWidth,
+    listRef,
+    imageProps,
+    onZoomStateChange
+  } = t0;
+  const uri = message.image;
+  const size = useImageSize(uri);
+  const scale = size ? Math.min(width / size.width, height / size.height) : 1;
+  let t1;
+  if ($[0] !== height || $[1] !== scale || $[2] !== size || $[3] !== width) {
+    t1 = size ? {
+      width: size.width * scale,
+      height: size.height * scale
+    } : {
+      width,
+      height
+    };
+    $[0] = height;
+    $[1] = scale;
+    $[2] = size;
+    $[3] = width;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const imageStyle = t1;
+  let t2;
+  if ($[5] !== pageWidth) {
+    t2 = [styles.page, {
+      width: pageWidth
+    }];
+    $[5] = pageWidth;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== height || $[8] !== width) {
+    t3 = [styles.center, {
+      width,
+      height
+    }];
+    $[7] = height;
+    $[8] = width;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== index || $[11] !== onZoomStateChange) {
+    t4 = isZoomed => onZoomStateChange(index, isZoomed);
+    $[10] = index;
+    $[11] = onZoomStateChange;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== uri) {
+    t5 = {
+      uri
+    };
+    $[13] = uri;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== imageProps || $[16] !== imageStyle || $[17] !== t5) {
+    t6 = <Image source={t5} style={imageStyle} resizeMode="contain" {...imageProps} />;
+    $[15] = imageProps;
+    $[16] = imageStyle;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  let t7;
+  if ($[19] !== index || $[20] !== listRef || $[21] !== pageWidth || $[22] !== t4 || $[23] !== t6) {
+    t7 = <Zoom enableGallerySwipe={true} parentScrollRef={listRef} currentIndex={index} itemWidth={pageWidth} onZoomStateChange={t4}>{t6}</Zoom>;
+    $[19] = index;
+    $[20] = listRef;
+    $[21] = pageWidth;
+    $[22] = t4;
+    $[23] = t6;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== t3 || $[26] !== t7) {
+    t8 = <View style={t3}>{t7}</View>;
+    $[25] = t3;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t8 = $[27];
+  }
+  let t9;
+  if ($[28] !== t2 || $[29] !== t8) {
+    t9 = <View style={t2}>{t8}</View>;
+    $[28] = t2;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  return t9;
+}
+const styles = StyleSheet.create({
+  page: {
+    alignItems: 'flex-start',
+    justifyContent: 'center'
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=MediaViewerPage.js.map

package/lib/components/mediaViewer/MediaViewerPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewerPage.js","names":["React","useEffect","useState","Image","StyleSheet","View","Zoom","sizes","Map","useImageSize","uri","$","_c","t0","get","undefined","size","setSize","t1","t2","has","isCurrent","getSize","width","height","set","_temp","t3","MediaViewerPage","message","index","pageWidth","listRef","imageProps","onZoomStateChange","image","scale","Math","min","imageStyle","styles","page","center","t4","isZoomed","t5","t6","t7","t8","t9","create","alignItems","justifyContent"],"sources":["../../../src/components/mediaViewer/MediaViewerPage.tsx"],"sourcesContent":["import React, { RefObject, useEffect, useState } from 'react'\nimport { Image, ImageProps, StyleSheet, View } from 'react-native'\nimport Zoom from 'react-native-zoom-reanimated'\n\nimport { IMessage } from '../../Models'\n\n// Sizes are read once per photo for the life of the app: paging back to a photo must not wait\n// on another round trip before it can lay out.\nconst sizes = new Map<string, { width: number, height: number }>()\n\nfunction useImageSize (uri: string | undefined) {\n  const [size, setSize] = useState(() => (uri ? sizes.get(uri) : undefined))\n  useEffect(() => {\n    if (!uri || sizes.has(uri))\n      return\n    let isCurrent = true\n    Image.getSize(uri, (width, height) => {\n      sizes.set(uri, { width, height })\n      if (isCurrent)\n        setSize({ width, height })\n    }, () => {})\n    return () => {\n      isCurrent = false\n    }\n  }, [uri])\n  return uri ? size ?? sizes.get(uri) : undefined\n}\n\nexport interface MediaViewerPageProps {\n  message: IMessage\n  index: number\n  width: number\n  height: number\n  /** The page's full width, gap included: what the pager scrolls by. */\n  pageWidth: number\n  listRef: RefObject<{ scrollToOffset: (params: { offset: number, animated?: boolean }) => void } | null>\n  imageProps?: Partial<ImageProps>\n  onZoomStateChange: (index: number, isZoomed: boolean) => void\n}\n\n/**\n * One photo in the viewer, fitted to the screen and zoomable. Panned to its edge while zoomed,\n * it hands the swipe on to the pager, as Telegram's viewer does.\n */\nexport function MediaViewerPage ({ message, index, width, height, pageWidth, listRef, imageProps, onZoomStateChange }: MediaViewerPageProps) {\n  const uri = message.image\n  const size = useImageSize(uri)\n  const scale = size ? Math.min(width / size.width, height / size.height) : 1\n  const imageStyle = size\n    ? { width: size.width * scale, height: size.height * scale }\n    : { width, height }\n\n  return (\n    <View style={[styles.page, { width: pageWidth }]}>\n      <View style={[styles.center, { width, height }]}>\n        <Zoom\n          enableGallerySwipe\n          parentScrollRef={listRef}\n          currentIndex={index}\n          itemWidth={pageWidth}\n          onZoomStateChange={isZoomed => onZoomStateChange(index, isZoomed)}\n        >\n          <Image source={{ uri }} style={imageStyle} resizeMode='contain' {...imageProps} />\n        </Zoom>\n      </View>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  page: {\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n  },\n  center: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/mediaViewer/gallery.d.ts

@@ -0,0 +1,27 @@
+import { IMessage } from '../../Models';
+import { Store } from '../../store';
+/**
+ * The chat's photos, for the media viewer: tapping a photo opens the viewer on it, and the
+ * viewer pages through every photo in the conversation, oldest first, as Telegram's does
+ * (swiping left reaches newer photos, the counter reads "3 of 12" from the oldest).
+ */
+export interface MediaGallery {
+    /** The message whose photo is open, or null while the viewer is closed. */
+    openId: Store<IMessage['_id'] | null>;
+    open: (messageId: IMessage['_id']) => void;
+    close: () => void;
+    /** The photo messages, oldest first, read when the viewer opens. */
+    getItems: () => IMessage[];
+    /** The chat's messages as `Chat` holds them, newest first; set after each render. */
+    setMessages: (messages: readonly IMessage[]) => void;
+}
+/**
+ * The messages are only read when the viewer opens, so the gallery never re-renders anything
+ * as messages arrive.
+ */
+export declare function createMediaGallery(): MediaGallery;
+export declare const MediaGalleryContext: import("react").Context<MediaGallery | null>;
+export declare const useMediaGallery: () => MediaGallery | null;
+/** The message whose photo is open; re-renders only when the viewer opens or closes. */
+export declare const useOpenMediaId: (gallery: MediaGallery | null) => string | number | null;
+//# sourceMappingURL=gallery.d.ts.map

package/lib/components/mediaViewer/gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../../../src/components/mediaViewer/gallery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAe,KAAK,EAAY,MAAM,aAAa,CAAA;AAE1D;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,2EAA2E;IAC3E,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAA;IACrC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAA;IAC1C,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,oEAAoE;IACpE,QAAQ,EAAE,MAAM,QAAQ,EAAE,CAAA;IAC1B,qFAAqF;IACrF,WAAW,EAAE,CAAC,QAAQ,EAAE,SAAS,QAAQ,EAAE,KAAK,IAAI,CAAA;CACrD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAK,YAAY,CAkBlD;AAED,eAAO,MAAM,mBAAmB,8CAA2C,CAAA;AAE3E,eAAO,MAAM,eAAe,2BAAwC,CAAA;AAIpE,wFAAwF;AACxF,eAAO,MAAM,cAAc,GAAI,SAAS,YAAY,GAAG,IAAI,2BAA8C,CAAA"}

package/lib/components/mediaViewer/gallery.js

@@ -0,0 +1,41 @@
+import { createContext, useContext } from 'react';
+import { createStore, useStore } from '../../store';
+
+/**
+ * The chat's photos, for the media viewer: tapping a photo opens the viewer on it, and the
+ * viewer pages through every photo in the conversation, oldest first, as Telegram's does
+ * (swiping left reaches newer photos, the counter reads "3 of 12" from the oldest).
+ */
+
+/**
+ * The messages are only read when the viewer opens, so the gallery never re-renders anything
+ * as messages arrive.
+ */
+export function createMediaGallery() {
+  const openId = createStore(null);
+  let messages = [];
+  return {
+    setMessages: next => {
+      messages = next;
+    },
+    openId,
+    open: messageId => openId.set(messageId),
+    close: () => openId.set(null),
+    getItems: () => {
+      const items = [];
+      for (let i = messages.length - 1; i >= 0; i--) if (messages[i].image) items.push(messages[i]);
+      return items;
+    }
+  };
+}
+export const MediaGalleryContext = createContext(null);
+export const useMediaGallery = () => {
+  return useContext(MediaGalleryContext);
+};
+const openIdOf = id => id;
+
+/** The message whose photo is open; re-renders only when the viewer opens or closes. */
+export const useOpenMediaId = gallery => {
+  return useStore(gallery?.openId, openIdOf, null);
+};
+//# sourceMappingURL=gallery.js.map

package/lib/components/mediaViewer/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":["createContext","useContext","createStore","useStore","createMediaGallery","openId","messages","setMessages","next","open","messageId","set","close","getItems","items","i","length","image","push","MediaGalleryContext","useMediaGallery","openIdOf","id","useOpenMediaId","gallery"],"sources":["../../../src/components/mediaViewer/gallery.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { IMessage } from '../../Models'\nimport { createStore, Store, useStore } from '../../store'\n\n/**\n * The chat's photos, for the media viewer: tapping a photo opens the viewer on it, and the\n * viewer pages through every photo in the conversation, oldest first, as Telegram's does\n * (swiping left reaches newer photos, the counter reads \"3 of 12\" from the oldest).\n */\nexport interface MediaGallery {\n  /** The message whose photo is open, or null while the viewer is closed. */\n  openId: Store<IMessage['_id'] | null>\n  open: (messageId: IMessage['_id']) => void\n  close: () => void\n  /** The photo messages, oldest first, read when the viewer opens. */\n  getItems: () => IMessage[]\n  /** The chat's messages as `Chat` holds them, newest first; set after each render. */\n  setMessages: (messages: readonly IMessage[]) => void\n}\n\n/**\n * The messages are only read when the viewer opens, so the gallery never re-renders anything\n * as messages arrive.\n */\nexport function createMediaGallery (): MediaGallery {\n  const openId = createStore<IMessage['_id'] | null>(null)\n  let messages: readonly IMessage[] = []\n  return {\n    setMessages: next => {\n      messages = next\n    },\n    openId,\n    open: messageId => openId.set(messageId),\n    close: () => openId.set(null),\n    getItems: () => {\n      const items: IMessage[] = []\n      for (let i = messages.length - 1; i >= 0; i--)\n        if (messages[i].image)\n          items.push(messages[i])\n      return items\n    },\n  }\n}\n\nexport const MediaGalleryContext = createContext<MediaGallery | null>(null)\n\nexport const useMediaGallery = () => useContext(MediaGalleryContext)\n\nconst openIdOf = (id: IMessage['_id'] | null) => id\n\n/** The message whose photo is open; re-renders only when the viewer opens or closes. */\nexport const useOpenMediaId = (gallery: MediaGallery | null) => useStore(gallery?.openId, openIdOf, null)\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAGjD,SAASC,WAAW,EAASC,QAAQ,QAAQ,aAAa;;AAE1D;AACA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAA,EAAkB;EAClD,MAAMC,MAAM,GAAGH,WAAW,CAAyB,IAAI,CAAC;EACxD,IAAII,QAA6B,GAAG,EAAE;EACtC,OAAO;IACLC,WAAW,EAAEC,IAAI,IAAI;MACnBF,QAAQ,GAAGE,IAAI;IACjB,CAAC;IACDH,MAAM;IACNI,IAAI,EAAEC,SAAS,IAAIL,MAAM,CAACM,GAAG,CAACD,SAAS,CAAC;IACxCE,KAAK,EAAEA,CAAA,KAAMP,MAAM,CAACM,GAAG,CAAC,IAAI,CAAC;IAC7BE,QAAQ,EAAEA,CAAA,KAAM;MACd,MAAMC,KAAiB,GAAG,EAAE;MAC5B,KAAK,IAAIC,CAAC,GAAGT,QAAQ,CAACU,MAAM,GAAG,CAAC,EAAED,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAC3C,IAAIT,QAAQ,CAACS,CAAC,CAAC,CAACE,KAAK,EACnBH,KAAK,CAACI,IAAI,CAACZ,QAAQ,CAACS,CAAC,CAAC,CAAC;MAC3B,OAAOD,KAAK;IACd;EACF,CAAC;AACH;AAEA,OAAO,MAAMK,mBAAmB,GAAGnB,aAAa,CAAsB,IAAI,CAAC;AAE3E,OAAO,MAAMoB,eAAe,GAAGA,CAAA;EAAA,OAAMnB,UAAU,CAACkB,mBAAmB,CAAC;AAAA;AAEpE,MAAME,QAAQ,GAAIC,EAA0B,IAAKA,EAAE;;AAEnD;AACA,OAAO,MAAMC,cAAc,GAAGC,OAAA;EAAA,OAAkCrB,QAAQ,CAACqB,OAAO,EAAAnB,MAAQ,EAAEgB,QAAQ,EAAE,IAAI,CAAC;AAAA","ignoreList":[]}

package/lib/components/messageHighlight.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { KeyedStore } from '../store';
+/**
+ * Which message is flashing, the highlight after jumping to a quoted message. Each row reads
+ * its own token, so a flash wakes the row it lands on and the one it leaves.
+ */
+export interface MessageHighlightStore {
+    subscribe: (listener: () => void) => () => void;
+    /** The flash count for this message, 0 when it is not flashing. */
+    getToken: (messageId: string | number) => number;
+    highlight: (messageId: string | number) => void;
+    dispose: () => void;
+    /** @internal The flash token by message id, read by each row. */
+    tokens: KeyedStore<string | number, number>;
+}
+export declare function createMessageHighlightStore(): MessageHighlightStore;
+export declare const MessageHighlightContext: React.Context<MessageHighlightStore | null>;
+/** The flash count for this message (0 when it is not flashing, or outside a `Chat`). */
+export declare function useMessageHighlightToken(messageId: string | number | undefined): number;
+/**
+ * The band across the whole row behind a highlighted message. It shows at once and
+ * fades out. Mounted only while its message is flashing, so the rest of the list carries no
+ * shared value for it. `Message` passes `colors.selectionBackground`, which carries its own
+ * alpha, at `opacity` 1; the default draws a plain accent at 0x28 alpha.
+ */
+export declare const HighlightOverlay: ({ token, color, opacity }: {
+    token: number;
+    color: string;
+    opacity?: number;
+}) => React.JSX.Element;
+/**
+ * The bubble's own part of the flash: it swaps to its selected color for as long as
+ * the row band shows.
+ */
+export declare const BubbleHighlightTint: ({ token, color, cornerStyle }: {
+    token: number;
+    color: string;
+    cornerStyle: StyleProp<ViewStyle>;
+}) => React.JSX.Element;
+//# sourceMappingURL=messageHighlight.d.ts.map

package/lib/components/messageHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageHighlight.d.ts","sourceRoot":"","sources":["../../src/components/messageHighlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAAE,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AAS/D,OAAO,EAAoB,UAAU,EAAiB,MAAM,UAAU,CAAA;AAEtE;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAC/C,mEAAmE;IACnE,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAA;IAChD,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iEAAiE;IACjE,MAAM,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAA;CAC5C;AAKD,wBAAgB,2BAA2B,IAAK,qBAAqB,CAwBpE;AAED,eAAO,MAAM,uBAAuB,6CAAoD,CAAA;AAExF,yFAAyF;AACzF,wBAAgB,wBAAwB,CAAE,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAGxF;AAuBD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,2BAA+C;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,sBAUjI,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,+BAA+B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,sBAUrI,CAAA"}