@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/components/styled/MediaFilePreview.tsx

@@ -1,31 +1,79 @@
-import { View } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView } from 'react-native';
 import {
   MediaContainer,
   MediaImage,
 } from './StyledInputComponents/StyledInputComponents';
 import { FileIcon } from '../../assets/icons';
 import { RemoveButton, RemoveButtonText } from './StyledComponents';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
+import { useVideoPlayer, VideoView } from 'expo-video';
 
 interface MediaFilePreviewProps {
   filePreviews: MediaFile[];
   handleRemoveImage: (index: number) => void;
 }
 
+const VideoThumb: FC<{ uri: string; onPress: () => void }> = ({
+  uri,
+  onPress,
+}) => {
+  const player = useVideoPlayer(uri, (p) => {
+    p.muted = true;
+  });
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={styles.videoThumb}
+    >
+      <VideoView
+        player={player}
+        style={StyleSheet.absoluteFill}
+        contentFit="cover"
+        nativeControls={false}
+        surfaceType="textureView"
+        pointerEvents="none"
+      />
+      <View style={styles.playOverlay}>
+        <Text style={styles.playIcon}>▶</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const FullscreenPreviewVideo: FC<{ uri: string }> = ({ uri }) => {
+  const player = useVideoPlayer(uri, (p) => {
+    p.play();
+  });
+  return (
+    <VideoView
+      player={player}
+      style={styles.fullVideo}
+      contentFit="contain"
+      nativeControls
+      surfaceType="textureView"
+    />
+  );
+};
+
 export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
   filePreviews,
   handleRemoveImage,
 }) => {
+  const [previewUri, setPreviewUri] = useState<string | null>(null);
+
   return (
     <MediaContainer>
       {filePreviews.map((file, index) => {
-        const isImageOrVideo =
-          file.type?.startsWith('image') || file.type?.startsWith('video');
+        const isImage = file.type?.startsWith('image');
+        const isVideo = file.type?.startsWith('video');
         return (
           <View key={`${file.name}_${index}`}>
-            {isImageOrVideo ? (
+            {isImage ? (
               <MediaImage source={{ uri: file.uri }} />
+            ) : isVideo ? (
+              <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
             ) : (
               <View style={{ width: 70, height: 70, borderRadius: 8 }}>
                 <FileIcon width={70} height={70} />
@@ -37,6 +85,64 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
           </View>
         );
       })}
+
+      <Modal visible={!!previewUri} animationType="fade" transparent>
+        <SafeAreaView style={styles.modalContainer}>
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => setPreviewUri(null)}
+          >
+            <Text style={styles.closeText}>✕</Text>
+          </TouchableOpacity>
+          {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
+        </SafeAreaView>
+      </Modal>
     </MediaContainer>
   );
 };
+
+const styles = StyleSheet.create({
+  videoThumb: {
+    width: 70,
+    height: 70,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#1a1a1a',
+  },
+  playOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  playIcon: {
+    fontSize: 24,
+    color: '#fff',
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 60,
+    right: 20,
+    zIndex: 10,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeText: {
+    fontSize: 18,
+    color: '#fff',
+    fontWeight: '600',
+  },
+  fullVideo: {
+    width: '100%',
+    height: '70%',
+  },
+});

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,44 +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={{
-            borderRadius: 16,
-            width: 150,
-            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]);
   };
@@ -117,6 +146,7 @@ const SendInput: React.FC<SendInputProps> = ({
       const result = await ImagePicker.launchCameraAsync({
         mediaTypes: ['images', 'videos'],
         quality: 0.9,
+        videoQuality: ImagePicker.UIImagePickerControllerQualityType.Medium,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];
@@ -126,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);
@@ -151,6 +187,8 @@ const SendInput: React.FC<SendInputProps> = ({
         mediaTypes: ['images', 'videos'],
         allowsEditing: false,
         quality: 0.9,
+        preferredAssetRepresentationMode:
+          ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];
@@ -162,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);
@@ -189,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) {
@@ -197,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) => {
@@ -333,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,
                 }}
               />
@@ -368,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 style={styles.container} 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,16 +73,26 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
 export default CustomMessageVideo;
 
 const styles = StyleSheet.create({
-  container: {
-    margin: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
-  video: {
-    width: 300,
-    height: 200,
+  wrapper: {
     borderRadius: 10,
+    overflow: 'hidden',
     backgroundColor: '#000',
   },
+  video: {
+    width: '100%',
+    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',
+  },
 });