stream-chat-react-native-core 4.6.0 → 4.7.0-beta.1

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

@@ -5,10 +5,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageGalleryFooter = void 0;
+exports.ImageGalleryFooterWithContext = exports.ImageGalleryFooter = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,6 +21,8 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
+var _ImageGalleryVideoControl = require("./ImageGalleryVideoControl");
+
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 
 var _TranslationContext = require("../../../contexts/translationContext/TranslationContext");
@@ -68,17 +72,23 @@ var styles = _reactNative.StyleSheet.create({
   }
 });
 
-var ImageGalleryFooter = function ImageGalleryFooter(props) {
+var ImageGalleryFooterWithContext = function ImageGalleryFooterWithContext(props) {
   var centerElement = props.centerElement,
+      duration = props.duration,
       GridIcon = props.GridIcon,
       leftElement = props.leftElement,
+      onPlayPause = props.onPlayPause,
+      onProgressDrag = props.onProgressDrag,
       opacity = props.opacity,
       openGridView = props.openGridView,
+      paused = props.paused,
       photo = props.photo,
       photoLength = props.photoLength,
+      progress = props.progress,
       rightElement = props.rightElement,
       selectedIndex = props.selectedIndex,
       ShareIcon = props.ShareIcon,
+      videoControlElement = props.videoControlElement,
       visible = props.visible;
 
   var _useState = (0, _react.useState)(200),
@@ -93,9 +103,7 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
-      _useTheme$theme$color = _useTheme$theme.colors,
-      black = _useTheme$theme$color.black,
-      white = _useTheme$theme$color.white,
+      black = _useTheme$theme.colors.black,
       _useTheme$theme$image = _useTheme$theme.imageGallery.footer,
       centerContainer = _useTheme$theme$image.centerContainer,
       container = _useTheme$theme$image.container,
@@ -114,11 +122,11 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
         translateY: (0, _reactNativeReanimated.interpolate)(visible.value, [0, 1], [height, 0], _reactNativeReanimated.Extrapolate.CLAMP)
       }]
     };
