@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Toast/Toast.tsx

@@ -32,7 +32,7 @@ const ToastContainer = styled(Animated.View)<{ type: string }>`
   border-radius: 6px;
   margin-bottom: 8px;
   width: 240px;
-  shadow-color: #000;
+  shadow-color: ${({ theme }) => theme.shadow};
   shadow-offset: 0px 2px;
   shadow-opacity: 0.2;
   shadow-radius: 4px;

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,
@@ -16,7 +17,7 @@ import {
 import * as FileSystem from 'expo-file-system/legacy';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { PauseIcon, PlayIcon } from '../../assets/icons';
-import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 import { getIosAudioPlaybackCacheExtension } from '../../helpers/mimeToExtension';
 import { pushLog as devPushLog } from '../../utils/devLogger';
 
@@ -318,7 +319,7 @@ const AudioMessage = ({
   fileName,
   originalName,
 }: AudioMessageProps) => {
-  const { config } = useChatSettingState();
+  const theme = useTheme();
   const soundRef = useRef<AudioPlayer | null>(null);
   // expo-audio delivers progress through an event subscription instead of
   // expo-av's `onPlaybackStatusUpdate` callback argument, so the handle has
@@ -338,7 +339,10 @@ const AudioMessage = ({
   const [position, setPosition] = useState(0);
   const [duration, setDuration] = useState(0);
   const [webViewEnabled, setWebViewEnabled] = useState(false);
-  const primaryColor = config?.colors?.primary || '#0A84FF';
+  const primaryColor = theme.primary;
+  const onPrimary = theme.textOnPrimary;
+  const trackStyle = { backgroundColor: theme.border };
+  const timeStyle = { color: theme.textSecondary };
 
   const clearLoadingGuard = () => {
     if (loadingTimerRef.current) {
@@ -425,7 +429,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'
       );
@@ -759,19 +763,19 @@ const AudioMessage = ({
           activeOpacity={0.85}
         >
           {isLoading ? (
-            <ActivityIndicator size="small" color="#fff" />
+            <ActivityIndicator size="small" color={onPrimary} />
           ) : (
             <View style={styles.iconWrap}>
               {isPlaying ? (
-                <PauseIcon width={18} height={18} color="#fff" />
+                <PauseIcon width={18} height={18} color={onPrimary} />
               ) : (
-                <PlayIcon width={18} height={18} color="#fff" />
+                <PlayIcon width={18} height={18} color={onPrimary} />
               )}
             </View>
           )}
         </TouchableOpacity>
         <View style={styles.progressContainer}>
-          <View style={styles.progressTrack}>
+          <View style={[styles.progressTrack, trackStyle]}>
             <View
               style={[
                 styles.progressFill,
@@ -780,12 +784,12 @@ const AudioMessage = ({
             />
           </View>
           <View style={styles.progressRow}>
-            <Text style={styles.time}>
+            <Text style={[styles.time, timeStyle]}>
               {playbackError ? 'Audio unavailable' : formatTime(position)}
             </Text>
             {/* Always render the right slot (empty until known) so the row
                 never reflows when the duration appears after decoding. */}
-            <Text style={styles.time}>
+            <Text style={[styles.time, timeStyle]}>
               {!playbackError && duration > 0 ? formatTime(duration) : ''}
             </Text>
           </View>

package/src/components/styled/Button.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
-import styled from 'styled-components/native';
+import React, { ReactElement, ReactNode, useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components/native';
 import {
   TouchableOpacity,
   View,
@@ -20,10 +20,10 @@ const CustomButton = styled(TouchableOpacity)<{
   variant?: 'default' | 'filled' | 'outlined';
 }>`
   border-width: ${({ variant }) => (variant === 'outlined' ? 1 : 0)}px;
-  border-color: ${({ borderColor }) => borderColor || '#0052CD'};
+  border-color: ${({ borderColor, theme }) => borderColor || theme.primary};
   border-radius: 20px;
