stream-chat-react-native-core 6.6.8-beta.3 → 7.0.0-rc.2

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

@@ -155,76 +155,4 @@ describe('ImageGallery', () => {
 
     expect(spinnerComponent?.props.style[1].opacity).toBe(1);
   });
-
-  it('trigger onPlaybackStatusUpdate event handler of Video component', () => {
-    jest.spyOn(console, 'error');
-    const handleLoadMock = jest.fn();
-    const handleProgressMock = jest.fn();
-    const handleEndMock = jest.fn();
-
-    render(
-      getComponent({
-        handleEnd: handleEndMock,
-        handleLoad: handleLoadMock,
-        handleProgress: handleProgressMock,
-        offsetScale: { value: 1 } as SharedValue<number>,
-        scale: { value: 1 } as SharedValue<number>,
-        shouldRender: true,
-        source: {
-          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-        },
-        translateX: { value: 1 } as SharedValue<number>,
-      }),
-    );
-
-    const videoComponent = screen.getByTestId('video-player');
-    const spinnerComponent = screen.queryByLabelText('Spinner');
-
-    act(() => {
-      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
-        error: true,
-        isLoaded: false,
-      });
-    });
-
-    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
-    expect(console.error).toHaveBeenCalled();
-
-    act(() => {
-      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
-        isLoaded: true,
-      });
-    });
-
-    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
-    expect(handleLoadMock).toHaveBeenCalled();
-
-    act(() => {
-      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
-        isLoaded: true,
-        isPlaying: true,
-      });
-    });
-
-    expect(handleProgressMock).toHaveBeenCalled();
-
-    act(() => {
-      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
-        isBuffering: true,
-        isLoaded: true,
-      });
-    });
-
-    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
-
-    act(() => {
-      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
-        didJustFinish: true,
-        isLoaded: true,
-        isLooping: false,
-      });
-    });
-
-    expect(handleEndMock).toHaveBeenCalled();
-  });
 });

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

@@ -17,7 +17,7 @@ import {
   generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery } from '../ImageGallery';
 

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

