stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,16 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Image, ImageStyle, Keyboard, Platform, StyleSheet, ViewStyle } from 'react-native';
+import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
 
-import {
-  PanGestureHandler,
-  PinchGestureHandler,
-  TapGestureHandler,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
   Easing,
   runOnJS,
   runOnUI,
+  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -40,21 +37,17 @@ import {
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import {
-  OverlayProviderProps,
-  useOverlayContext,
-} from '../../contexts/overlayContext/OverlayContext';
+import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
-import { isVideoPackageAvailable, VideoType } from '../../native';
+import { isVideoPlayerAvailable, VideoType } from '../../native';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
-const isAndroid = Platform.OS === 'android';
-
 const MARGIN = 32;
 
 export enum HasPinched {
@@ -112,7 +105,7 @@ export type ImageGalleryCustomComponents<
 
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryCustomComponents<StreamChatGenerics> & {
-    overlayOpacity: Animated.SharedValue<number>;
+    overlayOpacity: SharedValue<number>;
   } & Pick<
       OverlayProviderProps<StreamChatGenerics>,
       | 'giphyVersion'
@@ -139,6 +132,7 @@ export const ImageGallery = <
   const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
     Photo<StreamChatGenerics>[]
   >([]);
+  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       colors: { white_snow },
@@ -146,7 +140,6 @@ export const ImageGallery = <
     },
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
-  const { overlay } = useOverlayContext();
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
@@ -214,14 +207,6 @@ export const ImageGallery = <
    */
   const headerFooterVisible = useSharedValue(1);
 
-  /**
-   * Gesture handler refs
-   */
-  const doubleTapRef = useRef<TapGestureHandler>(null);
-  const panRef = useRef<PanGestureHandler>(null);
-  const pinchRef = useRef<PinchGestureHandler>(null);
-  const singleTapRef = useRef<TapGestureHandler>(null);
-
   /**
    * Shared values for movement
    */
@@ -249,7 +234,7 @@ export const ImageGallery = <
               !attachment.title_link &&
               !attachment.og_scrape_url &&
               getUrlOfImageAttachment(attachment)) ||
-            (isVideoPackageAvailable() && attachment.type === FileTypes.Video),
+            (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
         )
         .reverse() || [];
 
@@ -276,6 +261,7 @@ export const ImageGallery = <
             ? giphyURL
             : getResizedImageUrl({
                 height: fullWindowHeight,
+                resizableCDNHosts,
                 url: imageUrl,
                 width: fullWindowWidth,
               }),
@@ -358,7 +344,7 @@ export const ImageGallery = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uriForCurrentImage]);
 
