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

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');
     });
 

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

@@ -20,9 +20,10 @@ const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 export 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;
@@ -35,6 +36,7 @@ export type AnimatedGalleryVideoType = {
   translateX: Animated.SharedValue<number>;
   translateY: Animated.SharedValue<number>;
   videoRef: React.RefObject<VideoType>;
+  repeat?: boolean;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -51,7 +53,9 @@ const styles = StyleSheet.create({
 export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.memo(
   (props) => {
     const [opacity, setOpacity] = useState<number>(1);
+
     const {
+      attachmentId,
       handleEnd,
       handleLoad,
       handleProgress,
@@ -59,6 +63,7 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
       offsetScale,
       paused,
       previous,
+      repeat,
       scale,
       screenHeight,
       selected,
@@ -76,7 +81,7 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
 
     const onLoad = (payload: VideoPayloadData) => {
       setOpacity(0);
-      handleLoad(payload);
+      handleLoad(attachmentId, payload.duration);
     };
 
     const onEnd = () => {
@@ -84,7 +89,7 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
     };
 
     const onProgress = (data: VideoProgressData) => {
-      handleProgress(data);
+      handleProgress(attachmentId, data.currentTime / data.seekableDuration);
     };
 
     const onBuffer = ({ isBuffering }: { isBuffering: boolean }) => {
@@ -102,13 +107,13 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
       } else {
         // Update your UI for the loaded state
         setOpacity(0);
-        handleLoad({ duration: playbackStatus.durationMillis / 1000 });
+        handleLoad(attachmentId, playbackStatus.durationMillis / 1000);
         if (playbackStatus.isPlaying) {
           // Update your UI for the playing state
-          handleProgress({
-            currentTime: playbackStatus.positionMillis / 1000,
-            seekableDuration: playbackStatus.durationMillis / 1000,
-          });
+          handleProgress(
+            attachmentId,
+            playbackStatus.positionMillis / 1000 / (playbackStatus.durationMillis / 1000),
+          );
         }
 
         if (playbackStatus.isBuffering) {
@@ -189,6 +194,7 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
             onPlaybackStatusUpdate={onPlayBackStatusUpdate}
             onProgress={onProgress}
             paused={paused}
+            repeat={repeat}
             resizeMode='contain'
             style={style}
             testID='video-player'
@@ -219,6 +225,7 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
   (prevProps, nextProps) => {
     if (
       prevProps.paused === nextProps.paused &&
+      prevProps.repeat === nextProps.repeat &&
       prevProps.shouldRender === nextProps.shouldRender &&
       prevProps.source.uri === nextProps.source.uri &&
       prevProps.screenHeight === nextProps.screenHeight &&

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

@@ -65,7 +65,6 @@ export type ImageGalleryFooterCustomComponent<
 export type ImageGalleryFooterVideoControlProps = {
   duration: number;
   onPlayPause: (status?: boolean) => void;
-  onProgressDrag: (progress: number) => void;
   paused: boolean;
   progress: number;
 };
@@ -73,7 +72,6 @@ export type ImageGalleryFooterVideoControlProps = {
 export type ImageGalleryFooterVideoControlComponent = ({
   duration,
   onPlayPause,
-  onProgressDrag,
   paused,
   progress,
 }: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
@@ -95,7 +93,6 @@ type ImageGalleryFooterPropsWithContext<
   accessibilityLabel: string;
   duration: number;
   onPlayPause: () => void;
-  onProgressDrag: (progress: number) => void;
   opacity: Animated.SharedValue<number>;
   openGridView: () => void;
   paused: boolean;
@@ -118,7 +115,6 @@ export const ImageGalleryFooterWithContext = <
     GridIcon,
     leftElement,
     onPlayPause,
-    onProgressDrag,
     opacity,
     openGridView,
     paused,
@@ -192,12 +188,11 @@ export const ImageGalleryFooterWithContext = <
       <ReanimatedSafeAreaView style={[container, footerStyle, { backgroundColor: white }]}>
         {photo.type === 'video' ? (
           videoControlElement ? (
-            videoControlElement({ duration, onPlayPause, onProgressDrag, paused, progress })
+            videoControlElement({ duration, onPlayPause, paused, progress })
           ) : (
             <ImageGalleryVideoControl
               duration={duration}
               onPlayPause={onPlayPause}
-              onProgressDrag={onProgressDrag}
               paused={paused}
               progress={progress}
             />

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

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 
 export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(
   (props) => {
-    const { duration, onPlayPause, onProgressDrag, paused, progress } = props;
+    const { duration, onPlayPause, paused, progress } = props;
 
     const videoDuration = duration
       ? duration / 3600 >= 1
@@ -53,7 +53,7 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
 
     const {
       theme: {
-        colors: { static_black, static_white },
+        colors: { accent_blue, black, static_black, static_white },
         imageGallery: {
           videoControl: { durationTextStyle, roundedView, videoContainer },
         },
@@ -83,22 +83,21 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
         </TouchableOpacity>
         <Text
           accessibilityLabel='Progress Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
+          style={[styles.durationTextStyle, durationTextStyle, { color: black }]}
         >
           {progressDuration ? progressDuration : '00:00'}
         </Text>
         <ProgressControl
           duration={duration}
-          filledColor={static_white}
+          filledColor={accent_blue}
           onPlayPause={onPlayPause}
-          onProgressDrag={onProgressDrag}
           progress={progress}
           testID={'progress-control'}
           width={180}
         />
         <Text
           accessibilityLabel='Video Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
+          style={[styles.durationTextStyle, durationTextStyle, { color: black }]}
         >
           {videoDuration ? videoDuration : '00:00'}
         </Text>

package/src/components/MessageList/MessageList.tsx

@@ -30,6 +30,7 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -936,6 +937,20 @@ const MessageListWithContext = <
       setFlatListRef(ref);
     }
   };
+
+  const debugRef = useDebugContext();
+
+  const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
+
+  if (isDebugModeEnabled) {
+    if (debugRef.current.setEventType) debugRef.current.setEventType('send');
+    if (debugRef.current.setSendEventParams)
+      debugRef.current.setSendEventParams({
+        action: thread ? 'ThreadList' : 'Messages',
+        data: messageList,
+      });
+  }
+
   const renderListEmptyComponent = () => (
     <View style={[styles.flex, styles.invert]} testID='empty-state'>
       <EmptyStateIndicator listType='message' />

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -96,6 +96,7 @@ const reactionData: ReactionData[] = [
 
 export type Reaction = {
   alignment: Alignment;
+  id: string;
   name: string;
   type: string;
   image?: string;

package/src/components/ProgressControl/ProgressControl.tsx

@@ -15,10 +15,10 @@ export type ProgressControlProps = {
   duration: number;
   filledColor: string;
   onPlayPause: (status?: boolean) => void;
-  onProgressDrag: (progress: number) => void;
   progress: number;
   testID: string;
   width: number;
+  onProgressDrag?: (progress: number) => void;
 };
 
 const height = 2;
@@ -94,7 +94,7 @@ export const ProgressControl: React.FC<ProgressControlProps> = React.memo(
         onFinish: () => {
           translateX.value = state.value;
           const dragFinishLocationInSeconds = (state.value / width) * duration;
-          runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
+          if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
           runOnJS(onPlayPause)(false);
         },
         onStart: () => {
@@ -109,9 +109,13 @@ export const ProgressControl: React.FC<ProgressControlProps> = React.memo(
       <View style={[styles.containerStyle, { backgroundColor: grey_dark, width }]}>
         <Animated.View style={[styles.innerStyle, animatedStyles]} />
 
-        <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent} testID={testID}>
+        <PanGestureHandler
+          maxPointers={1}
+          onGestureEvent={onProgressDrag ? onGestureEvent : undefined}
+          testID={testID}
+        >
           <Animated.View style={[thumbStyles]}>
-            <ProgressControlThumb />
+            {onProgressDrag && <ProgressControlThumb />}
           </Animated.View>
         </PanGestureHandler>
       </View>