@ethora/chat-component-rn 26.10.4 → 26.10.6

package/lib/module/components/VideoCalls/usePipTile.js

@@ -0,0 +1,228 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, PanResponder } from 'react-native';
+
+/**
+ * The small video tile of a call, Telegram-style: drag it anywhere and it
+ * snaps to the nearest corner when released (a flick carries it towards
+ * the flick), pinch it to switch between a small and a large size.
+ *
+ * Positions are kept per corner rather than per pixel, so the tile stays
+ * glued to its corner when the stage changes size (rotation, iPad split
+ * view) or the tile itself changes size.
+ */
+
+export const PIP_TILE_SIZES = {
+  small: {
+    width: 104,
+    height: 148
+  },
+  large: {
+    width: 156,
+    height: 222
+  }
+};
+const MARGIN = 12;
+// How far a flick carries the tile before picking a corner, in ms of velocity.
+const FLICK_PROJECTION_MS = 160;
+// Pinch past these ratios to change size; in between keeps the current one.
+const GROW_RATIO = 1.12;
+const SHRINK_RATIO = 0.9;
+const SPRING = {
+  useNativeDriver: false,
+  damping: 20,
+  stiffness: 220,
+  mass: 0.8
+};
+const touchDistance = touches => {
+  const [a, b] = touches;
+  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+};
+export const usePipTile = ({
+  topInset = 0
+} = {}) => {
+  const [stage, setStage] = useState(null);
+  const [size, setSize] = useState('small');
+  const stageRef = useRef(null);
+  const sizeRef = useRef('small');
+  const cornerRef = useRef({
+    right: true,
+    bottom: false
+  });
+  const topInsetRef = useRef(topInset);
+  topInsetRef.current = topInset;
+  const position = useRef(new Animated.ValueXY({
+    x: 0,
+    y: 0
+  })).current;
+  const width = useRef(new Animated.Value(PIP_TILE_SIZES.small.width)).current;
+  const height = useRef(new Animated.Value(PIP_TILE_SIZES.small.height)).current;
+  const pinchScale = useRef(new Animated.Value(1)).current;
+  // Where the tile rests, i.e. where a drag starts from.
+  const restRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const gestureRef = useRef({
+    pinching: false,
+    startDistance: 0,
+    scale: 1
+  });
+  const cornerPoint = useCallback((corner, tileSize) => {
+    const area = stageRef.current;
+    if (!area) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    const tile = PIP_TILE_SIZES[tileSize];
+    const top = MARGIN + topInsetRef.current;
+    return {
+      x: corner.right ? Math.max(MARGIN, area.width - tile.width - MARGIN) : MARGIN,
+      y: corner.bottom ? Math.max(top, area.height - tile.height - MARGIN) : top
+    };
+  }, []);
+  const settle = useCallback(animated => {
+    const tileSize = sizeRef.current;
+    const target = cornerPoint(cornerRef.current, tileSize);
+    const tile = PIP_TILE_SIZES[tileSize];
+    restRef.current = target;
+    if (!animated) {
+      position.setValue(target);
+      width.setValue(tile.width);
+      height.setValue(tile.height);
+      pinchScale.setValue(1);
+      return;
+    }
+    Animated.parallel([Animated.spring(position, {
+      ...SPRING,
+      toValue: target
+    }), Animated.spring(width, {
+      ...SPRING,
+      toValue: tile.width
+    }), Animated.spring(height, {
+      ...SPRING,
+      toValue: tile.height
+    }), Animated.spring(pinchScale, {
+      ...SPRING,
+      toValue: 1
+    })]).start();
+  }, [cornerPoint, position, width, height, pinchScale]);
+  const onStageLayout = useCallback(event => {
+    const {
+      width: w,
+      height: h
+    } = event.nativeEvent.layout;
+    const prev = stageRef.current;
+    if (prev && prev.width === w && prev.height === h) {
+      return;
+    }
+    stageRef.current = {
+      width: w,
+      height: h
+    };
+    setStage(stageRef.current);
+    settle(false);
+  }, [settle]);
+
+  // The safe-area inset arrives after the first layout on some devices.
+  useEffect(() => {
+    if (stageRef.current) {
+      settle(false);
+    }
+  }, [topInset, settle]);
+  const panHandlers = useMemo(() => PanResponder.create({
+    // Two fingers are always ours (pinch); one finger only once it
+    // moves, so a tap still reaches the tile's onPress (swap videos).
+    onStartShouldSetPanResponderCapture: event => event.nativeEvent.touches.length >= 2,
+    // Own the touch from the start when the tile has no tap target
+    // (nothing to swap): an ancestor outside the call Modal would take
+    // it otherwise, and the move-capture below would never be asked.
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: (event, gesture) => event.nativeEvent.touches.length >= 2 || Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4,
+    // Never hand the tile over to the swipe-to-minimize of the screen.
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: () => {
+      position.stopAnimation();
+      width.stopAnimation();
+      height.stopAnimation();
+      pinchScale.stopAnimation();
+      gestureRef.current = {
+        pinching: false,
+        startDistance: 0,
+        scale: 1
+      };
+    },
+    onPanResponderMove: (event, gesture) => {
+      const touches = event.nativeEvent.touches;
+      const state = gestureRef.current;
+      if (touches.length >= 2) {
+        const distance = touchDistance(touches);
+        if (!state.pinching || state.startDistance <= 0) {
+          state.pinching = true;
+          state.startDistance = distance;
+        } else {
+          state.scale = Math.min(1.8, Math.max(0.6, distance / state.startDistance));
+          pinchScale.setValue(state.scale);
+        }
+      }
+      position.setValue({
+        x: restRef.current.x + gesture.dx,
+        y: restRef.current.y + gesture.dy
+      });
+    },
+    onPanResponderRelease: (_event, gesture) => {
+      const area = stageRef.current;
+      const state = gestureRef.current;
+      if (state.pinching) {
+        const next = state.scale >= GROW_RATIO ? 'large' : state.scale <= SHRINK_RATIO ? 'small' : sizeRef.current;
+        if (next !== sizeRef.current) {
+          // Keep the size the finger left it at, then let the spring
+          // carry it to the new one, so the tile doesn't jump.
+          const from = PIP_TILE_SIZES[sizeRef.current];
+          width.setValue(from.width * state.scale);
+          height.setValue(from.height * state.scale);
+          pinchScale.setValue(1);
+          sizeRef.current = next;
+          setSize(next);
+        }
+      }
+      if (area) {
+        const tile = PIP_TILE_SIZES[sizeRef.current];
+        const centerX = restRef.current.x + gesture.dx + gesture.vx * FLICK_PROJECTION_MS + tile.width / 2;
+        const centerY = restRef.current.y + gesture.dy + gesture.vy * FLICK_PROJECTION_MS + tile.height / 2;
+        cornerRef.current = {
+          right: centerX > area.width / 2,
+          bottom: centerY > area.height / 2
+        };
+      }
+      settle(true);
+    },
+    onPanResponderTerminate: () => settle(true)
+  }).panHandlers, [position, width, height, pinchScale, settle]);
+  return {
+    /** Put on the area the tile moves within. */
+    onStageLayout,
+    panHandlers,
+    size,
+    /** Hidden until the stage is measured, so it never flashes at 0,0. */
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width,
+      height,
+      opacity: stage ? 1 : 0,
+      transform: [{
+        translateX: position.x
+      }, {
+        translateY: position.y
+      }, {
+        scale: pinchScale
+      }]
+    }
+  };
+};
+//# sourceMappingURL=usePipTile.js.map

