@ethora/chat-component-rn 26.8.1 → 26.8.2

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,18 +1,16 @@
-import React, { useCallback, useMemo } from 'react';
+/** @format */
 
-import {
-  ModalContainerFullScreen,
-  Viewider,
-  Label,
-  LabelData,
-  BorderedContainer,
-  CenterContainer,
-} from '../styledModalComponents';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import Button from '../../styled/Button';
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch } from 'react-redux';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { ArowDownIcon } from '../../../assets/icons';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
+import { useT } from '../../../i18n/useT';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -21,65 +19,84 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+
   const options = useMemo(
     () => [
-      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
-      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
-      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
-      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
-      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
-      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
+      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
+      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
     ],
-    []
+    [t]
   );
 
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback((key: string) => {
-    dispatch(setActiveModal(key as any));
-  }, []);
+  const handleClick = useCallback(
+    (key: string) => {
+      dispatch(setActiveModal(key as any));
+    },
+    [dispatch]
+  );
 
   return (
-    <ModalContainerFullScreen>
+    <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Settings'}
+        headerTitle={t('settings.menu.title')}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
       />
-      <CenterContainer>
-        <BorderedContainer
-          style={{
-            padding: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          {options.map((option: { value: string; key: string }, index) => (
-            <>
-              <Button
-                variant="default"
-                style={{
-                  minHeight: 40,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  width: '100%',
-                  justifyContent: 'center',
-                  borderRadius: 0,
-                  alignItems: 'flex-start',
-                }}
-                onPress={() => handleClick(option.key)}
-              >
-                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
-                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
-              </Button>
-              {index < 5 && <Viewider />}
-            </>
-          ))}
-        </BorderedContainer>
-      </CenterContainer>
+      {/* One card per entry, rather than a single bordered block with
+        * hairline dividers — the rows are separate destinations, and the
+        * design gives each its own surface. */}
+      <View style={styles.body}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.key}
+            testID={`settings-row-${option.key}`}
+            activeOpacity={0.7}
+            style={styles.card}
+            onPress={() => handleClick(option.key)}
+          >
+            <Text style={styles.label}>{option.label}</Text>
+            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
+          </TouchableOpacity>
+        ))}
+      </View>
     </ModalContainerFullScreen>
   );
 };
 
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#E8EDF2',
+  },
+  body: {
+    width: '100%',
+    padding: 12,
+    gap: 12,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+    color: '#141414',
+  },
+  chevron: {
+    transform: [{ rotate: '-90deg' }],
+  },
+});
+
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -86,8 +86,15 @@ export const HeaderContainer = styled.View`
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
   background-color: #fff;
-  border-bottom-width: 1px;
-  border-bottom-color: #f0f0f0;
+  /* Same card treatment as the room-list header: rounded bottom corners
+   * and a soft drop shadow instead of a hairline rule. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { IMessage } from '../../types/types';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { IConfig, IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -29,6 +31,8 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   isDriver,
   config,
 }) => {
+  // Room icons can live on the membership-gated secure-files host.
+  const fileToken = useFileToken();
   const displayName = String(chat?.title || chat?.name || '').trim();
 
   // usersSet is the canonical name store — the same one Message.tsx
@@ -130,7 +134,13 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder name={displayName} icon={chat?.icon} active={false} />
+      <View pointerEvents="none">
+        <ProfileImagePlaceholder
+          name={displayName}
+          icon={appendFileToken(chat?.icon, fileToken)}
+          active={false}
+        />
+      </View>
       <View
         style={{
           flexDirection: 'column',
@@ -140,7 +150,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          borderBottomColor: '#F0F0F0',
+          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
+          // than the ground itself, so the row separators vanished.
+          borderBottomColor: '#C6CFDA',
         }}
       >
         <View
@@ -251,8 +263,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
+          // Darker than the list's own ground (#E8EDF2), otherwise the
+          // separator disappears into it — white and the old #0052CD0D
+          // hairline both did.
           <View
-            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
           />
         )}
       </View>

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

@@ -8,9 +8,19 @@ import {
 } from './StyledRoomComponents';
 import { FileIcon } from '../../../assets/icons';
 import { Image, View } from 'react-native';
+import { useFileToken } from '../../../hooks/useFileToken';
+import {
+  appendFileToken,
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../../helpers/secureFileUrl';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 interface LastMessageFileProps
-  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
+  > {}
 
 const fallbackImage =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
@@ -18,9 +28,18 @@ const fallbackImage =
 const LastMessageFile: FC<LastMessageFileProps> = ({
   user,
   originalName,
+  fileName,
+  mimetype,
   locationPreview,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
+  const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
 
   return (
     <LastRoomMessageContainer>
@@ -34,18 +53,23 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
       >
         {imgSrc ? (
           <Image
-            source={{ uri: imgSrc }}
+            source={{ uri: appendFileToken(imgSrc, fileToken) }}
             style={{
               borderRadius: 16,
               width: 20,
               height: 20,
             }}
-            onError={() => setImgSrc(fallbackImage)}
+            onError={() => {
+              if (isSecureFileUrl(imgSrc)) {
+                requestFileTokenRecovery();
+              }
+              setImgSrc(fallbackImage);
+            }}
           />
         ) : (
           <FileIcon style={{ width: '20px', height: '20px' }} />
         )}
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

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

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -9,6 +11,7 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { View } from 'react-native';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const PhotoContainer = styled.View`
   position: relative;
@@ -23,13 +26,25 @@ const PhotoContainer = styled.View`
 `;
 
 interface LastMessagePhotoProps
-  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
+  > {}
 
 const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   user,
   locationPreview,
   originalName,
