@ethora/chat-component-rn 26.8.5 → 26.8.7

package/src/components/MessageBubble/MessageReply.tsx

@@ -1,50 +1,83 @@
-import { FC } from 'react';
-import { IMessage } from '../../types/types';
-import { styled } from 'styled-components/native';
-import { Text } from 'react-native';
-
-export const StyledMessageReply = styled.TouchableOpacity<{
-  isUser: boolean;
-  configColor: string;
-}>`
-  background-color: ${(props) => (props.isUser ? '#ffffff' : '#E7EDF9')};
-  padding: 8px 16px;
-  margin-bottom: 8px;
-  border-radius: 4px;
-  border-style: solid;
-  border-start-width: ${(props) => (props.isUser ? 4 : 0)}px;
-  border-start-color: ${(props) =>
-    props.isUser ? props.configColor : 'transparent'};
-  border-end-width: ${(props) => (!props.isUser ? 4 : 0)}px;
-  border-end-color: ${(props) =>
-    !props.isUser ? props.configColor : 'transparent'};
-`;
-
-const StyledText = styled.Text`
-  font-size: 14px;
-  overflow: hidden;
-`;
+import React, { FC } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MessageReplyProps {
   isUser: boolean;
   text: string;
+  /** The parent's author, when the reply carries it. */
+  userName?: string;
   color?: string;
   handleReplyMessage: () => void;
 }
 
+/**
+ * Quote of the parent at the top of a reply that was also sent to the
+ * channel (WhatsApp-style): accent bar, author, up to two lines of text.
+ * Tapping opens the parent's thread.
+ */
 export const MessageReply: FC<MessageReplyProps> = ({
   isUser,
   text,
-  color = '#0052CD',
+  userName,
+  color,
   handleReplyMessage,
 }) => {
+  const theme = useTheme();
+  const accent = color || theme.primary;
   return (
-    <StyledMessageReply
+    <TouchableOpacity
+      testID="message-reply-quote"
+      activeOpacity={0.7}
       onPress={handleReplyMessage}
-      isUser={isUser}
-      configColor={color}
+      style={[
+        styles.quote,
+        {
+          // A tint of the bubble's own ground, so it reads on both sides
+          // and in both themes.
+          backgroundColor: isUser ? 'rgba(0,0,0,0.12)' : theme.surfaceSecondary,
+        },
+      ]}
     >
-      <StyledText>{text}</StyledText>
-    </StyledMessageReply>
+      <View style={[styles.bar, { backgroundColor: accent }]} />
+      <View style={styles.body}>
+        {!!userName && (
+          <Text numberOfLines={1} style={[styles.author, { color: accent }]}>
+            {userName}
+          </Text>
+        )}
+        <Text
+          numberOfLines={2}
+          style={[styles.text, { color: isUser ? theme.messageTextUser : theme.text }]}
+        >
+          {text}
+        </Text>
+      </View>
+    </TouchableOpacity>
   );
 };
+
+const styles = StyleSheet.create({
+  quote: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  bar: {
+    width: 4,
+  },
+  body: {
+    flexShrink: 1,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+  },
+  author: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  text: {
+    fontSize: 14,
+  },
+});

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -1,5 +1,6 @@
 /** @format */
 
