stream-chat-react-native-core 6.3.1 → 6.4.0-beta.2

package/src/components/ChannelList/utils.ts

@@ -1,31 +1,67 @@
-import uniqBy from 'lodash/uniqBy';
-import type { Channel, StreamChat } from 'stream-chat';
+import type { Channel, ChannelSort, StreamChat } from 'stream-chat';
+
+import { findLastPinnedChannelIndex, shouldConsiderPinnedChannels } from './hooks/utils';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type MoveParameters<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  channels: Channel<StreamChatGenerics>[];
-  cid: string;
+  channels: Array<Channel<StreamChatGenerics>>;
+  channelToMove: Channel<StreamChatGenerics>;
+  /**
+   * If the index of the channel within `channels` list which is being moved upwards
+   * (`channelToMove`) is known, you can supply it to skip extra calculation.
+   */
+  channelToMoveIndexWithinChannels?: number;
+  sort?: ChannelSort<StreamChatGenerics>;
 };
 
 export const moveChannelUp = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  channels = [],
-  cid,
+  channels,
+  channelToMove,
+  channelToMoveIndexWithinChannels,
+  sort,
 }: MoveParameters<StreamChatGenerics>) => {
-  // get channel from channels
-  const index = channels.findIndex((c) => c.cid === cid);
-  if (index <= 0) return channels;
-  const channel = channels[index];
+  // get index of channel to move up
+  const targetChannelIndex =
+    channelToMoveIndexWithinChannels ??
+    channels.findIndex((channel) => channel.cid === channelToMove.cid);
+
+  const targetChannelExistsWithinList = targetChannelIndex >= 0;
+  const targetChannelAlreadyAtTheTop = targetChannelIndex === 0;
+
+  // pinned channels should not move within the list based on recent activity, channels which
+  // receive messages and are not pinned should move upwards but only under the last pinned channel
+  // in the list
+  const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+
+  if (targetChannelAlreadyAtTheTop) return channels;
+
+  const newChannels = [...channels];
+
+  // target channel index is known, remove it from the list
+  if (targetChannelExistsWithinList) {
+    newChannels.splice(targetChannelIndex, 1);
+  }
+
+  // as position of pinned channels has to stay unchanged, we need to
+  // find last pinned channel in the list to move the target channel after
+  let lastPinnedChannelIndex: number | null = null;
+  if (considerPinnedChannels) {
+    lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
+  }
 
-  // remove channel from current position and add to start
-  channels.splice(index, 1);
-  channels.unshift(channel);
+  // re-insert it at the new place (to specific index if pinned channels are considered)
+  newChannels.splice(
+    typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0,
+    0,
+    channelToMove,
+  );
 
-  return uniqBy([channel, ...channels], 'cid');
+  return newChannels;
 };
 
 type GetParameters<

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { ChannelAvatar } from './ChannelAvatar';
 import type { ChannelPreviewProps } from './ChannelPreview';

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

