@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -2,25 +2,27 @@
 
 import styled from 'styled-components/native';
 
-// Theme variables for reuse
-const colors = {
-  primary: '#141414',
-  secondary: '#f5f7f9',
-  border: '#ccc',
-  white: '#fff',
-  black: '#000',
-};
+// Colours come from the ThemeProvider mounted in ReduxWrapper
+// (`({ theme }) => theme.x`); the light palette holds the values that
+// used to be hard-coded here.
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  padding: 8px 16px 4px 16px;
-  background-color: ${colors.white};
+  padding: 12px 16px 8px 16px;
+  /* Transparent, so the dock's white surface — and its rounded top
+   * corners — are what shows. An opaque child painted straight over those
+   * corners (a parent's border radius does not clip children without
+   * overflow:hidden, and that would clip the dock's shadow too). */
+  background-color: transparent;
   z-index: 100;
   width: 100%;
   bottom: 0;
   left: 0;
-  border-top-width: 1px;
-  border-top-color: #e5e7eb;
+  /* No radius or shadow here: the dock this sits in (ChatRoom's
+   * InputDockTag) is the composer's outer surface and carries both. Having
+   * them on this inner view too drew its shadow onto the dock's white
+   * background — the faint seam that made the strip below look like a
+   * different colour. */
 `;
 
 export const MediaContainer = styled.View`
