stream-chat-react-native-core 4.12.0-beta.1 → 4.12.0-beta.4

package/lib/commonjs/components/{MessageInput/AudioAttachmentUploadPreview.js → Attachment/AudioAttachment.js}

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AudioAttachmentUploadPreview = void 0;
+exports.AudioAttachment = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -30,7 +30,7 @@ var _native = require("../../native");
 var _ProgressControl = require("../ProgressControl/ProgressControl");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/AudioAttachmentUploadPreview.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/AudioAttachment.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -50,7 +50,8 @@ var styles = _reactNative.StyleSheet.create({
     paddingRight: 8
   },
   fileContentContainer: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    paddingRight: 40
   },
   filenameText: {
     fontSize: 14,
@@ -96,7 +97,7 @@ var styles = _reactNative.StyleSheet.create({
   }
 });
 
-var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPreviewWithContext(props) {
+var AudioAttachmentWithContext = function AudioAttachmentWithContext(props) {
   var soundRef = _react["default"].useRef(null);
 
   var fileUploads = props.fileUploads,
@@ -357,8 +358,9 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
       grey_whisper = _useTheme$theme$color.grey_whisper,
       static_black = _useTheme$theme$color.static_black,
       static_white = _useTheme$theme$color.static_white,
+      white = _useTheme$theme$color.white,
       _useTheme$theme$messa = _useTheme$theme.messageInput.fileUploadPreview,
-      _useTheme$theme$messa2 = _useTheme$theme$messa.audioAttachmentUploadPreview,
+      _useTheme$theme$messa2 = _useTheme$theme$messa.audioAttachment,
       progressControlView = _useTheme$theme$messa2.progressControlView,
       progressDurationText = _useTheme$theme$messa2.progressDurationText,
       roundedView = _useTheme$theme$messa2.roundedView,
@@ -374,6 +376,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     style: [styles.fileContainer, index === fileUploads.length - 1 ? {
       marginBottom: 0
     } : {}, {
+      backgroundColor: white,
       borderColor: grey_whisper,
       width: -16
     }, fileContainer],
@@ -389,7 +392,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 255,
+      lineNumber: 256,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.TouchableOpacity, {
@@ -404,7 +407,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 256,
+      lineNumber: 257,
       columnNumber: 9
     }
   }, item.paused ? _react["default"].createElement(_icons.Play, {
@@ -414,7 +417,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 266,
+      lineNumber: 267,
       columnNumber: 13
     }
   }) : _react["default"].createElement(_icons.Pause, {
@@ -424,7 +427,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 268,
+      lineNumber: 269,
       columnNumber: 13
     }
   })), _react["default"].createElement(_reactNative.View, {
@@ -432,7 +435,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 271,
+      lineNumber: 272,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNative.Text, {
@@ -449,7 +452,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 272,
+      lineNumber: 273,
       columnNumber: 11
     }
   }, item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)), _react["default"].createElement(_reactNative.View, {
@@ -461,7 +464,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 291,
+      lineNumber: 292,
       columnNumber: 11
     }
   }, _native.Sound.Player && _react["default"].createElement(_native.Sound.Player, {
@@ -475,7 +478,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 300,
+      lineNumber: 301,
       columnNumber: 15
     }
   }), _react["default"].createElement(_reactNative.Text, {
@@ -485,7 +488,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 310,
+      lineNumber: 311,
       columnNumber: 13
     }
   }, progressDuration), _react["default"].createElement(_reactNative.View, {
@@ -493,7 +496,7 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 313,
+      lineNumber: 314,
       columnNumber: 13
     }
   }, _react["default"].createElement(_ProgressControl.ProgressControl, {
@@ -503,23 +506,23 @@ var AudioAttachmentUploadPreviewWithContext = function AudioAttachmentUploadPrev
     onProgressDrag: handleProgressDrag,
     progress: item.progress,
     testID: "progress-control",
-    width: 110,
+    width: 120,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 314,
+      lineNumber: 315,
       columnNumber: 15
     }
   }))))));
 };
 