package/lib/module/components/VideoCalls/usePipTile.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","Animated","PanResponder","PIP_TILE_SIZES","small","width","height","large","MARGIN","FLICK_PROJECTION_MS","GROW_RATIO","SHRINK_RATIO","SPRING","useNativeDriver","damping","stiffness","mass","touchDistance","touches","a","b","Math","hypot","pageX","pageY","usePipTile","topInset","stage","setStage","size","setSize","stageRef","sizeRef","cornerRef","right","bottom","topInsetRef","current","position","ValueXY","x","y","Value","pinchScale","restRef","gestureRef","pinching","startDistance","scale","cornerPoint","corner","tileSize","area","tile","top","max","settle","animated","target","setValue","parallel","spring","toValue","start","onStageLayout","event","w","h","nativeEvent","layout","prev","panHandlers","create","onStartShouldSetPanResponderCapture","length","onStartShouldSetPanResponder","onMoveShouldSetPanResponderCapture","gesture","abs","dx","dy","onPanResponderTerminationRequest","onPanResponderGrant","stopAnimation","onPanResponderMove","state","distance","min","onPanResponderRelease","_event","next","from","centerX","vx","centerY","vy","onPanResponderTerminate","style","left","opacity","transform","translateX","translateY"],"sourceRoot":"../../../../src","sources":["components/VideoCalls/usePipTile.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/styled/MediaFilePreview.js

