stream-chat-react-native-core 5.1.0 → 5.2.0

package/lib/module/components/Chat/Chat.js

@@ -33,6 +33,8 @@ var _ChannelsStateContext = require("../../contexts/channelsStateContext/Channel
 
 var _ChatContext = require("../../contexts/chatContext/ChatContext");
 
+var _DebugContext = require("../../contexts/debugContext/DebugContext");
+
 var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
@@ -97,12 +99,22 @@ var ChatWithContext = function ChatWithContext(props) {
       isOnline = _useIsOnline.isOnline;
 
   var mutedUsers = (0, _useMutedUsers.useMutedUsers)(client);
+  var debugRef = (0, _DebugContext.useDebugContext)();
+  var isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
   (0, _react.useEffect)(function () {
     if (client) {
       client.setUserAgent(_native.SDK + "-" + _reactNative.Platform.OS + "-" + _version.version);
       client.recoverStateOnReconnect = false;
       client.persistUserOnConnectionFailure = enableOfflineSupport;
     }
+
+    if (isDebugModeEnabled) {
+      if (debugRef.current.setEventType) debugRef.current.setEventType('send');
+      if (debugRef.current.setSendEventParams) debugRef.current.setSendEventParams({
+        action: 'Client',
+        data: client.user
+      });
+    }
   }, [client]);
 
   var setActiveChannel = function setActiveChannel(newChannel) {
@@ -143,7 +155,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 216,
+      lineNumber: 229,
       columnNumber: 5
     }
   }, _react["default"].createElement(_TranslationContext.TranslationProvider, {
@@ -153,7 +165,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 217,
+      lineNumber: 230,
       columnNumber: 7
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -161,14 +173,14 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 220,
+      lineNumber: 233,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ChannelsStateContext.ChannelsStateProvider, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 221,
+      lineNumber: 234,
       columnNumber: 11
     }
   }, children))));
@@ -184,7 +196,7 @@ var Chat = function Chat(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 256,
+      lineNumber: 269,
       columnNumber: 10
     }
   }));

