@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/components/Modals/ProfileHeader/ProfileHeader.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {
   Animated,
   Image,
+  Platform,
   StyleProp,
   StyleSheet,
   Text,
@@ -39,7 +40,13 @@ const COLLAPSE_RAMP = 48;
  */
 const BLUR_INTENSITY = 92;
 /** Darkening applied on top of the blur (and used alone without it). */
-const FROST_DIM = 'rgba(0,0,0,0.28)';
+const FROST_DIM = 'rgba(0,0,0,0.5)';
+/**
+ * Blur of the picture itself when expo-blur is not in the binary: RN's own
+ * `Image.blurRadius`, so the collapsed header is still frosted rather than
+ * just dimmed. Android caps the radius at 25.
+ */
+const IMAGE_BLUR_RADIUS = Platform.OS === 'android' ? 25 : 40;
 /** Height of the readability gradient under the name and buttons. */
 const SCRIM_HEIGHT = 220;
 /** Bands the gradient is built from — enough that no step is visible. */
@@ -249,12 +256,25 @@ export const ProfileHero: React.FC<
           ]}
         >
           {onPhoto ? (
-            <Image
-              testID={`${testIDPrefix}-hero-image`}
-              source={{ uri: imageUri as string }}
-              style={StyleSheet.absoluteFill}
-              resizeMode="cover"
-            />
+            <>
+              <Image
+                testID={`${testIDPrefix}-hero-image`}
+                source={{ uri: imageUri as string }}
+                style={StyleSheet.absoluteFill}
+                resizeMode="cover"
+              />
+              {/* Without expo-blur the frost is a blurred copy of the same
+                * picture, inside the same transform so the two line up as
+                * one fades into the other. */}
+              {!BlurView && (
+                <Animated.Image
+                  source={{ uri: imageUri as string }}
+                  style={[StyleSheet.absoluteFill, { opacity: collapsed }]}
+                  resizeMode="cover"
+                  blurRadius={IMAGE_BLUR_RADIUS}
+                />
+              )}
+            </>
           ) : (
             <View style={styles.initialsWrap}>
               <Text
@@ -395,6 +415,7 @@ export const ProfileTopBar: React.FC<
               source={{ uri: imageUri as string }}
               style={StyleSheet.absoluteFill}
               resizeMode="cover"
+              blurRadius={BlurView ? 0 : IMAGE_BLUR_RADIUS}
             />
             <FrostLayer />
           </>
@@ -499,7 +520,7 @@ const styles = StyleSheet.create({
     backgroundColor: FROST_DIM,
   },
   frostFallback: {
-    backgroundColor: 'rgba(0,0,0,0.35)',
+    backgroundColor: FROST_DIM,
   },
   // Only over a photo: keeps white text readable without tinting the flat
   // fallback colour.

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -39,7 +39,6 @@ import {
   setActiveFile,
   setActiveModal,
   setLangSource,
-  setSelectedUser,
 } from '../../../roomStore/chatSettingsSlice';
 import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
 import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
@@ -183,10 +182,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     };
   }, [isOwnProfile, user?.token]);
 
+  // The modal host clears `selectedUser` once the page has slid away.
   const handleBackClick = useCallback(() => {
-    dispatch(setSelectedUser(undefined));
     handleCloseModal();
-  }, [dispatch, handleCloseModal]);
+  }, [handleCloseModal]);
 
   // Same teardown the room-list menu runs (XMPP, redux, persisted slices,
   // AsyncStorage), including the host's confirm copy and callbacks.
@@ -473,6 +472,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         ]}
         onLayout={(e) => setViewportHeight(e.nativeEvent.layout.height)}
         showsVerticalScrollIndicator={false}
+        // Magnet: a header released part-way settles fully open or fully
+        // collapsed; past the collapsed point the content scrolls freely.
+        snapToOffsets={[0, collapseDistance]}
+        snapToEnd={false}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { UNREAD_CAP_PAGE } from '../../roomStore/roomsSlice';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { IMessage } from '../../types/types';
@@ -86,7 +87,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   );
 
   const lastMessage = useMemo(() => {
-    if (!chat?.messages || chat.messages.length === 0) {return undefined;}
+    if (!chat?.messages || chat.messages.length === 0) {
+      return chat?.lastMessage?.body
+        ? withAuthorFallback(chat.lastMessage as IMessage)
+        : undefined;
+    }
 
     for (let i = chat.messages.length - 1; i >= 0; i--) {
       const msg = chat.messages[i];
@@ -95,7 +100,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
       }
     }
     return undefined;
-  }, [chat?.messages, withAuthorFallback]);
+  }, [chat?.messages, chat?.lastMessage, withAuthorFallback]);
 
   // Mirrors web's formatter: tolerates undefined/garbage inputs (returns
   // undefined instead of "NaN:NaN"), and uses HH:MM today / MM/DD this
@@ -266,7 +271,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
                   fontWeight: '600',
                 }}
               >
-                {chat.unreadMessages || ''}
+                {chat.unreadCapped && (chat.unreadMessages || 0) >= UNREAD_CAP_PAGE
+                  ? `${chat.unreadMessages}+`
+                  : chat.unreadMessages || ''}
               </Text>
             </View>
           ) : null}
@@ -284,4 +291,4 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   );
 };
 
-export default ChatRoomItem;
+export default React.memo(ChatRoomItem);

package/src/components/RoomComponents/styled/LastMessageEmoji.tsx

@@ -5,22 +5,21 @@ import {
   LastRoomMessageText,
 } from './StyledRoomComponents';
 import { LastMessage } from '../../../types/types';
+import { getEmojiNativeById } from '../../../helpers/emoji';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'emoji'> {}
 
 /**
- * Renders the per-room last-message preview when the latest message
- * is a reaction (emoji). The `emoji` field is expected to already be
- * a unicode glyph (the reaction stanza carries the rendered character,
- * not an `:id:`) so we just render it as-is — no emoji-id resolution
- * library needed. If a legacy payload still ships an `:id:`, it
- * renders verbatim instead of crashing.
+ * The room-list preview when the latest event in a room is a reaction.
+ * The stanza carries the emoji's short name (`joy`, `+1`), as on web — it
+ * is resolved to the glyph here; a glyph or unknown id renders as is.
  */
 const LastMessageEmoji: FC<LastMessageEmojiProps> = ({ user, emoji }) => {
+  const name = (user?.name || '').trim();
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
-      <LastRoomMessageText>{emoji || ''}</LastRoomMessageText>
+      {!!name && <LastRoomMessageName>{name}:</LastRoomMessageName>}
+      <LastRoomMessageText>{emoji ? getEmojiNativeById(emoji) : ''}</LastRoomMessageText>
     </LastRoomMessageContainer>
   );
 };