@@ -51,12 +53,12 @@ export const MessageInput = styled.TextInput<{
   padding: 8px 14px;
   border-radius: 20px;
   border-width: 1px;
-  border-color: ${(props) =>
-    props.isFocused ? props.color || '#0052CD' : 'transparent'};
-  color: #141414;
+  border-color: ${({ isFocused, color, theme }) =>
+    isFocused ? color || theme.primary : 'transparent'};
+  color: ${({ theme }) => theme.text};
   font-size: ${({ fontSize }) => fontSize ?? 16}px;
   ${({ fontWeight }) => (fontWeight ? `font-weight: ${fontWeight};` : '')}
-  background-color: #f5f7f9;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   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
@@ -78,13 +80,13 @@ export const Timer = styled.Text`
 export const TimerText = styled.Text`
   font-size: 18px;
   font-weight: bold;
-  color: ${colors.black};
+  color: ${({ theme }) => theme.text};
 `;
 
 export const WaveformContainer = styled.View`
   width: 100%;
   height: 40px;
-  background-color: #f1f1f1;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
 `;
 
 export const RecordContainer = styled.View`
@@ -107,9 +109,9 @@ export const FilePreview = styled.View`
   width: 100px;
   height: 100px;
   border-width: 1px;
-  border-color: ${colors.border};
+  border-color: ${({ theme }) => theme.border};
   border-radius: 8px;
-  background-color: #f9f9f9;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   overflow: hidden;
 `;
 
@@ -125,15 +127,16 @@ export const VideoPreview = styled.View`
 
 export const StyledInput = styled.TextInput`
   padding: 16px 12px;
-  background-color: ${colors.secondary};
+  background-color: ${({ theme }) => theme.surfaceSecondary};
+  color: ${({ theme }) => theme.text};
   font-size: 16px;
   border-radius: 16px;
 `;
 
 export const TextareaInput = styled.TextInput`
   padding: 16px 12px;
-  background-color: ${colors.secondary};
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   font-size: 16px;
-  color: ${colors.black};
+  color: ${({ theme }) => theme.text};
   border-radius: 16px;
 `;

package/src/components/styled/TreadLabel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/native';
+import { useTheme } from '../../hooks/useTheme';
 import { Line } from './StyledComponents';
 
 interface DateLabelProps {
@@ -21,7 +22,7 @@ export const StyledDateLabel = styled.Text<{
   secondary?: string;
 }>`
   margin: 0;
-  color: ${(props) => props.primary || '#0052cd'};
+  color: ${(props) => props.primary || props.theme.dateLabel};
   border-radius: 118px;
   padding: 5px 8px;
   display: flex;
@@ -30,16 +31,21 @@ export const StyledDateLabel = styled.Text<{
   font-size: 12px;
   line-height: 14px;
   font-weight: 600;
-  background-color: ${(props) => props.secondary || '#e7edf9'};
+  background-color: ${(props) =>
+    props.theme.dark ? props.theme.surfaceSecondary : props.secondary || '#e7edf9'};
   height: 24px;
   white-space: nowrap;
 `;
 
 const TreadLabel: React.FC<DateLabelProps> = ({ reply, colors }) => {
+  const theme = useTheme();
   return (
     <Container>
       <Line />
-      <StyledDateLabel {...colors}>
+      <StyledDateLabel
+        primary={theme.dark ? undefined : colors?.primary}
+        secondary={colors?.secondary}
+      >
         {reply} {reply > 1 ? 'replies' : 'reply'}
       </StyledDateLabel>
       <Line />

package/src/components/styled/UnsupportedType.tsx

@@ -18,6 +18,7 @@ import { ActivityIndicator, View } from 'react-native';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { FileIcon } from '../../assets/icons';
 import { getExtensionForMime } from '../../helpers/mimeToExtension';
+import { getDisplayFileName } from '../../helpers/getDisplayFileName';
 
 interface FileDownloadProps {
   fileName: string;
@@ -47,6 +48,15 @@ const FileDownload: React.FC<FileDownloadProps> = ({
   const dispatch = useDispatch();
   const { config } = useChatSettingState();
 
+  // Bug #40: prefer the sender's original name over the server's stored
+  // hash name for both the visible label and the extension badge below.
+  const displayName = getDisplayFileName({
+    originalName,
+    fileName,
+    location: fileURL,
+    mimetype,
+  });
+
   const formatFileSize = (sizeInBytes: string): string => {
     const size = parseInt(sizeInBytes, 10);
 
@@ -101,9 +111,9 @@ const FileDownload: React.FC<FileDownloadProps> = ({
   };
 
   const extensionLabel = (() => {
-    const dotIndex = fileName.lastIndexOf('.');
-    if (dotIndex !== -1 && dotIndex < fileName.length - 1) {
-      return fileName.slice(dotIndex + 1).toUpperCase();
+    const dotIndex = displayName.lastIndexOf('.');
+    if (dotIndex !== -1 && dotIndex < displayName.length - 1) {
+      return displayName.slice(dotIndex + 1).toUpperCase();
     }
     return getExtensionForMime(mimetype).replace('.', '').toUpperCase();
   })();
@@ -123,7 +133,7 @@ const FileDownload: React.FC<FileDownloadProps> = ({
           isUser={isUser}
           colorIsUser={config?.colors?.primary}
           colorUsers={config?.colors?.secondary}
-        >{formatFileName(fileName, 20)}</FileName>
+        >{formatFileName(displayName, 20)}</FileName>
         {(pending || size) && (
           <FileSizeContainer>
             {pending ? (

package/src/components/styled/VideoMessage.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { useVideoPlayer, VideoView } from 'expo-video';
+import {
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import {
   setActiveFile,
@@ -16,74 +19,148 @@ import {
 
 interface CustomMessageVideoProps {
   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;
   fileURL: string;
   mimetype: string;
+  /** The backend-generated poster frame (message.locationPreview). */
+  previewURL?: string;
 }
 
+const PlayBadge: React.FC = () => (
+  <View style={styles.overlay} pointerEvents="none">
+    <View style={styles.playButton}>
+      <PlayIcon width={28} height={28} />
+    </View>
+  </View>
+);
+
+/**
+ * Poster path — taken whenever the message carries a `locationPreview`.
+ *
+ * A chat row only ever needs a still and a play affordance; actual
+ * playback happens in the full-screen preview. Drawing that still with a
+ * plain <Image> keeps the whole bubble inside the RN view hierarchy, so
+ * the play badge is guaranteed to composite on top of it.
+ */
+const PosterVideo: React.FC<{
+  previewURL: string;
+  onOpen: () => void;
+  onPosterError: () => void;
+}> = ({ previewURL, onOpen, onPosterError }) => {
+  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
+
+  useEffect(() => {
+    if (!previewURL) {
+      return;
+    }
+    let active = true;
+    Image.getSize(
+      previewURL,
+      (w, h) => {
+        if (active) {
+          setDims(fitMediaDimensions(w, h));
+        }
+      },
+      () => {
+        /* keep the default box if the size probe fails */
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [previewURL]);
+
+  return (
+    <Pressable
+      onPress={onOpen}
+      style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+      accessibilityRole="button"
+      accessibilityLabel="Play video"
+    >
+      <Image
+        source={{ uri: previewURL }}
+        style={styles.video}
+        resizeMode="cover"
+        // Not every backend returns a real still — some set
+        // locationPreview to the video URL itself, which decodes to
+        // nothing. Rather than show an empty box, fall back to the
+        // static placeholder branch.
+        onError={onPosterError}
+      />
+      <PlayBadge />
+    </Pressable>
+  );
+};
+
+/**
+ * Fallback for messages with no usable poster frame: a static dark
+ * placeholder behind the play badge.
+ *
+ * This branch used to mount an expo-video player purely to paint the
+ * first frame (`VideoView` + `surfaceType="textureView"`). That never
+ * composited reliably: on Android (Pixel, Android 16, New Architecture)
+ * the native video surface draws ABOVE sibling RN views, swallowing the
+ * play badge — the video looked like a plain photo. There is no
+ * surfaceType/zIndex combination that guarantees ordering across SDK 54
+ * and 57, so we don't fight it: no live surface in the bubble at all.
+ * The badge is plain RN views over a plain RN background, which cannot
+ * be occluded, and we drop the per-row player instance as a bonus.
+ * Actual playback (and the real first frame) happens in the full-screen
+ * preview modal.
+ */
+const PlaceholderVideo: React.FC<{
+  onOpen: () => void;
+}> = ({ onOpen }) => {
+  const dims = defaultMediaDims();
+
+  return (
+    <Pressable
+      onPress={onOpen}
+      style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+      accessibilityRole="button"
+      accessibilityLabel="Play video"
+    >
+      <PlayBadge />
+    </Pressable>
+  );
+};
+
 const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   fileName,
+  originalName,
   fileURL,
   mimetype,
+  previewURL,
 }) => {
   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 [posterFailed, setPosterFailed] = useState(false);
 
   const handleOpen = () => {
-    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
-  return (
-    // 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}
-        contentFit="cover"
-        nativeControls={false}
-        surfaceType="textureView"
-        pointerEvents="none"
+  if (previewURL && !posterFailed) {
+    return (
+      <PosterVideo
+        previewURL={previewURL}
+        onOpen={handleOpen}
+        onPosterError={() => {
+          if (isSecureFileUrl(previewURL)) {
+            requestFileTokenRecovery();
+          }
+          setPosterFailed(true);
+        }}
       />
-      <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>
-  );
+    );
+  }
+
+  return <PlaceholderVideo onOpen={handleOpen} />;
 };
 
 export default CustomMessageVideo;

package/src/context/MessageNotificationContext.tsx

@@ -25,6 +25,7 @@ import { messageNotificationManager } from '../utils/messageNotificationManager'
 import { setCurrentRoom } from '../roomStore/roomsSlice';
 import { IConfig, IMessage } from '../types/types';
 import { RootState } from '../roomStore';
+import { useTheme } from '../hooks/useTheme';
 
 interface ToastItem {
   id: string;
@@ -228,6 +229,7 @@ const ToastRow: React.FC<{
   onPress: () => void;
   onDismiss: () => void;
 }> = ({ item, onPress, onDismiss }) => {
+  const theme = useTheme();
   const fade = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     Animated.timing(fade, {
@@ -238,17 +240,29 @@ const ToastRow: React.FC<{
   }, [fade]);
 
   return (
-    <Animated.View style={[styles.toast, { opacity: fade }]}>
+    <Animated.View
+      style={[
+        styles.toast,
+        { backgroundColor: theme.surface, shadowColor: theme.shadow },
+        { opacity: fade },
+      ]}
+    >
       <Pressable style={styles.toastBody} onPress={onPress}>
-        <Text style={styles.toastTitle} numberOfLines={1}>
+        <Text
+          style={[styles.toastTitle, { color: theme.text }]}
+          numberOfLines={1}
+        >
           {item.roomName}
         </Text>
-        <Text style={styles.toastSubtitle} numberOfLines={2}>
+        <Text
+          style={[styles.toastSubtitle, { color: theme.textSecondary }]}
+          numberOfLines={2}
+        >
           {item.senderName}: {item.message?.body || ''}
         </Text>
       </Pressable>
       <Pressable onPress={onDismiss} style={styles.dismiss}>
-        <Text style={styles.dismissText}>×</Text>
+        <Text style={[styles.dismissText, { color: theme.textMuted }]}>×</Text>
       </Pressable>
     </Animated.View>
   );