@@ -12,6 +12,14 @@ import { ProgressControl } from '../../ProgressControl/ProgressControl';
 const styles = StyleSheet.create({
   durationTextStyle: {
     fontWeight: 'bold',
+    marginLeft: 16,
+  },
+  progressContainer: {
+    flex: 1,
+  },
+  progressDurationText: {
+    fontWeight: 'bold',
+    marginRight: 16,
   },
   roundedView: {
     alignItems: 'center',
@@ -20,15 +28,15 @@ const styles = StyleSheet.create({
     elevation: 2,
     height: 36,
     justifyContent: 'center',
+    marginRight: 16,
     width: 36,
   },
   videoContainer: {
     alignItems: 'center',
     backgroundColor: 'rgba(52, 52, 52, 0.1)',
-    display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    padding: 10,
+    justifyContent: 'space-evenly',
+    padding: 12,
   },
 });
 
@@ -46,7 +54,7 @@ export const ImageGalleryVideoControl = React.memo(
       theme: {
         colors: { accent_blue, black, static_black, static_white },
         imageGallery: {
-          videoControl: { durationTextStyle, roundedView, videoContainer },
+          videoControl: { durationTextStyle, progressDurationText, roundedView, videoContainer },
         },
       },
     } = useTheme();
@@ -74,18 +82,20 @@ export const ImageGalleryVideoControl = React.memo(
         </TouchableOpacity>
         <Text
           accessibilityLabel='Progress Duration'
-          style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
+          style={[styles.progressDurationText, { color: black }, progressDurationText]}
         >
           {progressDuration}
         </Text>
-        <ProgressControl
-          duration={duration}
-          filledColor={accent_blue}
-          onPlayPause={onPlayPause}
-          progress={progress}
-          testID={'progress-control'}
-          width={180}
-        />
+        <View style={styles.progressContainer}>
+          <ProgressControl
+            duration={duration}
+            filledColor={accent_blue}
+            progress={progress}
+            testID={'progress-control'}
+            width={180}
+          />
+        </View>
+
         <Text
           accessibilityLabel='Video Duration'
           style={[styles.durationTextStyle, { color: black }, durationTextStyle]}

package/src/components/Message/Message.tsx

@@ -40,6 +40,7 @@ import {
   isEditedMessage,
   MessageStatusTypes,
 } from '../../utils/utils';
+import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
 
 import {
   isMessageWithStylesReadByAndDateSeparator,
@@ -55,23 +56,40 @@ export type TouchableEmitter =
   | 'messageReplies'
   | 'reactionList';
 
+export type TextMentionTouchableHandlerAdditionalInfo<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = { user?: UserResponse<StreamChatGenerics> };
+
 export type TextMentionTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   emitter: 'textMention';
-  additionalInfo?: { user?: UserResponse<StreamChatGenerics> };
+  additionalInfo?: TextMentionTouchableHandlerAdditionalInfo<StreamChatGenerics>;
 };
 
+export type UrlTouchableHandlerAdditionalInfo = { url?: string };
+
 export type UrlTouchableHandlerPayload = {
   emitter: 'textLink' | 'card';
-  additionalInfo?: { url?: string };
+  additionalInfo?: UrlTouchableHandlerAdditionalInfo;
 };
 
+export type FileAttachmentTouchableHandlerAdditionalInfo<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = { attachment?: Attachment<StreamChatGenerics> };
+
 export type FileAttachmentTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   emitter: 'fileAttachment';
-  additionalInfo?: { attachment?: Attachment<StreamChatGenerics> };
+  additionalInfo?: FileAttachmentTouchableHandlerAdditionalInfo<StreamChatGenerics>;
+};
+
+export type GalleryThumbnailTouchableHandlerAdditionalInfo = { thumbnail?: Thumbnail };
+
+export type GalleryThumbnailTouchableHandlerPayload = {
+  emitter: 'gallery';
+  additionalInfo?: GalleryThumbnailTouchableHandlerAdditionalInfo;
 };
 
 export type PressableHandlerPayload = {
@@ -79,11 +97,15 @@ export type PressableHandlerPayload = {
   event?: GestureResponderEvent;
 } & (
   | {
-      emitter?: Exclude<TouchableEmitter, 'textMention' | 'textLink' | 'card' | 'fileAttachment'>;
+      emitter?: Exclude<
+        TouchableEmitter,
+        'textMention' | 'textLink' | 'card' | 'fileAttachment' | 'gallery'
+      >;
     }
   | TextMentionTouchableHandlerPayload
   | UrlTouchableHandlerPayload
   | FileAttachmentTouchableHandlerPayload
+  | GalleryThumbnailTouchableHandlerPayload
 );
 
 export type MessagePressableHandlerPayload<

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
@@ -143,18 +143,19 @@ const FileUploadPreviewWithContext = <
     FileAttachmentIcon,
     fileUploads,
     removeFile,
-    setFileUploads,
     uploadFile,
   } = props;
 
+  const [filesToDisplay, setFilesToDisplay] = useState<FileUpload[]>([]);
+
   const flatListRef = useRef<FlatList<FileUpload> | null>(null);
   const [flatListWidth, setFlatListWidth] = useState(0);
 
   useEffect(() => {
-    setFileUploads(
+    setFilesToDisplay(
       fileUploads.map((file) => ({
         ...file,
-        duration: file.duration || 0,
+        duration: file.duration || filesToDisplay.find((f) => f.id === file.id)?.duration || 0,
         paused: true,
         progress: 0,
       })),
@@ -164,31 +165,20 @@ const FileUploadPreviewWithContext = <
 
   // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
   const onLoad = (index: string, duration: number) => {
-    setFileUploads((prevFileUploads) =>
-      prevFileUploads.map((fileUpload) => ({
+    setFilesToDisplay((prevFilesUploads) =>
+      prevFilesUploads.map((fileUpload, id) => ({
         ...fileUpload,
-        duration: fileUpload.id === index ? duration : fileUpload.duration,
-        file: {
-          ...fileUpload.file,
-          duration: fileUpload.id === index ? duration : fileUpload.duration,
-        },
+        duration: id.toString() === index ? duration : fileUpload.duration,
       })),
     );
   };
 
   // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
-  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {
-    setFileUploads((prevFileUploads) =>
-      prevFileUploads.map((fileUpload) => ({
+  const onProgress = (index: string, progress: number) => {
+    setFilesToDisplay((prevFilesUploads) =>
+      prevFilesUploads.map((fileUpload, id) => ({
         ...fileUpload,
-        progress:
-          fileUpload.id === index
-            ? hasEnd
-              ? 1
-              : currentTime
-              ? currentTime / (fileUpload.duration as number)
-              : 0
-            : fileUpload.progress,
+        progress: id.toString() === index ? progress : fileUpload.progress,
       })),
     );
   };
@@ -197,15 +187,15 @@ const FileUploadPreviewWithContext = <
   const onPlayPause = (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.
-      setFileUploads((prevFileUploads) =>
-        prevFileUploads.map((fileUpload) => ({
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload, id) => ({
           ...fileUpload,
-          paused: fileUpload.id !== index,
+          paused: id.toString() !== index,
         })),
       );
     } else {
       // If the status is true we simply set all the audio's paused state as true.
-      setFileUploads((prevFileUploads) =>
+      setFilesToDisplay((prevFileUploads) =>
         prevFileUploads.map((fileUpload) => ({
           ...fileUpload,
           paused: true,
@@ -225,6 +215,7 @@ const FileUploadPreviewWithContext = <
 
   const renderItem = ({ item }: { item: FileUpload }) => {
     const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
+    const isAudio = item.file.mimeType?.startsWith('audio/');
 
     return (
       <>
@@ -235,13 +226,14 @@ const FileUploadPreviewWithContext = <
           style={styles.overlay}
           type={indicatorType}
         >
-          {item.file.mimeType?.startsWith('audio/') && isSoundPackageAvailable() ? (
+          {isAudio && isSoundPackageAvailable() ? (
             <AudioAttachmentUploadPreview
               hideProgressBar={true}
               item={item}
               onLoad={onLoad}
               onPlayPause={onPlayPause}
               onProgress={onProgress}
+              showSpeedSettings={false}
               testID='audio-attachment-upload-preview'
             />
           ) : (
@@ -308,9 +300,18 @@ const FileUploadPreviewWithContext = <
     }
   }, [fileUploadsLength]);
 
+  const memoizedFilesToDisplay = useMemo(
+    () =>
+      filesToDisplay.map((file, index) => ({
+        ...file,
+        id: index.toString(),
+      })),
+    [filesToDisplay],
+  );
+
   return fileUploadsLength ? (
     <FlatList
-      data={fileUploads}
+      data={memoizedFilesToDisplay}
       getItemLayout={(_, index) => ({
         index,
         length: FILE_PREVIEW_HEIGHT + 8,

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,26 +1,52 @@
-import React, { useEffect } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-  cancelAnimation,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 export type ProgressControlProps = {
+  /**
+   * The duration of the audio in seconds
+   */
   duration: number;
+  /**
+   * The color of the filled progress bar
+   */
   filledColor: string;
+  /**
+   * The progress of the progress bar in percentage
+   */
   progress: number;
+  /**
+   * The test ID of the progress control
+   */
   testID: string;
-  width: number | string;
+  /**
+   * The function to be called when the user ends dragging the progress bar
+   */
+  onEndDrag?: (progress: number) => void;
+  /**
+   * The function to be called when the user plays or pauses the audio
+   * @deprecated Use onStartDrag and onEndDrag instead
+   */
   onPlayPause?: (status?: boolean) => void;
+  /**
+   * The function to be called when the user is dragging the progress bar
+   */
   onProgressDrag?: (progress: number) => void;
+  /**
+   * The function to be called when the user starts dragging the progress bar
+   */
+  onStartDrag?: (progress: number) => void;
+  /**
+   * The width of the progress control
+   */
+  width?: number | string;
 };
 
-const height = 2;
+const TRACK_HEIGHT = 3;
+const THUMB_WIDTH = 8;
 
 const ProgressControlThumb = () => {
   const {
@@ -38,100 +64,97 @@ const ProgressControlThumb = () => {
   );
 };
 
-export const ProgressControl = React.memo(
-  (props: ProgressControlProps) => {
-    const {
-      duration,
-      filledColor: filledColorFromProp,
-      onPlayPause,
-      onProgressDrag,
-      progress,
-      testID,
-      width,
-    } = props;
-    const state = useSharedValue(0);
-    const translateX = useSharedValue(0);
-    const { width: windowWidth } = Dimensions.get('screen');
-    const widthInNumbers = width
-      ? typeof width === 'string'
-        ? (windowWidth * Number(width?.substring(0, width.length - 1))) / 100
-        : width
-      : 0;
-    const {
-      theme: {
-        colors: { grey_dark },
-        progressControl: { container, filledColor: filledColorFromTheme, filledStyles, thumb },
-      },
-    } = useTheme();
-    const pan = Gesture.Pan()
-      .maxPointers(1)
-      .onStart(() => {
-        if (onPlayPause) runOnJS(onPlayPause)(true);
-        cancelAnimation(translateX);
-        state.value = translateX.value;
-      })
-      .onChange((event) => {
-        state.value = translateX.value + event.translationX;
-        if (state.value > widthInNumbers) state.value = widthInNumbers;
-        else if (state.value < 0) state.value = 0;
-      })
-      .onEnd(() => {
-        translateX.value = state.value;
-        const dragFinishLocationInSeconds = (state.value / widthInNumbers) * duration;
-        if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
-        if (onPlayPause) runOnJS(onPlayPause)(false);
-      })
-      .withTestId(testID);
+export const ProgressControl = (props: ProgressControlProps) => {
+  const [widthInNumbers, setWidthInNumbers] = useState(0);
+  const {
+    filledColor: filledColorFromProp,
+    onEndDrag,
+    onPlayPause,
+    onProgressDrag,
+    onStartDrag,
+    progress,
+    testID,
+  } = props;
 
-    const filledColor = filledColorFromProp || filledColorFromTheme;
+  const progressValue = useSharedValue(progress);
+  const {
+    theme: {
+      colors: { grey_dark },
+      progressControl: { container, filledColor: filledColorFromTheme, filledStyles, thumb },
+    },
+  } = useTheme();
 
-    useEffect(() => {
-      if (progress <= 1) {
-        state.value = progress * widthInNumbers;
-        translateX.value = progress * widthInNumbers;
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [progress, widthInNumbers]);
+  const pan = Gesture.Pan()
+    .maxPointers(1)
+    .onStart((event) => {
+      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
+      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
+      if (onStartDrag) runOnJS(onStartDrag)(progressValue.value);
+      if (onPlayPause) runOnJS(onPlayPause)(true);
+    })
+    .onUpdate((event) => {
+      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
+      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
+      if (onProgressDrag) runOnJS(onProgressDrag)(progressValue.value);
+    })
+    .onEnd((event) => {
+      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
+      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
+      if (onEndDrag) runOnJS(onEndDrag)(progressValue.value);
+      if (onPlayPause) runOnJS(onPlayPause)(false);
+    })
+    .withTestId(testID);
 
-    const animatedStyles = useAnimatedStyle(() => ({
-      backgroundColor: filledColor,
-      width: state.value,
-    }));
+  const filledColor = filledColorFromProp || filledColorFromTheme;
 
-    const thumbStyles = useAnimatedStyle(() => ({
-      transform: [{ translateX: state.value }],
-    }));
+  const thumbStyles = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: progress * widthInNumbers - THUMB_WIDTH / 2 }],
+    }),
+    [progress],
+  );
 
-    return (
+  const animatedFilledStyles = useAnimatedStyle(
+    () => ({
+      width: progress * widthInNumbers,
+    }),
+    [progress],
+  );
+
+  return (
+    <GestureDetector gesture={pan}>
       <View
-        style={[styles.container, { backgroundColor: grey_dark, width: widthInNumbers }, container]}
+        onLayout={({ nativeEvent }) => {
+          setWidthInNumbers(nativeEvent.layout.width);
+        }}
+        style={[styles.container, { backgroundColor: grey_dark }, container]}
       >
-        <Animated.View style={[styles.filledStyle, animatedStyles, filledStyles]} />
-        <GestureDetector gesture={pan}>
-          <Animated.View style={[thumbStyles, thumb]}>
-            {onProgressDrag ? <ProgressControlThumb /> : null}
-          </Animated.View>
-        </GestureDetector>
+        <Animated.View
+          style={[
+            styles.filledStyle,
+            animatedFilledStyles,
+            {
+              backgroundColor: filledColor,
+            },
+            filledStyles,
+          ]}
+        />
+        <Animated.View style={[thumbStyles, thumb]}>
+          {onEndDrag || onProgressDrag ? <ProgressControlThumb /> : null}
+        </Animated.View>
       </View>
-    );
-  },
-  (prevProps, nextProps) => {
-    if (
-      prevProps.duration === nextProps.duration &&
-      prevProps.progress === nextProps.progress &&
-      prevProps.width === nextProps.width
-    )
-      return true;
-    else return false;
-  },
-);
+    </GestureDetector>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
-    height,
+    borderRadius: 2,
+    height: TRACK_HEIGHT,
   },
   filledStyle: {
-    height,
+    borderRadius: 2,
+    height: TRACK_HEIGHT,
   },
   progressControlThumbStyle: {
     borderRadius: 5,
@@ -145,7 +168,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.27,
     shadowRadius: 4.65,
     top: -15,
-    width: 6,
+    width: THUMB_WIDTH,
   },
 });
 ProgressControl.displayName = 'ProgressControl';