-  }, []);
+  }, [height]);
 
   var share = function () {
     var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
-      var _photo$user, localImage;
+      var _photo$mime_type, _photo$user, extension, localFile;
 
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
@@ -126,44 +134,45 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
             case 0:
               setShareMenuOpen(true);
               _context.prev = 1;
-              _context.next = 4;
+              extension = ((_photo$mime_type = photo.mime_type) == null ? void 0 : _photo$mime_type.split('/')[1]) || 'jpg';
+              _context.next = 5;
               return (0, _native.saveFile)({
-                fileName: (((_photo$user = photo.user) == null ? void 0 : _photo$user.id) || 'ChatPhoto') + "-" + photo.messageId + "-" + selectedIndex + ".jpg",
+                fileName: (((_photo$user = photo.user) == null ? void 0 : _photo$user.id) || 'ChatPhoto') + "-" + photo.messageId + "-" + selectedIndex + "." + extension,
                 fromUrl: photo.uri
               });
 
-            case 4:
-              localImage = _context.sent;
-              _context.next = 7;
+            case 5:
+              localFile = _context.sent;
+              _context.next = 8;
               return (0, _native.shareImage)({
-                type: 'image/jpeg',
-                url: localImage
+                type: photo.mime_type,
+                url: localFile
               });
 
-            case 7:
-              _context.next = 9;
+            case 8:
+              _context.next = 10;
               return (0, _native.deleteFile)({
-                uri: localImage
+                uri: localFile
               });
 
-            case 9:
-              _context.next = 14;
+            case 10:
+              _context.next = 15;
               break;
 
-            case 11:
-              _context.prev = 11;
+            case 12:
+              _context.prev = 12;
               _context.t0 = _context["catch"](1);
               console.log(_context.t0);
 
-            case 14:
+            case 15:
               setShareMenuOpen(false);
 
-            case 15:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 11]]);
+      }, _callee, null, [[1, 12]]);
     }));
 
     return function share() {
@@ -180,25 +189,43 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 148,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, _react["default"].createElement(ReanimatedSafeAreaView, {
-    style: [{
-      backgroundColor: white
-    }, container, footerStyle],
+    style: [container, footerStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 153,
+      lineNumber: 188,
       columnNumber: 7
     }
-  }, _react["default"].createElement(_reactNative.View, {
-    style: [styles.innerContainer, innerContainer],
+  }, photo.type === 'video' ? videoControlElement ? videoControlElement({
+    duration: duration,
+    onPlayPause: onPlayPause,
+    onProgressDrag: onProgressDrag,
+    paused: paused,
+    progress: progress
+  }) : _react["default"].createElement(_ImageGalleryVideoControl.ImageGalleryVideoControl, {
+    duration: duration,
+    onPlayPause: onPlayPause,
+    onProgressDrag: onProgressDrag,
+    paused: paused,
+    progress: progress,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 193,
+      columnNumber: 13
+    }
+  }) : null, _react["default"].createElement(_reactNative.View, {
+    style: [styles.innerContainer, innerContainer, {
+      backgroundColor: 'white'
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 154,
+      lineNumber: 202,
       columnNumber: 9
     }
   }, leftElement ? leftElement({
@@ -212,7 +239,7 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 158,
+      lineNumber: 206,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -220,14 +247,14 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 159,
+      lineNumber: 207,
       columnNumber: 15
     }
   }, ShareIcon ? ShareIcon : _react["default"].createElement(_icons.Share, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 160,
+      lineNumber: 208,
       columnNumber: 42
     }
   }))), centerElement ? centerElement({
@@ -240,7 +267,7 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 167,
+      lineNumber: 215,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNative.Text, {
@@ -250,7 +277,7 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 168,
+      lineNumber: 216,
       columnNumber: 15
     }
   }, t('{{ index }} of {{ photoLength }}', {
@@ -266,7 +293,7 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 179,
+      lineNumber: 227,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -274,19 +301,54 @@ var ImageGalleryFooter = function ImageGalleryFooter(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 180,
+      lineNumber: 228,
       columnNumber: 15
     }
   }, GridIcon ? GridIcon : _react["default"].createElement(_icons.Grid, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 181,
+      lineNumber: 229,
       columnNumber: 40
     }
   }))))));
 };
 
