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

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/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>

package/src/native.ts

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

package/src/version.json

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