@ethora/chat-component-rn 26.5.7 → 26.5.10

package/src/components/styled/MessageImage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Container } from './StyledInputComponents/MediaComponents';
 import { useDispatch } from 'react-redux';
 import {
@@ -6,43 +6,88 @@ import {
   setActiveModal,
 } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
-import { ActivityIndicator, Image, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
+import {
+  defaultMediaDims,
+  fitMediaDimensions,
+  MediaDims,
+} from '../../helpers/mediaDimensions';
+
 interface CustomMessageImageProps {
   fileURL: string;
   fileName: string;
   mimetype: string;
 }
 
+const FALLBACK_IMAGE =
+  'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
+
 const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   fileURL,
   fileName,
   mimetype,
 }) => {
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(true);
+  // Start with a neutral box; swap to the real aspect ratio once the
+  // image's natural dimensions are known so it's shown scaled, not cropped.
+  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
 
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    if (!fileURL) {
+      return;
+    }
+    let active = true;
+    Image.getSize(
+      fileURL,
+      (w, h) => {
+        if (active) {
+          setDims(fitMediaDimensions(w, h));
+        }
+      },
+      () => {
+        /* keep the default box if the size probe fails */
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [fileURL]);
+
   const handleOpen = () => {
     dispatch(setActiveFile({ fileName, fileURL, mimetype }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
   return (
-    <Container>
-      <TouchableOpacity onPress={handleOpen}>
-        {loading && <ActivityIndicator size="small" color="#0052CD" />}
+    <Container style={{ width: dims.width }}>
+      <TouchableOpacity onPress={handleOpen} activeOpacity={0.9}>
+        {loading && (
+          <View
+            style={{
+              position: 'absolute',
+              width: dims.width,
+              height: dims.height,
+              alignItems: 'center',
+              justifyContent: 'center',
+              zIndex: 1,
+            }}
+          >
+            <ActivityIndicator size="small" color="#0052CD" />
+          </View>
+        )}
         <Image
-          src={
-            fileURL ||
-            'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
-          }
+          source={{ uri: fileURL || FALLBACK_IMAGE }}
           style={{
-            width: 250,
-            height: 200,
+            width: dims.width,
+            height: dims.height,
+            borderRadius: 10,
+            backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
-          onError={() => setError(true)}
           onLoadEnd={() => setLoading(false)}
+          // The box already matches the natural aspect ratio, so 'cover'
+          // fills it edge-to-edge with no actual cropping or letterboxing.
           resizeMode="cover"
         />
       </TouchableOpacity>

package/src/components/styled/NewMessageLabel.tsx

@@ -24,23 +24,26 @@ export const StyledLabel = styled.View`
   margin: 10px 0px;
 `;
 
-export const StyledLabelText = styled.Text<{ color?: string }>`
-  color: ${(props) => (props?.color ? props?.color : '#0052CD')};
+export const StyledLabelText = styled.Text`
+  color: #ffffff;
   font-size: 12px;
   line-height: 14px;
-  font-weight: 400;
+  font-weight: 500;
 `;
 
+// `color` is kept for CustomNewMessageLabel API parity, but the built-in
+// label always renders WHITE text — it sits on a dark (#3f3f3f) pill, where
+// the previous primary/blue text was unreadable.
 interface NewMessageLabelProps {
   color?: string;
 }
 
-const NewMessageLabel: React.FC<NewMessageLabelProps> = ({ color }) => {
+const NewMessageLabel: React.FC<NewMessageLabelProps> = () => {
   return (
     <Container>
       <Line />
       <StyledLabel>
-        <StyledLabelText color={color}>New messages</StyledLabelText>
+        <StyledLabelText>New messages</StyledLabelText>
       </StyledLabel>
       <Line />
     </Container>

package/src/components/styled/SendInput.tsx

@@ -9,7 +9,7 @@ import {
 import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 import { SendIcon, AttachIcon } from '../../assets/icons';
-import { KeyboardAvoidingView, Platform, View, TouchableOpacity, Alert, ActionSheetIOS, Linking } from 'react-native';
+import { KeyboardAvoidingView, View, TouchableOpacity, Alert, Linking } from 'react-native';
 import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import * as ImagePicker from 'expo-image-picker';
@@ -19,6 +19,21 @@ import * as ImageManipulator from 'expo-image-manipulator';
 // iOS photos default to HEIC; many web backends (incl. ours) 500 on
 // HEIC uploads because they can't decode it. Convert to JPEG before
 // upload — JPEG is universally supported. JPEGs pass through.
+// Server rejects uploads over its body-size cap with HTTP 413 (Request
+// Entity Too Large). Guard client-side so the user gets a clear message
+// instead of a silent failed bubble. 50 MB matches the backend limit.
+const MAX_MEDIA_BYTES = 50 * 1024 * 1024;
+
+const formatBytes = (bytes: number): string => {
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(0)} KB`;
+  }
+  return `${bytes} B`;
+};
+
 const normalizeImageAsset = async (asset: ImagePicker.ImagePickerAsset) => {
   const mime = (asset.mimeType || '').toLowerCase();
   const looksLikeHeic =
@@ -72,7 +87,6 @@ const SendInput: React.FC<SendInputProps> = ({
   const [isRecording, setIsRecording] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [filePreviews, setFilePreviews] = useState<MediaFile[]>([]);
-  const [inputHeight, setInputHeight] = useState(40);
   const [showMediaMenu, setShowMediaMenu] = useState(false);
 
   // Refs shadow `message` and `filePreviews` so handleSendClick can:
@@ -90,6 +104,21 @@ const SendInput: React.FC<SendInputProps> = ({
   const sendingRef = useRef(false);
 
   const handleFileSelect = (files: MediaFile[]) => {
+    // Enforce the upload size cap before anything reaches the network.
+    // The backend rejects oversized bodies with HTTP 413; catching it
+    // here gives a clear message instead of a silent failed bubble.
+    const oversize = files.find(
+      (f) => typeof f.size === 'number' && f.size > MAX_MEDIA_BYTES
+    );
+    if (oversize) {
+      Alert.alert(
+        'File too large',
+        `"${oversize.name}" is ${formatBytes(oversize.size!)}. The maximum allowed size is ${Math.round(
+          MAX_MEDIA_BYTES / (1024 * 1024)
+        )} MB.`
+      );
+      return;
+    }
     filePreviewsRef.current = files;
     setFilePreviews([...files]);
   };
@@ -127,13 +156,19 @@ const SendInput: React.FC<SendInputProps> = ({
             uri: asset.uri,
             type: asset.mimeType || 'video/mp4',
             name: asset.fileName || asset.uri.split('/').pop() || `camera_${Date.now()}.mp4`,
+            size: (asset as any).fileSize,
           },
         ]);
         return;
       }
       const normalized = await normalizeImageAsset(asset);
       handleFileSelect([
-        { uri: normalized.uri, type: normalized.mime, name: normalized.name },
+        {
+          uri: normalized.uri,
+          type: normalized.mime,
+          name: normalized.name,
+          size: (asset as any).fileSize,
+        },
       ]);
     } catch (error) {
       console.error('Camera error:', error);
@@ -165,13 +200,19 @@ const SendInput: React.FC<SendInputProps> = ({
             uri: asset.uri,
             type: asset.mimeType || 'video/mp4',
             name: asset.fileName || asset.uri.split('/').pop() || `gallery_${Date.now()}.mp4`,
+            size: (asset as any).fileSize,
           },
         ]);
         return;
       }
       const normalized = await normalizeImageAsset(asset);
       handleFileSelect([
-        { uri: normalized.uri, type: normalized.mime, name: normalized.name },
+        {
+          uri: normalized.uri,
+          type: normalized.mime,
+          name: normalized.name,
+          size: (asset as any).fileSize,
+        },
       ]);
     } catch (error) {
       console.error('Gallery error:', error);
@@ -192,6 +233,7 @@ const SendInput: React.FC<SendInputProps> = ({
           uri: asset.uri,
           type: asset.mimeType || 'application/octet-stream',
           name: asset.name || `file_${Date.now()}`,
+          size: asset.size ?? undefined,
         },
       ]);
     } catch (err) {
@@ -200,21 +242,7 @@ const SendInput: React.FC<SendInputProps> = ({
   };
 
   const handleAttachPress = () => {
-    if (Platform.OS === 'ios') {
-      ActionSheetIOS.showActionSheetWithOptions(
-        {
-          options: ['Cancel', 'Camera', 'Photo Library', 'Document'],
-          cancelButtonIndex: 0,
-        },
-        (buttonIndex) => {
-          if (buttonIndex === 1) {handleCameraSelection();}
-          else if (buttonIndex === 2) {handleGallerySelection();}
-          else if (buttonIndex === 3) {handleFileSelection();}
-        }
-      );
-    } else {
-      setShowMediaMenu(true);
-    }
+    setShowMediaMenu(true);
   };
 
   const handleRemoveImage = (index: number) => {
@@ -336,17 +364,15 @@ const SendInput: React.FC<SendInputProps> = ({
                 }}
                 editable={!isLoading || !isMessageProcessing}
                 multiline={true}
-                // maxHeight={72}
-                onContentSizeChange={(event) => {
-                  setInputHeight(
-                    Math.min(
-                      72,
-                      Math.max(40, event.nativeEvent.contentSize.height)
-                    )
-                  );
-                }}
+                // No fixed height: a multiline TextInput auto-grows to fit
+                // its content between min/max. Locking `height` made iOS
+                // top-align the text inside the taller box (it looked like
+                // the text had dropped). minHeight keeps the 40px tap
+                // target; the row's align-items:center vertically centres
+                // the content-sized input.
                 style={{
-                  height: inputHeight,
+                  minHeight: 40,
+                  maxHeight: 120,
                   flex: 1,
                 }}
               />
@@ -371,6 +397,15 @@ const SendInput: React.FC<SendInputProps> = ({
               borderRadius: 20,
               alignItems: 'center',
               justifyContent: 'center',
+              // The shared Button (CustomButton) bakes in `margin: 0 10px`,
+              // which pushed the send button 10px further from the input
+              // and from the right edge than the attach button (a raw
+              // TouchableOpacity with no margin). Zero it so both sides of
+              // the input use the row's uniform gap:8 + 16px container
+              // padding. Longhand left/right to override the styled
+              // longhand (marginHorizontal loses to marginLeft/Right in RN).
+              marginLeft: 0,
+              marginRight: 0,
               backgroundColor:
                 message || filePreviews.length > 0
                   ? config?.colors?.primary

package/src/components/styled/StyledInputComponents/MediaComponents.tsx

@@ -3,9 +3,15 @@ import styled from 'styled-components/native';
 export const Container = styled.View`
   margin: 0;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* The media has an explicit (scaled) width set inline. Its horizontal
+     position inside the bubble is driven by the bubble's align-items
+     (set per-sender in Message.tsx): own messages push the media to the
+     right edge, others to the left — so the media stays flush with the
+     text bubbles on the same side instead of leaving a gap. */
+  align-items: flex-start;
+  align-self: auto;
+  overflow: hidden;
+  border-radius: 10px;
 `;
 
 export const FullScreenImage = styled.Image`
@@ -66,11 +72,15 @@ export const FileInformation = styled.View`
   gap: 8px;
 `;
 
-export const FileName = styled.Text`
+export const FileName = styled.Text<{
+  isUser: boolean;
+  colorIsUser: string| undefined;
+  colorUsers: string | undefined;
+}>`
   font-size: 14px;
   font-weight: 500;
   flex-grow: 1;
-  color: #fff;
+  color: ${({isUser, colorIsUser, colorUsers}) => isUser? colorIsUser : colorUsers};
   overflow: hidden;
 `;
 

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -46,16 +46,21 @@ export const MessageInput = styled.TextInput<{
   isFocused?: boolean;
   color?: string;
 }>`
-  padding: 10px 14px;
+  padding: 8px 14px;
   border-radius: 20px;
   border-width: 1px;
   border-color: ${(props) =>
     props.isFocused ? props.color || '#0052CD' : 'transparent'};
   color: #141414;
+  font-size: 16px;
   background-color: #f5f7f9;
   flex: 1;
+  /* No explicit line-height: on iOS a line-height larger than the
+     font's natural metrics drops the glyph to the bottom of the line
+     box (looked like the text "sank"). Equal vertical padding + the
+     natural line height centers single-line text in the min-height
+     box. text-align-vertical / include-font-padding stay for Android. */
   text-align-vertical: center;
-  line-height: 20px;
   include-font-padding: false;
 `;
 

package/src/components/styled/UnsupportedType.tsx

@@ -23,6 +23,7 @@ interface FileDownloadProps {
   fileURL: string;
   mimetype: string;
   size?: string;
+  isUser: boolean;
 }
 
 const FileDownload: React.FC<FileDownloadProps> = ({
@@ -30,6 +31,7 @@ const FileDownload: React.FC<FileDownloadProps> = ({
   fileURL,
   mimetype,
   size,
+  isUser,
 }) => {
   const dispatch = useDispatch();
   const { config } = useChatSettingState();
@@ -81,7 +83,11 @@ const FileDownload: React.FC<FileDownloadProps> = ({
         <FileIcon />
       </BackgroundFile>
       <FileInformation>
-        <FileName>{formatFileName(fileName, 20)}</FileName>
+        <FileName
+          isUser={isUser}
+          colorIsUser={config?.colors?.primary}
+          colorUsers={config?.colors?.secondary}
+        >{formatFileName(fileName, 20)}</FileName>
         {size && (
           <FileSizeContainer>
             <FileSize>{formatFileSize(size)}</FileSize>

package/src/components/styled/VideoMessage.tsx

@@ -1,12 +1,18 @@
-import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
-import { Video, ResizeMode } from 'expo-av';
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
 import { useDispatch } from 'react-redux';
 import {
   setActiveFile,
   setActiveModal,
 } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { PlayIcon } from '../../assets/icons';
+import {
+  defaultMediaDims,
+  fitMediaDimensions,
+  MediaDims,
+} from '../../helpers/mediaDimensions';
 
 interface CustomMessageVideoProps {
   fileName: string;
@@ -20,6 +26,21 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   mimetype,
 }) => {
   const dispatch = useDispatch();
+  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
+
+  const player = useVideoPlayer(fileURL, (p) => {
+    p.muted = true;
+  });
+
+  useEffect(() => {
+    const sub = player.addListener('statusChange', () => {
+      const size = player.videoTrack?.size;
+      if (size?.width && size?.height) {
+        setDims(fitMediaDimensions(size.width, size.height));
+      }
+    });
+    return () => sub.remove();
+  }, [player]);
 
   const handleOpen = () => {
     dispatch(setActiveFile({ fileName, fileURL, mimetype }));
@@ -27,14 +48,24 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   };
 
   return (
-    <TouchableOpacity onPress={handleOpen}>
-      <Video
-        source={{ uri: fileURL }}
+    <TouchableOpacity
+      onPress={handleOpen}
+      activeOpacity={0.9}
+      style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+    >
+      <VideoView
+        player={player}
         style={styles.video}
-        useNativeControls
-        resizeMode={ResizeMode.CONTAIN}
-        shouldPlay={false}
+        contentFit="cover"
+        nativeControls={false}
+        surfaceType="textureView"
+        pointerEvents="none"
       />
+      <View style={styles.overlay} pointerEvents="none">
+        <View style={styles.playButton}>
+          <PlayIcon width={28} height={28} />
+        </View>
+      </View>
     </TouchableOpacity>
   );
 };
@@ -42,9 +73,26 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
 export default CustomMessageVideo;
 
 const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: '#000',
+  },
   video: {
     width: '100%',
-    aspectRatio: 16 / 9,
-    backgroundColor: '#000',
+    height: '100%',
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/context/MessageNotificationContext.tsx

@@ -1,6 +1,6 @@
 // RN port of the web MessageNotificationProvider. Renders Telegram-style
 // in-app toasts when a new message arrives in a room that is NOT the
-// currently active room. Backed by the global messageNotificationManager,
+// currently visible room. Backed by the global messageNotificationManager,
 // which means non-React code (stanza handlers) can push notifications.
 import React, {
   createContext,
@@ -63,8 +63,8 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
   const contextConfig = useSelector(
     (state: RootState) => state.chatSettingStore?.config
   );
-  const activeRoomJID = useSelector(
-    (state: RootState) => state.rooms.activeRoomJID
+  const visibleRoomJID = useSelector(
+    (state: RootState) => state.rooms.visibleRoomJID
   );
 
   const config = propConfig || contextConfig;
@@ -104,9 +104,9 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
 
   // Clear toasts when their room becomes active.
   useEffect(() => {
-    if (!activeRoomJID) {return;}
-    setToasts((prev) => prev.filter((t) => t.roomJID !== activeRoomJID));
-  }, [activeRoomJID]);
+    if (!visibleRoomJID) {return;}
+    setToasts((prev) => prev.filter((t) => t.roomJID !== visibleRoomJID));
+  }, [visibleRoomJID]);
 
   const dismiss = useCallback((id: string) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -142,7 +142,7 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
     ) => {
       if (!isEnabled) {return;}
       // Don't toast for the currently active room.
-      if (activeRoomJID && activeRoomJID === roomJID) {return;}
+      if (visibleRoomJID && visibleRoomJID === roomJID) {return;}
       const id = `msg-notification-${message.id}-${Date.now()}`;
       const item: ToastItem = {
         id,
@@ -159,7 +159,7 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
           : next;
       });
     },
-    [isEnabled, activeRoomJID, maxNotifications]
+    [isEnabled, visibleRoomJID, maxNotifications]
   );
 
   // Register with the global manager.