stream-chat-react-native-core 4.11.1-beta.2 → 4.12.0-beta.1

package/lib/module/components/ImageGallery/components/ImageGalleryVideoControl.js

@@ -11,23 +11,21 @@ var _reactNative = require("react-native");
 
 var _dayjs = _interopRequireDefault(require("dayjs"));
 
-var _ProgressControl = require("./ProgressControl");
-
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 
 var _icons = require("../../../icons");
 
+var _ProgressControl = require("../../ProgressControl/ProgressControl");
+
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   durationTextStyle: {
-    color: '#fff',
     fontWeight: 'bold'
   },
   roundedView: {
     alignItems: 'center',
-    backgroundColor: '#fff',
     borderRadius: 50,
     display: 'flex',
     elevation: 2,
@@ -56,7 +54,11 @@ var ImageGalleryVideoControl = _react["default"].memo(function (props) {
   var progressDuration = progressValueInSeconds ? progressValueInSeconds / 3600 >= 1 ? _dayjs["default"].duration(progressValueInSeconds, 'second').format('HH:mm:ss') : _dayjs["default"].duration(progressValueInSeconds, 'second').format('mm:ss') : null;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
-      _useTheme$theme$image = _useTheme.theme.imageGallery.videoControl,
+      _useTheme$theme = _useTheme.theme,
+      _useTheme$theme$color = _useTheme$theme.colors,
+      black = _useTheme$theme$color.black,
+      white_snow = _useTheme$theme$color.white_snow,
+      _useTheme$theme$image = _useTheme$theme.imageGallery.videoControl,
       durationTextStyle = _useTheme$theme$image.durationTextStyle,
       roundedView = _useTheme$theme$image.roundedView,
       videoContainer = _useTheme$theme$image.videoContainer;
@@ -66,69 +68,85 @@ var ImageGalleryVideoControl = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 64,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.TouchableOpacity, {
-    onPress: onPlayPause,
+    accessibilityLabel: "Play Pause Button",
+    onPress: function onPress() {
+      onPlayPause();
+    },
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 66,
+      lineNumber: 65,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNative.View, {
-    style: [styles.roundedView, roundedView],
+    style: [styles.roundedView, roundedView, {
+      backgroundColor: white_snow
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 71,
       columnNumber: 11
     }
   }, paused ? _react["default"].createElement(_icons.Play, {
+    accessibilityLabel: "Play Icon",
     height: 24,
-    pathFill: '#000',
+    pathFill: black,
     width: 24,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 73,
       columnNumber: 15
     }
   }) : _react["default"].createElement(_icons.Pause, {
+    accessibilityLabel: "Pause Icon",
     height: 24,
     width: 24,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 71,
+      lineNumber: 75,
       columnNumber: 15
     }
   }))), _react["default"].createElement(_reactNative.Text, {
-    style: [styles.durationTextStyle, durationTextStyle],
+    accessibilityLabel: "Progress Duration",
+    style: [styles.durationTextStyle, durationTextStyle, {
+      color: white_snow
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 79,
       columnNumber: 9
     }
   }, progressDuration ? progressDuration : '00:00'), _react["default"].createElement(_ProgressControl.ProgressControl, {
     duration: duration,
+    filledColor: white_snow,
     onPlayPause: onPlayPause,
     onProgressDrag: onProgressDrag,
     progress: progress,
+    testID: 'progress-control',
+    width: 180,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 78,
+      lineNumber: 85,
       columnNumber: 9
     }
   }), _react["default"].createElement(_reactNative.Text, {
-    style: [styles.durationTextStyle, durationTextStyle],
+    accessibilityLabel: "Video Duration",
+    style: [styles.durationTextStyle, durationTextStyle, {
+      color: white_snow
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 84,
+      lineNumber: 94,
       columnNumber: 9
     }
   }, videoDuration ? videoDuration : '00:00'));

package/lib/module/components/ImageGallery/components/ImageGalleryVideoControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageGalleryVideoControl.tsx"],"names":["styles","StyleSheet","create","durationTextStyle","color","fontWeight","roundedView","alignItems","backgroundColor","borderRadius","display","elevation","height","justifyContent","width","videoContainer","flexDirection","padding","ImageGalleryVideoControl","React","memo","props","duration","onPlayPause","onProgressDrag","paused","progress","videoDuration","dayjs","format","progressValueInSeconds","progressDuration","theme","imageGallery","videoControl","prevProps","nextProps","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport dayjs from 'dayjs';\n\nimport type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';\nimport { ProgressControl } from './ProgressControl';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { Pause, Play } from '../../../icons';\n\nconst styles = StyleSheet.create({\n  durationTextStyle: {\n    color: '#fff',\n    fontWeight: 'bold',\n  },\n  roundedView: {\n    alignItems: 'center',\n    backgroundColor: '#fff',\n    borderRadius: 50,\n    display: 'flex',\n    elevation: 2,\n    height: 36,\n    justifyContent: 'center',\n    width: 36,\n  },\n  videoContainer: {\n    alignItems: 'center',\n    backgroundColor: 'rgba(52, 52, 52, 0.1)',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n  },\n});\n\nexport const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(\n  (props) => {\n    const { duration, onPlayPause, onProgressDrag, paused, progress } = props;\n\n    const videoDuration = duration\n      ? duration / 3600 >= 1\n        ? dayjs.duration(duration, 'second').format('HH:mm:ss')\n        : dayjs.duration(duration, 'second').format('mm:ss')\n      : null;\n\n    const progressValueInSeconds = progress * duration;\n\n    const progressDuration = progressValueInSeconds\n      ? progressValueInSeconds / 3600 >= 1\n        ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')\n        : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')\n      : null;\n\n    const {\n      theme: {\n        imageGallery: {\n          videoControl: { durationTextStyle, roundedView, videoContainer },\n        },\n      },\n    } = useTheme();\n\n    return (\n      <View style={[styles.videoContainer, videoContainer]}>\n        <TouchableOpacity onPress={onPlayPause}>\n          <View style={[styles.roundedView, roundedView]}>\n            {paused ? (\n              <Play height={24} pathFill={'#000'} width={24} />\n            ) : (\n              <Pause height={24} width={24} />\n            )}\n          </View>\n        </TouchableOpacity>\n        <Text style={[styles.durationTextStyle, durationTextStyle]}>\n          {progressDuration ? progressDuration : '00:00'}\n        </Text>\n        <ProgressControl\n          duration={duration}\n          onPlayPause={onPlayPause}\n          onProgressDrag={onProgressDrag}\n          progress={progress}\n        />\n        <Text style={[styles.durationTextStyle, durationTextStyle]}>\n          {videoDuration ? videoDuration : '00:00'}\n        </Text>\n      </View>\n    );\n  },\n  (prevProps, nextProps) => {\n    if (\n      prevProps.duration === nextProps.duration &&\n      prevProps.paused === nextProps.paused &&\n      prevProps.progress === nextProps.progress\n    ) {\n      return true;\n    } else {\n      return false;\n    }\n  },\n);\n\nImageGalleryVideoControl.displayName = 'ImageGalleryVideoControl{imageGallery{videoControl}}';\n"]}
+{"version":3,"sources":["ImageGalleryVideoControl.tsx"],"names":["styles","StyleSheet","create","durationTextStyle","fontWeight","roundedView","alignItems","borderRadius","display","elevation","height","justifyContent","width","videoContainer","backgroundColor","flexDirection","padding","ImageGalleryVideoControl","React","memo","props","duration","onPlayPause","onProgressDrag","paused","progress","videoDuration","dayjs","format","progressValueInSeconds","progressDuration","theme","colors","black","white_snow","imageGallery","videoControl","color","prevProps","nextProps","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport dayjs from 'dayjs';\n\nimport type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { Pause, Play } from '../../../icons';\nimport { ProgressControl } from '../../ProgressControl/ProgressControl';\n\nconst styles = StyleSheet.create({\n  durationTextStyle: {\n    fontWeight: 'bold',\n  },\n  roundedView: {\n    alignItems: 'center',\n    borderRadius: 50,\n    display: 'flex',\n    elevation: 2,\n    height: 36,\n    justifyContent: 'center',\n    width: 36,\n  },\n  videoContainer: {\n    alignItems: 'center',\n    backgroundColor: 'rgba(52, 52, 52, 0.1)',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n  },\n});\n\nexport const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(\n  (props) => {\n    const { duration, onPlayPause, onProgressDrag, paused, progress } = props;\n\n    const videoDuration = duration\n      ? duration / 3600 >= 1\n        ? dayjs.duration(duration, 'second').format('HH:mm:ss')\n        : dayjs.duration(duration, 'second').format('mm:ss')\n      : null;\n\n    const progressValueInSeconds = progress * duration;\n\n    const progressDuration = progressValueInSeconds\n      ? progressValueInSeconds / 3600 >= 1\n        ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')\n        : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')\n      : null;\n\n    const {\n      theme: {\n        colors: { black, white_snow },\n        imageGallery: {\n          videoControl: { durationTextStyle, roundedView, videoContainer },\n        },\n      },\n    } = useTheme();\n\n    return (\n      <View style={[styles.videoContainer, videoContainer]}>\n        <TouchableOpacity\n          accessibilityLabel='Play Pause Button'\n          onPress={() => {\n            onPlayPause();\n          }}\n        >\n          <View style={[styles.roundedView, roundedView, { backgroundColor: white_snow }]}>\n            {paused ? (\n              <Play accessibilityLabel='Play Icon' height={24} pathFill={black} width={24} />\n            ) : (\n              <Pause accessibilityLabel='Pause Icon' height={24} width={24} />\n            )}\n          </View>\n        </TouchableOpacity>\n        <Text\n          accessibilityLabel='Progress Duration'\n          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}\n        >\n          {progressDuration ? progressDuration : '00:00'}\n        </Text>\n        <ProgressControl\n          duration={duration}\n          filledColor={white_snow}\n          onPlayPause={onPlayPause}\n          onProgressDrag={onProgressDrag}\n          progress={progress}\n          testID={'progress-control'}\n          width={180}\n        />\n        <Text\n          accessibilityLabel='Video Duration'\n          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}\n        >\n          {videoDuration ? videoDuration : '00:00'}\n        </Text>\n      </View>\n    );\n  },\n  (prevProps, nextProps) => {\n    if (\n      prevProps.duration === nextProps.duration &&\n      prevProps.paused === nextProps.paused &&\n      prevProps.progress === nextProps.progress\n    ) {\n      return true;\n    } else {\n      return false;\n    }\n  },\n);\n\nImageGalleryVideoControl.displayName = 'ImageGalleryVideoControl{imageGallery{videoControl}}';\n"]}

package/lib/module/components/ImageGallery/components/ImageGrid.js

@@ -68,6 +68,7 @@ var GridImage = function GridImage(_ref) {
   }
 
   return _react["default"].createElement(_bottomSheet.TouchableOpacity, {
+    accessibilityLabel: "Grid Image",
     onPress: selectAndClose,
     __self: _this,
     __source: {
@@ -151,6 +152,7 @@ var ImageGrid = function ImageGrid(props) {
     });
   });
   return _react["default"].createElement(_bottomSheet.BottomSheetFlatList, {
+    accessibilityLabel: "Image Grid",
     contentContainerStyle: [styles.contentContainer, {
       backgroundColor: white
     }, contentContainer],
@@ -163,7 +165,7 @@ var ImageGrid = function ImageGrid(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 156,
+      lineNumber: 157,
       columnNumber: 5
     }
   });

package/lib/module/components/ImageGallery/components/ImageGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageGrid.tsx"],"names":["styles","StyleSheet","create","avatarImage","borderRadius","height","width","avatarImageWrapper","borderWidth","margin","contentContainer","flexGrow","image","GridImage","item","gridImage","theme","imageGallery","grid","imageComponent","restItem","numberOfImageGalleryGridColumns","selectAndClose","type","uri","size","renderItem","ImageGrid","props","avatarComponent","closeGridView","photos","setImage","white","colors","imageGridItems","map","photo","messageId","url","backgroundColor","index","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image, StyleSheet, View } from 'react-native';\n\nimport { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { vw } from '../../../utils/utils';\n\nimport type { Photo } from '../ImageGallery';\n\nconst styles = StyleSheet.create({\n  avatarImage: {\n    borderRadius: 22,\n    height: 22,\n    width: 22,\n  },\n  avatarImageWrapper: {\n    borderRadius: 24,\n    borderWidth: 1,\n    height: 24,\n    margin: 8,\n    width: 24,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  image: {\n    margin: 1,\n  },\n});\n\nexport type ImageGalleryGridImageComponent<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n  item,\n}: {\n  item: Photo<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n}) => React.ReactElement | null;\n\nexport type ImageGalleryGridImageComponents<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n  imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n};\n\nexport type GridImageItem<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Photo<StreamChatGenerics> &\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nconst GridImage = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => {\n  const {\n    theme: {\n      imageGallery: {\n        grid: { gridImage },\n      },\n    },\n  } = useTheme();\n  const { imageComponent, ...restItem } = item;\n\n  const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;\n\n  const size = vw(100) / (numberOfImageGalleryGridColumns || 3) - 2;\n\n  if (imageComponent) {\n    return imageComponent({ item: restItem });\n  }\n\n  return (\n    <TouchableOpacity onPress={selectAndClose}>\n      {type === 'video' ? (\n        <View style={[styles.image, { height: size, width: size }, gridImage]}>\n          <VideoThumbnail />\n        </View>\n      ) : (\n        <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst renderItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => <GridImage item={item} />;\n\ntype Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    closeGridView: () => void;\n    photos: Photo<StreamChatGenerics>[];\n    setImage: React.Dispatch<\n      React.SetStateAction<\n        | {\n            messageId?: string | undefined;\n            url?: string | undefined;\n          }\n        | undefined\n      >\n    >;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nexport const ImageGrid = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: Props<StreamChatGenerics>,\n) => {\n  const {\n    avatarComponent,\n    closeGridView,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    photos,\n    setImage,\n  } = props;\n\n  const {\n    theme: {\n      colors: { white },\n      imageGallery: {\n        grid: { contentContainer },\n      },\n    },\n  } = useTheme();\n\n  const imageGridItems = photos.map((photo) => ({\n    ...photo,\n    avatarComponent,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    selectAndClose: () => {\n      setImage({ messageId: photo.messageId, url: photo.uri });\n      closeGridView();\n    },\n  }));\n\n  return (\n    <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>\n      contentContainerStyle={[\n        styles.contentContainer,\n        { backgroundColor: white },\n        contentContainer,\n      ]}\n      data={imageGridItems as GridImageItem<StreamChatGenerics>[]}\n      keyExtractor={(item, index) => `${item.uri}-${index}`}\n      numColumns={numberOfImageGalleryGridColumns || 3}\n      renderItem={renderItem}\n    />\n  );\n};\n\nImageGrid.displayName = 'ImageGrid{imageGallery{grid}}';\n"]}
+{"version":3,"sources":["ImageGrid.tsx"],"names":["styles","StyleSheet","create","avatarImage","borderRadius","height","width","avatarImageWrapper","borderWidth","margin","contentContainer","flexGrow","image","GridImage","item","gridImage","theme","imageGallery","grid","imageComponent","restItem","numberOfImageGalleryGridColumns","selectAndClose","type","uri","size","renderItem","ImageGrid","props","avatarComponent","closeGridView","photos","setImage","white","colors","imageGridItems","map","photo","messageId","url","backgroundColor","index","displayName"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AAEA;;;;;;;AAIA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,WAAW,EAAE;AACXC,IAAAA,YAAY,EAAE,EADH;AAEXC,IAAAA,MAAM,EAAE,EAFG;AAGXC,IAAAA,KAAK,EAAE;AAHI,GADkB;AAM/BC,EAAAA,kBAAkB,EAAE;AAClBH,IAAAA,YAAY,EAAE,EADI;AAElBI,IAAAA,WAAW,EAAE,CAFK;AAGlBH,IAAAA,MAAM,EAAE,EAHU;AAIlBI,IAAAA,MAAM,EAAE,CAJU;AAKlBH,IAAAA,KAAK,EAAE;AALW,GANW;AAa/BI,EAAAA,gBAAgB,EAAE;AAChBC,IAAAA,QAAQ,EAAE;AADM,GAba;AAgB/BC,EAAAA,KAAK,EAAE;AACLH,IAAAA,MAAM,EAAE;AADH;AAhBwB,CAAlB,CAAf;;AA+CA,IAAMI,SAAS,GAAG,SAAZA,SAAY,OAMZ;AAAA,MAHJC,IAGI,QAHJA,IAGI;;AACJ,kBAMI,6BANJ;AAAA,MAGcC,SAHd,aACEC,KADF,CAEIC,YAFJ,CAGMC,IAHN,CAGcH,SAHd;;AAOA,MAAQI,cAAR,GAAwCL,IAAxC,CAAQK,cAAR;AAAA,MAA2BC,QAA3B,6CAAwCN,IAAxC;AAEA,MAAQO,+BAAR,GAAuED,QAAvE,CAAQC,+BAAR;AAAA,MAAyCC,cAAzC,GAAuEF,QAAvE,CAAyCE,cAAzC;AAAA,MAAyDC,IAAzD,GAAuEH,QAAvE,CAAyDG,IAAzD;AAAA,MAA+DC,GAA/D,GAAuEJ,QAAvE,CAA+DI,GAA/D;AAEA,MAAMC,IAAI,GAAG,eAAG,GAAH,KAAWJ,+BAA+B,IAAI,CAA9C,IAAmD,CAAhE;;AAEA,MAAIF,cAAJ,EAAoB;AAClB,WAAOA,cAAc,CAAC;AAAEL,MAAAA,IAAI,EAAEM;AAAR,KAAD,CAArB;AACD;;AAED,SACE,gCAAC,6BAAD;AAAkB,IAAA,kBAAkB,EAAC,YAArC;AAAkD,IAAA,OAAO,EAAEE,cAA3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGC,IAAI,KAAK,OAAT,GACC,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACvB,MAAM,CAACY,KAAR,EAAe;AAAEP,MAAAA,MAAM,EAAEoB,IAAV;AAAgBnB,MAAAA,KAAK,EAAEmB;AAAvB,KAAf,EAA8CV,SAA9C,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,8BAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,CADD,GAKC,gCAAC,kBAAD;AAAO,IAAA,MAAM,EAAE;AAAES,MAAAA,GAAG,EAAHA;AAAF,KAAf;AAAwB,IAAA,KAAK,EAAE,CAACxB,MAAM,CAACY,KAAR,EAAe;AAAEP,MAAAA,MAAM,EAAEoB,IAAV;AAAgBnB,MAAAA,KAAK,EAAEmB;AAAvB,KAAf,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IANJ,CADF;AAWD,CAnCD;;AAqCA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,MAGjBZ,IAHiB,SAGjBA,IAHiB;AAAA,SAMb,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEA,IAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IANa;AAAA,CAAnB;;AAyBO,IAAMa,SAAS,GAAG,SAAZA,SAAY,CAGvBC,KAHuB,EAIpB;AACH,MACEC,eADF,GAOID,KAPJ,CACEC,eADF;AAAA,MAEEC,aAFF,GAOIF,KAPJ,CAEEE,aAFF;AAAA,MAGEX,cAHF,GAOIS,KAPJ,CAGET,cAHF;AAAA,MAIEE,+BAJF,GAOIO,KAPJ,CAIEP,+BAJF;AAAA,MAKEU,MALF,GAOIH,KAPJ,CAKEG,MALF;AAAA,MAMEC,QANF,GAOIJ,KAPJ,CAMEI,QANF;;AASA,mBAOI,6BAPJ;AAAA,oCACEhB,KADF;AAAA,MAEciB,KAFd,oBAEIC,MAFJ,CAEcD,KAFd;AAAA,MAIcvB,gBAJd,oBAGIO,YAHJ,CAIMC,IAJN,CAIcR,gBAJd;;AASA,MAAMyB,cAAc,GAAGJ,MAAM,CAACK,GAAP,CAAW,UAACC,KAAD;AAAA,yCAC7BA,KAD6B;AAEhCR,MAAAA,eAAe,EAAfA,eAFgC;AAGhCV,MAAAA,cAAc,EAAdA,cAHgC;AAIhCE,MAAAA,+BAA+B,EAA/BA,+BAJgC;AAKhCC,MAAAA,cAAc,EAAE,0BAAM;AACpBU,QAAAA,QAAQ,CAAC;AAAEM,UAAAA,SAAS,EAAED,KAAK,CAACC,SAAnB;AAA8BC,UAAAA,GAAG,EAAEF,KAAK,CAACb;AAAzC,SAAD,CAAR;AACAM,QAAAA,aAAa;AACd;AAR+B;AAAA,GAAX,CAAvB;AAWA,SACE,gCAAC,gCAAD;AACE,IAAA,kBAAkB,EAAC,YADrB;AAEE,IAAA,qBAAqB,EAAE,CACrB9B,MAAM,CAACU,gBADc,EAErB;AAAE8B,MAAAA,eAAe,EAAEP;AAAnB,KAFqB,EAGrBvB,gBAHqB,CAFzB;AAOE,IAAA,IAAI,EAAEyB,cAPR;AAQE,IAAA,YAAY,EAAE,sBAACrB,IAAD,EAAO2B,KAAP;AAAA,aAAoB3B,IAAI,CAACU,GAAzB,SAAgCiB,KAAhC;AAAA,KARhB;AASE,IAAA,UAAU,EAAEpB,+BAA+B,IAAI,CATjD;AAUE,IAAA,UAAU,EAAEK,UAVd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF;AAcD,CAhDM;;;AAkDPC,SAAS,CAACe,WAAV,GAAwB,+BAAxB","sourcesContent":["import React from 'react';\nimport { Image, StyleSheet, View } from 'react-native';\n\nimport { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { vw } from '../../../utils/utils';\n\nimport type { Photo } from '../ImageGallery';\n\nconst styles = StyleSheet.create({\n  avatarImage: {\n    borderRadius: 22,\n    height: 22,\n    width: 22,\n  },\n  avatarImageWrapper: {\n    borderRadius: 24,\n    borderWidth: 1,\n    height: 24,\n    margin: 8,\n    width: 24,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  image: {\n    margin: 1,\n  },\n});\n\nexport type ImageGalleryGridImageComponent<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n  item,\n}: {\n  item: Photo<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n}) => React.ReactElement | null;\n\nexport type ImageGalleryGridImageComponents<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n  imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n};\n\nexport type GridImageItem<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Photo<StreamChatGenerics> &\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nconst GridImage = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => {\n  const {\n    theme: {\n      imageGallery: {\n        grid: { gridImage },\n      },\n    },\n  } = useTheme();\n  const { imageComponent, ...restItem } = item;\n\n  const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;\n\n  const size = vw(100) / (numberOfImageGalleryGridColumns || 3) - 2;\n\n  if (imageComponent) {\n    return imageComponent({ item: restItem });\n  }\n\n  return (\n    <TouchableOpacity accessibilityLabel='Grid Image' onPress={selectAndClose}>\n      {type === 'video' ? (\n        <View style={[styles.image, { height: size, width: size }, gridImage]}>\n          <VideoThumbnail />\n        </View>\n      ) : (\n        <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst renderItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => <GridImage item={item} />;\n\nexport type ImageGridType<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ImageGalleryGridImageComponents<StreamChatGenerics> & {\n  closeGridView: () => void;\n  photos: Photo<StreamChatGenerics>[];\n  setImage: React.Dispatch<\n    React.SetStateAction<\n      | {\n          messageId?: string | undefined;\n          url?: string | undefined;\n        }\n      | undefined\n    >\n  >;\n  numberOfImageGalleryGridColumns?: number;\n};\n\nexport const ImageGrid = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageGridType<StreamChatGenerics>,\n) => {\n  const {\n    avatarComponent,\n    closeGridView,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    photos,\n    setImage,\n  } = props;\n\n  const {\n    theme: {\n      colors: { white },\n      imageGallery: {\n        grid: { contentContainer },\n      },\n    },\n  } = useTheme();\n\n  const imageGridItems = photos.map((photo) => ({\n    ...photo,\n    avatarComponent,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    selectAndClose: () => {\n      setImage({ messageId: photo.messageId, url: photo.uri });\n      closeGridView();\n    },\n  }));\n\n  return (\n    <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>\n      accessibilityLabel='Image Grid'\n      contentContainerStyle={[\n        styles.contentContainer,\n        { backgroundColor: white },\n        contentContainer,\n      ]}\n      data={imageGridItems as GridImageItem<StreamChatGenerics>[]}\n      keyExtractor={(item, index) => `${item.uri}-${index}`}\n      numColumns={numberOfImageGalleryGridColumns || 3}\n      renderItem={renderItem}\n    />\n  );\n};\n\nImageGrid.displayName = 'ImageGrid{imageGallery{grid}}';\n"]}

package/lib/module/components/ImageGallery/components/ImageGridHandle.js

@@ -63,6 +63,7 @@ var ImageGridHandle = function ImageGridHandle(props) {
       t = _useTranslationContex.t;
 
   return _react["default"].createElement(_reactNative.View, {
+    accessibilityLabel: "Image Grid Handle",
     style: [styles.handle, {
       backgroundColor: white
     }, handle],
@@ -79,7 +80,7 @@ var ImageGridHandle = function ImageGridHandle(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 64,
+      lineNumber: 67,
       columnNumber: 59
     }
   }), centerComponent ? centerComponent({
@@ -91,7 +92,7 @@ var ImageGridHandle = function ImageGridHandle(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 68,
+      lineNumber: 71,
       columnNumber: 9
     }
   }, t('Photos and Videos')), rightComponent ? rightComponent({
@@ -101,7 +102,7 @@ var ImageGridHandle = function ImageGridHandle(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 73,
+      lineNumber: 76,
       columnNumber: 9
     }
   }, _react["default"].createElement(_icons.Close, {
@@ -109,7 +110,7 @@ var ImageGridHandle = function ImageGridHandle(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 77,
       columnNumber: 11
     }
   })));

package/lib/module/components/ImageGallery/components/ImageGridHandle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageGridHandle.tsx"],"names":["styles","StyleSheet","create","closeButton","marginRight","handle","alignItems","borderTopLeftRadius","borderTopRightRadius","flexDirection","height","justifyContent","leftContainer","marginLeft","width","text","flex","fontSize","fontWeight","textAlign","ImageGridHandle","props","centerComponent","closeGridView","leftComponent","rightComponent","theme","colors","black","white","imageGallery","grid","handleText","t","backgroundColor","color","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;AAEA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,WAAW,EAAE;AACXC,IAAAA,WAAW,EAAE;AADF,GADkB;AAI/BC,EAAAA,MAAM,EAAE;AACNC,IAAAA,UAAU,EAAE,QADN;AAENC,IAAAA,mBAAmB,EAAE,EAFf;AAGNC,IAAAA,oBAAoB,EAAE,EAHhB;AAINC,IAAAA,aAAa,EAAE,KAJT;AAKNC,IAAAA,MAAM,EAAE,EALF;AAMNC,IAAAA,cAAc,EAAE;AANV,GAJuB;AAY/BC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE,EADC;AAEbC,IAAAA,KAAK,EAAE;AAFM,GAZgB;AAgB/BC,EAAAA,IAAI,EAAE;AACJC,IAAAA,IAAI,EAAE,CADF;AAEJC,IAAAA,QAAQ,EAAE,EAFN;AAGJC,IAAAA,UAAU,EAAE,KAHR;AAIJC,IAAAA,SAAS,EAAE;AAJP;AAhByB,CAAlB,CAAf;;AAwCO,IAAMC,eAAgC,GAAG,SAAnCA,eAAmC,CAACC,KAAD,EAAW;AACzD,MAAQC,eAAR,GAA0ED,KAA1E,CAAQC,eAAR;AAAA,MAAyBC,aAAzB,GAA0EF,KAA1E,CAAyBE,aAAzB;AAAA,MAAwCC,aAAxC,GAA0EH,KAA1E,CAAwCG,aAAxC;AAAA,MAAuDC,cAAvD,GAA0EJ,KAA1E,CAAuDI,cAAvD;;AACA,kBAOI,6BAPJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,KAFd,yBAEcA,KAFd;AAAA,MAEqBC,KAFrB,yBAEqBA,KAFrB;AAAA,8CAGIC,YAHJ,CAIMC,IAJN;AAAA,MAIc1B,MAJd,yBAIcA,MAJd;AAAA,MAIsB2B,UAJtB,yBAIsBA,UAJtB;;AAQA,8BAAc,gDAAd;AAAA,MAAQC,CAAR,yBAAQA,CAAR;;AAEA,SACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACjC,MAAM,CAACK,MAAR,EAAgB;AAAE6B,MAAAA,eAAe,EAAEL;AAAnB,KAAhB,EAA4CxB,MAA5C,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGmB,aAAa,GAAGA,aAAa,CAAC;AAAED,IAAAA,aAAa,EAAbA;AAAF,GAAD,CAAhB,GAAsC,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAEvB,MAAM,CAACY,aAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADtD,EAEGU,eAAe,GACdA,eAAe,CAAC;AAAEC,IAAAA,aAAa,EAAbA;AAAF,GAAD,CADD,GAGd,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACvB,MAAM,CAACe,IAAR,EAAc;AAAEoB,MAAAA,KAAK,EAAEP;AAAT,KAAd,EAAgCI,UAAhC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA2DC,CAAC,CAAC,mBAAD,CAA5D,CALJ,EAOGR,cAAc,GACbA,cAAc,CAAC;AAAEF,IAAAA,aAAa,EAAbA;AAAF,GAAD,CADD,GAGb,gCAAC,6BAAD;AAAkB,IAAA,OAAO,EAAEA,aAA3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,YAAD;AAAO,IAAA,KAAK,EAAEvB,MAAM,CAACG,WAArB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,CAVJ,CADF;AAiBD,CA7BM;;;AA+BPiB,eAAe,CAACgB,WAAhB,GAA8B,6CAA9B","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../../icons';\n\nconst styles = StyleSheet.create({\n  closeButton: {\n    marginRight: 16,\n  },\n  handle: {\n    alignItems: 'center',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n    flexDirection: 'row',\n    height: 40,\n    justifyContent: 'center',\n  },\n  leftContainer: {\n    marginLeft: 16,\n    width: 24, // Close icon width on right\n  },\n  text: {\n    flex: 1,\n    fontSize: 16,\n    fontWeight: '600',\n    textAlign: 'center',\n  },\n});\n\nexport type ImageGalleryGridHandleCustomComponent = ({\n  closeGridView,\n}: {\n  closeGridView: () => void;\n}) => React.ReactElement | null;\n\nexport type ImageGalleryGridHandleCustomComponentProps = {\n  centerComponent?: ImageGalleryGridHandleCustomComponent;\n  leftComponent?: ImageGalleryGridHandleCustomComponent;\n  rightComponent?: ImageGalleryGridHandleCustomComponent;\n};\n\ntype Props = ImageGalleryGridHandleCustomComponentProps & {\n  closeGridView: () => void;\n};\n\nexport const ImageGridHandle: React.FC<Props> = (props) => {\n  const { centerComponent, closeGridView, leftComponent, rightComponent } = props;\n  const {\n    theme: {\n      colors: { black, white },\n      imageGallery: {\n        grid: { handle, handleText },\n      },\n    },\n  } = useTheme();\n  const { t } = useTranslationContext();\n\n  return (\n    <View style={[styles.handle, { backgroundColor: white }, handle]}>\n      {leftComponent ? leftComponent({ closeGridView }) : <View style={styles.leftContainer} />}\n      {centerComponent ? (\n        centerComponent({ closeGridView })\n      ) : (\n        <Text style={[styles.text, { color: black }, handleText]}>{t('Photos and Videos')}</Text>\n      )}\n      {rightComponent ? (\n        rightComponent({ closeGridView })\n      ) : (\n        <TouchableOpacity onPress={closeGridView}>\n          <Close style={styles.closeButton} />\n        </TouchableOpacity>\n      )}\n    </View>\n  );\n};\n\nImageGridHandle.displayName = 'ImageGridHandle{imageGallery{grid{handle}}}';\n"]}
+{"version":3,"sources":["ImageGridHandle.tsx"],"names":["styles","StyleSheet","create","closeButton","marginRight","handle","alignItems","borderTopLeftRadius","borderTopRightRadius","flexDirection","height","justifyContent","leftContainer","marginLeft","width","text","flex","fontSize","fontWeight","textAlign","ImageGridHandle","props","centerComponent","closeGridView","leftComponent","rightComponent","theme","colors","black","white","imageGallery","grid","handleText","t","backgroundColor","color","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;AAEA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,WAAW,EAAE;AACXC,IAAAA,WAAW,EAAE;AADF,GADkB;AAI/BC,EAAAA,MAAM,EAAE;AACNC,IAAAA,UAAU,EAAE,QADN;AAENC,IAAAA,mBAAmB,EAAE,EAFf;AAGNC,IAAAA,oBAAoB,EAAE,EAHhB;AAINC,IAAAA,aAAa,EAAE,KAJT;AAKNC,IAAAA,MAAM,EAAE,EALF;AAMNC,IAAAA,cAAc,EAAE;AANV,GAJuB;AAY/BC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE,EADC;AAEbC,IAAAA,KAAK,EAAE;AAFM,GAZgB;AAgB/BC,EAAAA,IAAI,EAAE;AACJC,IAAAA,IAAI,EAAE,CADF;AAEJC,IAAAA,QAAQ,EAAE,EAFN;AAGJC,IAAAA,UAAU,EAAE,KAHR;AAIJC,IAAAA,SAAS,EAAE;AAJP;AAhByB,CAAlB,CAAf;;AAwCO,IAAMC,eAAgC,GAAG,SAAnCA,eAAmC,CAACC,KAAD,EAAW;AACzD,MAAQC,eAAR,GAA0ED,KAA1E,CAAQC,eAAR;AAAA,MAAyBC,aAAzB,GAA0EF,KAA1E,CAAyBE,aAAzB;AAAA,MAAwCC,aAAxC,GAA0EH,KAA1E,CAAwCG,aAAxC;AAAA,MAAuDC,cAAvD,GAA0EJ,KAA1E,CAAuDI,cAAvD;;AACA,kBAOI,6BAPJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,KAFd,yBAEcA,KAFd;AAAA,MAEqBC,KAFrB,yBAEqBA,KAFrB;AAAA,8CAGIC,YAHJ,CAIMC,IAJN;AAAA,MAIc1B,MAJd,yBAIcA,MAJd;AAAA,MAIsB2B,UAJtB,yBAIsBA,UAJtB;;AAQA,8BAAc,gDAAd;AAAA,MAAQC,CAAR,yBAAQA,CAAR;;AAEA,SACE,gCAAC,iBAAD;AACE,IAAA,kBAAkB,EAAC,mBADrB;AAEE,IAAA,KAAK,EAAE,CAACjC,MAAM,CAACK,MAAR,EAAgB;AAAE6B,MAAAA,eAAe,EAAEL;AAAnB,KAAhB,EAA4CxB,MAA5C,CAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAIGmB,aAAa,GAAGA,aAAa,CAAC;AAAED,IAAAA,aAAa,EAAbA;AAAF,GAAD,CAAhB,GAAsC,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAEvB,MAAM,CAACY,aAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAJtD,EAKGU,eAAe,GACdA,eAAe,CAAC;AAAEC,IAAAA,aAAa,EAAbA;AAAF,GAAD,CADD,GAGd,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACvB,MAAM,CAACe,IAAR,EAAc;AAAEoB,MAAAA,KAAK,EAAEP;AAAT,KAAd,EAAgCI,UAAhC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA2DC,CAAC,CAAC,mBAAD,CAA5D,CARJ,EAUGR,cAAc,GACbA,cAAc,CAAC;AAAEF,IAAAA,aAAa,EAAbA;AAAF,GAAD,CADD,GAGb,gCAAC,6BAAD;AAAkB,IAAA,OAAO,EAAEA,aAA3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,YAAD;AAAO,IAAA,KAAK,EAAEvB,MAAM,CAACG,WAArB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,CAbJ,CADF;AAoBD,CAhCM;;;AAkCPiB,eAAe,CAACgB,WAAhB,GAA8B,6CAA9B","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../../icons';\n\nconst styles = StyleSheet.create({\n  closeButton: {\n    marginRight: 16,\n  },\n  handle: {\n    alignItems: 'center',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n    flexDirection: 'row',\n    height: 40,\n    justifyContent: 'center',\n  },\n  leftContainer: {\n    marginLeft: 16,\n    width: 24, // Close icon width on right\n  },\n  text: {\n    flex: 1,\n    fontSize: 16,\n    fontWeight: '600',\n    textAlign: 'center',\n  },\n});\n\nexport type ImageGalleryGridHandleCustomComponent = ({\n  closeGridView,\n}: {\n  closeGridView: () => void;\n}) => React.ReactElement | null;\n\nexport type ImageGalleryGridHandleCustomComponentProps = {\n  centerComponent?: ImageGalleryGridHandleCustomComponent;\n  leftComponent?: ImageGalleryGridHandleCustomComponent;\n  rightComponent?: ImageGalleryGridHandleCustomComponent;\n};\n\ntype Props = ImageGalleryGridHandleCustomComponentProps & {\n  closeGridView: () => void;\n};\n\nexport const ImageGridHandle: React.FC<Props> = (props) => {\n  const { centerComponent, closeGridView, leftComponent, rightComponent } = props;\n  const {\n    theme: {\n      colors: { black, white },\n      imageGallery: {\n        grid: { handle, handleText },\n      },\n    },\n  } = useTheme();\n  const { t } = useTranslationContext();\n\n  return (\n    <View\n      accessibilityLabel='Image Grid Handle'\n      style={[styles.handle, { backgroundColor: white }, handle]}\n    >\n      {leftComponent ? leftComponent({ closeGridView }) : <View style={styles.leftContainer} />}\n      {centerComponent ? (\n        centerComponent({ closeGridView })\n      ) : (\n        <Text style={[styles.text, { color: black }, handleText]}>{t('Photos and Videos')}</Text>\n      )}\n      {rightComponent ? (\n        rightComponent({ closeGridView })\n      ) : (\n        <TouchableOpacity onPress={closeGridView}>\n          <Close style={styles.closeButton} />\n        </TouchableOpacity>\n      )}\n    </View>\n  );\n};\n\nImageGridHandle.displayName = 'ImageGridHandle{imageGallery{grid{handle}}}';\n"]}

package/lib/module/components/Message/Message.js

@@ -208,6 +208,8 @@ var MessageWithContext = function MessageWithContext(props) {
     } else if (cur.type === 'video' && !cur.og_scrape_url) {
       acc.files.push(cur);
       acc.other = [];
+    } else if (cur.type === 'audio') {
+      acc.files.push(cur);
     } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
       if (cur.image_url || cur.thumb_url) {
         acc.images.push(cur);
@@ -553,7 +555,7 @@ var MessageWithContext = function MessageWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 680,
+      lineNumber: 681,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -563,7 +565,7 @@ var MessageWithContext = function MessageWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 684,
+      lineNumber: 685,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -573,7 +575,7 @@ var MessageWithContext = function MessageWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 692,
+      lineNumber: 693,
       columnNumber: 9
     }
   }, _react["default"].createElement(_MessageContext.MessageProvider, {
@@ -581,14 +583,14 @@ var MessageWithContext = function MessageWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 699,
+      lineNumber: 700,
       columnNumber: 11
     }
   }, _react["default"].createElement(MessageSimple, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 700,
+      lineNumber: 701,
       columnNumber: 13
     }
   })))));
@@ -713,7 +715,7 @@ var Message = function Message(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 860,
+      lineNumber: 861,
       columnNumber: 5
     }
   }));