+  fileName,
+  mimetype,
 }) => {
+  const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -42,10 +57,10 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
       >
         <PhotoContainer>
           <ShadeWrapper>
-            <LastMessageImg src={locationPreview} />
+            <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

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

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -8,6 +10,7 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { Text, View } from 'react-native';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const VideoContainer = styled.View`
   position: relative;
@@ -38,13 +41,25 @@ const PlayButton = styled.View`
 `;
 
 interface LastMessageVideoProps
-  extends Pick<LastMessage, 'user' | 'location' | 'originalName'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'location' | 'originalName' | 'fileName' | 'mimetype'
+  > {}
 
 const LastMessageVideo: FC<LastMessageVideoProps> = ({
   user,
   location,
   originalName,
+  fileName,
+  mimetype,
 }) => {
+  const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -57,11 +72,11 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
       >
         <VideoContainer>
           <ShadeWrapper>
-            <Thumbnail src={location} />
+            <Thumbnail src={appendFileToken(location, fileToken)} />
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -345,9 +345,14 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     if (!runtime) {return;}
     try {
       if (Platform.OS === 'android') {
-        await runtime.AudioSession.setAndroidAudioConfiguration?.({
-          preferredOutputList: next ? ['speaker'] : ['earpiece'],
-        });
+        // NB: not `setAndroidAudioConfiguration` — that method has never
+        // existed on AudioSession (the old `?.` call silently no-oped, so
+        // the speaker icon toggled while audio stayed on the earpiece).
+        // `selectAudioOutput` routes directly; on Android its device ids
+        // are the literal strings 'speaker' / 'earpiece'.
+        await runtime.AudioSession.selectAudioOutput(
+          next ? 'speaker' : 'earpiece'
+        );
       } else {
         await runtime.AudioSession.setAppleAudioConfiguration?.({
           audioCategory: 'playAndRecord',

package/src/components/styled/AudioMessage.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { withFileToken } from '../../helpers/secureFileUrl';
 import {
   View,
   TouchableOpacity,
@@ -425,7 +426,7 @@ const AudioMessage = ({
     const partInfo = await FileSystem.getInfoAsync(part);
     if (!partInfo.exists) {
       const download = await withTimeout(
-        FileSystem.downloadAsync(src, part),
+        FileSystem.downloadAsync(withFileToken(src), part),
         12000,
         'audio_download_timeout'
       );

package/src/components/styled/MessageImage.tsx

@@ -1,4 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import {
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
+import { pushLog } from '../../utils/devLogger';
 import { Container } from './StyledInputComponents/MediaComponents';
 import { useDispatch } from 'react-redux';
 import {
@@ -14,19 +19,43 @@ import {
 } from '../../helpers/mediaDimensions';
 
 interface CustomMessageImageProps {
+  /** Full-size file. Opened in the preview modal, NOT rendered inline. */
   fileURL: string;
   fileName: string;
+  /**
+   * The sender's original file name (bug #40) - kept alongside `fileName`
+   * so the preview modal's save/share/download logic can prefer it over
+   * the server's stored/hashed name.
+   */
+  originalName?: string;
   mimetype: string;
+  /**
+   * Server-generated thumbnail — what the bubble actually renders, same
+   * as the web client. The full-size original can be many megabytes and,
+   * for secure uploads, is served from a different (membership-gated)
+   * route; rendering it inline is what left the bubbles blank.
+   */
+  locationPreview?: string;
 }
 
+/** Keep the personal file token out of the logs. */
+const maskToken = (url?: string) =>
+  (url || '').replace(/([?&]ft=)[^&]*/i, '$1<redacted>');
+
 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,
+  originalName,
   mimetype,
+  locationPreview,
 }) => {
+  // Preview first, original only as a fallback — mirrors the web client,
+  // where the <img> src is the preview and `fileURL` is reserved for the
+  // modal.
+  const displayURL = locationPreview || fileURL;
   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.
@@ -35,28 +64,34 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!fileURL) {
+    if (!displayURL) {
       return;
     }
     let active = true;
     Image.getSize(
-      fileURL,
+      displayURL,
       (w, h) => {
         if (active) {
           setDims(fitMediaDimensions(w, h));
         }
       },
-      () => {
-        /* keep the default box if the size probe fails */
+      (error) => {
+        // Keep the default box — but say WHICH url failed. A blank
+        // bubble is otherwise indistinguishable between "bad url",
+        // "403 without a token" and "host unreachable".
+        pushLog('warn', 'image: getSize failed', {
+          url: maskToken(displayURL),
+          error: (error as any)?.message || String(error),
+        });
       }
     );
     return () => {
       active = false;
     };
-  }, [fileURL]);
+  }, [displayURL]);
 
   const handleOpen = () => {
-    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
@@ -78,7 +113,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
           </View>
         )}
         <Image
-          source={{ uri: fileURL || FALLBACK_IMAGE }}
+          source={{ uri: displayURL || FALLBACK_IMAGE }}
           style={{
             width: dims.width,
             height: dims.height,
@@ -86,6 +121,17 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
             backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
           onLoadEnd={() => setLoading(false)}
+          onError={(event) => {
+            setLoading(false);
+            pushLog('warn', 'image: load failed', {
+              url: maskToken(displayURL),
+              usingPreview: !!locationPreview,
+              error: (event as any)?.nativeEvent?.error,
+            });
+            if (isSecureFileUrl(displayURL)) {
+              requestFileTokenRecovery();
+            }
+          }}
           // The box already matches the natural aspect ratio, so 'cover'
           // fills it edge-to-edge with no actual cropping or letterboxing.
           resizeMode="cover"