+import { composeName } from '../../../helpers/displayName';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
@@ -268,7 +269,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const confirmRemoveMember = (user: RoomMember) => {
     Alert.alert(
       t('modal.chatProfile.removeMember'),
-      `${user.firstName} ${user.lastName}`.trim(),
+      composeName(user.firstName, user.lastName),
       [
         { text: t('action.cancel'), style: 'cancel' },
         {
@@ -287,7 +288,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         id: user._id,
         firstName: user.firstName,
         lastName: user.lastName,
-        name: `${user.firstName} ${user.lastName}`,
+        name: composeName(user.firstName, user.lastName),
+        profileImage: user.profileImage,
         userJID: user?.xmppUsername,
         token: '',
         refreshToken: '',
@@ -488,7 +490,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const query = memberQuery.trim().toLowerCase();
   const visibleMembers = query
     ? members.filter((user) =>
-        `${user.firstName ?? ''} ${user.lastName ?? ''}`
+        composeName(user.firstName, user.lastName)
           .toLowerCase()
           .includes(query)
       )
@@ -648,7 +650,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                         disabled={!!config?.disableChatInfo?.disableMemberTap}
                       >
                         <ProfileImagePlaceholder
-                          name={`${user.firstName} ${user.lastName}`}
+                          name={composeName(user.firstName, user.lastName)}
+                          icon={appendFileToken(user.profileImage, fileToken) || null}
                           size={40}
                         />
                         <View style={styles.memberText}>

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { withFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import {
@@ -16,6 +16,7 @@ import { RootState } from '../../../roomStore';
 import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
 import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
 import {
+  ActivityIndicator,
   Alert,
   Text,
   View,
@@ -33,6 +34,13 @@ import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
 import { isLikelyAudio } from '../../../helpers/mimeToExtension';
+import {
+  downloadVideoToCache,
+  findCachedVideo,
+  isRemoteUrl,
+  isStreamingUnsupported,
+  markStreamingUnsupported,
+} from '../../../helpers/videoCache';
 import {
   getDisplayFileName,
   getUniqueFileName,
@@ -52,6 +60,15 @@ const GVIEW_PREVIEWABLE = new Set<string>([
   'text/csv',
   'application/rtf',
 ]);
+
+const isLocalFile = (url: string | undefined | null) =>
+  /^file:\/\//i.test(url || '');
+
+const fetchToCache = async (url: string, cachePath: string) =>
+  isLocalFile(url)
+    ? { status: 200, uri: url }
+    : FileSystem.downloadAsync(withFileToken(url), cachePath);
+
 const isGviewPreviewable = (mime: string | undefined | null) => {
   if (!mime) {return false;}
   return GVIEW_PREVIEWABLE.has(mime.toLowerCase().split(';')[0]!.trim());
@@ -62,52 +79,163 @@ const isGviewPreviewable = (mime: string | undefined | null) => {
 // the area with the surrounding letterbox painted as the view's own
 // (transparent → theme) background, NOT black. `textureView` so the play
 // overlay composites on top and nothing is clipped on Android.
-const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
+//
+// The clip is streamed when the server allows it. AVPlayer does not play
+// from a server that ignores byte-range requests (it answers 200 instead of
+// 206 and the player stops with "server is not correctly configured"), so
+// a failed stream falls back to a downloaded copy in the cache — which is
+// also what a reopened video plays from.
+const ModalVideo: React.FC<{ uri: string; mimetype?: string }> = ({
+  uri,
+  mimetype,
+}) => {
+  const theme = useTheme();
+  const remote = isRemoteUrl(uri);
+  // What the player is given; null until we know where to play from.
+  const [source, setSource] = useState<string | null>(remote ? null : uri);
   const [showPlay, setShowPlay] = useState(true);
+  // null = not downloading, otherwise 0..1 (0 while the size is unknown).
+  const [progress, setProgress] = useState<number | null>(null);
+  const [failed, setFailed] = useState(false);
+  const wantsPlay = useRef(false);
+  const downloadStarted = useRef(false);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
 
-  const player = useVideoPlayer(uri, (p) => {
+  const download = useCallback(() => {
+    if (downloadStarted.current) {return;}
+    downloadStarted.current = true;
+    setProgress(0);
+    downloadVideoToCache(uri, mimetype, (fraction) => {
+      if (mounted.current) {setProgress(fraction);}
+    })
+      .then((localUri) => {
+        if (!mounted.current) {return;}
+        setProgress(null);
+        setSource(localUri);
+      })
+      .catch((err) => {
+        console.warn('video download failed', err);
+        if (!mounted.current) {return;}
+        setProgress(null);
+        setFailed(true);
+      });
+  }, [mimetype, uri]);
+
+  useEffect(() => {
+    if (!remote) {return;}
+    let active = true;
+    findCachedVideo(uri, mimetype).then((cached) => {
+      if (!active) {return;}
+      if (cached) {
+        setSource(cached);
+      } else if (isStreamingUnsupported(uri)) {
+        download();
+      } else {
+        setSource(uri);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [download, mimetype, remote, uri]);
+
+  const player = useVideoPlayer(source, (p) => {
     p.muted = false;
+    // A player made for the downloaded copy picks up a play the user
+    // already asked for.
+    if (wantsPlay.current) {p.play();}
   });
 
   useEffect(() => {
-    const sub = player.addListener('playingChange', ({ isPlaying }) => {
+    const playing = player.addListener('playingChange', ({ isPlaying }) => {
       if (isPlaying) {setShowPlay(false);}
     });
-    return () => sub.remove();
-  }, [player]);
+    const status = player.addListener('statusChange', (event) => {
+      if (event.status !== 'error') {return;}
+      if (source === uri && remote) {
+        markStreamingUnsupported(uri);
+        download();
+      } else {
+        setFailed(true);
+      }
+    });
+    return () => {
+      playing.remove();
+      status.remove();
+    };
+  }, [download, player, remote, source, uri]);
 
   const handlePlay = () => {
+    wantsPlay.current = true;
     setShowPlay(false);
     player.play();
   };
 
+  if (failed) {
+    return (
+      <View style={styles.videoMessage}>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
+          This video can't be played
+        </Text>
+        <Text style={{ color: theme.textSecondary, textAlign: 'center' }}>
+          Tap the save icon above to download it.
+        </Text>
+      </View>
+    );
+  }
+
+  const loading = progress !== null || source === null;
+
   return (
     <View style={{ flex: 1, width: '100%' }}>
-      <VideoView
-        player={player}
-        style={{ flex: 1, backgroundColor: 'transparent' }}
-        contentFit="contain"
-        nativeControls
-        surfaceType="textureView"
-        // Fullscreen stays available by default on both expo-video lines:
-        // `allowsFullscreen` (SDK 54, default true) was replaced by
-        // `fullscreenOptions.enable` (SDK 57, default true). Passing neither
-        // keeps this file compiling against both.
-      />
-      {/* Play affordance shown immediately on open; tapping starts
-          playback and the native controls take over. */}
-      {showPlay && (
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onPress={handlePlay}
-          style={StyleSheet.absoluteFill}
-        >
-          <View style={styles.playOverlay}>
-            <View style={styles.playButton}>
-              <PlayIcon width={28} height={28} />
-            </View>
+      {/* No surface while the copy downloads: the failed stream would
+          show the system's "can't play" glyph under the spinner. */}
+      {!loading && (
+        <VideoView
+          player={player}
+          style={{ flex: 1, backgroundColor: 'transparent' }}
+          contentFit="contain"
+          nativeControls
+          surfaceType="textureView"
+          // Fullscreen stays available by default on both expo-video lines:
+          // `allowsFullscreen` (SDK 54, default true) was replaced by
+          // `fullscreenOptions.enable` (SDK 57, default true). Passing
+          // neither keeps this file compiling against both.
+        />
+      )}
+      {loading ? (
+        <View style={styles.playOverlay} pointerEvents="none">
+          <View style={styles.playButton}>
+            <ActivityIndicator color="#FFFFFF" />
           </View>
-        </TouchableOpacity>
+          {!!progress && (
+            <Text style={[styles.progress, { color: theme.textSecondary }]}>
+              {Math.round(progress * 100)}%
+            </Text>
+          )}
+        </View>
+      ) : (
+        showPlay && (
+          // Play affordance shown immediately on open; tapping starts
+          // playback and the native controls take over.
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={handlePlay}
+            style={StyleSheet.absoluteFill}
+          >
+            <View style={styles.playOverlay}>
+              <View style={styles.playButton}>
+                <PlayIcon width={28} height={28} />
+              </View>
+            </View>
+          </TouchableOpacity>
+        )
       )}
     </View>
   );
@@ -175,7 +303,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
     try {
       const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
+      const download = await fetchToCache(activeFile.fileURL, filePath);
 
       if (download.status === 200) {
         await getMediaLibrary()?.saveToLibraryAsync(download.uri);
@@ -222,7 +350,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   const saveFileToDownloads = async () => {
     try {
       const filePath = FileSystem.cacheDirectory + displayFileName;
-      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
+      const download = await fetchToCache(activeFile.fileURL, filePath);
 
       if (download.status !== 200) {
         Alert.alert('Error', 'Failed to save the file.');
@@ -332,7 +460,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           />
         );
       case activeFile.mimetype.startsWith('video/'):
-        return <ModalVideo uri={withFileToken(activeFile.fileURL)} />;
+        return (
+          <ModalVideo
+            // Remount per file: the player state belongs to one clip.
+            key={activeFile.fileURL}
+            uri={withFileToken(activeFile.fileURL)}
+            mimetype={activeFile.mimetype}
+          />
+        );
       case activeFile.mimetype.includes('application/octet-stream'):
         return (
           <View
@@ -394,13 +529,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             />
           </View>
         );
-      case activeFile.mimetype === 'application/pdf':
+      case activeFile.mimetype === 'application/pdf' &&
+        !(Platform.OS === 'android' && isLocalFile(activeFile.fileURL)):
         return <PdfViewer pdfUrl={withFileToken(activeFile.fileURL)} />;
       default: {
         // Office docs (.docx / .xlsx / .pptx / .doc / .xls / .ppt /
         // .txt / .csv / .rtf) → render inline via Google's gview embed
         // — fixes the "blank preview" complaint for docs (bug #9).
-        if (isGviewPreviewable(activeFile.mimetype)) {
+        if (isGviewPreviewable(activeFile.mimetype) && !isLocalFile(activeFile.fileURL)) {
           return (
             <DocumentViewer
               url={activeFile.fileURL}
@@ -486,6 +622,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  progress: {
+    marginTop: 10,
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  videoMessage: {
+    alignItems: 'center',
+    gap: 8,
+    padding: 20,
+  },
 });
 
 export default FilePreviewModal;

package/src/components/Modals/FilePreviewModal/PdfView.tsx

@@ -25,6 +25,10 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     let cancelled = false;
     const run = async () => {
       try {
+        if (/^file:\/\//i.test(pdfUrl)) {
+          setLocalUri(pdfUrl);
+          return;
+        }
         const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
         const result = await FileSystem.downloadAsync(withFileToken(pdfUrl), target);
         if (cancelled) {return;}