-  const { onDoubleTap, onPan, onPinch, onSingleTap } = useImageGalleryGestures({
+  const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
     currentImageHeight,
     halfScreenHeight,
     halfScreenWidth,
@@ -523,104 +509,67 @@ export const ImageGallery = <
       style={[StyleSheet.absoluteFillObject, showScreenStyle]}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
-      <TapGestureHandler
-        minPointers={1}
-        numberOfTaps={1}
-        onGestureEvent={onSingleTap}
-        ref={singleTapRef}
-        waitFor={[panRef, pinchRef, doubleTapRef]}
-      >
+      <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <TapGestureHandler
-            maxDeltaX={8}
-            maxDeltaY={8}
-            maxDist={8}
-            minPointers={1}
-            numberOfTaps={2}
-            onGestureEvent={onDoubleTap}
-            ref={doubleTapRef}
-          >
-            <Animated.View style={StyleSheet.absoluteFillObject}>
-              <PinchGestureHandler
-                onGestureEvent={onPinch}
-                ref={pinchRef}
-                simultaneousHandlers={[panRef]}
-              >
-                <Animated.View style={StyleSheet.absoluteFill}>
-                  <PanGestureHandler
-                    enabled={overlay === 'gallery'}
-                    maxPointers={isAndroid ? undefined : 1}
-                    minDist={10}
-                    onGestureEvent={onPan}
-                    ref={panRef}
-                    simultaneousHandlers={[pinchRef]}
-                  >
-                    <Animated.View style={StyleSheet.absoluteFill}>
-                      <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
-                        {imageGalleryAttachments.map((photo, i) =>
-                          photo.type === FileTypes.Video ? (
-                            <AnimatedGalleryVideo
-                              attachmentId={photo.id}
-                              handleEnd={handleEnd}
-                              handleLoad={handleLoad}
-                              handleProgress={handleProgress}
-                              index={i}
-                              key={`${photo.uri}-${i}`}
-                              offsetScale={offsetScale}
-                              paused={photo.paused || false}
-                              previous={selectedIndex > i}
-                              repeat={true}
-                              scale={scale}
-                              screenHeight={fullWindowHeight}
-                              selected={selectedIndex === i}
-                              shouldRender={Math.abs(selectedIndex - i) < 4}
-                              source={{ uri: photo.uri }}
-                              style={[
-                                {
-                                  height: fullWindowHeight * 8,
-                                  marginRight: MARGIN,
-                                  width: fullWindowWidth * 8,
-                                },
-                                slide,
-                              ]}
-                              translateX={translateX}
-                              translateY={translateY}
-                              videoRef={videoRef}
-                            />
-                          ) : (
-                            <AnimatedGalleryImage
-                              accessibilityLabel={'Image Item'}
-                              index={i}
-                              key={`${photo.uri}-${i}`}
-                              offsetScale={offsetScale}
-                              photo={photo}
-                              previous={selectedIndex > i}
-                              scale={scale}
-                              screenHeight={fullWindowHeight}
-                              selected={selectedIndex === i}
-                              shouldRender={Math.abs(selectedIndex - i) < 4}
-                              style={[
-                                {
-                                  height: fullWindowHeight * 8,
-                                  marginRight: MARGIN,
-                                  width: fullWindowWidth * 8,
-                                },
-                                slide,
-                              ]}
-                              translateX={translateX}
-                              translateY={translateY}
-                            />
-                          ),
-                        )}
-                      </Animated.View>
-                    </Animated.View>
-                  </PanGestureHandler>
-                </Animated.View>
-              </PinchGestureHandler>
-            </Animated.View>
-          </TapGestureHandler>
+          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+            {imageGalleryAttachments.map((photo, i) =>
+              photo.type === FileTypes.Video ? (
+                <AnimatedGalleryVideo
+                  attachmentId={photo.id}
+                  handleEnd={handleEnd}
+                  handleLoad={handleLoad}
+                  handleProgress={handleProgress}
+                  index={i}
+                  key={`${photo.uri}-${i}`}
+                  offsetScale={offsetScale}
+                  paused={photo.paused || false}
+                  previous={selectedIndex > i}
+                  repeat={true}
+                  scale={scale}
+                  screenHeight={fullWindowHeight}
+                  selected={selectedIndex === i}
+                  shouldRender={Math.abs(selectedIndex - i) < 4}
+                  source={{ uri: photo.uri }}
+                  style={[
+                    {
+                      height: fullWindowHeight * 8,
+                      marginRight: MARGIN,
+                      width: fullWindowWidth * 8,
+                    },
+                    slide,
+                  ]}
+                  translateX={translateX}
+                  translateY={translateY}
+                  videoRef={videoRef}
+                />
+              ) : (
+                <AnimatedGalleryImage
+                  accessibilityLabel={'Image Item'}
+                  index={i}
+                  key={`${photo.uri}-${i}`}
+                  offsetScale={offsetScale}
+                  photo={photo}
+                  previous={selectedIndex > i}
+                  scale={scale}
+                  screenHeight={fullWindowHeight}
+                  selected={selectedIndex === i}
+                  shouldRender={Math.abs(selectedIndex - i) < 4}
+                  style={[
+                    {
+                      height: fullWindowHeight * 8,
+                      marginRight: MARGIN,
+                      width: fullWindowWidth * 8,
+                    },
+                    slide,
+                  ]}
+                  translateX={translateX}
+                  translateY={translateY}
+                />
+              ),
+            )}
+          </Animated.View>
         </Animated.View>
-      </TapGestureHandler>
+      </GestureDetector>
       <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
         photo={imageGalleryAttachments[selectedIndex]}
@@ -691,6 +640,7 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
+    backgroundColor: 'red',
     flexDirection: 'row',
   },
 });

package/src/components/ImageGallery/__tests__/AnimatedVideoGallery.test.tsx

@@ -10,17 +10,6 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { AnimatedGalleryVideo, AnimatedGalleryVideoType } from '../components/AnimatedGalleryVideo';
 
