Merge pull request #2567 from GetStream/develop

khushal87 · web-flow · commit 3871c180002d · 2024-06-27T13:39:50.000+05:30
Next Release
diff --git a/examples/ExpoMessaging/app.json b/examples/ExpoMessaging/app.json
@@ -18,10 +18,10 @@
     "ios": {
       "supportsTablet": true,
       "usesIcloudStorage": true,
-      "bundleIdentifier": "io.stream.expomessaging"
+      "bundleIdentifier": "io.stream.expomessagingapp"
     },
     "android": {
-      "package": "io.stream.expomessaging",
+      "package": "io.stream.expomessagingapp",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
diff --git a/examples/ExpoMessaging/app/channel/[cid]/index.tsx b/examples/ExpoMessaging/app/channel/[cid]/index.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect } from 'react';
 import { SafeAreaView, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Channel, MessageInput, MessageList, useAttachmentPickerContext } from 'stream-chat-expo';
 import { Stack, useRouter } from 'expo-router';
 import { AuthProgressLoader } from '../../../components/AuthProgressLoader';
@@ -25,7 +24,11 @@ export default function ChannelScreen() {
     <SafeAreaView>
       <Stack.Screen options={{ title: 'Channel Screen' }} />
       {channel && (
-        <Channel audioRecordingEnabled={true} channel={channel}>
+        <Channel
+          audioRecordingEnabled={true}
+          channel={channel}
+          keyboardVerticalOffset={headerHeight}
+        >
           <View style={{ flex: 1 }}>
             <MessageList
               onThreadSelect={(thread) => {
diff --git a/examples/ExpoMessaging/app/channel/[cid]/thread/[cid]/index.tsx b/examples/ExpoMessaging/app/channel/[cid]/thread/[cid]/index.tsx
@@ -3,9 +3,11 @@ import { SafeAreaView, View } from 'react-native';
 import { Channel, Thread } from 'stream-chat-expo';
 import { Stack } from 'expo-router';
 import { AppContext } from '../../../../../context/AppContext';
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function ThreadScreen() {
   const { channel, thread, setThread } = useContext(AppContext);
+  const headerHeight = useHeaderHeight();
 
   if (channel === undefined) {
     return null;
@@ -15,7 +17,13 @@ export default function ThreadScreen() {
     <SafeAreaView>
       <Stack.Screen options={{ title: 'Thread Screen' }} />
 
-      <Channel audioRecordingEnabled={true} channel={channel} thread={thread} threadList>
+      <Channel
+        audioRecordingEnabled={true}
+        channel={channel}
+        keyboardVerticalOffset={headerHeight}
+        thread={thread}
+        threadList
+      >
         <View
           style={{
             flex: 1,
diff --git a/package/.eslintrc.json b/package/.eslintrc.json
@@ -154,7 +154,7 @@
         "arrow-body-style": 2,
         "comma-dangle": 0,
         "babel/no-invalid-this": 0,
-        "@typescript-eslint/no-invalid-this": ["error"],
+        "@typescript-eslint/no-invalid-this": "error",
         "default-case": 2,
         "eqeqeq": [2, "smart"],
         "linebreak-style": [2, "unix"],
diff --git a/package/expo-package/src/handlers/Video.tsx b/package/expo-package/src/handlers/Video.tsx
@@ -1,16 +1,30 @@
-import { VideoComponent } from '../optionalDependencies';
+import React, { useEffect } from 'react';
+
+import { AudioComponent, VideoComponent } from '../optionalDependencies';
 
 export const Video = VideoComponent
-  ? ({ onPlaybackStatusUpdate, paused, resizeMode, style, uri, videoRef }) => (
-      <VideoComponent
-        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-        ref={videoRef}
-        resizeMode={resizeMode}
-        shouldPlay={!paused}
-        source={{
-          uri,
-        }}
-        style={[style]}
-      />
-    )
+  ? ({ onPlaybackStatusUpdate, paused, resizeMode, style, uri, videoRef }) => {
+      // This is done so that the audio of the video is not muted when the phone is in silent mode for iOS.
+      useEffect(() => {
+        const initializeSound = async () => {
+          await AudioComponent.setAudioModeAsync({
+            playsInSilentModeIOS: true,
+          });
+        };
+        initializeSound();
+      }, []);
+
+      return (
+        <VideoComponent
+          onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+          ref={videoRef}
+          resizeMode={resizeMode}
+          shouldPlay={!paused}
+          source={{
+            uri,
+          }}
+          style={[style]}
+        />
+      );
+    }
   : null;
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -87,6 +87,7 @@ import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
   defaultEmojiSearchIndex,
   generateRandomId,
+  getFileNameFromPath,
   isBouncedMessage,
   isLocalUrl,
   MessageStatusTypes,
@@ -1574,7 +1575,7 @@ const ChannelWithContext = <
           attachment.image_url &&
           isLocalUrl(attachment.image_url)
         ) {
-          const filename = image.name ?? image.uri.replace(/^(file:\/\/|content:\/\/)/, '');
+          const filename = image.name ?? getFileNameFromPath(image.uri);
           // if any upload is in progress, cancel it
           const controller = uploadAbortControllerRef.current.get(filename);
           if (controller) {
diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -830,7 +830,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned &&
-    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
+    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}` &&
+    prevMessage.i18n === nextMessage.i18n;
 
   if (!messageEqual) return false;
 
diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageSimple/MessageContent.tsx
@@ -474,7 +474,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.pinned === nextMessage.pinned &&
+    prevMessage.i18n === nextMessage.i18n;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
diff --git a/package/src/components/Message/MessageSimple/MessageSimple.tsx b/package/src/components/Message/MessageSimple/MessageSimple.tsx
@@ -164,7 +164,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.i18n === nextMessage.i18n;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
diff --git a/package/src/components/Message/MessageSimple/MessageTextContainer.tsx b/package/src/components/Message/MessageSimple/MessageTextContainer.tsx
@@ -133,7 +133,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     onlyEmojis: nextOnlyEmojis,
   } = nextProps;
 
-  const messageTextEqual = prevMessage.text === nextMessage.text;
+  const messageTextEqual =
+    prevMessage.text === nextMessage.text && prevMessage.i18n === nextMessage.i18n;
   if (!messageTextEqual) return false;
 
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
diff --git a/package/src/components/Message/MessageSimple/ReactionList.tsx b/package/src/components/Message/MessageSimple/ReactionList.tsx
@@ -117,6 +117,8 @@ const ReactionListWithContext = <
           middleIcon,
           radius: themeRadius,
           reactionBubble,
+          reactionContainer,
+          reactionCount,
           reactionSize: themeReactionSize,
           strokeSize: themeStrokeSize,
         },
@@ -246,6 +248,7 @@ const ReactionListWithContext = <
                   {
                     marginRight: index < reactions.length - 1 ? 5 : 0,
                   },
+                  reactionContainer,
                 ]}
               >
                 <Icon
@@ -256,7 +259,9 @@ const ReactionListWithContext = <
                   supportedReactions={supportedReactions}
                   type={reaction.type}
                 />
-                <Text style={[styles.reactionCount, { color: black }]}>{reaction.count}</Text>
+                <Text style={[styles.reactionCount, { color: black }, reactionCount]}>
+                  {reaction.count}
+                </Text>
               </View>
             ))}
           </TouchableOpacity>
@@ -307,7 +312,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     Array.isArray(prevReactions) && Array.isArray(nextReactions)
       ? prevReactions.length === nextReactions.length &&
         prevReactions.every(
-          ({ type }, index) => type === nextMessage.latest_reactions?.[index].type,
+          ({ count, type }, index) =>
+            type === nextMessage.latest_reactions?.[index].type &&
+            count === nextMessage.latest_reactions?.[index].count,
         )
       : prevReactions === nextReactions;
 
diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx
@@ -64,6 +64,7 @@ import {
   FileState,
   FileStateValue,
   generateRandomId,
+  getFileNameFromPath,
   isBouncedMessage,
   TriggerSettings,
 } from '../../utils/utils';
@@ -1108,7 +1109,7 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     const uri = file.uri || '';
-    const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+    const filename = file.name ?? getFileNameFromPath(uri);
 
     try {
       const compressedUri = await compressedImageURI(file, value.compressImageQuality);
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
@@ -533,6 +533,8 @@ export type Theme = {
       middleIcon: ViewStyle;
       radius: number;
       reactionBubble: ViewStyle;
+      reactionContainer: ViewStyle;
+      reactionCount: TextStyle;
       reactionSize: number;
       strokeSize: number;
     };
@@ -1119,6 +1121,8 @@ export const defaultTheme: Theme = {
       middleIcon: {},
       radius: 2, // not recommended to change this
       reactionBubble: {},
+      reactionContainer: {},
+      reactionCount: {},
       reactionSize: 24,
       strokeSize: 1, // not recommended to change this
     },
diff --git a/package/src/utils/utils.ts b/package/src/utils/utils.ts
@@ -638,3 +638,17 @@ export const reduceMessagesToString = <
 >(
   messages: FormatMessageResponse<StreamChatGenerics>[],
 ): string => messages.map(stringifyMessage).join();
+
+/**
+ * Utility to get the file name from the path using regex.
+ * `[^/]+` matches one or more characters that are not a slash (/), ensuring we capture the filename part.
+ * `\.` matches the period before the file extension.
+ * `[^/]+$` matches one or more characters that are not a slash (/) until the end of the string, capturing the file extension.
+ * @param path string
+ * @returns string
+ */
+export const getFileNameFromPath = (path: string) => {
+  const pattern = /[^/]+\.[^/]+$/;
+  const match = path.match(pattern);
+  return match ? match[0] : '';
+};
