feat: add ability to autoplay videos in gallery (#2195)

Author: aharwood9

docusaurus/docs/reactnative/core-components/overlay_provider.mdx

@@ -154,6 +154,14 @@ This can also be set via the `setBottomInset` function provided by the `useAttac
 | ------ | ------- |
 | number | 0       |
 
+### autoPlayVideo
+
+Enables or disables auto play of videos in the overlay.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
 ### giphyVersion
 
 <GiphyVersion />

package/src/components/ImageGallery/ImageGallery.tsx

@@ -131,6 +131,7 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
       | 'imageGalleryGridSnapPoints'
       | 'imageGalleryGridHandleHeight'
       | 'numberOfImageGalleryGridColumns'
+      | 'autoPlayVideo'
     >;
 
 export const ImageGallery = <
@@ -139,6 +140,7 @@ export const ImageGallery = <
   props: Props<StreamChatGenerics>,
 ) => {
   const {
+    autoPlayVideo = false,
     giphyVersion = 'fixed_height',
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
@@ -273,6 +275,7 @@ export const ImageGallery = <
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
       const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
+      const isInitiallyPaused = !autoPlayVideo;
 
       return {
         channelId: cur.cid,
@@ -283,7 +286,7 @@ export const ImageGallery = <
         mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
-        paused: true,
+        paused: isInitiallyPaused,
         progress: 0,
         type: a.type,
         uri:

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -58,6 +58,7 @@ export type OverlayProviderProps<
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {
+    autoPlayVideo?: boolean;
     /**
      * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
      * */

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -64,6 +64,7 @@ export const OverlayProvider = <
 ) => {
   const bottomSheetCloseTimeoutRef = useRef<NodeJS.Timeout>();
   const {
+    autoPlayVideo,
     AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
     attachmentPickerBottomSheetHandleHeight,
     attachmentPickerBottomSheetHeight,
@@ -237,6 +238,7 @@ export const OverlayProvider = <
                 )}
                 {overlay === 'gallery' && (
                   <ImageGallery<StreamChatGenerics>
+                    autoPlayVideo={autoPlayVideo}
                     giphyVersion={giphyVersion}
                     imageGalleryCustomComponents={imageGalleryCustomComponents}
                     imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}