-jest.mock('../../../native.ts', () => {
-  const View = require('react-native/Libraries/Components/View/View');
-  return {
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-    },
-    Video: View,
-  };
-});
-
 const getComponent = (props: Partial<AnimatedGalleryVideoType>) => (
   <ThemeProvider theme={defaultTheme}>
     <AnimatedGalleryVideo {...(props as unknown as AnimatedGalleryVideoType)} />

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -24,11 +24,10 @@ import { ImageGallery } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-    },
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     Video: View,
   };
 });

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -28,12 +28,10 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
     deleteFile: jest.fn(),
+    isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-      fetch: jest.fn(),
-    },
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     saveFile: jest.fn(),
     shareImage: jest.fn(),
     Video: View,

package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx

@@ -22,7 +22,7 @@ const getComponent = (props: Partial<ImageGridType> = {}) => {
 
   return (
     <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-      <ThemeProvider style={defaultTheme}>
+      <ThemeProvider theme={defaultTheme}>
         <ImageGrid {...(props as unknown as ImageGridType)} />
       </ThemeProvider>
     </TranslationProvider>

package/src/components/ImageGallery/__tests__/ImageGalleryGridHandle.test.tsx

@@ -24,7 +24,7 @@ const getComponent = (props: Partial<ImageGridHandleProps> = {}) => {
 
   return (
     <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-      <ThemeProvider style={defaultTheme}>
+      <ThemeProvider theme={defaultTheme}>
         <ImageGridHandle {...(props as unknown as ImageGridHandleProps)} />
       </ThemeProvider>
     </TranslationProvider>

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -30,12 +30,10 @@ import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-      fetch: jest.fn(),
-    },
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     Video: View,
   };
 });

package/src/components/ImageGallery/__tests__/ImageGalleryOverlay.test.tsx

@@ -19,14 +19,11 @@ import {
 import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import * as NativeUtils from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGalleryOverlay } from '../components/ImageGalleryOverlay';
 
 describe('ImageGalleryOverlay', () => {
-  jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(() => true);
-
   it('should have currentBottomSheetIndex as a prop', async () => {
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     const setOverlayMock = jest.fn();

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useViewport } from '../../../hooks/useViewport';
 
@@ -10,15 +10,15 @@ const oneEighth = 1 / 8;
 type Props = {
   accessibilityLabel: string;
   index: number;
-  offsetScale: Animated.SharedValue<number>;
+  offsetScale: SharedValue<number>;
   photo: { uri: string };
   previous: boolean;
-  scale: Animated.SharedValue<number>;
+  scale: SharedValue<number>;
   screenHeight: number;
   selected: boolean;
   shouldRender: boolean;
-  translateX: Animated.SharedValue<number>;
-  translateY: Animated.SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
   style?: StyleProp<ImageStyle>;
 };
 

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useViewport } from '../../../hooks/useViewport';
 import {
-  isVideoPackageAvailable,
+  isVideoPlayerAvailable,
   PlaybackStatus,
   Video,
   VideoPayloadData,
@@ -13,7 +13,7 @@ import {
   VideoType,
 } from '../../../native';
 
-import { Spinner } from '../../Spinner/Spinner';
+import { Spinner } from '../../UIComponents/Spinner';
 
 const oneEighth = 1 / 8;
 
@@ -23,16 +23,16 @@ export type AnimatedGalleryVideoType = {
   handleLoad: (index: string, duration: number) => void;
   handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;
   index: number;
-  offsetScale: Animated.SharedValue<number>;
+  offsetScale: SharedValue<number>;
   paused: boolean;
   previous: boolean;
-  scale: Animated.SharedValue<number>;
+  scale: SharedValue<number>;
   screenHeight: number;
   selected: boolean;
   shouldRender: boolean;
   source: { uri: string };
-  translateX: Animated.SharedValue<number>;
-  translateY: Animated.SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
   videoRef: React.RefObject<VideoType>;
   repeat?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -188,7 +188,7 @@ export const AnimatedGalleryVideo = React.memo(
           style,
         ]}
       >
-        {isVideoPackageAvailable() && (
+        {isVideoPlayerAvailable() ? (
           <Video
             onBuffer={onBuffer}
             onEnd={onEnd}
@@ -204,7 +204,7 @@ export const AnimatedGalleryVideo = React.memo(
             uri={source.uri}
             videoRef={videoRef}
           />
-        )}
+        ) : null}
         <Animated.View
           accessibilityLabel='Spinner'
           style={[