-  background-color: ${({ variant, backgroundColor }) =>
-    variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
+  background-color: ${({ variant, backgroundColor, theme }) =>
+    variant === 'filled' ? backgroundColor || theme.primary : 'transparent'};
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -38,8 +38,10 @@ const ButtonText = styled.Text<{
   variant?: 'default' | 'filled' | 'outlined';
   backgroundColor?: string;
 }>`
-  color: ${({ variant, backgroundColor }) =>
-    variant === 'filled' ? '#FFFFFF' : backgroundColor || '#0052CD'};
+  color: ${({ variant, backgroundColor, theme }) =>
+    variant === 'filled'
+      ? theme.textOnPrimary
+      : backgroundColor || theme.primary};
   font-size: ${PixelRatio.getFontScale() * 14}px;
   font-weight: bold;
 `;
@@ -83,6 +85,11 @@ const Button: React.FC<ButtonProps> = ({
   accessibilityLabel,
 }) => {
   const iconOnly = !loading && !children && !text && !StartIcon && !!EndIcon;
+  // Theme from the styled ThemeProvider. `useContext` (not styled's
+  // `useTheme`) so rendering outside the provider — isolated tests — does
+  // not throw; the inline label colour then falls back to the historical
+  // black.
+  const theme = useContext(ThemeContext);
 
   return (
     <CustomButton
@@ -100,7 +107,7 @@ const Button: React.FC<ButtonProps> = ({
       {!loading && children}
       {!loading && !children && typeof text !== 'undefined' && (
         <ButtonText
-          style={[{ color: color || 'black' }]}
+          style={[{ color: color || theme?.text || 'black' }]}
           variant={variant}
           backgroundColor={backgroundColor}
         >

package/src/components/styled/DateLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
 import { Text } from 'react-native';
-import { getDateLabelColor } from '../../helpers/getDateLabelColor';
+import { useTheme } from '../../hooks/useTheme';
 import { useT, useUiLocale } from '../../i18n/useT';
 
 interface DateLabelProps {
@@ -71,12 +71,16 @@ const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
     label = date.toLocaleDateString(uiLocale, options);
   }
 
-  const textColor = getDateLabelColor({ colors });
+  // Theme-aware: dark mode ignores the light-only `colors` knobs (the
+  // theme already folds `colors.dateLabel` / `colors.primary` in light).
+  const theme = useTheme();
+  const textColor = theme.dateLabel;
+  const bgColor = theme.dark ? theme.surfaceSecondary : colors?.secondary;
 
   return (
     <Container>
       <Line />
-      <StyledDateLabel bgColor={colors?.secondary}>
+      <StyledDateLabel bgColor={bgColor}>
         <StyledDateText color={textColor}>{label}</StyledDateText>
       </StyledDateLabel>
       <Line />

package/src/components/styled/MediaModal.tsx

@@ -1,7 +1,8 @@
 /** @format */
 
-import React from 'react';
-import { View, Modal, StyleSheet, ViewStyle, Text } from 'react-native';
+import React from "react";
+import { View, Modal, StyleSheet, ViewStyle, Text } from "react-native";
+import { useTheme } from "../../hooks/useTheme";
 
 interface OverlayProps {
   children?: React.ReactNode;
@@ -9,18 +10,23 @@ interface OverlayProps {
   style?: ViewStyle;
 }
 
-export const Overlay = ({ children, visible, style }: OverlayProps) => (
-  <Modal
-    transparent={true}
-    animationType="fade"
-    visible={visible}
-    onRequestClose={() => {
-      // Implement logic to close the modal if needed
-    }}
-  >
-    <View style={[styles.modal, style]}>{children}</View>
-  </Modal>
-);
+export const Overlay = ({ children, visible, style }: OverlayProps) => {
+  const theme = useTheme();
+  return (
+    <Modal
+      transparent={true}
+      animationType="fade"
+      visible={visible}
+      onRequestClose={() => {
+        // Implement logic to close the modal if needed
+      }}
+    >
+      <View style={[styles.modal, { backgroundColor: theme.surface }, style]}>
+        {children}
+      </View>
+    </Modal>
+  );
+};
 
 export const StyledModal = ({
   children,
@@ -34,22 +40,21 @@ export const StyledModal = ({
 
 const styles = StyleSheet.create({
   overlay: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     zIndex: 999, // Use zIndex for stacking, although this won't work in all cases, Android uses elevation.
     elevation: 999, // Added to give the overlay layer a higher stacking context on Android.
   },
   modal: {
     flex: 1,
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'white',
+    width: "100%",
+    height: "100%",
+    backgroundColor: "white",
     padding: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
-})
-
+});

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"

package/src/components/styled/RoomListComponents/index.tsx

@@ -7,6 +7,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { getTintedColor } from '../../../helpers/getTintedColor';
+import { useTheme } from '../../../hooks/useTheme';
 
 // Container with burger menu support
 export const Container = ({
@@ -17,24 +18,34 @@ export const Container = ({
   burgerMenu?: boolean;
   open?: boolean;
   children: React.ReactNode;
-}) => (
-  <View
-    style={[
-      styles.container,
-      burgerMenu && open ? styles.containerOpen : styles.containerClosed,
-      burgerMenu && styles.burgerMenu,
-    ]}
-  >
-    {children}
-  </View>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme.surface },
+        burgerMenu && open ? styles.containerOpen : styles.containerClosed,
+        burgerMenu && [
+          styles.burgerMenu,
+          { backgroundColor: theme.surface, borderRightColor: theme.border },
+        ],
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
 
 // Button for the burger menu
-export const BurgerButton = ({ onPress }: { onPress: () => void }) => (
-  <TouchableOpacity style={styles.burgerButton} onPress={onPress}>
-    <Text style={styles.burgerButtonText}>☰</Text>
-  </TouchableOpacity>
-);
+export const BurgerButton = ({ onPress }: { onPress: () => void }) => {
+  const theme = useTheme();
+  return (
+    <TouchableOpacity style={styles.burgerButton} onPress={onPress}>
+      <Text style={[styles.burgerButtonText, { color: theme.text }]}>☰</Text>
+    </TouchableOpacity>
+  );
+};
 
 // Chat item
 const ColorContext = createContext<string | undefined>(undefined);
@@ -71,17 +82,31 @@ export const ChatInfo = ({ children }: { children: React.ReactNode }) => (
 // One line, ellipsised. Without this a long room title (or a display name
 // that happens to be an email) wrapped to three or four lines and pushed
 // the whole row's height around.
-export const ChatName = ({ text }: { text: string }) => (
-  <Text style={styles.chatName} numberOfLines={1} ellipsizeMode="tail">
-    {text}
-  </Text>
-);
+export const ChatName = ({ text }: { text: string }) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[styles.chatName, { color: theme.text }]}
+      numberOfLines={1}
+      ellipsizeMode="tail"
+    >
+      {text}
+    </Text>
+  );
+};
 
-export const LastMessage = ({ children }: { children: React.ReactNode }) => (
-  <Text style={styles.lastMessage} numberOfLines={1} ellipsizeMode="tail">
-    {children}
-  </Text>
-);
+export const LastMessage = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[styles.lastMessage, { color: theme.textMuted }]}
+      numberOfLines={1}
+      ellipsizeMode="tail"
+    >
+      {children}
+    </Text>
+  );
+};
 
 // User count display for the chat
 export const UserCount = ({
@@ -92,13 +117,19 @@ export const UserCount = ({
   style: TextStyle;
 }) => <Text style={[styles.userCount, style]}>{text}</Text>;
 
-export const Viewider = () => <View style={styles.viewider} />;
+export const Viewider = () => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[styles.viewider, { backgroundColor: theme.surfaceHighlight }]}
+    />
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
     padding: 16,
     paddingTop: 0,
-    backgroundColor: '#fff',
     overflow: 'hidden',
   },
   burgerMenu: {
@@ -110,10 +141,8 @@ const styles = StyleSheet.create({
     transform: [{ translateX: -300 }],
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: '#fff',
     padding: 16,
     borderRightWidth: 1,
-    borderRightColor: '#f0f0f0',
   },
   containerOpen: {
     transform: [{ translateX: 0 }],
@@ -129,7 +158,6 @@ const styles = StyleSheet.create({
   },
   burgerButtonText: {
     fontSize: 24,
-    color: '#333',
   },
   chatItem: {
     borderRadius: 16,
@@ -162,15 +190,12 @@ const styles = StyleSheet.create({
   chatName: {
     fontWeight: 'bold',
   },
-  lastMessage: {
-    color: '#999',
-  },
+  lastMessage: {},
   userCount: {
     marginLeft: 'auto',
   },
   viewider: {
     height: 1,
     width: '100%',
-    backgroundColor: '#0052cd0d',
   },
 });