@@ -1,11 +1,12 @@
 "use strict";
 
-import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView, ScrollView } from 'react-native';
 import { MediaContainer, MediaImage } from './StyledInputComponents/StyledInputComponents';
 import { FileIcon } from '../../assets/icons';
 import { RemoveButton, RemoveButtonText } from './StyledComponents';
 import { useState } from 'react';
 import { useVideoPlayer, VideoView } from 'expo-video';
+import { useT } from '../../i18n/useT';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VideoThumb = ({
   uri,
@@ -53,53 +54,65 @@ export const MediaFilePreview = ({
   handleRemoveImage
 }) => {
   const [previewUri, setPreviewUri] = useState(null);
-  return /*#__PURE__*/_jsxs(MediaContainer, {
-    children: [filePreviews.map((file, index) => {
-      const isImage = file.type?.startsWith('image');
-      const isVideo = file.type?.startsWith('video');
-      return /*#__PURE__*/_jsxs(View, {
-        children: [isImage ? /*#__PURE__*/_jsx(MediaImage, {
-          source: {
-            uri: file.uri
-          }
-        }) : isVideo ? /*#__PURE__*/_jsx(VideoThumb, {
-          uri: file.uri,
-          onPress: () => setPreviewUri(file.uri)
-        }) : /*#__PURE__*/_jsx(View, {
-          style: {
-            width: 70,
-            height: 70,
-            borderRadius: 8
-          },
-          children: /*#__PURE__*/_jsx(FileIcon, {
-            width: 70,
-            height: 70
-          })
-        }), /*#__PURE__*/_jsx(RemoveButton, {
-          onPress: () => handleRemoveImage(index),
-          children: /*#__PURE__*/_jsx(RemoveButtonText, {
-            children: "\xD7"
-          })
-        })]
-      }, `${file.name}_${index}`);
-    }), /*#__PURE__*/_jsx(Modal, {
-      visible: !!previewUri,
-      animationType: "fade",
-      transparent: true,
-      children: /*#__PURE__*/_jsxs(SafeAreaView, {
-        style: styles.modalContainer,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.closeButton,
-          onPress: () => setPreviewUri(null),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.closeText,
-            children: "\u2715"
-          })
-        }), previewUri && /*#__PURE__*/_jsx(FullscreenPreviewVideo, {
-          uri: previewUri
-        })]
-      })
-    })]
+  const t = useT();
+
+  // The tray holds up to ten files, so it scrolls sideways rather than wrap.
+  return /*#__PURE__*/_jsx(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    keyboardShouldPersistTaps: "handled",
+    testID: "media-tray",
+    children: /*#__PURE__*/_jsxs(MediaContainer, {
+      children: [filePreviews.map((file, index) => {
+        const isImage = file.type?.startsWith('image');
+        const isVideo = file.type?.startsWith('video');
+        return /*#__PURE__*/_jsxs(View, {
+          children: [isImage ? /*#__PURE__*/_jsx(MediaImage, {
+            source: {
+              uri: file.uri
+            }
+          }) : isVideo ? /*#__PURE__*/_jsx(VideoThumb, {
+            uri: file.uri,
+            onPress: () => setPreviewUri(file.uri)
+          }) : /*#__PURE__*/_jsx(View, {
+            style: {
+              width: 70,
+              height: 70,
+              borderRadius: 8
+            },
+            children: /*#__PURE__*/_jsx(FileIcon, {
+              width: 70,
+              height: 70
+            })
+          }), /*#__PURE__*/_jsx(RemoveButton, {
+            testID: `media-tray-remove-${index}`,
+            accessibilityRole: "button",
+            accessibilityLabel: t('attachment.remove'),
+            onPress: () => handleRemoveImage(index),
+            children: /*#__PURE__*/_jsx(RemoveButtonText, {
+              children: "\xD7"
+            })
+          })]
+        }, `${file.name}_${index}`);
+      }), /*#__PURE__*/_jsx(Modal, {
+        visible: !!previewUri,
+        animationType: "fade",
+        transparent: true,
+        children: /*#__PURE__*/_jsxs(SafeAreaView, {
+          style: styles.modalContainer,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.closeButton,
+            onPress: () => setPreviewUri(null),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.closeText,
+              children: "\u2715"
+            })
+          }), previewUri && /*#__PURE__*/_jsx(FullscreenPreviewVideo, {
+            uri: previewUri
+          })]
+        })
+      })]
+    })
   });
 };
 const styles = StyleSheet.create({

package/lib/module/components/styled/MediaFilePreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Text","StyleSheet","Modal","TouchableOpacity","SafeAreaView","MediaContainer","MediaImage","FileIcon","RemoveButton","RemoveButtonText","useState","useVideoPlayer","VideoView","jsx","_jsx","jsxs","_jsxs","VideoThumb","uri","onPress","player","p","muted","activeOpacity","style","styles","videoThumb","children","absoluteFill","contentFit","nativeControls","surfaceType","pointerEvents","playOverlay","playIcon","FullscreenPreviewVideo","play","fullVideo","MediaFilePreview","filePreviews","handleRemoveImage","previewUri","setPreviewUri","map","file","index","isImage","type","startsWith","isVideo","source","width","height","borderRadius","name","visible","animationType","transparent","modalContainer","closeButton","closeText","create","overflow","backgroundColor","justifyContent","alignItems","fontSize","color","flex","position","top","right","zIndex","fontWeight"],"sourceRoot":"../../../../src","sources":["components/styled/MediaFilePreview.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,cAAc;AAC5F,SACEC,cAAc,EACdC,UAAU,QACL,+CAA+C;AACtD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,YAAY,EAAEC,gBAAgB,QAAQ,oBAAoB;AACnE,SAAaC,QAAQ,QAAQ,OAAO;AAEpC,SAASC,cAAc,EAAEC,SAAS,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOvD,MAAMC,UAAoD,GAAGA,CAAC;EAC5DC,GAAG;EACHC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGT,cAAc,CAACO,GAAG,EAAGG,CAAC,IAAK;IACxCA,CAAC,CAACC,KAAK,GAAG,IAAI;EAChB,CAAC,CAAC;EACF,oBACEN,KAAA,CAACb,gBAAgB;IACfoB,aAAa,EAAE,GAAI;IACnBJ,OAAO,EAAEA,OAAQ;IACjBK,KAAK,EAAEC,MAAM,CAACC,UAAW;IAAAC,QAAA,gBAEzBb,IAAA,CAACF,SAAS;MACRQ,MAAM,EAAEA,MAAO;MACfI,KAAK,EAAEvB,UAAU,CAAC2B,YAAa;MAC/BC,UAAU,EAAC,OAAO;MAClBC,cAAc,EAAE,KAAM;MACtBC,WAAW,EAAC,aAAa;MACzBC,aAAa,EAAC;IAAM,CACrB,CAAC,eACFlB,IAAA,CAACf,IAAI;MAACyB,KAAK,EAAEC,MAAM,CAACQ,WAAY;MAAAN,QAAA,eAC9Bb,IAAA,CAACd,IAAI;QAACwB,KAAK,EAAEC,MAAM,CAACS,QAAS;QAAAP,QAAA,EAAC;MAAC,CAAM;IAAC,CAClC,CAAC;EAAA,CACS,CAAC;AAEvB,CAAC;AAED,MAAMQ,sBAA2C,GAAGA,CAAC;EAAEjB;AAAI,CAAC,KAAK;EAC/D,MAAME,MAAM,GAAGT,cAAc,CAACO,GAAG,EAAGG,CAAC,IAAK;IACxCA,CAAC,CAACe,IAAI,CAAC,CAAC;EACV,CAAC,CAAC;EACF,oBACEtB,IAAA,CAACF,SAAS;IACRQ,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAEC,MAAM,CAACY,SAAU;IACxBR,UAAU,EAAC,SAAS;IACpBC,cAAc;IACdC,WAAW,EAAC;EAAa,CAC1B,CAAC;AAEN,CAAC;AAED,OAAO,MAAMO,gBAA2C,GAAGA,CAAC;EAC1DC,YAAY;EACZC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGhC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,oBACEM,KAAA,CAACX,cAAc;IAAAsB,QAAA,GACZY,YAAY,CAACI,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;MACjC,MAAMC,OAAO,GAAGF,IAAI,CAACG,IAAI,EAAEC,UAAU,CAAC,OAAO,CAAC;MAC9C,MAAMC,OAAO,GAAGL,IAAI,CAACG,IAAI,EAAEC,UAAU,CAAC,OAAO,CAAC;MAC9C,oBACEhC,KAAA,CAACjB,IAAI;QAAA4B,QAAA,GACFmB,OAAO,gBACNhC,IAAA,CAACR,UAAU;UAAC4C,MAAM,EAAE;YAAEhC,GAAG,EAAE0B,IAAI,CAAC1B;UAAI;QAAE,CAAE,CAAC,GACvC+B,OAAO,gBACTnC,IAAA,CAACG,UAAU;UAACC,GAAG,EAAE0B,IAAI,CAAC1B,GAAI;UAACC,OAAO,EAAEA,CAAA,KAAMuB,aAAa,CAACE,IAAI,CAAC1B,GAAG;QAAE,CAAE,CAAC,gBAErEJ,IAAA,CAACf,IAAI;UAACyB,KAAK,EAAE;YAAE2B,KAAK,EAAE,EAAE;YAAEC,MAAM,EAAE,EAAE;YAAEC,YAAY,EAAE;UAAE,CAAE;UAAA1B,QAAA,eACtDb,IAAA,CAACP,QAAQ;YAAC4C,KAAK,EAAE,EAAG;YAACC,MAAM,EAAE;UAAG,CAAE;QAAC,CAC/B,CACP,eACDtC,IAAA,CAACN,YAAY;UAACW,OAAO,EAAEA,CAAA,KAAMqB,iBAAiB,CAACK,KAAK,CAAE;UAAAlB,QAAA,eACpDb,IAAA,CAACL,gBAAgB;YAAAkB,QAAA,EAAC;UAAO,CAAkB;QAAC,CAChC,CAAC;MAAA,GAZN,GAAGiB,IAAI,CAACU,IAAI,IAAIT,KAAK,EAa1B,CAAC;IAEX,CAAC,CAAC,eAEF/B,IAAA,CAACZ,KAAK;MAACqD,OAAO,EAAE,CAAC,CAACd,UAAW;MAACe,aAAa,EAAC,MAAM;MAACC,WAAW;MAAA9B,QAAA,eAC5DX,KAAA,CAACZ,YAAY;QAACoB,KAAK,EAAEC,MAAM,CAACiC,cAAe;QAAA/B,QAAA,gBACzCb,IAAA,CAACX,gBAAgB;UACfqB,KAAK,EAAEC,MAAM,CAACkC,WAAY;UAC1BxC,OAAO,EAAEA,CAAA,KAAMuB,aAAa,CAAC,IAAI,CAAE;UAAAf,QAAA,eAEnCb,IAAA,CAACd,IAAI;YAACwB,KAAK,EAAEC,MAAM,CAACmC,SAAU;YAAAjC,QAAA,EAAC;UAAC,CAAM;QAAC,CACvB,CAAC,EAClBc,UAAU,iBAAI3B,IAAA,CAACqB,sBAAsB;UAACjB,GAAG,EAAEuB;QAAW,CAAE,CAAC;MAAA,CAC9C;IAAC,CACV,CAAC;EAAA,CACM,CAAC;AAErB,CAAC;AAED,MAAMhB,MAAM,GAAGxB,UAAU,CAAC4D,MAAM,CAAC;EAC/BnC,UAAU,EAAE;IACVyB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,CAAC;IACfS,QAAQ,EAAE,QAAQ;IAClBC,eAAe,EAAE;EACnB,CAAC;EACD9B,WAAW,EAAE;IACX,GAAGhC,UAAU,CAAC2B,YAAY;IAC1BoC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBF,eAAe,EAAE;EACnB,CAAC;EACD7B,QAAQ,EAAE;IACRgC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAE;EACT,CAAC;EACDT,cAAc,EAAE;IACdU,IAAI,EAAE,CAAC;IACPL,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE;EAClB,CAAC;EACDL,WAAW,EAAE;IACXU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,EAAE;IACPC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVrB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,EAAE;IAChBU,eAAe,EAAE,uBAAuB;IACxCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDL,SAAS,EAAE;IACTM,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAE,MAAM;IACbM,UAAU,EAAE;EACd,CAAC;EACDpC,SAAS,EAAE;IACTc,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["View","Text","StyleSheet","Modal","TouchableOpacity","SafeAreaView","ScrollView","MediaContainer","MediaImage","FileIcon","RemoveButton","RemoveButtonText","useState","useVideoPlayer","VideoView","useT","jsx","_jsx","jsxs","_jsxs","VideoThumb","uri","onPress","player","p","muted","activeOpacity","style","styles","videoThumb","children","absoluteFill","contentFit","nativeControls","surfaceType","pointerEvents","playOverlay","playIcon","FullscreenPreviewVideo","play","fullVideo","MediaFilePreview","filePreviews","handleRemoveImage","previewUri","setPreviewUri","t","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","testID","map","file","index","isImage","type","startsWith","isVideo","source","width","height","borderRadius","accessibilityRole","accessibilityLabel","name","visible","animationType","transparent","modalContainer","closeButton","closeText","create","overflow","backgroundColor","justifyContent","alignItems","fontSize","color","flex","position","top","right","zIndex","fontWeight"],"sourceRoot":"../../../../src","sources":["components/styled/MediaFilePreview.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/styled/MessageImage.js

@@ -18,7 +18,9 @@ const CustomMessageImage = ({
   fileName,
   originalName,
   mimetype,
-  locationPreview
+  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
@@ -27,10 +29,11 @@ const CustomMessageImage = ({
   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(defaultMediaDims());
+  const [measured, setDims] = useState(defaultMediaDims());
+  const dims = tile ?? measured;
   const dispatch = useDispatch();
   useEffect(() => {
-    if (!displayURL) {
+    if (!displayURL || tile) {
       return;
     }
     let active = true;
@@ -50,8 +53,12 @@ const CustomMessageImage = ({
     return () => {
       active = false;
     };
-  }, [displayURL]);
+  }, [displayURL, tile]);
   const handleOpen = () => {
+    if (onOpen) {
+      onOpen();
+      return;
+    }
     dispatch(setActiveFile({
       fileName,
       fileURL,
@@ -61,7 +68,10 @@ const CustomMessageImage = ({
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
   return /*#__PURE__*/_jsx(Container, {
-    style: {
+    style: tile ? {
+      width: dims.width,
+      borderRadius: 0
+    } : {
       width: dims.width
     },
     children: /*#__PURE__*/_jsxs(TouchableOpacity, {
@@ -87,7 +97,7 @@ const CustomMessageImage = ({
         style: {
           width: dims.width,
           height: dims.height,
-          borderRadius: 10,
+          borderRadius: tile ? 0 : 10,
           backgroundColor: 'rgba(0, 0, 0, 0)'
         },
         onLoadEnd: () => setLoading(false),

package/lib/module/components/styled/MessageImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","isSecureFileUrl","requestFileTokenRecovery","pushLog","Container","useDispatch","setActiveFile","setActiveModal","MODAL_TYPES","ActivityIndicator","Image","TouchableOpacity","View","defaultMediaDims","fitMediaDimensions","jsx","_jsx","jsxs","_jsxs","maskToken","url","replace","FALLBACK_IMAGE","CustomMessageImage","fileURL","fileName","originalName","mimetype","locationPreview","displayURL","loading","setLoading","dims","setDims","dispatch","active","getSize","w","h","error","message","String","handleOpen","FILE_PREVIEW","style","width","children","onPress","activeOpacity","position","height","alignItems","justifyContent","zIndex","size","color","source","uri","borderRadius","backgroundColor","onLoadEnd","onError","event","usingPreview","nativeEvent","resizeMode"],"sourceRoot":"../../../../src","sources":["components/styled/MessageImage.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","isSecureFileUrl","requestFileTokenRecovery","pushLog","Container","useDispatch","setActiveFile","setActiveModal","MODAL_TYPES","ActivityIndicator","Image","TouchableOpacity","View","defaultMediaDims","fitMediaDimensions","jsx","_jsx","jsxs","_jsxs","maskToken","url","replace","FALLBACK_IMAGE","CustomMessageImage","fileURL","fileName","originalName","mimetype","locationPreview","tile","onOpen","displayURL","loading","setLoading","measured","setDims","dims","dispatch","active","getSize","w","h","error","message","String","handleOpen","FILE_PREVIEW","style","width","borderRadius","children","onPress","activeOpacity","position","height","alignItems","justifyContent","zIndex","size","color","source","uri","backgroundColor","onLoadEnd","onError","event","usingPreview","nativeEvent","resizeMode"],"sourceRoot":"../../../../src","sources":["components/styled/MessageImage.tsx"],"mappings":"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","ignoreList":[]}