+exports.ImageGalleryFooterWithContext = ImageGalleryFooterWithContext;
+
+var areEqual = function areEqual(prevProps, nextProps) {
+  var prevDuration = prevProps.duration,
+      prevPaused = prevProps.paused,
+      prevProgress = prevProps.progress,
+      prevSelectedIndex = prevProps.selectedIndex;
+  var nextDuration = nextProps.duration,
+      nextPaused = nextProps.paused,
+      nextProgress = nextProps.progress,
+      nextSelectedIndex = nextProps.selectedIndex;
+  var isDurationEqual = prevDuration === nextDuration;
+  if (!isDurationEqual) return false;
+  var isPausedEqual = prevPaused === nextPaused;
+  if (!isPausedEqual) return false;
+  var isProgressEqual = prevProgress === nextProgress;
+  if (!isProgressEqual) return false;
+  var isSelectedIndexEqual = prevSelectedIndex === nextSelectedIndex;
+  if (!isSelectedIndexEqual) return false;
+  return true;
+};
+
+var MemoizedImageGalleryFooter = _react["default"].memo(ImageGalleryFooterWithContext, areEqual);
+
+var ImageGalleryFooter = function ImageGalleryFooter(props) {
+  return _react["default"].createElement(MemoizedImageGalleryFooter, (0, _extends2["default"])({}, props, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 284,
+      columnNumber: 6
+    }
+  }));
+};
+
 exports.ImageGalleryFooter = ImageGalleryFooter;
 ImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';
 //# sourceMappingURL=ImageGalleryFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["ImageGalleryFooter.tsx"],"names":["ReanimatedSafeAreaView","Animated","createAnimatedComponent","SafeAreaView","styles","StyleSheet","create","centerContainer","alignItems","flex","justifyContent","imageCountText","fontSize","fontWeight","innerContainer","flexDirection","height","leftContainer","marginLeft","rightContainer","marginRight","wrapper","bottom","left","position","right","ImageGalleryFooter","props","centerElement","GridIcon","leftElement","opacity","openGridView","photo","photoLength","rightElement","selectedIndex","ShareIcon","visible","setHeight","shareMenuOpen","setShareMenuOpen","theme","colors","black","white","imageGallery","footer","container","t","footerStyle","value","transform","translateY","Extrapolate","CLAMP","share","fileName","user","id","messageId","fromUrl","uri","localImage","type","url","console","log","event","nativeEvent","layout","backgroundColor","color","index","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';\nimport Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';\nimport { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';\nimport { deleteFile, saveFile, shareImage } from '../../../native';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport type { Photo } from '../ImageGallery';\n\nconst ReanimatedSafeAreaView = Animated.createAnimatedComponent\n  ? Animated.createAnimatedComponent(SafeAreaView)\n  : SafeAreaView;\n\nconst styles = StyleSheet.create({\n  centerContainer: {\n    alignItems: 'center',\n    flex: 1,\n    justifyContent: 'center',\n  },\n  imageCountText: {\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  innerContainer: {\n    flexDirection: 'row',\n    height: 56,\n  },\n  leftContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    marginLeft: 8,\n  },\n  rightContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    marginRight: 8,\n  },\n  wrapper: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n  },\n});\n\nexport type ImageGalleryFooterCustomComponent<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n  openGridView,\n  photo,\n  share,\n  shareMenuOpen,\n}: {\n  openGridView: () => void;\n  share: () => Promise<void>;\n  shareMenuOpen: boolean;\n  photo?: Photo<StreamChatGenerics>;\n}) => React.ReactElement | null;\n\nexport type ImageGalleryFooterCustomComponentProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;\n  GridIcon?: React.ReactElement;\n  leftElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;\n  rightElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;\n  ShareIcon?: React.ReactElement;\n};\n\ntype Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =\n  ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {\n    opacity: Animated.SharedValue<number>;\n    openGridView: () => void;\n    photo: Photo<StreamChatGenerics>;\n    photoLength: number;\n    selectedIndex: number;\n    visible: Animated.SharedValue<number>;\n  };\n\nexport const ImageGalleryFooter = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: Props<StreamChatGenerics>,\n) => {\n  const {\n    centerElement,\n    GridIcon,\n    leftElement,\n    opacity,\n    openGridView,\n    photo,\n    photoLength,\n    rightElement,\n    selectedIndex,\n    ShareIcon,\n    visible,\n  } = props;\n  const [height, setHeight] = useState(200);\n  const [shareMenuOpen, setShareMenuOpen] = useState(false);\n  const {\n    theme: {\n      colors: { black, white },\n      imageGallery: {\n        footer: {\n          centerContainer,\n          container,\n          imageCountText,\n          innerContainer,\n          leftContainer,\n          rightContainer,\n        },\n      },\n    },\n  } = useTheme();\n  const { t } = useTranslationContext();\n\n  const footerStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      opacity: opacity.value,\n      transform: [\n        {\n          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolate.CLAMP),\n        },\n      ],\n    }),\n    [],\n  );\n\n  const share = async () => {\n    setShareMenuOpen(true);\n    try {\n      const localImage = await saveFile({\n        fileName: `${photo.user?.id || 'ChatPhoto'}-${photo.messageId}-${selectedIndex}.jpg`,\n        fromUrl: photo.uri,\n      });\n      await shareImage({ type: 'image/jpeg', url: localImage });\n      await deleteFile({ uri: localImage });\n    } catch (error) {\n      console.log(error);\n    }\n    setShareMenuOpen(false);\n  };\n\n  return (\n    <Animated.View\n      onLayout={(event) => setHeight(event.nativeEvent.layout.height)}\n      pointerEvents={'box-none'}\n      style={styles.wrapper}\n    >\n      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, container, footerStyle]}>\n        <View style={[styles.innerContainer, innerContainer]}>\n          {leftElement ? (\n            leftElement({ openGridView, photo, share, shareMenuOpen })\n          ) : (\n            <TouchableOpacity disabled={shareMenuOpen} onPress={share}>\n              <View style={[styles.leftContainer, leftContainer]}>\n                {ShareIcon ? ShareIcon : <ShareIconDefault />}\n              </View>\n            </TouchableOpacity>\n          )}\n          {centerElement ? (\n            centerElement({ openGridView, photo, share, shareMenuOpen })\n          ) : (\n            <View style={[styles.centerContainer, centerContainer]}>\n              <Text style={[styles.imageCountText, { color: black }, imageCountText]}>\n                {t('{{ index }} of {{ photoLength }}', {\n                  index: photoLength - selectedIndex,\n                  photoLength,\n                })}\n              </Text>\n            </View>\n          )}\n          {rightElement ? (\n            rightElement({ openGridView, photo, share, shareMenuOpen })\n          ) : (\n            <TouchableOpacity onPress={openGridView}>\n              <View style={[styles.rightContainer, rightContainer]}>\n                {GridIcon ? GridIcon : <GridIconDefault />}\n              </View>\n            </TouchableOpacity>\n          )}\n        </View>\n      </ReanimatedSafeAreaView>\n    </Animated.View>\n  );\n};\n\nImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';\n"]}
