@ethora/chat-component-rn 26.5.7 → 26.5.11

package/src/components/styled/StyledComponents.ts

@@ -54,11 +54,14 @@ export const ChatContainerHeaderBoxInfo = styled.TouchableOpacity`
   flex: 1;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  /* Left-aligned: the avatar + chat-name row now hugs the left edge of
+   * the header instead of centering itself within the available space.
+   * Was: justify-content:center + max-width:90% which double-centered
+   * with CenterContainer and pushed the title to the middle. */
+  justify-content: flex-start;
+  width: 100%;
   overflow: hidden;
-  max-width: 90%;
   gap: 16px;
-  flex: 1;
 `;
 
 export const ChatContainerHeaderInfo = styled.View`

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 { Pressable, 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,24 +48,67 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   };
 
   return (
-    <TouchableOpacity onPress={handleOpen}>
-      <Video
-        source={{ uri: fileURL }}
+    // Capture-overlay pattern: VideoView sits underneath without ANY
+    // touch participation; a transparent absolute-fill <Pressable> on
+    // top owns the tap. Previously we wrapped VideoView in a
+    // TouchableOpacity and set `pointerEvents="none"` on the inner
+    // VideoView — but on some expo-video versions / iOS the native
+    // VideoView still intercepted gestures despite that hint, so
+    // tapping the poster did nothing. Customer-reported #9 (video
+    // preview unresponsive). The Pressable now guarantees the tap
+    // reaches `handleOpen`.
+    <View
+      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"
       />
-    </TouchableOpacity>
+      <View style={styles.overlay} pointerEvents="none">
+        <View style={styles.playButton}>
+          <PlayIcon width={28} height={28} />
+        </View>
+      </View>
+      <Pressable
+        onPress={handleOpen}
+        // Sits ON TOP of VideoView + the play-button overlay; transparent
+        // so the poster + play icon show through. Captures the tap and
+        // routes to handleOpen → setActiveModal(FILE_PREVIEW).
+        style={StyleSheet.absoluteFill}
+        accessibilityRole="button"
+        accessibilityLabel="Play video"
+      />
+    </View>
   );
 };
 
 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.