-var AudioAttachmentUploadPreview = function AudioAttachmentUploadPreview(props) {
+var AudioAttachment = function AudioAttachment(props) {
   var _useMessageInputConte = (0, _contexts.useMessageInputContext)(),
       fileUploads = _useMessageInputConte.fileUploads,
       removeFile = _useMessageInputConte.removeFile,
       uploadFile = _useMessageInputConte.uploadFile;
 
-  return _react["default"].createElement(AudioAttachmentUploadPreviewWithContext, (0, _extends2["default"])({
+  return _react["default"].createElement(AudioAttachmentWithContext, (0, _extends2["default"])({
     fileUploads: fileUploads,
     removeFile: removeFile,
     uploadFile: uploadFile
@@ -528,11 +531,11 @@ var AudioAttachmentUploadPreview = function AudioAttachmentUploadPreview(props)
     __source: {
       fileName: _jsxFileName,
       lineNumber: 354,
-      columnNumber: 5
+      columnNumber: 10
     }
   }));
 };
 
-exports.AudioAttachmentUploadPreview = AudioAttachmentUploadPreview;
-AudioAttachmentUploadPreview.displayName = 'AudioAttachmentUploadPreview{messageInput{autoAttachmentUploadPreview}}';
-//# sourceMappingURL=AudioAttachmentUploadPreview.js.map
+exports.AudioAttachment = AudioAttachment;
+AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';
+//# sourceMappingURL=AudioAttachment.js.map

package/lib/commonjs/components/Attachment/AudioAttachment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AudioAttachment.tsx"],"names":["dayjs","extend","duration","FILE_PREVIEW_HEIGHT","styles","StyleSheet","create","fileContainer","borderRadius","borderWidth","flexDirection","height","paddingLeft","paddingRight","fileContentContainer","filenameText","fontSize","fontWeight","fileTextContainer","justifyContent","flatList","marginBottom","maxHeight","overlay","marginLeft","marginRight","progressControlView","flex","progressDurationText","roundedView","alignItems","alignSelf","display","elevation","shadowOffset","width","shadowOpacity","shadowRadius","AudioAttachmentWithContext","props","soundRef","React","useRef","fileUploads","index","item","onLoad","onPlayPause","onProgress","handleLoad","payload","id","handleProgress","data","currentTime","seekableDuration","handlePlayPause","isPausedStatusAvailable","current","undefined","progress","seek","setPositionAsync","paused","playAsync","pauseAsync","handleProgressDrag","position","handleEnd","onPlaybackStatusUpdate","playbackStatus","isLoaded","error","console","log","durationMillis","positionMillis","isPlaying","isBuffering","didJustFinish","isLooping","Sound","Player","initiateSound","file","uri","initializeSound","stopAsync","unloadAsync","initalPlayPause","theme","colors","accent_blue","black","grey_dark","grey_whisper","static_black","static_white","white","messageInput","fileUploadPreview","audioAttachment","progressValueInSeconds","progressDuration","format","lastIndexOfDot","name","lastIndexOf","length","backgroundColor","borderColor","shadowColor","color","I18nManager","isRTL","writingDirection","slice","AudioAttachment","removeFile","uploadFile","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport dayjs from 'dayjs';\nimport duration from 'dayjs/plugin/duration';\n\nimport {\n  FileUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n  useTheme,\n} from '../../contexts';\nimport { Pause, Play } from '../../icons';\nimport {\n  PlaybackStatus,\n  Sound,\n  SoundReturnType,\n  VideoPayloadData,\n  VideoProgressData,\n} from '../../native';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { ProgressControl } from '../ProgressControl/ProgressControl';\n\ndayjs.extend(duration);\n\nconst FILE_PREVIEW_HEIGHT = 70;\n\nconst styles = StyleSheet.create({\n  fileContainer: {\n    borderRadius: 12,\n    borderWidth: 1,\n    flexDirection: 'row',\n    height: FILE_PREVIEW_HEIGHT,\n    paddingLeft: 8,\n    paddingRight: 8,\n  },\n  fileContentContainer: { flexDirection: 'row', paddingRight: 40 },\n  filenameText: {\n    fontSize: 14,\n    fontWeight: 'bold',\n    paddingLeft: 10,\n  },\n  fileTextContainer: {\n    justifyContent: 'space-around',\n  },\n  flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },\n  overlay: {\n    borderRadius: 12,\n    marginLeft: 8,\n    marginRight: 8,\n  },\n  progressControlView: {\n    flex: 8,\n  },\n  progressDurationText: {\n    flex: 4,\n    fontSize: 12,\n    paddingLeft: 10,\n    paddingRight: 8,\n  },\n  roundedView: {\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 50,\n    display: 'flex',\n    elevation: 4,\n    height: 36,\n    justifyContent: 'center',\n    shadowOffset: {\n      height: 2,\n      width: 0,\n    },\n    shadowOpacity: 0.23,\n    shadowRadius: 2.62,\n    width: 36,\n  },\n});\n\nexport type AudioAttachmentPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'fileUploads' | 'removeFile' | 'uploadFile'\n> & {\n  index: number;\n  item: Omit<FileUpload, 'state'>;\n  onLoad: (index: string, duration: number) => void;\n  onPlayPause: (index: string, pausedStatus?: boolean) => void;\n  onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;\n  testID?: string;\n};\n\nconst AudioAttachmentWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: AudioAttachmentPropsWithContext<StreamChatGenerics>,\n) => {\n  const soundRef = React.useRef<SoundReturnType | null>(null);\n  const { fileUploads, index, item, onLoad, onPlayPause, onProgress } = props;\n\n  const handleLoad = (payload: VideoPayloadData) => {\n    onLoad(item.id, payload.duration);\n  };\n\n  const handleProgress = (data: VideoProgressData) => {\n    if (data.currentTime && data.seekableDuration) {\n      onProgress(item.id, data.currentTime);\n    }\n  };\n\n  const handlePlayPause = async (isPausedStatusAvailable?: boolean) => {\n    if (soundRef.current) {\n      if (isPausedStatusAvailable === undefined) {\n        if (item.progress === 1) {\n          // For native CLI\n          if (soundRef.current.seek) soundRef.current.seek(0);\n          // For expo CLI\n          if (soundRef.current.setPositionAsync) soundRef.current.setPositionAsync(0);\n        }\n        if (item.paused) {\n          if (soundRef.current.playAsync) await soundRef.current.playAsync();\n          onPlayPause(item.id, false);\n        } else {\n          if (soundRef.current.pauseAsync) await soundRef.current.pauseAsync();\n          onPlayPause(item.id, true);\n        }\n      } else {\n        onPlayPause(item.id, isPausedStatusAvailable);\n      }\n    }\n  };\n\n  const handleProgressDrag = async (position: number) => {\n    onProgress(item.id, position);\n    if (soundRef.current?.seek) soundRef.current.seek(position);\n    if (soundRef.current?.setPositionAsync) {\n      await soundRef.current.setPositionAsync(position * 1000);\n    }\n  };\n\n  const handleEnd = () => {\n    onPlayPause(item.id, true);\n    onProgress(item.id, item.duration, true);\n  };\n\n  const onPlaybackStatusUpdate = (playbackStatus: PlaybackStatus) => {\n    if (!playbackStatus.isLoaded) {\n      // Update your UI for the unloaded state\n      if (playbackStatus.error) {\n        console.log(`Encountered a fatal error during playback: ${playbackStatus.error}`);\n      }\n    } else {\n      const { durationMillis, positionMillis } = playbackStatus;\n      onLoad(item.id, durationMillis / 1000);\n      // Update your UI for the loaded state\n      if (playbackStatus.isPlaying) {\n        // Update your UI for the playing state\n        onProgress(item.id, positionMillis / 1000);\n      } else {\n        // Update your UI for the paused state\n      }\n\n      if (playbackStatus.isBuffering) {\n        // Update your UI for the buffering state\n      }\n\n      if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {\n        // The player has just finished playing and will stop. Maybe you want to play something else?\n        // status: opposite of pause,says i am playing\n        handleEnd();\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (Sound.Player === null) {\n      const initiateSound = async () => {\n        if (item && item.file && item.file.uri) {\n          soundRef.current = await Sound.initializeSound(\n            { uri: item.file.uri },\n            {},\n            onPlaybackStatusUpdate,\n          );\n        }\n      };\n      initiateSound();\n    }\n\n    return () => {\n      if (soundRef.current?.stopAsync && soundRef.current.unloadAsync) {\n        soundRef.current.stopAsync();\n        soundRef.current.unloadAsync();\n      }\n    };\n  }, []);\n\n  // This is needed for expo applications where the rerender doesn't occur on time thefore you need to update the state of the sound.\n  useEffect(() => {\n    const initalPlayPause = async () => {\n      if (soundRef.current) {\n        if (item.paused) {\n          if (soundRef.current.pauseAsync) await soundRef.current.pauseAsync();\n        } else {\n          if (soundRef.current.playAsync) await soundRef.current.playAsync();\n        }\n      }\n    };\n    if (!Sound.Player) {\n      initalPlayPause();\n    }\n  }, [item.paused]);\n\n  const {\n    theme: {\n      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white, white },\n      messageInput: {\n        fileUploadPreview: {\n          audioAttachment: { progressControlView, progressDurationText, roundedView },\n          fileContainer,\n          fileContentContainer,\n          filenameText,\n          fileTextContainer,\n        },\n      },\n    },\n  } = useTheme();\n\n  const progressValueInSeconds = (item.duration as number) * (item.progress as number);\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    : '00:00';\n\n  const lastIndexOfDot = item.file.name.lastIndexOf('.');\n\n  return (\n    <View\n      style={[\n        styles.fileContainer,\n        index === fileUploads.length - 1\n          ? {\n              marginBottom: 0,\n            }\n          : {},\n        {\n          backgroundColor: white,\n          borderColor: grey_whisper,\n          width: -16,\n        },\n        fileContainer,\n      ]}\n      testID='audio-attachment-upload-preview'\n    >\n      <View style={[styles.fileContentContainer, fileContentContainer]}>\n        <TouchableOpacity\n          accessibilityLabel='Play Pause Button'\n          onPress={() => handlePlayPause()}\n          style={[\n            styles.roundedView,\n            roundedView,\n            { backgroundColor: static_white, shadowColor: black },\n          ]}\n        >\n          {item.paused ? (\n            <Play height={24} pathFill={static_black} width={24} />\n          ) : (\n            <Pause height={24} pathFill={static_black} width={24} />\n          )}\n        </TouchableOpacity>\n        <View style={[styles.fileTextContainer, fileTextContainer]}>\n          <Text\n            accessibilityLabel='File Name'\n            numberOfLines={1}\n            style={[\n              styles.filenameText,\n              {\n                color: black,\n                width:\n                  16 - // 16 = horizontal padding\n                  40 - // 40 = file icon size\n                  24 - // 24 = close icon size\n                  24, // 24 = internal padding\n              },\n              I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },\n              filenameText,\n            ]}\n          >\n            {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}\n          </Text>\n          <View\n            style={{\n              alignItems: 'center',\n              display: 'flex',\n              flexDirection: 'row',\n            }}\n          >\n            {/* <ExpoSoundPlayer filePaused={!!item.paused} soundRef={soundRef} /> */}\n            {Sound.Player && (\n              <Sound.Player\n                onEnd={handleEnd}\n                onLoad={handleLoad}\n                onProgress={handleProgress}\n                paused={item.paused as boolean}\n                soundRef={soundRef}\n                testID='sound-player'\n                uri={item.file.uri}\n              />\n            )}\n            <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>\n              {progressDuration}\n            </Text>\n            <View style={[styles.progressControlView, progressControlView]}>\n              <ProgressControl\n                duration={item.duration as number}\n                filledColor={accent_blue}\n                onPlayPause={handlePlayPause}\n                onProgressDrag={handleProgressDrag}\n                progress={item.progress as number}\n                testID='progress-control'\n                width={120}\n              />\n            </View>\n          </View>\n        </View>\n      </View>\n    </View>\n  );\n};\n\nexport type AudioAttachmentProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<AudioAttachmentPropsWithContext<StreamChatGenerics>> & {\n  index: number;\n  item: Omit<FileUpload, 'state'>;\n  onLoad: (index: string, duration: number) => void;\n  onPlayPause: (index: string, pausedStatus?: boolean) => void;\n  onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;\n  testID: string;\n};\n\n/**\n * AudioAttachment\n * UI Component to preview the audio files\n */\nexport const AudioAttachment = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: AudioAttachmentProps<StreamChatGenerics>,\n) => {\n  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();\n\n  return <AudioAttachmentWithContext {...{ fileUploads, removeFile, uploadFile }} {...props} />;\n};\n\nAudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';\n"]}

package/lib/commonjs/components/Attachment/FileAttachmentGroup.js

@@ -1,11 +1,17 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileAttachmentGroup = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -13,13 +19,21 @@ var _Attachment = require("./Attachment");
 
 var _MessageContext = require("../../contexts/messageContext/MessageContext");
 
+var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
+
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _native = require("../../native");
+
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/FileAttachmentGroup.tsx";
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var styles = _reactNative.StyleSheet.create({
   container: {
     padding: 4
@@ -28,11 +42,67 @@ var styles = _reactNative.StyleSheet.create({
 
 var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(props) {
   var Attachment = props.Attachment,
+      AudioAttachment = props.AudioAttachment,
       files = props.files,
       messageId = props.messageId,
       _props$styles = props.styles,
       stylesProp = _props$styles === void 0 ? {} : _props$styles;
 
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      filesToDisplay = _useState2[0],
+      setFilesToDisplay = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setFilesToDisplay(files.map(function (file) {
+      return (0, _extends2["default"])({}, file, {
+        duration: 0,
+        paused: true,
+        progress: 0
+      });
+    }));
+  }, [files]);
+
+  var onLoad = function onLoad(index, duration) {
+    setFilesToDisplay(function (prevFilesToDisplay) {
+      return prevFilesToDisplay.map(function (fileToDisplay, id) {
+        return (0, _extends2["default"])({}, fileToDisplay, {
+          duration: id.toString() === index ? duration : fileToDisplay.duration
+        });
+      });
+    });
+  };
+
+  var onProgress = function onProgress(index, currentTime, hasEnd) {
+    setFilesToDisplay(function (prevFileUploads) {
+      return prevFileUploads.map(function (fileUpload, id) {
+        return (0, _extends2["default"])({}, fileUpload, {
+          progress: id.toString() === index ? hasEnd ? 1 : currentTime ? currentTime / fileUpload.duration : 0 : fileUpload.progress
+        });
+      });
+    });
+  };
+
+  var onPlayPause = function onPlayPause(index, pausedStatus) {
+    if (pausedStatus === false) {
+      setFilesToDisplay(function (prevFileUploads) {
+        return prevFileUploads.map(function (fileUpload, id) {
+          return (0, _extends2["default"])({}, fileUpload, {
+            paused: id.toString() === index ? false : true
+          });
+        });
+      });
+    } else {
+      setFilesToDisplay(function (prevFileUploads) {
+        return prevFileUploads.map(function (fileUpload) {
+          return (0, _extends2["default"])({}, fileUpload, {
+            paused: true
+          });
+        });
+      });
+    }
+  };
+
   var _useTheme = (0, _ThemeContext.useTheme)(),
       container = _useTheme.theme.messageSimple.fileAttachmentGroup.container;
 
@@ -41,10 +111,10 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 123,
       columnNumber: 5
     }
-  }, files.map(function (file, index) {
+  }, filesToDisplay.map(function (file, index) {
     return _react["default"].createElement(_reactNative.View, {
       key: messageId + "-" + index,
       style: [{
@@ -53,16 +123,46 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 56,
+        lineNumber: 125,
         columnNumber: 9
       }
-    }, _react["default"].createElement(Attachment, {
+    }, file.type === 'audio' && (0, _native.isAudioPackageAvailable)() ? _react["default"].createElement(_reactNative.View, {
+      accessibilityLabel: "audio-attachment-preview",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 133,
+        columnNumber: 13
+      }
+    }, _react["default"].createElement(AudioAttachment, {
+      index: index,
+      item: {
+        duration: file.duration,
+        file: {
+          name: file.title,
+          uri: file.asset_url
+        },
+        id: index.toString(),
+        paused: file.paused,
+        progress: file.progress
+      },
+      onLoad: onLoad,
+      onPlayPause: onPlayPause,
+      onProgress: onProgress,
+      testID: "audio-attachment-preview",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 134,
+        columnNumber: 15
+      }
+    })) : _react["default"].createElement(Attachment, {
       attachment: file,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 63,
-        columnNumber: 11
+        lineNumber: 150,
+        columnNumber: 13
       }
     }));
   }));
@@ -71,8 +171,7 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
 var areEqual = function areEqual(prevProps, nextProps) {
   var prevFiles = prevProps.files;
   var nextFiles = nextProps.files;
-  var filesEqual = prevFiles.length === nextFiles.length;
-  return filesEqual;
+  return prevFiles.length === nextFiles.length;
 };
 
 var MemoizedFileAttachmentGroup = _react["default"].memo(FileAttachmentGroupWithContext, areEqual);
@@ -88,16 +187,20 @@ var FileAttachmentGroup = function FileAttachmentGroup(props) {
       _useMessagesContext$A = _useMessagesContext.Attachment,
       Attachment = _useMessagesContext$A === void 0 ? _Attachment.Attachment : _useMessagesContext$A;
 
+  var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
+      AudioAttachment = _useMessageInputConte.AudioAttachment;
+
   var files = propFiles || contextFiles;
   if (!files.length) return null;
   return _react["default"].createElement(MemoizedFileAttachmentGroup, {
     Attachment: Attachment,
+    AudioAttachment: AudioAttachment,
     files: files,
     messageId: messageId,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 196,
       columnNumber: 5
     }
   });

package/lib/commonjs/components/Attachment/FileAttachmentGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FileAttachmentGroup.tsx"],"names":["styles","StyleSheet","create","container","padding","FileAttachmentGroupWithContext","props","Attachment","files","messageId","stylesProp","theme","messageSimple","fileAttachmentGroup","map","file","index","paddingBottom","length","attachmentContainer","areEqual","prevProps","nextProps","prevFiles","nextFiles","filesEqual","MemoizedFileAttachmentGroup","React","memo","FileAttachmentGroup","propFiles","contextFiles","AttachmentDefault","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AAIA;;AAIA;;;;;AAIA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,OAAO,EAAE;AADA;AADoB,CAAlB,CAAf;;AAoBA,IAAMC,8BAA8B,GAAG,SAAjCA,8BAAiC,CAGrCC,KAHqC,EAIlC;AACH,MAAQC,UAAR,GAAkED,KAAlE,CAAQC,UAAR;AAAA,MAAoBC,KAApB,GAAkEF,KAAlE,CAAoBE,KAApB;AAAA,MAA2BC,SAA3B,GAAkEH,KAAlE,CAA2BG,SAA3B;AAAA,sBAAkEH,KAAlE,CAAsCN,MAAtC;AAAA,MAA8CU,UAA9C,8BAA2D,EAA3D;;AAEA,kBAMI,6BANJ;AAAA,MAG6BP,SAH7B,aACEQ,KADF,CAEIC,aAFJ,CAGMC,mBAHN,CAG6BV,SAH7B;;AAQA,SACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACH,MAAM,CAACG,SAAR,EAAmBA,SAAnB,EAA8BO,UAAU,CAACP,SAAzC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGK,KAAK,CAACM,GAAN,CAAU,UAACC,IAAD,EAAOC,KAAP;AAAA,WACT,gCAAC,iBAAD;AACE,MAAA,GAAG,EAAKP,SAAL,SAAkBO,KADvB;AAEE,MAAA,KAAK,EAAE,CACL;AAAEC,QAAAA,aAAa,EAAED,KAAK,KAAKR,KAAK,CAACU,MAAN,GAAe,CAAzB,GAA6B,CAA7B,GAAiC;AAAlD,OADK,EAELR,UAAU,CAACS,mBAFN,CAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOE,gCAAC,UAAD;AAAY,MAAA,UAAU,EAAEJ,IAAxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAPF,CADS;AAAA,GAAV,CADH,CADF;AAeD,CA9BD;;AAgCA,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CACfC,SADe,EAEfC,SAFe,EAGZ;AACH,MAAeC,SAAf,GAA6BF,SAA7B,CAAQb,KAAR;AACA,MAAegB,SAAf,GAA6BF,SAA7B,CAAQd,KAAR;AAEA,MAAMiB,UAAU,GAAGF,SAAS,CAACL,MAAV,KAAqBM,SAAS,CAACN,MAAlD;AAEA,SAAOO,UAAP;AACD,CAVD;;AAYA,IAAMC,2BAA2B,GAAGC,kBAAMC,IAAN,CAClCvB,8BADkC,EAElCe,QAFkC,CAApC;;AAUO,IAAMS,mBAAmB,GAAG,SAAtBA,mBAAsB,CAGjCvB,KAHiC,EAI9B;AACH,MAAewB,SAAf,GAAwCxB,KAAxC,CAAQE,KAAR;AAAA,MAA0BC,SAA1B,GAAwCH,KAAxC,CAA0BG,SAA1B;;AAEA,2BAAgC,wCAAhC;AAAA,MAAesB,YAAf,sBAAQvB,KAAR;;AAEA,4BAA2C,0CAA3C;AAAA,kDAAQD,UAAR;AAAA,MAAQA,UAAR,sCAAqByB,sBAArB;;AAEA,MAAMxB,KAAK,GAAGsB,SAAS,IAAIC,YAA3B;AAEA,MAAI,CAACvB,KAAK,CAACU,MAAX,EAAmB,OAAO,IAAP;AAEnB,SACE,gCAAC,2BAAD;AAEIX,IAAAA,UAAU,EAAVA,UAFJ;AAGIC,IAAAA,KAAK,EAALA,KAHJ;AAIIC,IAAAA,SAAS,EAATA,SAJJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF;AASD,CAxBM;;;AA0BPoB,mBAAmB,CAACI,WAApB,GAAkC,yDAAlC","sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { Attachment as AttachmentDefault } from './Attachment';\n\nimport {\n  MessageContextValue,\n  useMessageContext,\n} from '../../contexts/messageContext/MessageContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nconst styles = StyleSheet.create({\n  container: {\n    padding: 4,\n  },\n});\n\nexport type FileAttachmentGroupPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &\n  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {\n    /**\n     * The unique id for the message with file attachments\n     */\n    messageId: string;\n    styles?: Partial<{\n      attachmentContainer: StyleProp<ViewStyle>;\n      container: StyleProp<ViewStyle>;\n    }>;\n  };\n\nconst FileAttachmentGroupWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { Attachment, files, messageId, styles: stylesProp = {} } = props;\n\n  const {\n    theme: {\n      messageSimple: {\n        fileAttachmentGroup: { container },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <View style={[styles.container, container, stylesProp.container]}>\n      {files.map((file, index) => (\n        <View\n          key={`${messageId}-${index}`}\n          style={[\n            { paddingBottom: index !== files.length - 1 ? 4 : 0 },\n            stylesProp.attachmentContainer,\n          ]}\n        >\n          <Attachment attachment={file} />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n  nextProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { files: prevFiles } = prevProps;\n  const { files: nextFiles } = nextProps;\n\n  const filesEqual = prevFiles.length === nextFiles.length;\n\n  return filesEqual;\n};\n\nconst MemoizedFileAttachmentGroup = React.memo(\n  FileAttachmentGroupWithContext,\n  areEqual,\n) as typeof FileAttachmentGroupWithContext;\n\nexport type FileAttachmentGroupProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>> &\n  Pick<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>;\n\nexport const FileAttachmentGroup = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupProps<StreamChatGenerics>,\n) => {\n  const { files: propFiles, messageId } = props;\n\n  const { files: contextFiles } = useMessageContext<StreamChatGenerics>();\n\n  const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();\n\n  const files = propFiles || contextFiles;\n\n  if (!files.length) return null;\n\n  return (\n    <MemoizedFileAttachmentGroup\n      {...{\n        Attachment,\n        files,\n        messageId,\n      }}\n    />\n  );\n};\n\nFileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';\n"]}
+{"version":3,"sources":["FileAttachmentGroup.tsx"],"names":["styles","StyleSheet","create","container","padding","FileAttachmentGroupWithContext","props","Attachment","AudioAttachment","files","messageId","stylesProp","filesToDisplay","setFilesToDisplay","map","file","duration","paused","progress","onLoad","index","prevFilesToDisplay","fileToDisplay","id","toString","onProgress","currentTime","hasEnd","prevFileUploads","fileUpload","onPlayPause","pausedStatus","theme","messageSimple","fileAttachmentGroup","paddingBottom","length","attachmentContainer","type","name","title","uri","asset_url","areEqual","prevProps","nextProps","prevFiles","nextFiles","MemoizedFileAttachmentGroup","React","memo","FileAttachmentGroup","propFiles","contextFiles","AttachmentDefault","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport type { Attachment } from 'stream-chat';\n\nimport { Attachment as AttachmentDefault } from './Attachment';\n\nimport {\n  MessageContextValue,\n  useMessageContext,\n} from '../../contexts/messageContext/MessageContext';\nimport {\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { isAudioPackageAvailable } from '../../native';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nconst styles = StyleSheet.create({\n  container: {\n    padding: 4,\n  },\n});\n\nexport type FileAttachmentGroupPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &\n  Pick<MessageInputContextValue<StreamChatGenerics>, 'AudioAttachment'> &\n  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {\n    /**\n     * The unique id for the message with file attachments\n     */\n    messageId: string;\n    styles?: Partial<{\n      attachmentContainer: StyleProp<ViewStyle>;\n      container: StyleProp<ViewStyle>;\n    }>;\n  };\n\ntype FilesToDisplayType<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Attachment<StreamChatGenerics> & {\n  duration: number;\n  paused: boolean;\n  progress: number;\n};\n\nconst FileAttachmentGroupWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;\n  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);\n\n  useEffect(() => {\n    setFilesToDisplay(files.map((file) => ({ ...file, duration: 0, paused: true, progress: 0 })));\n  }, [files]);\n\n  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.\n  const onLoad = (index: string, duration: number) => {\n    setFilesToDisplay((prevFilesToDisplay) =>\n      prevFilesToDisplay.map((fileToDisplay, id) => ({\n        ...fileToDisplay,\n        duration: id.toString() === index ? duration : fileToDisplay.duration,\n      })),\n    );\n  };\n\n  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.\n  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {\n    setFilesToDisplay((prevFileUploads) =>\n      prevFileUploads.map((fileUpload, id) => ({\n        ...fileUpload,\n        progress:\n          id.toString() === index\n            ? hasEnd\n              ? 1\n              : currentTime\n              ? currentTime / (fileUpload.duration as number)\n              : 0\n            : fileUpload.progress,\n      })),\n    );\n  };\n\n  // The handler which controls or sets the paused/played state of the audio.\n  const onPlayPause = (index: string, pausedStatus?: boolean) => {\n    if (pausedStatus === false) {\n      // If the status is false we set the audio with the index as playing and the others as paused.\n      setFilesToDisplay((prevFileUploads) =>\n        prevFileUploads.map((fileUpload, id) => ({\n          ...fileUpload,\n          paused: id.toString() === index ? false : true,\n        })),\n      );\n    } else {\n      // If the status is true we simply set all the audio's paused state as true.\n      setFilesToDisplay((prevFileUploads) =>\n        prevFileUploads.map((fileUpload) => ({\n          ...fileUpload,\n          paused: true,\n        })),\n      );\n    }\n  };\n\n  const {\n    theme: {\n      messageSimple: {\n        fileAttachmentGroup: { container },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <View style={[styles.container, container, stylesProp.container]}>\n      {filesToDisplay.map((file, index) => (\n        <View\n          key={`${messageId}-${index}`}\n          style={[\n            { paddingBottom: index !== files.length - 1 ? 4 : 0 },\n            stylesProp.attachmentContainer,\n          ]}\n        >\n          {file.type === 'audio' && isAudioPackageAvailable() ? (\n            <View accessibilityLabel='audio-attachment-preview'>\n              <AudioAttachment\n                index={index}\n                item={{\n                  duration: file.duration,\n                  file: { name: file.title as string, uri: file.asset_url },\n                  id: index.toString(),\n                  paused: file.paused,\n                  progress: file.progress,\n                }}\n                onLoad={onLoad}\n                onPlayPause={onPlayPause}\n                onProgress={onProgress}\n                testID='audio-attachment-preview'\n              />\n            </View>\n          ) : (\n            <Attachment attachment={file} />\n          )}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n  nextProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { files: prevFiles } = prevProps;\n  const { files: nextFiles } = nextProps;\n\n  return prevFiles.length === nextFiles.length;\n};\n\nconst MemoizedFileAttachmentGroup = React.memo(\n  FileAttachmentGroupWithContext,\n  areEqual,\n) as typeof FileAttachmentGroupWithContext;\n\nexport type FileAttachmentGroupProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>> &\n  Pick<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>;\n\nexport const FileAttachmentGroup = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupProps<StreamChatGenerics>,\n) => {\n  const { files: propFiles, messageId } = props;\n\n  const { files: contextFiles } = useMessageContext<StreamChatGenerics>();\n\n  const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();\n\n  const { AudioAttachment } = useMessageInputContext<StreamChatGenerics>();\n\n  const files = propFiles || contextFiles;\n\n  if (!files.length) return null;\n\n  return (\n    <MemoizedFileAttachmentGroup\n      {...{\n        Attachment,\n        AudioAttachment,\n        files,\n        messageId,\n      }}\n    />\n  );\n};\n\nFileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';\n"]}

package/lib/commonjs/components/Attachment/Gallery.js

@@ -78,6 +78,12 @@ var styles = _reactNative.StyleSheet.create({
     left: 4,
     position: 'absolute'
   },
+  imageLoadingIndicatorContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%'
+  },
   imageLoadingIndicatorStyle: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -161,7 +167,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 186,
+      lineNumber: 192,
       columnNumber: 5
     }
   }, thumbnailGrid.map(function (rows, colIndex) {
@@ -175,7 +181,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 203,
+        lineNumber: 209,
         columnNumber: 11
       }
     }, rows.map(function (thumbnail, rowIndex) {
@@ -225,7 +231,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 235,
+          lineNumber: 241,
           columnNumber: 17
         }
       });
@@ -329,7 +335,7 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 359,
+      lineNumber: 365,
       columnNumber: 5
     }
   }), thumbnail.type === 'video' ? _react["default"].createElement(VideoThumbnail, {
@@ -341,7 +347,7 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 401,
+      lineNumber: 407,
       columnNumber: 9
     }
   }) : _react["default"].createElement(_reactNative.View, {
@@ -349,7 +355,7 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 413,
+      lineNumber: 419,
       columnNumber: 9
     }
   }, _react["default"].createElement(GalleryImageThumbnail, {
@@ -360,7 +366,7 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 414,
+      lineNumber: 420,
       columnNumber: 11
     }
   })), colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? _react["default"].createElement(_reactNative.View, {
@@ -370,7 +376,7 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 423,
+      lineNumber: 429,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNative.Text, {
@@ -378,7 +384,7 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 431,
+      lineNumber: 437,
       columnNumber: 11
     }
   }, "+" + (imagesAndVideos.length - 4))) : null);