+{"version":3,"sources":["ImageGalleryFooter.tsx"],"names":["ReanimatedSafeAreaView","Animated","createAnimatedComponent","SafeAreaView","styles","StyleSheet","create","centerContainer","alignItems","flex","justifyContent","imageCountText","fontSize","fontWeight","innerContainer","flexDirection","height","leftContainer","marginLeft","rightContainer","marginRight","wrapper","bottom","left","position","right","ImageGalleryFooterWithContext","props","centerElement","duration","GridIcon","leftElement","onPlayPause","onProgressDrag","opacity","openGridView","paused","photo","photoLength","progress","rightElement","selectedIndex","ShareIcon","videoControlElement","visible","setHeight","shareMenuOpen","setShareMenuOpen","theme","black","colors","imageGallery","footer","container","t","footerStyle","value","transform","translateY","Extrapolate","CLAMP","share","extension","mime_type","split","fileName","user","id","messageId","fromUrl","uri","localFile","type","url","console","log","event","nativeEvent","layout","backgroundColor","color","index","areEqual","prevProps","nextProps","prevDuration","prevPaused","prevProgress","prevSelectedIndex","nextDuration","nextPaused","nextProgress","nextSelectedIndex","isDurationEqual","isPausedEqual","isProgressEqual","isSelectedIndexEqual","MemoizedImageGalleryFooter","React","memo","ImageGalleryFooter","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';\nimport Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';\n\nimport { ImageGalleryVideoControl } from './ImageGalleryVideoControl';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';\nimport { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';\nimport { deleteFile, saveFile, shareImage } from '../../../native';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport type { Photo } from '../ImageGallery';\n\nconst ReanimatedSafeAreaView = Animated.createAnimatedComponent\n  ? Animated.createAnimatedComponent(SafeAreaView)\n  : SafeAreaView;\n\nconst styles = StyleSheet.create({\n  centerContainer: {\n    alignItems: 'center',\n    flex: 1,\n    justifyContent: 'center',\n  },\n  imageCountText: {\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  innerContainer: {\n    flexDirection: 'row',\n    height: 56,\n  },\n  leftContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    marginLeft: 8,\n  },\n  rightContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    marginRight: 8,\n  },\n  wrapper: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n  },\n});\n\nexport type ImageGalleryFooterCustomComponent<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n  openGridView,\n  photo,\n  share,\n  shareMenuOpen,\n}: {\n  openGridView: () => void;\n  share: () => Promise<void>;\n  shareMenuOpen: boolean;\n  photo?: Photo<StreamChatGenerics>;\n}) => React.ReactElement | null;\n\nexport type ImageGalleryFooterVideoControlProps = {\n  duration: number;\n  onPlayPause: () => void;\n  onProgressDrag: (progress: number) => void;\n  paused: boolean;\n  progress: number;\n};\n\nexport type ImageGalleryFooterVideoControlComponent = ({\n  duration,\n  onPlayPause,\n  onProgressDrag,\n  paused,\n  progress,\n}: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;\n\nexport type ImageGalleryFooterCustomComponentProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;\n  GridIcon?: React.ReactElement;\n  leftElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;\n  rightElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;\n  ShareIcon?: React.ReactElement;\n  videoControlElement?: ImageGalleryFooterVideoControlComponent;\n};\n\ntype ImageGalleryFooterPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {\n  duration: number;\n  onPlayPause: () => void;\n  onProgressDrag: (progress: number) => void;\n  opacity: Animated.SharedValue<number>;\n  openGridView: () => void;\n  paused: boolean;\n  photo: Photo<StreamChatGenerics>;\n  photoLength: number;\n  progress: number;\n  selectedIndex: number;\n  visible: Animated.SharedValue<number>;\n};\n\nexport const ImageGalleryFooterWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    centerElement,\n    duration,\n    GridIcon,\n    leftElement,\n    onPlayPause,\n    onProgressDrag,\n    opacity,\n    openGridView,\n    paused,\n    photo,\n    photoLength,\n    progress,\n    rightElement,\n    selectedIndex,\n    ShareIcon,\n    videoControlElement,\n    visible,\n  } = props;\n\n  const [height, setHeight] = useState(200);\n  const [shareMenuOpen, setShareMenuOpen] = useState(false);\n  const {\n    theme: {\n      colors: { black },\n      imageGallery: {\n        footer: {\n          centerContainer,\n          container,\n          imageCountText,\n          innerContainer,\n          leftContainer,\n          rightContainer,\n        },\n      },\n    },\n  } = useTheme();\n  const { t } = useTranslationContext();\n\n  const footerStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      opacity: opacity.value,\n      transform: [\n        {\n          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolate.CLAMP),\n        },\n      ],\n    }),\n    [height],\n  );\n\n  const share = async () => {\n    setShareMenuOpen(true);\n    try {\n      const extension = photo.mime_type?.split('/')[1] || 'jpg';\n      const localFile = await saveFile({\n        fileName: `${photo.user?.id || 'ChatPhoto'}-${\n          photo.messageId\n        }-${selectedIndex}.${extension}`,\n        fromUrl: photo.uri,\n      });\n      await shareImage({ type: photo.mime_type, url: localFile });\n      await deleteFile({ uri: localFile });\n    } catch (error) {\n      console.log(error);\n    }\n    setShareMenuOpen(false);\n  };\n\n  return (\n    <Animated.View\n      onLayout={(event) => setHeight(event.nativeEvent.layout.height)}\n      pointerEvents={'box-none'}\n      style={styles.wrapper}\n    >\n      <ReanimatedSafeAreaView style={[container, footerStyle]}>\n        {photo.type === 'video' ? (\n          videoControlElement ? (\n            videoControlElement({ duration, onPlayPause, onProgressDrag, paused, progress })\n          ) : (\n            <ImageGalleryVideoControl\n              duration={duration}\n              onPlayPause={onPlayPause}\n              onProgressDrag={onProgressDrag}\n              paused={paused}\n              progress={progress}\n            />\n          )\n        ) : null}\n        <View style={[styles.innerContainer, innerContainer, { backgroundColor: 'white' }]}>\n          {leftElement ? (\n            leftElement({ openGridView, photo, share, shareMenuOpen })\n          ) : (\n            <TouchableOpacity disabled={shareMenuOpen} onPress={share}>\n              <View style={[styles.leftContainer, leftContainer]}>\n                {ShareIcon ? ShareIcon : <ShareIconDefault />}\n              </View>\n            </TouchableOpacity>\n          )}\n          {centerElement ? (\n            centerElement({ openGridView, photo, share, shareMenuOpen })\n          ) : (\n            <View style={[styles.centerContainer, centerContainer]}>\n              <Text style={[styles.imageCountText, { color: black }, imageCountText]}>\n                {t('{{ index }} of {{ photoLength }}', {\n                  index: photoLength - selectedIndex,\n                  photoLength,\n                })}\n              </Text>\n            </View>\n          )}\n          {rightElement ? (\n            rightElement({ openGridView, photo, share, shareMenuOpen })\n          ) : (\n            <TouchableOpacity onPress={openGridView}>\n              <View style={[styles.rightContainer, rightContainer]}>\n                {GridIcon ? GridIcon : <GridIconDefault />}\n              </View>\n            </TouchableOpacity>\n          )}\n        </View>\n      </ReanimatedSafeAreaView>\n    </Animated.View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,\n  nextProps: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    duration: prevDuration,\n    paused: prevPaused,\n    progress: prevProgress,\n    selectedIndex: prevSelectedIndex,\n  } = prevProps;\n  const {\n    duration: nextDuration,\n    paused: nextPaused,\n    progress: nextProgress,\n    selectedIndex: nextSelectedIndex,\n  } = nextProps;\n\n  const isDurationEqual = prevDuration === nextDuration;\n  if (!isDurationEqual) return false;\n\n  const isPausedEqual = prevPaused === nextPaused;\n  if (!isPausedEqual) return false;\n\n  const isProgressEqual = prevProgress === nextProgress;\n  if (!isProgressEqual) return false;\n\n  const isSelectedIndexEqual = prevSelectedIndex === nextSelectedIndex;\n  if (!isSelectedIndexEqual) return false;\n\n  return true;\n};\n\nconst MemoizedImageGalleryFooter = React.memo(\n  ImageGalleryFooterWithContext,\n  areEqual,\n) as typeof ImageGalleryFooterWithContext;\n\nexport type ImageGalleryFooterProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ImageGalleryFooterPropsWithContext<StreamChatGenerics>;\n\nexport const ImageGalleryFooter = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageGalleryFooterProps<StreamChatGenerics>,\n) => <MemoizedImageGalleryFooter {...props} />;\n\nImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';\n"]}

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