package/lib/module/components/Chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chat.tsx"],"names":["ChatWithContext","props","children","client","closeConnectionOnBackground","enableOfflineSupport","i18nInstance","style","channel","setChannel","t","key","tDateTimeParser","input","translators","setTranslators","loadingTranslators","connectionRecovering","isOnline","mutedUsers","setUserAgent","SDK","Platform","OS","version","recoverStateOnReconnect","persistUserOnConnectionFailure","setActiveChannel","newChannel","appSettings","subscribeConnectionRecoveredCallback","chatContext","QuickSqliteClient","initializeDatabase","userLanguage","user","language","DEFAULT_USER_LANGUAGE","Chat"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren, useEffect, useState } from 'react';\nimport { Platform } from 'react-native';\n\nimport Dayjs from 'dayjs';\n\nimport type { Channel } from 'stream-chat';\n\nimport { useAppSettings } from './hooks/useAppSettings';\nimport { useConnectionRecovered } from './hooks/useConnectionRecovered';\nimport { useCreateChatContext } from './hooks/useCreateChatContext';\nimport { useIsOnline } from './hooks/useIsOnline';\nimport { useMutedUsers } from './hooks/useMutedUsers';\n\nimport { useSyncDatabase } from './hooks/useSyncDatabase';\n\nimport { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';\nimport { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';\nimport { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';\nimport { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';\nimport type { Theme } from '../../contexts/themeContext/utils/theme';\nimport {\n  DEFAULT_USER_LANGUAGE,\n  TranslationProvider,\n  TranslatorFunctions,\n} from '../../contexts/translationContext/TranslationContext';\nimport { useStreami18n } from '../../hooks/useStreami18n';\nimport init from '../../init';\n\nimport { SDK } from '../../native';\nimport { QuickSqliteClient } from '../../store/QuickSqliteClient';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { Streami18n } from '../../utils/Streami18n';\nimport { version } from '../../version.json';\n\ninit();\n\nexport type ChatProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {\n  /**\n   * When false, ws connection won't be disconnection upon backgrounding the app.\n   * To receive push notifications, its necessary that user doesn't have active\n   * websocket connection. So by default, we disconnect websocket connection when\n   * app goes to background, and reconnect when app comes to foreground.\n   */\n  closeConnectionOnBackground?: boolean;\n  /**\n   * Enables offline storage and loading for chat data.\n   */\n  enableOfflineSupport?: boolean;\n  /**\n   * Instance of Streami18n class should be provided to Chat component to enable internationalization.\n   *\n   * Stream provides following list of in-built translations:\n   * 1. English (en)\n   * 2. Dutch (nl)\n   * 3. ...\n   * 4. ...\n   *\n   * Simplest way to start using chat components in one of the in-built languages would be following:\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * If you would like to override certain keys in in-built translation.\n   * UI will be automatically updated in this case.\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   *\n   * i18n.registerTranslation('nl', {\n   *  'Nothing yet...': 'Nog Niet ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n   * });\n   *\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * You can use the same function to add whole new language.\n   *\n   * ```\n   * const i18n = new Streami18n('it');\n   *\n   * i18n.registerTranslation('it', {\n   *  'Nothing yet...': 'Non ancora ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',\n   * });\n   *\n   * // Make sure to call setLanguage to reflect new language in UI.\n   * i18n.setLanguage('it');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   */\n  i18nInstance?: Streami18n;\n  /**\n   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)\n   *\n   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.\n   *\n   * ```\n   * import type { DeepPartial, Theme } from 'stream-chat-react-native';\n   *\n   * const theme: DeepPartial<Theme> = {\n   *   messageSimple: {\n   *     file: {\n   *       container: {\n   *         backgroundColor: 'red',\n   *       },\n   *       icon: {\n   *         height: 16,\n   *         width: 16,\n   *       },\n   *     },\n   *   },\n   * };\n   *\n   * <Chat style={theme}>\n   * </Chat>\n   * ```\n   *\n   * @overrideType object\n   */\n  style?: DeepPartial<Theme>;\n};\n\nconst ChatWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const {\n    children,\n    client,\n    closeConnectionOnBackground = true,\n    enableOfflineSupport = false,\n    i18nInstance,\n    style,\n  } = props;\n\n  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();\n  const [translators, setTranslators] = useState<TranslatorFunctions>({\n    t: (key: string) => key,\n    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),\n  });\n\n  /**\n   * Setup translators\n   */\n  const loadingTranslators = useStreami18n({ i18nInstance, setTranslators });\n\n  /**\n   * Setup connection event listeners\n   */\n  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(\n    client,\n    closeConnectionOnBackground,\n  );\n\n  /**\n   * Setup muted user listener\n   * TODO: reimplement\n   */\n  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);\n\n  useEffect(() => {\n    if (client) {\n      client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);\n      // This is to disable recovery related logic in js client, since we handle it in this SDK\n      client.recoverStateOnReconnect = false;\n      client.persistUserOnConnectionFailure = enableOfflineSupport;\n    }\n  }, [client]);\n\n  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);\n\n  const appSettings = useAppSettings(client, isOnline);\n  const { subscribeConnectionRecoveredCallback } = useConnectionRecovered<StreamChatGenerics>({\n    client,\n    enableOfflineSupport,\n  });\n\n  const chatContext = useCreateChatContext({\n    appSettings,\n    channel,\n    client,\n    connectionRecovering,\n    enableOfflineSupport,\n    isOnline,\n    mutedUsers,\n    setActiveChannel,\n    subscribeConnectionRecoveredCallback,\n  });\n\n  useEffect(() => {\n    if (enableOfflineSupport) {\n      QuickSqliteClient.initializeDatabase();\n    }\n  }, []);\n\n  useSyncDatabase({\n    client,\n    enableOfflineSupport,\n  });\n\n  if (loadingTranslators) return null;\n\n  return (\n    <ChatProvider<StreamChatGenerics> value={chatContext}>\n      <TranslationProvider\n        value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}\n      >\n        <ThemeProvider style={style}>\n          <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>\n        </ThemeProvider>\n      </TranslationProvider>\n    </ChatProvider>\n  );\n};\n\n/**\n * Chat - Wrapper component for Chat. The needs to be placed around any other chat components.\n * This Chat component provides the ChatContext to all other components.\n *\n * The ChatContext provides the following props:\n *\n * - channel - currently active channel\n * - client - client connection\n * - connectionRecovering - whether or not websocket is reconnecting\n * - isOnline - whether or not set user is active\n * - setActiveChannel - function to set the currently active channel\n *\n * The Chat Component takes the following generics in order:\n * - At (AttachmentType) - custom Attachment object extension\n * - Ct (ChannelType) - custom Channel object extension\n * - Co (CommandType) - custom Command string union extension\n * - Ev (EventType) - custom Event object extension\n * - Me (MessageType) - custom Message object extension\n * - Re (ReactionType) - custom Reaction object extension\n * - Us (UserType) - custom User object extension\n */\nexport const Chat = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { style } = useOverlayContext();\n\n  return <ChatWithContext {...{ style }} {...props} />;\n};\n"]}
+{"version":3,"sources":["Chat.tsx"],"names":["ChatWithContext","props","children","client","closeConnectionOnBackground","enableOfflineSupport","i18nInstance","style","channel","setChannel","t","key","tDateTimeParser","input","translators","setTranslators","loadingTranslators","connectionRecovering","isOnline","mutedUsers","debugRef","isDebugModeEnabled","__DEV__","current","setUserAgent","SDK","Platform","OS","version","recoverStateOnReconnect","persistUserOnConnectionFailure","setEventType","setSendEventParams","action","data","user","setActiveChannel","newChannel","appSettings","subscribeConnectionRecoveredCallback","chatContext","QuickSqliteClient","initializeDatabase","userLanguage","language","DEFAULT_USER_LANGUAGE","Chat"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren, useEffect, useState } from 'react';\nimport { Platform } from 'react-native';\n\nimport Dayjs from 'dayjs';\n\nimport type { Channel } from 'stream-chat';\n\nimport { useAppSettings } from './hooks/useAppSettings';\nimport { useConnectionRecovered } from './hooks/useConnectionRecovered';\nimport { useCreateChatContext } from './hooks/useCreateChatContext';\nimport { useIsOnline } from './hooks/useIsOnline';\nimport { useMutedUsers } from './hooks/useMutedUsers';\n\nimport { useSyncDatabase } from './hooks/useSyncDatabase';\n\nimport { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';\nimport { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';\nimport { useDebugContext } from '../../contexts/debugContext/DebugContext';\nimport { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';\nimport { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';\nimport type { Theme } from '../../contexts/themeContext/utils/theme';\nimport {\n  DEFAULT_USER_LANGUAGE,\n  TranslationProvider,\n  TranslatorFunctions,\n} from '../../contexts/translationContext/TranslationContext';\nimport { useStreami18n } from '../../hooks/useStreami18n';\nimport init from '../../init';\n\nimport { SDK } from '../../native';\nimport { QuickSqliteClient } from '../../store/QuickSqliteClient';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { Streami18n } from '../../utils/Streami18n';\nimport { version } from '../../version.json';\n\ninit();\n\nexport type ChatProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {\n  /**\n   * When false, ws connection won't be disconnection upon backgrounding the app.\n   * To receive push notifications, its necessary that user doesn't have active\n   * websocket connection. So by default, we disconnect websocket connection when\n   * app goes to background, and reconnect when app comes to foreground.\n   */\n  closeConnectionOnBackground?: boolean;\n  /**\n   * Enables offline storage and loading for chat data.\n   */\n  enableOfflineSupport?: boolean;\n  /**\n   * Instance of Streami18n class should be provided to Chat component to enable internationalization.\n   *\n   * Stream provides following list of in-built translations:\n   * 1. English (en)\n   * 2. Dutch (nl)\n   * 3. ...\n   * 4. ...\n   *\n   * Simplest way to start using chat components in one of the in-built languages would be following:\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * If you would like to override certain keys in in-built translation.\n   * UI will be automatically updated in this case.\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   *\n   * i18n.registerTranslation('nl', {\n   *  'Nothing yet...': 'Nog Niet ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n   * });\n   *\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * You can use the same function to add whole new language.\n   *\n   * ```\n   * const i18n = new Streami18n('it');\n   *\n   * i18n.registerTranslation('it', {\n   *  'Nothing yet...': 'Non ancora ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',\n   * });\n   *\n   * // Make sure to call setLanguage to reflect new language in UI.\n   * i18n.setLanguage('it');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   */\n  i18nInstance?: Streami18n;\n  /**\n   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)\n   *\n   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.\n   *\n   * ```\n   * import type { DeepPartial, Theme } from 'stream-chat-react-native';\n   *\n   * const theme: DeepPartial<Theme> = {\n   *   messageSimple: {\n   *     file: {\n   *       container: {\n   *         backgroundColor: 'red',\n   *       },\n   *       icon: {\n   *         height: 16,\n   *         width: 16,\n   *       },\n   *     },\n   *   },\n   * };\n   *\n   * <Chat style={theme}>\n   * </Chat>\n   * ```\n   *\n   * @overrideType object\n   */\n  style?: DeepPartial<Theme>;\n};\n\nconst ChatWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const {\n    children,\n    client,\n    closeConnectionOnBackground = true,\n    enableOfflineSupport = false,\n    i18nInstance,\n    style,\n  } = props;\n\n  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();\n  const [translators, setTranslators] = useState<TranslatorFunctions>({\n    t: (key: string) => key,\n    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),\n  });\n\n  /**\n   * Setup translators\n   */\n  const loadingTranslators = useStreami18n({ i18nInstance, setTranslators });\n\n  /**\n   * Setup connection event listeners\n   */\n  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(\n    client,\n    closeConnectionOnBackground,\n  );\n\n  /**\n   * Setup muted user listener\n   * TODO: reimplement\n   */\n  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);\n\n  const debugRef = useDebugContext();\n  const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;\n\n  useEffect(() => {\n    if (client) {\n      client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);\n      // This is to disable recovery related logic in js client, since we handle it in this SDK\n      client.recoverStateOnReconnect = false;\n      client.persistUserOnConnectionFailure = enableOfflineSupport;\n    }\n\n    if (isDebugModeEnabled) {\n      if (debugRef.current.setEventType) debugRef.current.setEventType('send');\n      if (debugRef.current.setSendEventParams)\n        debugRef.current.setSendEventParams({\n          action: 'Client',\n          data: client.user,\n        });\n    }\n  }, [client]);\n\n  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);\n\n  const appSettings = useAppSettings(client, isOnline);\n  const { subscribeConnectionRecoveredCallback } = useConnectionRecovered<StreamChatGenerics>({\n    client,\n    enableOfflineSupport,\n  });\n\n  const chatContext = useCreateChatContext({\n    appSettings,\n    channel,\n    client,\n    connectionRecovering,\n    enableOfflineSupport,\n    isOnline,\n    mutedUsers,\n    setActiveChannel,\n    subscribeConnectionRecoveredCallback,\n  });\n\n  useEffect(() => {\n    if (enableOfflineSupport) {\n      QuickSqliteClient.initializeDatabase();\n    }\n  }, []);\n\n  useSyncDatabase({\n    client,\n    enableOfflineSupport,\n  });\n\n  if (loadingTranslators) return null;\n\n  return (\n    <ChatProvider<StreamChatGenerics> value={chatContext}>\n      <TranslationProvider\n        value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}\n      >\n        <ThemeProvider style={style}>\n          <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>\n        </ThemeProvider>\n      </TranslationProvider>\n    </ChatProvider>\n  );\n};\n\n/**\n * Chat - Wrapper component for Chat. The needs to be placed around any other chat components.\n * This Chat component provides the ChatContext to all other components.\n *\n * The ChatContext provides the following props:\n *\n * - channel - currently active channel\n * - client - client connection\n * - connectionRecovering - whether or not websocket is reconnecting\n * - isOnline - whether or not set user is active\n * - setActiveChannel - function to set the currently active channel\n *\n * The Chat Component takes the following generics in order:\n * - At (AttachmentType) - custom Attachment object extension\n * - Ct (ChannelType) - custom Channel object extension\n * - Co (CommandType) - custom Command string union extension\n * - Ev (EventType) - custom Event object extension\n * - Me (MessageType) - custom Message object extension\n * - Re (ReactionType) - custom Reaction object extension\n * - Us (UserType) - custom User object extension\n */\nexport const Chat = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { style } = useOverlayContext();\n\n  return <ChatWithContext {...{ style }} {...props} />;\n};\n"]}

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

@@ -88,7 +88,7 @@ exports.IsSwiping = IsSwiping;
 })(IsSwiping || (exports.IsSwiping = IsSwiping = {}));
 
 var ImageGallery = function ImageGallery(props) {
-  var _StatusBar$currentHei, _photos$selectedIndex;
+  var _StatusBar$currentHei, _imageGalleryAttachme;
 
   var _props$giphyVersion = props.giphyVersion,
       giphyVersion = _props$giphyVersion === void 0 ? 'fixed_height' : _props$giphyVersion,
@@ -98,20 +98,10 @@ var ImageGallery = function ImageGallery(props) {
       numberOfImageGalleryGridColumns = props.numberOfImageGalleryGridColumns,
       overlayOpacity = props.overlayOpacity;
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      paused = _useState2[0],
-      setPaused = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      progress = _useState4[0],
-      setProgress = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
+      imageGalleryAttachments = _useState2[0],
+      setImageGalleryAttachments = _useState2[1];
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
@@ -121,10 +111,10 @@ var ImageGallery = function ImageGallery(props) {
       pager = _useTheme$theme$image.pager,
       slide = _useTheme$theme$image.slide;
 
-  var _useState7 = (0, _react.useState)([]),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      gridPhotos = _useState8[0],
-      setGridPhotos = _useState8[1];
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      gridPhotos = _useState4[0],
+      setGridPhotos = _useState4[1];
 
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
       overlay = _useOverlayContext.overlay,
@@ -148,10 +138,10 @@ var ImageGallery = function ImageGallery(props) {
 
   var bottomSheetModalRef = (0, _react.useRef)(null);
 
-  var _useState9 = (0, _react.useState)(0),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      currentBottomSheetIndex = _useState10[0],
-      setCurrentBottomSheetIndex = _useState10[1];
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      currentBottomSheetIndex = _useState6[0],
+      setCurrentBottomSheetIndex = _useState6[1];
 
   var animatedBottomSheetIndex = (0, _reactNativeReanimated.useSharedValue)(0);
   var screenTranslateY = (0, _reactNativeReanimated.useSharedValue)(screenHeight);
@@ -171,15 +161,15 @@ var ImageGallery = function ImageGallery(props) {
     showScreen();
   }, []);
 
-  var _useState11 = (0, _react.useState)(screenHeight),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      currentImageHeight = _useState12[0],
-      setCurrentImageHeight = _useState12[1];
+  var _useState7 = (0, _react.useState)(screenHeight),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      currentImageHeight = _useState8[0],
+      setCurrentImageHeight = _useState8[1];
 
-  var _useState13 = (0, _react.useState)(0),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      selectedIndex = _useState14[0],
-      setSelectedIndex = _useState14[1];
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedIndex = _useState10[0],
+      setSelectedIndex = _useState10[1];
 
   var index = (0, _reactNativeReanimated.useSharedValue)(0);
   var headerFooterVisible = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -208,11 +198,14 @@ var ImageGallery = function ImageGallery(props) {
       return {
         channelId: cur.cid,
         created_at: cur.created_at,
+        duration: 0,
         id: "photoId-" + cur.id + "-" + imageUrl,
         messageId: cur.id,
         mime_type: a.type === 'giphy' ? (0, _getGiphyMimeType.getGiphyMimeType)(giphyURL != null ? giphyURL : '') : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
+        paused: true,
+        progress: 0,
         type: a.type,
         uri: a.type === 'giphy' ? giphyURL : (0, _getResizedImageUrl.getResizedImageUrl)({
           height: screenHeight,
@@ -226,6 +219,9 @@ var ImageGallery = function ImageGallery(props) {
     return [].concat((0, _toConsumableArray2["default"])(attachmentPhotos), (0, _toConsumableArray2["default"])(acc));
   }, []);
   var photoLength = photos.length;
+  (0, _react.useEffect)(function () {
+    setImageGalleryAttachments(photos);
+  }, []);
 
   var stripQueryFromUrl = function stripQueryFromUrl(url) {
     return url.split('?')[0];
@@ -245,17 +241,12 @@ var ImageGallery = function ImageGallery(props) {
     var newIndex = photos.findIndex(function (photo) {
       return photo.messageId === (selectedMessage == null ? void 0 : selectedMessage.messageId) && stripQueryFromUrl(photo.uri) === stripQueryFromUrl((selectedMessage == null ? void 0 : selectedMessage.url) || '');
     });
-
-    if (photoLength > 1) {
-      setPaused(true);
-    }
-
     (0, _reactNativeReanimated.runOnUI)(updatePosition)(newIndex);
   }, [selectedMessage, photoLength]);
-  var uriForCurrentImage = (_photos$selectedIndex = photos[selectedIndex]) == null ? void 0 : _photos$selectedIndex.uri;
+  var uriForCurrentImage = (_imageGalleryAttachme = imageGalleryAttachments[selectedIndex]) == null ? void 0 : _imageGalleryAttachme.uri;
   (0, _react.useEffect)(function () {
     setCurrentImageHeight(screenHeight);
-    var photo = photos[index.value];
+    var photo = imageGalleryAttachments[index.value];
     var height = photo == null ? void 0 : photo.original_height;
     var width = photo == null ? void 0 : photo.original_width;
 
@@ -334,52 +325,66 @@ var ImageGallery = function ImageGallery(props) {
 
     if ((_bottomSheetModalRef$2 = bottomSheetModalRef.current) != null && _bottomSheetModalRef$2.present) {
       bottomSheetModalRef.current.present();
-      setGridPhotos(photos);
+      setGridPhotos(imageGalleryAttachments);
     }
   };
 
-  var videoRef = (0, _react.useRef)(null);
-
   var handleEnd = function handleEnd() {
-    setPaused(true);
-    setProgress(1);
+    handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
+    handleProgress(imageGalleryAttachments[selectedIndex].id, 1, true);
   };
 
-  var handleLoad = function handleLoad(payload) {
-    if (payload.duration) setDuration(payload.duration);
-  };
+  var videoRef = (0, _react.useRef)(null);
 
-  var handleProgress = function handleProgress(data) {
-    if (data.currentTime && data.seekableDuration) {
-      setProgress(data.currentTime / data.seekableDuration);
-    }
+  var handleLoad = function handleLoad(index, duration) {
+    setImageGalleryAttachments(function (prevImageGalleryAttachment) {
+      return prevImageGalleryAttachment.map(function (imageGalleryAttachment) {
+        return (0, _extends2["default"])({}, imageGalleryAttachment, {
+          duration: imageGalleryAttachment.id === index ? duration : imageGalleryAttachment.duration
+        });
+      });
+    });
   };
 
-  var handlePlayPause = function handlePlayPause(status) {
-    if (status === undefined) {
-      if (progress === 1 && videoRef.current && videoRef.current.seek) {
-        videoRef.current.seek(0);
-      }
-
-      if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
-        videoRef.current.replayAsync();
-      }
+  var handleProgress = function handleProgress(index, progress, hasEnd) {
+    setImageGalleryAttachments(function (prevImageGalleryAttachments) {
+      return prevImageGalleryAttachments.map(function (imageGalleryAttachment) {
+        return (0, _extends2["default"])({}, imageGalleryAttachment, {
+          progress: imageGalleryAttachment.id === index ? hasEnd ? 1 : progress : imageGalleryAttachment.progress
+        });
+      });
+    });
+  };
 
-      setPaused(function (state) {
-        return !state;
+  var handlePlayPause = function handlePlayPause(index, pausedStatus) {
+    if (pausedStatus === false) {
+      setImageGalleryAttachments(function (prevImageGalleryAttachment) {
+        return prevImageGalleryAttachment.map(function (imageGalleryAttachment) {
+          return (0, _extends2["default"])({}, imageGalleryAttachment, {
+            paused: imageGalleryAttachment.id === index ? false : true
+          });
+        });
       });
     } else {
-      setPaused(status);
+      setImageGalleryAttachments(function (prevImageGalleryAttachment) {
+        return prevImageGalleryAttachment.map(function (imageGalleryAttachment) {
+          return (0, _extends2["default"])({}, imageGalleryAttachment, {
+            paused: true
+          });
+        });
+      });
     }
   };
 
-  var onProgressDrag = function onProgressDrag(progress) {
-    if (videoRef.current && videoRef.current.seek) {
-      videoRef.current.seek(progress);
-    }
-
-    if (videoRef.current && videoRef.current.setPositionAsync) {
-      videoRef.current.setPositionAsync(progress * 1000);
+  var onPlayPause = function onPlayPause(status) {
+    if (status === undefined) {
+      if (imageGalleryAttachments[selectedIndex].paused) {
+        handlePlayPause(imageGalleryAttachments[selectedIndex].id, false);
+      } else {
+        handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
+      }
+    } else {
+      handlePlayPause(imageGalleryAttachments[selectedIndex].id, status);
     }
   };
 
@@ -390,7 +395,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 517,
+      lineNumber: 532,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -398,7 +403,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 522,
+      lineNumber: 537,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -410,7 +415,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 523,
+      lineNumber: 538,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -418,7 +423,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 530,
+      lineNumber: 545,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -432,7 +437,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 531,
+      lineNumber: 546,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -440,7 +445,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 540,
+      lineNumber: 555,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PinchGestureHandler, {
@@ -450,7 +455,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 541,
+      lineNumber: 556,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -458,7 +463,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 546,
+      lineNumber: 561,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -471,7 +476,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 547,
+      lineNumber: 562,
       columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -479,7 +484,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 555,
+      lineNumber: 570,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -493,19 +498,21 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 556,
+      lineNumber: 571,
       columnNumber: 23
     }
-  }, photos.map(function (photo, i) {
+  }, imageGalleryAttachments.map(function (photo, i) {
     return photo.type === 'video' ? _react["default"].createElement(_AnimatedGalleryVideo.AnimatedGalleryVideo, {
+      attachmentId: photo.id,
       handleEnd: handleEnd,
       handleLoad: handleLoad,
       handleProgress: handleProgress,
       index: i,
       key: photo.uri + "-" + i,
       offsetScale: offsetScale,
-      paused: paused,
+      paused: photo.paused || false,
       previous: selectedIndex > i,
+      repeat: true,
       scale: scale,
       screenHeight: screenHeight,
       selected: selectedIndex === i,
@@ -524,7 +531,7 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 573,
+        lineNumber: 588,
         columnNumber: 29
       }
     }) : _react["default"].createElement(_AnimatedGalleryImage.AnimatedGalleryImage, {
@@ -548,40 +555,39 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 600,
+        lineNumber: 617,
         columnNumber: 29
       }
     });
   })))))))))), _react["default"].createElement(_ImageGalleryHeader.ImageGalleryHeader, (0, _extends2["default"])({
     opacity: headerFooterOpacity,
-    photo: photos[selectedIndex],
+    photo: imageGalleryAttachments[selectedIndex],
     visible: headerFooterVisible
   }, imageGalleryCustomComponents == null ? void 0 : imageGalleryCustomComponents.header, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 633,
+      lineNumber: 650,
       columnNumber: 7
     }
-  })), _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
+  })), imageGalleryAttachments.length > 0 && _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
     accessibilityLabel: 'Image Gallery Footer',
