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

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/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/contexts/debugContext/DebugContext.tsx

@@ -0,0 +1,77 @@
+import React, { PropsWithChildren, useContext, useRef } from 'react';
+
+import type { Channel, ChannelState, StreamChat } from 'stream-chat';
+
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+export type DebugDataType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> =
+  | StreamChat<StreamChatGenerics>['user']
+  | {
+      data: Channel<StreamChatGenerics>['data'];
+      members: ChannelState<StreamChatGenerics>['members'];
+    }[]
+  | MessageType<StreamChatGenerics>[];
+
+export 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 const DebugContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as React.MutableRefObject<DebugContextValue>,
+);
+
+export const DebugContextProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  children,
+  useFlipper,
+}: PropsWithChildren<{
+  useFlipper: () => {
+    updateData: (ref: React.RefObject<DebugContextValue<StreamChatGenerics>>) => void;
+  };
+}>) => {
+  const debugRef = useRef<DebugContextValue<StreamChatGenerics>>({
+    eventType: undefined,
+    sendEventParams: undefined,
+  });
+
+  const { updateData } = useFlipper();
+
+  const ref = useRef<DebugContextValue<StreamChatGenerics>>({
+    setEventType: (data: string) => {
+      debugRef.current.eventType = data;
+      updateData(debugRef);
+    },
+    setSendEventParams: (data: { action: string; data: DebugDataType<StreamChatGenerics> }) => {
+      debugRef.current.sendEventParams = data;
+      updateData(debugRef);
+    },
+  });
+
+  return (
+    <DebugContext.Provider value={ref as unknown as React.MutableRefObject<DebugContextValue>}>
+      {children}
+    </DebugContext.Provider>
+  );
+};
+
+export const useDebugContext = () => {
+  const contextValue = useContext(
+    DebugContext,
+  ) as unknown as React.MutableRefObject<DebugContextValue>;
+
+  return contextValue;
+};

package/src/contexts/index.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/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-beta.1"
+  "version": "5.2.0-beta.1"
 }