stream-chat-react-native-core 5.1.0-beta.1 → 5.2.0-beta.1

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.1.0-beta.1"
+  "version": "5.2.0-beta.1"
 }

package/lib/typescript/components/ImageGallery/ImageGallery.d.ts

@@ -70,10 +70,13 @@ export declare type Photo<StreamChatGenerics extends DefaultStreamChatGenerics =
     uri: string;
     channelId?: string;
     created_at?: string | Date;
+    duration?: number;
     messageId?: string;
     mime_type?: string;
     original_height?: number;
     original_width?: number;
+    paused?: boolean;
+    progress?: number;
     type?: string;
     user?: UserResponse<StreamChatGenerics> | null;
     user_id?: string;

package/lib/typescript/components/ImageGallery/components/AnimatedGalleryVideo.d.ts

@@ -2,11 +2,12 @@ import React from 'react';
 import { ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { VideoPayloadData, VideoProgressData, VideoType } from '../../../native';
+import { VideoType } from '../../../native';
 export declare type AnimatedGalleryVideoType = {
+    attachmentId: string;
     handleEnd: () => void;
-    handleLoad: (payload: VideoPayloadData) => void;
-    handleProgress: (data: VideoProgressData) => void;
+    handleLoad: (index: string, duration: number) => void;
+    handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;
     index: number;
     offsetScale: Animated.SharedValue<number>;
     paused: boolean;
@@ -21,6 +22,7 @@ export declare type AnimatedGalleryVideoType = {
     translateX: Animated.SharedValue<number>;
     translateY: Animated.SharedValue<number>;
     videoRef: React.RefObject<VideoType>;
+    repeat?: boolean;
     style?: StyleProp<ViewStyle>;
 };
 export declare const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType>;

package/lib/typescript/components/ImageGallery/components/ImageGalleryFooter.d.ts

@@ -11,11 +11,10 @@ export declare type ImageGalleryFooterCustomComponent<StreamChatGenerics extends
 export declare type ImageGalleryFooterVideoControlProps = {
     duration: number;
     onPlayPause: (status?: boolean) => void;
-    onProgressDrag: (progress: number) => void;
     paused: boolean;
     progress: number;
 };
-export declare type ImageGalleryFooterVideoControlComponent = ({ duration, onPlayPause, onProgressDrag, paused, progress, }: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
+export declare type ImageGalleryFooterVideoControlComponent = ({ duration, onPlayPause, paused, progress, }: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
 export declare type ImageGalleryFooterCustomComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     centerElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
     GridIcon?: React.ReactElement;
@@ -28,7 +27,6 @@ declare type ImageGalleryFooterPropsWithContext<StreamChatGenerics extends Defau
     accessibilityLabel: string;
     duration: number;
     onPlayPause: () => void;
-    onProgressDrag: (progress: number) => void;
     opacity: Animated.SharedValue<number>;
     openGridView: () => void;
     paused: boolean;

package/lib/typescript/components/ProgressControl/ProgressControl.d.ts

@@ -3,9 +3,9 @@ export declare type ProgressControlProps = {
     duration: number;
     filledColor: string;
     onPlayPause: (status?: boolean) => void;
-    onProgressDrag: (progress: number) => void;
     progress: number;
     testID: string;
     width: number;
+    onProgressDrag?: (progress: number) => void;
 };
 export declare const ProgressControl: React.FC<ProgressControlProps>;

package/lib/typescript/contexts/debugContext/DebugContext.d.ts

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+import type { Channel, ChannelState, StreamChat } from 'stream-chat';
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare type DebugDataType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = StreamChat<StreamChatGenerics>['user'] | {
+    data: Channel<StreamChatGenerics>['data'];
+    members: ChannelState<StreamChatGenerics>['members'];
+}[] | MessageType<StreamChatGenerics>[];
+export declare type DebugContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    eventType?: string;
+    sendEventParams?: {
+        action: string;
+        data: DebugDataType<StreamChatGenerics>;
+    };
+    setEventType?: (data: string) => void;
+    setSendEventParams?: (data: {
+        action: string;
+        data: DebugDataType<StreamChatGenerics>;
+    }) => void;
+};
+export declare const DebugContext: React.Context<React.MutableRefObject<DebugContextValue<DefaultStreamChatGenerics>>>;
+export declare const DebugContextProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, useFlipper, }: React.PropsWithChildren<{
+    useFlipper: () => {
+        updateData: (ref: React.RefObject<DebugContextValue<StreamChatGenerics>>) => void;
+    };
+}>) => JSX.Element;
+export declare const useDebugContext: () => React.MutableRefObject<DebugContextValue<DefaultStreamChatGenerics>>;

package/lib/typescript/contexts/index.d.ts

@@ -2,6 +2,7 @@ export * from './attachmentPickerContext/AttachmentPickerContext';
 export * from './channelContext/ChannelContext';
 export * from './channelsContext/ChannelsContext';
 export * from './chatContext/ChatContext';
+export * from './debugContext/DebugContext';
 export * from './imageGalleryContext/ImageGalleryContext';
 export * from './keyboardContext/KeyboardContext';
 export * from './messageContext/MessageContext';

package/lib/typescript/native.d.ts

@@ -130,9 +130,9 @@ export declare type SoundType = {
 };
 export declare let Sound: SoundType;
 export declare type VideoProgressData = {
-    currentTime?: number;
+    currentTime: number;
+    seekableDuration: number;
     playableDuration?: number;
-    seekableDuration?: number;
 };
 export declare type VideoPayloadData = {
     duration: number;
@@ -176,6 +176,7 @@ export declare type VideoType = {
     onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
     onProgress?: (data: VideoProgressData) => void;
     onReadyForDisplay?: () => void;
+    repeat?: boolean;
     replayAsync?: () => void;
     resizeMode?: string;
     seek?: (progress: number) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.1.0-beta.1",
+  "version": "5.2.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -94,13 +94,13 @@
     "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "^7.12.5",
-    "@types/better-sqlite3": "^7.6.0",
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
     "@testing-library/jest-native": "4.0.4",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/react-native": "9.0.0",
+    "@types/better-sqlite3": "^7.6.0",
     "@types/eslint": "7.2.10",
     "@types/jest": "26.0.23",
     "@types/lodash": "4.14.169",

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -10,6 +10,7 @@ import {
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -116,12 +117,28 @@ const ChannelListMessengerWithContext = <
    * change to loadingChannels is registered.
    */
   const [loading, setLoading] = useState(true);
+  const debugRef = useDebugContext();
+
   useEffect(() => {
     if (!!loadingChannels !== loading) {
       setLoading(!!loadingChannels);
     }
   }, [loading, loadingChannels]);
 
+  const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
+
+  if (isDebugModeEnabled) {
+    if (debugRef.current.setEventType) debugRef.current.setEventType('send');
+    if (debugRef.current.setSendEventParams)
+      debugRef.current.setSendEventParams({
+        action: 'Channels',
+        data: channels.map((channel) => ({
+          data: channel.data,
+          members: channel.state.members,
+        })),
+      });
+  }
+
   if (error && !refreshing && !loadingChannels && !channels?.length) {
     return (
       <LoadingErrorIndicator

package/src/components/Chat/Chat.tsx

@@ -15,6 +15,7 @@ import { useSyncDatabase } from './hooks/useSyncDatabase';
 
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
+import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
@@ -170,6 +171,9 @@ const ChatWithContext = <
    */
   const mutedUsers = useMutedUsers<StreamChatGenerics>(client);
 
+  const debugRef = useDebugContext();
+  const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
+
   useEffect(() => {
     if (client) {
       client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);
@@ -177,6 +181,15 @@ const ChatWithContext = <
       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]);
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);

package/src/components/ImageGallery/ImageGallery.tsx

@@ -55,12 +55,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import {
-  isVideoPackageAvailable,
-  VideoPayloadData,
-  VideoProgressData,
-  VideoType,
-} from '../../native';
+import { isVideoPackageAvailable, VideoType } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
@@ -151,9 +146,9 @@ export const ImageGallery = <
     numberOfImageGalleryGridColumns,
     overlayOpacity,
   } = props;
-  const [paused, setPaused] = useState<boolean>(false);
-  const [progress, setProgress] = useState<number>(0);
-  const [duration, setDuration] = useState<number>(0);
+  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
+    Photo<StreamChatGenerics>[]
+  >([]);
   const {
     theme: {
       colors: { white_snow },
@@ -282,11 +277,14 @@ export const ImageGallery = <
       return {
         channelId: cur.cid,
         created_at: cur.created_at,
+        duration: 0,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
         mime_type: a.type === 'giphy' ? getGiphyMimeType(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'
@@ -312,6 +310,10 @@ export const ImageGallery = <
    */
   const photoLength = photos.length;
 
+  useEffect(() => {
+    setImageGalleryAttachments(photos);
+  }, []);
+
   /**
    * The URL for the images may differ because of dimensions passed as
    * part of the query.
@@ -338,10 +340,6 @@ export const ImageGallery = <
         stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
     );
 
-    if (photoLength > 1) {
-      setPaused(true);
-    }
-
     runOnUI(updatePosition)(newIndex);
   }, [selectedMessage, photoLength]);
 
@@ -351,10 +349,11 @@ export const ImageGallery = <
    * to the proper scaled height based on the width being restricted to the
    * screen width when the dimensions are received.
    */
-  const uriForCurrentImage = photos[selectedIndex]?.uri;
+  const uriForCurrentImage = imageGalleryAttachments[selectedIndex]?.uri;
+
   useEffect(() => {
     setCurrentImageHeight(screenHeight);
-    const photo = photos[index.value];
+    const photo = imageGalleryAttachments[index.value];
     const height = photo?.original_height;
     const width = photo?.original_width;
 
@@ -463,53 +462,69 @@ export const ImageGallery = <
   const openGridView = () => {
     if (bottomSheetModalRef.current?.present) {
       bottomSheetModalRef.current.present();
-      setGridPhotos(photos);
+      setGridPhotos(imageGalleryAttachments);
     }
   };
 
+  const handleEnd = () => {
+    handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
+    handleProgress(imageGalleryAttachments[selectedIndex].id, 1, true);
+  };
+
   const videoRef = useRef<VideoType>(null);
 
-  const handleEnd = () => {
-    setPaused(true);
-    setProgress(1);
+  const handleLoad = (index: string, duration: number) => {
+    setImageGalleryAttachments((prevImageGalleryAttachment) =>
+      prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
+        ...imageGalleryAttachment,
+        duration: imageGalleryAttachment.id === index ? duration : imageGalleryAttachment.duration,
+      })),
+    );
   };
 
-  const handleLoad = (payload: VideoPayloadData) => {
-    if (payload.duration) setDuration(payload.duration);
+  const handleProgress = (index: string, progress: number, hasEnd?: boolean) => {
+    setImageGalleryAttachments((prevImageGalleryAttachments) =>
+      prevImageGalleryAttachments.map((imageGalleryAttachment) => ({
+        ...imageGalleryAttachment,
+        progress:
+          imageGalleryAttachment.id === index
+            ? hasEnd
+              ? 1
+              : progress
+            : imageGalleryAttachment.progress,
+      })),
+    );
   };
 
-  const handleProgress = (data: VideoProgressData) => {
-    if (data.currentTime && data.seekableDuration) {
-      setProgress(data.currentTime / data.seekableDuration);
+  const handlePlayPause = (index: string, pausedStatus?: boolean) => {
+    if (pausedStatus === false) {
+      // If the status is false we set the audio with the index as playing and the others as paused.
+      setImageGalleryAttachments((prevImageGalleryAttachment) =>
+        prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
+          ...imageGalleryAttachment,
+          paused: imageGalleryAttachment.id === index ? false : true,
+        })),
+      );
+    } else {
+      // If the status is true we simply set all the audio's paused state as true.
+      setImageGalleryAttachments((prevImageGalleryAttachment) =>
+        prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
+          ...imageGalleryAttachment,
+          paused: true,
+        })),
+      );
     }
   };
 
-  const handlePlayPause = (status?: boolean) => {
+  const onPlayPause = (status?: boolean) => {
     if (status === undefined) {
-      // React Native Video for RN CLI has seek as an API to move to a particular location in the video
-      if (progress === 1 && videoRef.current && videoRef.current.seek) {
-        videoRef.current.seek(0);
-      }
-      // Expo AV for Expo has replayAsync as an API to move to a starting of the video
-      if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
-        videoRef.current.replayAsync();
+      if (imageGalleryAttachments[selectedIndex].paused) {
+        handlePlayPause(imageGalleryAttachments[selectedIndex].id, false);
+      } else {
+        handlePlayPause(imageGalleryAttachments[selectedIndex].id, true);
       }
-
-      setPaused((state) => !state);
     } else {
-      setPaused(status);
-    }
-  };
-
-  const onProgressDrag = (progress: number) => {
-    // React Native Video for RN CLI has seek as an API to move to a particular location in the video
-    if (videoRef.current && videoRef.current.seek) {
-      videoRef.current.seek(progress);
-    }
-
-    // Expo AV for Expo has setPositionAsync as an API to move to a particular location of the video
-    if (videoRef.current && videoRef.current.setPositionAsync) {
-      videoRef.current.setPositionAsync(progress * 1000);
+      handlePlayPause(imageGalleryAttachments[selectedIndex].id, status);
     }
   };
 
@@ -568,17 +583,19 @@ export const ImageGallery = <
                           },
                         ]}
                       >
-                        {photos.map((photo, i) =>
+                        {imageGalleryAttachments.map((photo, i) =>
                           photo.type === 'video' ? (
                             <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}
@@ -632,25 +649,27 @@ export const ImageGallery = <
       </TapGestureHandler>
       <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
-        photo={photos[selectedIndex]}
+        photo={imageGalleryAttachments[selectedIndex]}
         visible={headerFooterVisible}
         {...imageGalleryCustomComponents?.header}
       />
-      <ImageGalleryFooter<StreamChatGenerics>
-        accessibilityLabel={'Image Gallery Footer'}
-        duration={duration}
-        onPlayPause={handlePlayPause}
-        onProgressDrag={onProgressDrag}
-        opacity={headerFooterOpacity}
-        openGridView={openGridView}
-        paused={paused}
-        photo={photos[selectedIndex]}
-        photoLength={photoLength}
-        progress={progress}
-        selectedIndex={selectedIndex}
-        visible={headerFooterVisible}
-        {...imageGalleryCustomComponents?.footer}
-      />
+
+      {imageGalleryAttachments.length > 0 && (
+        <ImageGalleryFooter<StreamChatGenerics>
+          accessibilityLabel={'Image Gallery Footer'}
+          duration={imageGalleryAttachments[selectedIndex].duration || 0}
+          onPlayPause={onPlayPause}
+          opacity={headerFooterOpacity}
+          openGridView={openGridView}
+          paused={imageGalleryAttachments[selectedIndex].paused || false}
+          photo={imageGalleryAttachments[selectedIndex]}
+          photoLength={imageGalleryAttachments.length}
+          progress={imageGalleryAttachments[selectedIndex].progress || 0}
+          selectedIndex={selectedIndex}
+          visible={headerFooterVisible}
+          {...imageGalleryCustomComponents?.footer}
+        />
+      )}
 
       <ImageGalleryOverlay
         animatedBottomSheetIndex={animatedBottomSheetIndex}
@@ -708,10 +727,13 @@ export type Photo<
   uri: string;
   channelId?: string;
   created_at?: string | Date;
+  duration?: number;
   messageId?: string;
   mime_type?: string;
   original_height?: number;
   original_width?: number;
+  paused?: boolean;
+  progress?: number;
   type?: string;
   user?: UserResponse<StreamChatGenerics> | null;
   user_id?: string;

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

@@ -78,7 +78,7 @@ describe('ImageGallery', () => {
 
     act(() => {
       fireEvent(videoComponent, 'onEnd');
-      fireEvent(videoComponent, 'onProgress');
+      fireEvent(videoComponent, 'onProgress', { currentTime: 10, seekableDuration: 60 });
     });
 
     expect(handleEndMock).toHaveBeenCalled();
@@ -127,7 +127,7 @@ describe('ImageGallery', () => {
     const spinnerComponent = queryByA11yLabel('Spinner');
 
     act(() => {
-      fireEvent(videoComponent, 'onLoad');
+      fireEvent(videoComponent, 'onLoad', { duration: 10 });
     });
 
     expect(handleLoadMock).toHaveBeenCalled();

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

@@ -64,22 +64,25 @@ describe('ImageGallery', () => {
   });
 
   it('handle handleLoad function when video item present and payload duration is available', () => {
+    const attachment = generateVideoAttachment({ type: 'video' });
+    const message = generateMessage({
+      attachments: [attachment],
+    });
     const { getByA11yLabel } = render(
       getComponent({
-        messages: [
-          generateMessage({
-            attachments: [generateVideoAttachment({ type: 'video' })],
-          }),
-        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+        messages: [message] as unknown as MessageType<DefaultStreamChatGenerics>[],
       }),
     );
 
     const videoItemComponent = getByA11yLabel('Image Gallery Video');
 
     act(() => {
-      fireEvent(videoItemComponent, 'handleLoad', {
-        duration: 10,
-      });
+      fireEvent(
+        videoItemComponent,
+        'handleLoad',
+        `photoId-${message.id}-${attachment.asset_url}`,
+        10,
+      );
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
@@ -110,26 +113,32 @@ describe('ImageGallery', () => {
   });
 
   it('handle handleProgress function when video item present and payload is well defined', () => {
+    const attachment = generateVideoAttachment({ type: 'video' });
+    const message = generateMessage({
+      attachments: [attachment],
+    });
+
     const { getByA11yLabel } = render(
       getComponent({
-        messages: [
-          generateMessage({
-            attachments: [generateVideoAttachment({ type: 'video' })],
-          }),
-        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+        messages: [message] as unknown as MessageType<DefaultStreamChatGenerics>[],
       }),
     );
 
     const videoItemComponent = getByA11yLabel('Image Gallery Video');
 
     act(() => {
-      fireEvent(videoItemComponent, 'handleLoad', {
-        duration: 10,
-      });
-      fireEvent(videoItemComponent, 'handleProgress', {
-        currentTime: 3,
-        seekableDuration: 10,
-      });
+      fireEvent(
+        videoItemComponent,
+        'handleLoad',
+        `photoId-${message.id}-${attachment.asset_url}`,
+        10,
+      );
+      fireEvent(
+        videoItemComponent,
+        'handleProgress',
+        `photoId-${message.id}-${attachment.asset_url}`,
+        0.3,
+      );
     });
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
@@ -166,22 +175,25 @@ describe('ImageGallery', () => {
   });
 
   it('handle handleEnd function when video item present', () => {
+    const attachment = generateVideoAttachment({ type: 'video' });
+    const message = generateMessage({
+      attachments: [attachment],
+    });
     const { getByA11yLabel } = render(
       getComponent({
-        messages: [
-          generateMessage({
-            attachments: [generateVideoAttachment({ type: 'video' })],
-          }),
-        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+        messages: [message] as unknown as MessageType<DefaultStreamChatGenerics>[],
       }),
     );
 
     const videoItemComponent = getByA11yLabel('Image Gallery Video');
 
     act(() => {
-      fireEvent(videoItemComponent, 'handleLoad', {
-        duration: 10,
-      });
+      fireEvent(
+        videoItemComponent,
+        'handleLoad',
+        `photoId-${message.id}-${attachment.asset_url}`,
+        10,
+      );
       fireEvent(videoItemComponent, 'handleEnd');
     });