@@ -407,7 +413,7 @@ var GalleryImageThumbnail = function GalleryImageThumbnail(_ref2) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 463,
+      lineNumber: 469,
       columnNumber: 5
     }
   }, isLoadingImageError ? _react["default"].createElement(ImageLoadingFailedIndicator, {
@@ -415,7 +421,7 @@ var GalleryImageThumbnail = function GalleryImageThumbnail(_ref2) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 470,
+      lineNumber: 476,
       columnNumber: 9
     }
   }) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(MemoizedGalleryImage, {
@@ -439,17 +445,15 @@ var GalleryImageThumbnail = function GalleryImageThumbnail(_ref2) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 473,
+      lineNumber: 479,
       columnNumber: 11
     }
   }), isLoadingImage && _react["default"].createElement(_reactNative.View, {
-    style: {
-      position: 'absolute'
-    },
+    style: [styles.imageLoadingIndicatorContainer],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 493,
+      lineNumber: 499,
       columnNumber: 13
     }
   }, _react["default"].createElement(ImageLoadingIndicator, {
@@ -457,7 +461,7 @@ var GalleryImageThumbnail = function GalleryImageThumbnail(_ref2) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 494,
+      lineNumber: 500,
       columnNumber: 15
     }
   }))));
@@ -577,7 +581,7 @@ var Gallery = function Gallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 630,
+      lineNumber: 636,
       columnNumber: 5
     }
   });