-    duration: duration,
-    onPlayPause: handlePlayPause,
-    onProgressDrag: onProgressDrag,
+    duration: imageGalleryAttachments[selectedIndex].duration || 0,
+    onPlayPause: onPlayPause,
     opacity: headerFooterOpacity,
     openGridView: openGridView,
-    paused: paused,
-    photo: photos[selectedIndex],
-    photoLength: photoLength,
-    progress: progress,
+    paused: imageGalleryAttachments[selectedIndex].paused || false,
+    photo: imageGalleryAttachments[selectedIndex],
+    photoLength: imageGalleryAttachments.length,
+    progress: imageGalleryAttachments[selectedIndex].progress || 0,
     selectedIndex: selectedIndex,
     visible: headerFooterVisible
   }, imageGalleryCustomComponents == null ? void 0 : imageGalleryCustomComponents.footer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 639,
-      columnNumber: 7
+      lineNumber: 658,
+      columnNumber: 9
     }
   })), _react["default"].createElement(_ImageGalleryOverlay.ImageGalleryOverlay, {
     animatedBottomSheetIndex: animatedBottomSheetIndex,
@@ -590,14 +596,14 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 655,
+      lineNumber: 674,
       columnNumber: 7
     }
   }), _react["default"].createElement(_bottomSheet.BottomSheetModalProvider, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 660,
+      lineNumber: 679,
       columnNumber: 7
     }
   }, _react["default"].createElement(_bottomSheet.BottomSheetModal, {
@@ -610,7 +616,7 @@ var ImageGallery = function ImageGallery(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 665,
+          lineNumber: 684,
           columnNumber: 13
         }
       }));
@@ -625,7 +631,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 661,
+      lineNumber: 680,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ImageGrid.ImageGrid, (0, _extends2["default"])({
@@ -637,7 +643,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 676,
+      lineNumber: 695,
       columnNumber: 11
     }
   })))));