@@ -20,7 +20,7 @@ import {
 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 { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 

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

@@ -23,7 +23,7 @@ import {
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 

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

@@ -19,7 +19,7 @@ import {
 import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGalleryOverlay } from '../components/ImageGalleryOverlay';
 

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

@@ -5,7 +5,6 @@ import Animated, { SharedValue } from 'react-native-reanimated';
 
 import {
   isVideoPlayerAvailable,
-  PlaybackStatus,
   Video,
   VideoPayloadData,
   VideoProgressData,
@@ -98,37 +97,6 @@ export const AnimatedGalleryVideo = React.memo(
       }
     };
 
-    const onPlayBackStatusUpdate = (playbackStatus: PlaybackStatus) => {
-      if (!playbackStatus.isLoaded) {
-        // Update your UI for the unloaded state
-        setOpacity(1);
-        if (playbackStatus.error) {
-          console.error(`Encountered a fatal error during playback: ${playbackStatus.error}`);
-        }
-      } else {
-        // Update your UI for the loaded state
-        setOpacity(0);
-        handleLoad(attachmentId, playbackStatus.durationMillis);
-        if (playbackStatus.isPlaying) {
-          // Update your UI for the playing state
-          handleProgress(
-            attachmentId,
-            playbackStatus.positionMillis / playbackStatus.durationMillis,
-          );
-        }
-
-        if (playbackStatus.isBuffering) {
-          // Update your UI for the buffering state
-          setOpacity(1);
-        }
-
-        if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
-          // The player has just finished playing and will stop. Maybe you want to play something else?
-          handleEnd();
-        }
-      }
-    };
-
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
@@ -162,7 +130,6 @@ export const AnimatedGalleryVideo = React.memo(
             onEnd={onEnd}
             onLoad={onLoad}
             onLoadStart={onLoadStart}
-            onPlaybackStatusUpdate={onPlayBackStatusUpdate}
             onProgress={onProgress}
             paused={paused}
             repeat={repeat}

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

@@ -25,12 +25,10 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
+import { FileTypes } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
-export type ImageGalleryFooterCustomComponent<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = ({
+export type ImageGalleryFooterCustomComponent = ({
   openGridView,
   photo,
   share,
@@ -39,7 +37,7 @@ export type ImageGalleryFooterCustomComponent<
   openGridView: () => void;
   share: () => Promise<void>;
   shareMenuOpen: boolean;
-  photo?: Photo<StreamChatGenerics>;
+  photo?: Photo;
 }) => React.ReactElement | null;
 
 export type ImageGalleryFooterVideoControlProps = {
@@ -57,27 +55,23 @@ export type ImageGalleryFooterVideoControlComponent = ({
   progress,
 }: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterCustomComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
+export type ImageGalleryFooterCustomComponentProps = {
+  centerElement?: ImageGalleryFooterCustomComponent;
   GridIcon?: React.ReactElement;
-  leftElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
-  rightElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
+  leftElement?: ImageGalleryFooterCustomComponent;
+  rightElement?: ImageGalleryFooterCustomComponent;
   ShareIcon?: React.ReactElement;
   videoControlElement?: ImageGalleryFooterVideoControlComponent;
 };
 
-type ImageGalleryFooterPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
+type ImageGalleryFooterPropsWithContext = ImageGalleryFooterCustomComponentProps & {
   accessibilityLabel: string;
   duration: number;
   onPlayPause: () => void;
   opacity: SharedValue<number>;
   openGridView: () => void;
   paused: boolean;
-  photo: Photo<StreamChatGenerics>;
+  photo: Photo;
   photoLength: number;
   progress: number;
   selectedIndex: number;
@@ -85,11 +79,7 @@ type ImageGalleryFooterPropsWithContext<
   visible: SharedValue<number>;
 };
 
-export const ImageGalleryFooterWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
-) => {
+export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWithContext) => {
   const {
     accessibilityLabel,
     centerElement,
@@ -241,9 +231,9 @@ const ShareButton = ({ share, ShareIcon, shareMenuOpen }: ShareButtonProps) => {
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
-  nextProps: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: ImageGalleryFooterPropsWithContext,
+  nextProps: ImageGalleryFooterPropsWithContext,
 ) => {
   const {
     duration: prevDuration,
@@ -286,15 +276,11 @@ const MemoizedImageGalleryFooter = React.memo(
   areEqual,
 ) as typeof ImageGalleryFooterWithContext;
 
-export type ImageGalleryFooterProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = ImageGalleryFooterPropsWithContext<StreamChatGenerics>;
+export type ImageGalleryFooterProps = ImageGalleryFooterPropsWithContext;
 
-export const ImageGalleryFooter = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ImageGalleryFooterProps<StreamChatGenerics>,
-) => <MemoizedImageGalleryFooter {...props} />;
+export const ImageGalleryFooter = (props: ImageGalleryFooterProps) => (
+  <MemoizedImageGalleryFooter {...props} />
+);
 
 ImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';
 

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

@@ -12,7 +12,6 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import type { Photo } from '../ImageGallery';
 
@@ -20,38 +19,29 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderCustomComponent<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = ({
+export type ImageGalleryHeaderCustomComponent = ({
   hideOverlay,
   photo,
 }: {
   hideOverlay: () => void;
-  photo?: Photo<StreamChatGenerics>;
+  photo?: Photo;
 }) => React.ReactElement | null;
 
-export type ImageGalleryHeaderCustomComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  centerElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
+export type ImageGalleryHeaderCustomComponentProps = {
+  centerElement?: ImageGalleryHeaderCustomComponent;
   CloseIcon?: React.ReactElement;
-  leftElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
-  rightElement?: ImageGalleryHeaderCustomComponent<StreamChatGenerics>;
+  leftElement?: ImageGalleryHeaderCustomComponent;
+  rightElement?: ImageGalleryHeaderCustomComponent;
 };
 
-type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
-  ImageGalleryHeaderCustomComponentProps<StreamChatGenerics> & {
-    opacity: SharedValue<number>;
-    visible: SharedValue<number>;
-    photo?: Photo<StreamChatGenerics>;
-    /* Lookup key in the language corresponding translations sheet to perform date formatting */
-  };
+type Props = ImageGalleryHeaderCustomComponentProps & {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+  photo?: Photo;
+  /* Lookup key in the language corresponding translations sheet to perform date formatting */
+};
 
-export const ImageGalleryHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: Props<StreamChatGenerics>,
-) => {
+export const ImageGalleryHeader = (props: Props) => {
   const { centerElement, CloseIcon, leftElement, opacity, photo, rightElement, visible } = props;
   const [height, setHeight] = useState(200);
   const {

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -60,10 +60,12 @@ export const ImageGalleryVideoControl = React.memo(
     } = useTheme();
 
     const handlePlayPause = async () => {
+      // Note: Not particularly sure why this was ever added, but
+      // will keep it for now for backwards compatibility.
       if (progress === 1) {
         // For expo CLI
-        if (videoRef.current?.setPositionAsync) {
-          await videoRef.current.setPositionAsync(0);
+        if (videoRef.current?.replay) {
+          await videoRef.current.replay();
         }
       }
       onPlayPause();

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -4,7 +4,7 @@ import { Image, StyleSheet, View } from 'react-native';
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../../hooks/useViewport';
-import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
+import { FileTypes } from '../../../types/types';
 import { BottomSheetFlatList } from '../../BottomSheetCompatibility/BottomSheetFlatList';
 import { BottomSheetTouchableOpacity } from '../../BottomSheetCompatibility/BottomSheetTouchableOpacity';
 
@@ -31,39 +31,27 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ImageGalleryGridImageComponent<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = ({
+export type ImageGalleryGridImageComponent = ({
   item,
 }: {
-  item: Photo<StreamChatGenerics> & {
+  item: Photo & {
     selectAndClose: () => void;
     numberOfImageGalleryGridColumns?: number;
   };
 }) => React.ReactElement | null;
 
-export type ImageGalleryGridImageComponents<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;
-  imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;
+export type ImageGalleryGridImageComponents = {
+  avatarComponent?: ImageGalleryGridImageComponent;
+  imageComponent?: ImageGalleryGridImageComponent;
 };
 
-export type GridImageItem<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Photo<StreamChatGenerics> &
-  ImageGalleryGridImageComponents<StreamChatGenerics> & {
+export type GridImageItem = Photo &
+  ImageGalleryGridImageComponents & {
     selectAndClose: () => void;
     numberOfImageGalleryGridColumns?: number;
   };
 
-const GridImage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  item,
-}: {
-  item: GridImageItem<StreamChatGenerics>;
-}) => {
+const GridImage = ({ item }: { item: GridImageItem }) => {
   const {
     theme: {
       imageGallery: {
@@ -95,19 +83,11 @@ const GridImage = <
   );
 };
 
-const renderItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  item,
-}: {
-  item: GridImageItem<StreamChatGenerics>;
-}) => <GridImage item={item} />;
+const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGridType<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = ImageGalleryGridImageComponents<StreamChatGenerics> & {
+export type ImageGridType = ImageGalleryGridImageComponents & {
   closeGridView: () => void;
-  photos: Photo<StreamChatGenerics>[];
+  photos: Photo[];
   setSelectedMessage: React.Dispatch<
     React.SetStateAction<
       | {
@@ -120,11 +100,7 @@ export type ImageGridType<
   numberOfImageGalleryGridColumns?: number;
 };
 
-export const ImageGrid = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ImageGridType<StreamChatGenerics>,
-) => {
+export const ImageGrid = (props: ImageGridType) => {
   const {
     avatarComponent,
     closeGridView,
@@ -155,14 +131,14 @@ export const ImageGrid = <
   }));
 
   return (
-    <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>
+    <BottomSheetFlatList<GridImageItem>
       accessibilityLabel='Image Grid'
       contentContainerStyle={[
         styles.contentContainer,
         { backgroundColor: white },
         contentContainer,
       ]}
-      data={imageGridItems as GridImageItem<StreamChatGenerics>[]}
+      data={imageGridItems as GridImageItem[]}
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}