@@ -0,0 +1,145 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageGalleryVideoControl = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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 _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,
+    height: 36,
+    justifyContent: 'center',
+    width: 36
+  },
+  videoContainer: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(52, 52, 52, 0.1)',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10
+  }
+});
+
+var ImageGalleryVideoControl = _react["default"].memo(function (props) {
+  var duration = props.duration,
+      onPlayPause = props.onPlayPause,
+      onProgressDrag = props.onProgressDrag,
+      paused = props.paused,
+      progress = props.progress;
+  var videoDuration = duration ? duration / 3600 >= 1 ? _dayjs["default"].duration(duration, 'second').format('HH:mm:ss') : _dayjs["default"].duration(duration, 'second').format('mm:ss') : null;
+  var progressValueInSeconds = progress * duration;
+  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,
+      durationTextStyle = _useTheme$theme$image.durationTextStyle,
+      roundedView = _useTheme$theme$image.roundedView,
+      videoContainer = _useTheme$theme$image.videoContainer;
+
+  return _react["default"].createElement(_reactNative.View, {
+    style: [styles.videoContainer, videoContainer],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 65,
+      columnNumber: 7
+    }
+  }, _react["default"].createElement(_reactNative.TouchableOpacity, {
+    onPress: onPlayPause,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 9
+    }
+  }, _react["default"].createElement(_reactNative.View, {
+    style: [styles.roundedView, roundedView],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 11
+    }
+  }, paused ? _react["default"].createElement(_icons.Play, {
+    height: 24,
+    pathFill: '#000',
+    width: 24,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 15
+    }
+  }) : _react["default"].createElement(_icons.Pause, {
+    height: 24,
+    width: 24,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 71,
+      columnNumber: 15
+    }
+  }))), _react["default"].createElement(_reactNative.Text, {
+    style: [styles.durationTextStyle, durationTextStyle],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 75,
+      columnNumber: 9
+    }
+  }, progressDuration ? progressDuration : '00:00'), _react["default"].createElement(_ProgressControl.ProgressControl, {
+    duration: duration,
+    onPlayPause: onPlayPause,
+    onProgressDrag: onProgressDrag,
+    progress: progress,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 78,
+      columnNumber: 9
+    }
+  }), _react["default"].createElement(_reactNative.Text, {
+    style: [styles.durationTextStyle, durationTextStyle],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 84,
+      columnNumber: 9
+    }
+  }, videoDuration ? videoDuration : '00:00'));
+}, function (prevProps, nextProps) {
+  if (prevProps.duration === nextProps.duration && prevProps.paused === nextProps.paused && prevProps.progress === nextProps.progress) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+exports.ImageGalleryVideoControl = ImageGalleryVideoControl;
+ImageGalleryVideoControl.displayName = 'ImageGalleryVideoControl{imageGallery{videoControl}}';
+//# sourceMappingURL=ImageGalleryVideoControl.js.map

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

@@ -0,0 +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"]}

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

@@ -15,13 +15,13 @@ var _reactNative = require("react-native");
 
 var _bottomSheet = require("@gorhom/bottom-sheet");
 
+var _VideoThumbnail = require("../../../components/Attachment/VideoThumbnail");
+
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 
 var _utils = require("../../../utils/utils");
 
-var _Avatar = require("../../Avatar/Avatar");
-
-var _excluded = ["avatarComponent", "imageComponent"];
+var _excluded = ["imageComponent"];
 
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/components/ImageGrid.tsx";
@@ -51,20 +51,14 @@ var GridImage = function GridImage(_ref) {
   var item = _ref.item;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
-      _useTheme$theme = _useTheme.theme,
-      white = _useTheme$theme.colors.white,
-      _useTheme$theme$image = _useTheme$theme.imageGallery.grid,
-      gridAvatar = _useTheme$theme$image.gridAvatar,
-      gridAvatarWrapper = _useTheme$theme$image.gridAvatarWrapper,
-      gridImage = _useTheme$theme$image.gridImage;
-
-  var avatarComponent = item.avatarComponent,
-      imageComponent = item.imageComponent,
+      gridImage = _useTheme.theme.imageGallery.grid.gridImage;
+
+  var imageComponent = item.imageComponent,
       restItem = (0, _objectWithoutProperties2["default"])(item, _excluded);
   var numberOfImageGalleryGridColumns = restItem.numberOfImageGalleryGridColumns,
       selectAndClose = restItem.selectAndClose,
-      uri = restItem.uri,
-      user = restItem.user;
+      type = restItem.type,
+      uri = restItem.uri;
   var size = (0, _utils.vw)(100) / (numberOfImageGalleryGridColumns || 3) - 2;
 
   if (imageComponent) {
@@ -78,13 +72,10 @@ var GridImage = function GridImage(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 86,
+      lineNumber: 85,
       columnNumber: 5
     }
-  }, _react["default"].createElement(_reactNative.ImageBackground, {
-    source: {
-      uri: uri
-    },
+  }, type === 'video' ? _react["default"].createElement(_reactNative.View, {
     style: [styles.image, {
       height: size,
       width: size
@@ -93,24 +84,30 @@ var GridImage = function GridImage(_ref) {
     __source: {
       fileName: _jsxFileName,
       lineNumber: 87,
-      columnNumber: 7
+      columnNumber: 9
     }
-  }, avatarComponent ? avatarComponent({
-    item: restItem
-  }) : !!(user != null && user.image) && _react["default"].createElement(_Avatar.Avatar, {
-    containerStyle: [styles.avatarImageWrapper, {
-      backgroundColor: white
-    }, gridAvatarWrapper],
-    image: user.image,
-    imageStyle: gridAvatar,
-    size: 22,
+  }, _react["default"].createElement(_VideoThumbnail.VideoThumbnail, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 88,
+      columnNumber: 11
+    }
+  })) : _react["default"].createElement(_reactNative.Image, {
+    source: {
+      uri: uri
+    },
+    style: [styles.image, {
+      height: size,
+      width: size
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 94,
-      columnNumber: 15
+      lineNumber: 91,
+      columnNumber: 9
     }
-  })));
+  }));
 };
 
 var renderItem = function renderItem(_ref2) {
@@ -120,7 +117,7 @@ var renderItem = function renderItem(_ref2) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 116,
+      lineNumber: 103,
       columnNumber: 7
     }
   });
@@ -166,7 +163,7 @@ var ImageGrid = function ImageGrid(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 169,
+      lineNumber: 156,
       columnNumber: 5
     }
   });