@ethora/chat-component-rn 26.5.7 → 26.5.11

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -7,6 +7,7 @@ import {
 import { BackIcon, MoreIcon, QrIcon } from '../../assets/icons';
 import Button from '../styled/Button';
 import { Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
@@ -21,8 +22,14 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   rightMenu,
   leftMenu,
 }) => {
+  // The library's full-screen modals are an absolute-fill overlay inside
+  // ModalBackground (NOT a native Modal), so the OS doesn't apply any
+  // status-bar inset automatically — we have to. SafeAreaProvider is
+  // mounted by ReduxWrapper, so this reads the live per-device inset
+  // (notch / Dynamic Island / nothing).
+  const insets = useSafeAreaInsets();
   return (
-    <HeaderContainer>
+    <HeaderContainer style={{ paddingTop: insets.top + 8 }}>
       <HeaderLeft>
         {leftMenu ? (
           leftMenu

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -9,7 +9,7 @@ import {
 } from '../styledModalComponents';
 import { TextareaInput } from '../../styled/StyledInputComponents/StyledInputComponents';
 import Button from '../../styled/Button';
-import { Modal, Text, TextInput } from 'react-native';
+import { Modal, Text, TextInput, View, StyleSheet } from 'react-native';
 
 interface ModalWrapperProps {
   iconTitle?: any;
@@ -53,6 +53,47 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   //   }
   // };
 
+  const inner = (
+    <>
+      <CloseButton onPress={handleCloseModal}>
+        <Text style={{ fontSize: 24 }}>&times;</Text>
+      </CloseButton>
+      {IconTitle ? <IconTitle /> : <ModalTitle>{title}</ModalTitle>}
+      {description && <ModalDescription>{description}</ModalDescription>}
+      {isTextarea && (
+        <GroupContainer
+          style={{ flexDirection: 'column', position: 'relative' }}
+        />
+      )}
+      {!buttonText && <GroupContainer />}
+      <GroupContainer>
+        <Button
+          onPress={handleCloseModal}
+          text={'Cancel'}
+          style={{ width: '100%' }}
+          unstyled
+          variant="outlined"
+        />
+        {buttonText && (
+          <Button
+            onPress={handleClick}
+            text={buttonText}
+            // White label on the filled (e.g. red Delete) button. Button
+            // applies an inline `color: color || 'black'` that overrides
+            // the filled-variant white, so pass it explicitly.
+            color="#FFFFFF"
+            style={{
+              width: '100%',
+              backgroundColor: backgroundColorButton,
+            }}
+            unstyled
+            variant="filled"
+          />
+        )}
+      </GroupContainer>
+    </>
+  );
+
   return (
     <Modal
       transparent
@@ -61,64 +102,35 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
       onRequestClose={handleCloseModal}
     >
       <ModalBackground>
-        <ModalContainer
-          style={
-            compact
-              ? {
-                  flex: 0,
-                  width: '85%',
-                  maxWidth: 360,
-                  height: 'auto',
-                  padding: 24,
-                  borderRadius: 16,
-                  gap: 16,
-                }
-              : { maxWidth: 640 }
-          }
-        >
-          <CloseButton onPress={handleCloseModal}>
-            <Text style={{ fontSize: 24 }}>&times;</Text>
-          </CloseButton>
-          {IconTitle ? <IconTitle /> : <ModalTitle>{title}</ModalTitle>}
-          {description && <ModalDescription>{description}</ModalDescription>}
-          {isTextarea && (
-            <GroupContainer
-              style={{ flexDirection: 'column', position: 'relative' }}
-            >
-              {/* <TextareaInput
-              ref={textareaRef}
-              onInput={handleInput}
-              id="additionalDetails"
-              value={textarea}
-              onChangeText={(text) => setTextarea(text)}
-              placeholder="Additional Details"
-            /> */}
-            </GroupContainer>
-          )}
-          {!buttonText && <GroupContainer />}
-          <GroupContainer>
-            <Button
-              onPress={handleCloseModal}
-              text={'Cancel'}
-              style={{ width: '100%' }}
-              unstyled
-              variant="outlined"
-            />
-            {buttonText && (
-              <Button
-                onPress={handleClick}
-                text={buttonText}
-                style={{
-                  width: '100%',
-                  backgroundColor: backgroundColorButton,
-                }}
-                unstyled
-                variant="filled"
-              />
-            )}
-          </GroupContainer>
-        </ModalContainer>
+        {compact ? (
+          // Dedicated small centered dialog. The base ModalContainer is
+          // flex:1 / width:100% / height:100% (full-screen); style-merge
+          // overrides proved unreliable, so confirm-style modals render in
+          // their own bounded View instead — never full-screen (#14).
+          // (Upstream also shrank this modal; this keeps that intent while
+          // adding the white filled-button label via `inner` below.)
+          <View style={styles.compactDialog}>{inner}</View>
+        ) : (
+          <ModalContainer style={{ maxWidth: 640 }}>{inner}</ModalContainer>
+        )}
       </ModalBackground>
     </Modal>
   );
 };
+
+const styles = StyleSheet.create({
+  compactDialog: {
+    width: '85%',
+    maxWidth: 360,
+    alignSelf: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    gap: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+});

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

@@ -285,22 +285,26 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </LabelData>
           </BorderedContainer>
 
-          {selectedUser && !config?.disableProfilesInteractions && (
+          {selectedUser && !config?.disableMemberProfileActions && (
             <>
-              <ActionButton
-                StartIcon={<ChatIcon />}
-                onPress={handlePrivateMessage}
-                variant="filled"
-              >
-                <Text style={{ color: '#ffffff' }}>Message</Text>
-              </ActionButton>
-              <ActionButton
-                onPress={() => {}}
-                // onPress={() => handleCopyClick(selectedUser.id)}
-                variant="filled"
-              >
-                <Text style={{ color: '#ffffff' }}>Copy User Id</Text>
-              </ActionButton>
+              {!config?.hideMemberSendMessageAction && (
+                <ActionButton
+                  StartIcon={<ChatIcon />}
+                  onPress={handlePrivateMessage}
+                  variant="filled"
+                >
+                  <Text style={{ color: '#ffffff' }}>Message</Text>
+                </ActionButton>
+              )}
+              {!config?.hideMemberCopyIdAction && (
+                <ActionButton
+                  onPress={() => {}}
+                  // onPress={() => handleCopyClick(selectedUser.id)}
+                  variant="filled"
+                >
+                  <Text style={{ color: '#ffffff' }}>Copy User Id</Text>
+                </ActionButton>
+              )}
             </>
           )}
 

package/src/components/Modals/styledModalComponents.tsx

@@ -21,17 +21,12 @@ export const CloseButton = styled.TouchableOpacity`
   font-size: 20px;
   cursor: pointer;
   color: #888;
-
-  &:hover {
-    color: #555;
-    background-color: #dddddd;
-  }
 `;
 
 export const ModalContainer = styled.View`
-  flex: 1;
-  width: 100%;
-  height: 100%;
+  // flex: 1;
+  // width: 100%;
+  // height: 100%;
   background: white;
   padding: 32px 64px;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
@@ -57,7 +52,7 @@ export const ModalDescription = styled.Text`
 
 export const GroupContainer = styled.View`
   display: flex;
-  gap: 32px;
+  gap: 16px;
   width: 100%;
   padding: 0;
 `;
@@ -77,10 +72,19 @@ export const HeaderContainer = styled.View`
   position: relative;
   top: 0;
   width: 100%;
-  padding: 2px 8px;
-  padding-top: 62px;
-  max-height: 24px;
-  min-height: 24px;
+  /* The previous incarnation had padding-top:62px (hard-coded status-bar
+   * offset) clamped to min/max-height:24px — content overflowed the
+   * visible band and the back arrow hugged the bottom edge. The earlier
+   * fix dropped the clamp but kept a hard-coded 56px top inset, which on
+   * top of this modal's absolute-fill overlay (no system inset is auto-
+   * applied) made the header eat far more space than it should.
+   *
+   * Now: compact 8px vertical padding here; the dynamic top inset for
+   * the status bar / Dynamic Island is supplied by ModalHeaderComponent
+   * via useSafeAreaInsets() — accurate per-device (~59px on a 16 Pro,
+   * 20px on an SE). Together that's status-bar + 8px above the back
+   * button and 8px below — properly sized and properly centered. */
+  padding: 8px 16px;
   background-color: #fff;
   border-bottom-width: 1px;
   border-bottom-color: #f0f0f0;

package/src/components/styled/MediaFilePreview.tsx

@@ -7,13 +7,56 @@ import { FileIcon } from '../../assets/icons';
 import { RemoveButton, RemoveButtonText } from './StyledComponents';
 import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
-import { Video, ResizeMode } from 'expo-av';
+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,
@@ -30,22 +73,7 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
             {isImage ? (
               <MediaImage source={{ uri: file.uri }} />
             ) : isVideo ? (
-              <TouchableOpacity
-                activeOpacity={0.8}
-                onPress={() => setPreviewUri(file.uri)}
-                style={styles.videoThumb}
-              >
-                <Video
-                  source={{ uri: file.uri }}
-                  style={StyleSheet.absoluteFill}
-                  resizeMode={ResizeMode.COVER}
-                  shouldPlay={false}
-                  isMuted
-                />
-                <View style={styles.playOverlay}>
-                  <Text style={styles.playIcon}>▶</Text>
-                </View>
-              </TouchableOpacity>
+              <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
             ) : (
               <View style={{ width: 70, height: 70, borderRadius: 8 }}>
                 <FileIcon width={70} height={70} />
@@ -66,15 +94,7 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
           >
             <Text style={styles.closeText}>✕</Text>
           </TouchableOpacity>
-          {previewUri && (
-            <Video
-              source={{ uri: previewUri }}
-              style={styles.fullVideo}
-              resizeMode={ResizeMode.CONTAIN}
-              useNativeControls
-              shouldPlay
-            />
-          )}
+          {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
         </SafeAreaView>
       </Modal>
     </MediaContainer>

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