@ethora/chat-component-rn 26.5.5 → 26.5.10

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components/native';
 import {
   CenterContainer,
@@ -11,18 +11,94 @@ import Button from '../../styled/Button';
 import { RootState } from '../../../roomStore';
 import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
 import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
-import { Alert, Text, View, Platform } from 'react-native';
-import { Video, ResizeMode } from 'expo-av';
+import {
+  Alert,
+  Text,
+  View,
+  Platform,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
+import { PlayIcon } from '../../../assets/icons';
 import * as FileSystem from 'expo-file-system/legacy';
 import * as MediaLibrary from 'expo-media-library';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
+import DocumentViewer from './DocumentViewer';
+import AudioMessage from '../../styled/AudioMessage';
+import { ensureFilenameHasExtension } from '../../../helpers/mimeToExtension';
+
+// MIME types Google's gview embed renders reliably. Everything else
+// falls through to the info-card so the user can still download.
+const GVIEW_PREVIEWABLE = new Set<string>([
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'text/plain',
+  'text/csv',
+  'application/rtf',
+]);
+const isGviewPreviewable = (mime: string | undefined | null) => {
+  if (!mime) {return false;}
+  return GVIEW_PREVIEWABLE.has(mime.toLowerCase().split(';')[0]!.trim());
+};
+
+// Full-screen video preview on expo-video (expo-av <Video> is deprecated
+// and rendered blank on Android). `contentFit: contain` fits the clip to
+// 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 }) => {
+  const [showPlay, setShowPlay] = useState(true);
 
-export const FullScreenVideo = styled.View`
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-`;
+  const player = useVideoPlayer(uri, (p) => {
+    p.muted = false;
+  });
+
+  useEffect(() => {
+    const sub = player.addListener('playingChange', ({ isPlaying }) => {
+      if (isPlaying) {setShowPlay(false);}
+    });
+    return () => sub.remove();
+  }, [player]);
+
+  const handlePlay = () => {
+    setShowPlay(false);
+    player.play();
+  };
+
+  return (
+    <View style={{ flex: 1, width: '100%' }}>
+      <VideoView
+        player={player}
+        style={{ flex: 1, backgroundColor: 'transparent' }}
+        contentFit="contain"
+        nativeControls
+        surfaceType="textureView"
+        allowsFullscreen
+      />
+      {/* Play affordance shown immediately on open; tapping starts
+          playback and the native controls take over. */}
+      {showPlay && (
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={handlePlay}
+          style={StyleSheet.absoluteFillObject}
+        >
+          <View style={styles.playOverlay}>
+            <View style={styles.playButton}>
+              <PlayIcon width={28} height={28} />
+            </View>
+          </View>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 interface FilePreviewModalProps {
   handleCloseModal: any;
@@ -38,7 +114,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     (state: RootState) => state.chatSettingStore
   );
 
-  if (!activeFile) {return;}
+  if (!activeFile) {return null;}
 
   const requestStoragePermission = async () => {
     try {
@@ -61,10 +137,10 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      let fileName = activeFile.fileName || `media_${Date.now()}`;
-      if (!fileName.includes('.')) {
-        fileName += activeFile.mimetype.startsWith('image/') ? '.jpg' : '.mp4';
-      }
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
 
       const filePath = FileSystem.cacheDirectory + fileName;
       const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
@@ -87,7 +163,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   const saveFileToDownloads = async () => {
     try {
-      const fileName = activeFile.fileName || `file_${Date.now()}`;
+      // Always include a valid extension on the cache filename. expo-media-
+      // library's createAssetAsync inspects the URI's extension and throws
+      // "Could not get the file's extension" when missing — see bug #9 in
+      // sdk-bug-tracker.md.
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
       const filePath = FileSystem.cacheDirectory + fileName;
       const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
 
@@ -135,52 +218,93 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     handleCloseModal?.();
   };
 
-  const getMediaComponent = useMemo(() => {
+  // NOTE: plain computed value, NOT useMemo. It sits AFTER the
+  // `if (!activeFile) return` guard above, so as a hook it would run
+  // conditionally (skipped when activeFile is null) — changing the hook
+  // count between renders and throwing "rendered more hooks than during
+  // the previous render", which crashed the modal the instant you tapped
+  // a video/image to open it. Recomputing this on each render is cheap.
+  const getMediaComponent: React.ReactNode = (() => {
     switch (true) {
       case activeFile.mimetype.startsWith('image/'):
         return (
           <FullScreenImage
-            src={
-              activeFile.fileURL ||
-              'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
-            }
-            alt={activeFile.fileName}
+            source={{
+              uri:
+                activeFile.fileURL ||
+                'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg',
+            }}
+            resizeMode="contain"
+            accessibilityLabel={activeFile.fileName}
           />
         );
       case activeFile.mimetype.startsWith('video/'):
+        return <ModalVideo uri={activeFile.fileURL} />;
+      case activeFile.mimetype.startsWith('audio/'):
         return (
-          <Video
+          <View
             style={{
               width: '100%',
-              height: '100%',
+              padding: 20,
+              gap: 12,
+              backgroundColor: '#FFF8ED',
+              borderRadius: 16,
             }}
-            source={{ uri: activeFile.fileURL }}
-            useNativeControls
-            resizeMode={ResizeMode.CONTAIN}
-            shouldPlay={false}
-          />
+          >
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              {ensureFilenameHasExtension(
+                activeFile.fileName,
+                activeFile.mimetype
+              )}
+            </Text>
+            <AudioMessage src={activeFile.fileURL} />
+          </View>
         );
       case activeFile.mimetype === 'application/pdf':
         return <PdfViewer pdfUrl={activeFile.fileURL} />;
-      default:
+      default: {
+        const displayName = ensureFilenameHasExtension(
+          activeFile.fileName,
+          activeFile.mimetype
+        );
+        // 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)) {
+          return (
+            <DocumentViewer
+              url={activeFile.fileURL}
+              fileName={displayName}
+            />
+          );
+        }
+        // True last-resort fallback for genuinely unrenderable types
+        // (binary blobs, exotic MIMEs). Friendly info card with the
+        // filename so the user can still download.
         return (
           <View
             style={{
               backgroundColor: '#FFF8ED',
               borderRadius: 16,
-              display: 'flex',
-              padding: 16,
+              padding: 20,
+              gap: 8,
             }}
           >
-            <Text>
-              Unable to open the uploaded document. The file format is not
-              supported by the system. Please upload a file in a compatible
-              format. You still can download this file.
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              {displayName}
+            </Text>
+            <Text style={{ color: '#666' }}>
+              {activeFile.mimetype || 'unknown type'}
+            </Text>
+            <Text style={{ marginTop: 8 }}>
+              This file format can't be previewed inline. Tap the save icon
+              above to download it.
             </Text>
           </View>
         );
+      }
     }
-  }, [activeFile]);
+  })();
 
   return (
     <ModalContainerFullScreen>
@@ -199,10 +323,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       <CenterContainer
         style={{
           display: 'flex',
-          height: '100%',
+          flex: 1,
           justifyContent: 'center',
-          overflow: 'hidden',
+          // NOTE: do NOT set overflow:'hidden' here — on Android it clips
+          // hardware-accelerated children (expo-av Video TextureView and
+          // react-native-webview) to nothing, so video/PDF/doc previews
+          // render blank while plain <Image> survives.
+          overflow: 'visible',
           padding: 16,
+          paddingBottom: 48,
         }}
       >
         {getMediaComponent}
@@ -212,4 +341,20 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  playOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
 export default FilePreviewModal;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import * as FileSystem from 'expo-file-system/legacy';
 
@@ -10,13 +10,20 @@ interface PdfViewerProps {
 const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
   const [localUri, setLocalUri] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // Android's WebView has NO native PDF renderer, so a file:// (or direct)
+  // PDF loads blank. Route it through Google's gview embed using the
+  // (public) remote URL — same approach as DocumentViewer for office docs.
+  // iOS WKWebView renders PDFs natively, so we download + show the file.
+  const isAndroid = Platform.OS === 'android';
 
   useEffect(() => {
+    if (isAndroid) {
+      return;
+    }
     let cancelled = false;
     const run = async () => {
       try {
-        const target =
-          FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
+        const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
         const result = await FileSystem.downloadAsync(pdfUrl, target);
         if (cancelled) {return;}
         setLocalUri(result.uri);
@@ -30,7 +37,28 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     return () => {
       cancelled = true;
     };
-  }, [pdfUrl]);
+  }, [pdfUrl, isAndroid]);
+
+  if (isAndroid) {
+    const gviewUrl = `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(
+      pdfUrl
+    )}`;
+    return (
+      <View style={styles.container}>
+        <WebView
+          source={{ uri: gviewUrl }}
+          style={styles.webview}
+          originWhitelist={['*']}
+          startInLoadingState
+          renderLoading={() => (
+            <View style={styles.center}>
+              <ActivityIndicator size="large" />
+            </View>
+          )}
+        />
+      </View>
+    );
+  }
 
   if (error) {
     return (

package/src/components/Modals/Modal/Modal.tsx

@@ -39,7 +39,10 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
   };
   return (
     modal && (
-      <ModalBackground id="modal-background" style={{ position: 'absolute' }}>
+      <ModalBackground
+        id="modal-background"
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+      >
         {renderModalContent()}
         {children}
       </ModalBackground>

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -9,7 +9,7 @@ import {
 } from '../styledModalComponents';
 import { TextareaInput } from '../../styled/StyledInputComponents/StyledInputComponents';
 import Button from '../../styled/Button';
-import { Modal, Text, TextInput } from 'react-native';
+import { Modal, Text, TextInput, View, StyleSheet } from 'react-native';
 
 interface ModalWrapperProps {
   iconTitle?: any;
@@ -22,6 +22,12 @@ interface ModalWrapperProps {
   setTextarea?: (value: string) => void;
   handleCloseModal: () => void;
   handleClick: () => void;
+  /**
+   * When true, render a small centered dialog instead of the default
+   * full-screen container. Used for confirm-style modals (Delete, Leave
+   * room) where edge-to-edge feels too heavy.
+   */
+  compact?: boolean;
 }
 
 export const ModalWrapper: FC<ModalWrapperProps> = ({
@@ -35,6 +41,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   setTextarea,
   handleCloseModal,
   handleClick,
+  compact = false,
 }) => {
   const textareaRef = useRef<TextInput>(null);
 
@@ -46,6 +53,47 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   //   }
   // };
 
+  const inner = (
+    <>
+      <CloseButton onPress={handleCloseModal}>
+        <Text style={{ fontSize: 24 }}>&times;</Text>
+      </CloseButton>
+      {IconTitle ? <IconTitle /> : <ModalTitle>{title}</ModalTitle>}
+      {description && <ModalDescription>{description}</ModalDescription>}
+      {isTextarea && (
+        <GroupContainer
+          style={{ flexDirection: 'column', position: 'relative' }}
+        />
+      )}
+      {!buttonText && <GroupContainer />}
+      <GroupContainer>
+        <Button
+          onPress={handleCloseModal}
+          text={'Cancel'}
+          style={{ width: '100%' }}
+          unstyled
+          variant="outlined"
+        />
+        {buttonText && (
+          <Button
+            onPress={handleClick}
+            text={buttonText}
+            // White label on the filled (e.g. red Delete) button. Button
+            // applies an inline `color: color || 'black'` that overrides
+            // the filled-variant white, so pass it explicitly.
+            color="#FFFFFF"
+            style={{
+              width: '100%',
+              backgroundColor: backgroundColorButton,
+            }}
+            unstyled
+            variant="filled"
+          />
+        )}
+      </GroupContainer>
+    </>
+  );
+
   return (
     <Modal
       transparent
@@ -54,50 +102,35 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
       onRequestClose={handleCloseModal}
     >
       <ModalBackground>
-        <ModalContainer style={{ maxWidth: 640 }}>
-          <CloseButton onPress={handleCloseModal}>
-            <Text style={{ fontSize: 24 }}>&times;</Text>
-          </CloseButton>
-          {IconTitle ? <IconTitle /> : <ModalTitle>{title}</ModalTitle>}
-          {description && <ModalDescription>{description}</ModalDescription>}
-          {isTextarea && (
-            <GroupContainer
-              style={{ flexDirection: 'column', position: 'relative' }}
-            >
-              {/* <TextareaInput
-              ref={textareaRef}
-              onInput={handleInput}
-              id="additionalDetails"
-              value={textarea}
-              onChangeText={(text) => setTextarea(text)}
-              placeholder="Additional Details"
-            /> */}
-            </GroupContainer>
-          )}
-          {!buttonText && <GroupContainer />}
-          <GroupContainer>
-            <Button
-              onPress={handleCloseModal}
-              text={'Cancel'}
-              style={{ width: '100%' }}
-              unstyled
-              variant="outlined"
-            />
-            {buttonText && (
-              <Button
-                onPress={handleClick}
-                text={buttonText}
-                style={{
-                  width: '100%',
-                  backgroundColor: backgroundColorButton,
-                }}
-                unstyled
-                variant="filled"
-              />
-            )}
-          </GroupContainer>
-        </ModalContainer>
+        {compact ? (
+          // Dedicated small centered dialog. The base ModalContainer is
+          // flex:1 / width:100% / height:100% (full-screen); style-merge
+          // overrides proved unreliable, so confirm-style modals render in
+          // their own bounded View instead — never full-screen (#14).
+          // (Upstream also shrank this modal; this keeps that intent while
+          // adding the white filled-button label via `inner` below.)
+          <View style={styles.compactDialog}>{inner}</View>
+        ) : (
+          <ModalContainer style={{ maxWidth: 640 }}>{inner}</ModalContainer>
+        )}
       </ModalBackground>
     </Modal>
   );
 };
+
+const styles = StyleSheet.create({
+  compactDialog: {
+    width: '85%',
+    maxWidth: 360,
+    alignSelf: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    gap: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+});

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -285,22 +285,26 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </LabelData>
           </BorderedContainer>
 
-          {selectedUser && (
+          {selectedUser && !config?.disableMemberProfileActions && (
             <>
-              <ActionButton
-                StartIcon={<ChatIcon />}
-                onPress={handlePrivateMessage}
-                variant="filled"
-              >
-                <Text style={{ color: '#ffffff' }}>Message</Text>
-              </ActionButton>
-              <ActionButton
-                onPress={() => {}}
-                // onPress={() => handleCopyClick(selectedUser.id)}
-                variant="filled"
-              >
-                <Text style={{ color: '#ffffff' }}>Copy User Id</Text>
-              </ActionButton>
+              {!config?.hideMemberSendMessageAction && (
+                <ActionButton
+                  StartIcon={<ChatIcon />}
+                  onPress={handlePrivateMessage}
+                  variant="filled"
+                >
+                  <Text style={{ color: '#ffffff' }}>Message</Text>
+                </ActionButton>
+              )}
+              {!config?.hideMemberCopyIdAction && (
+                <ActionButton
+                  onPress={() => {}}
+                  // onPress={() => handleCopyClick(selectedUser.id)}
+                  variant="filled"
+                >
+                  <Text style={{ color: '#ffffff' }}>Copy User Id</Text>
+                </ActionButton>
+              )}
             </>
           )}
 

package/src/components/Modals/styledModalComponents.tsx

@@ -21,17 +21,12 @@ export const CloseButton = styled.TouchableOpacity`
   font-size: 20px;
   cursor: pointer;
   color: #888;
-
-  &:hover {
-    color: #555;
-    background-color: #dddddd;
-  }
 `;
 
 export const ModalContainer = styled.View`
-  flex: 1;
-  width: 100%;
-  height: 100%;
+  // flex: 1;
+  // width: 100%;
+  // height: 100%;
   background: white;
   padding: 32px 64px;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
@@ -57,7 +52,7 @@ export const ModalDescription = styled.Text`
 
 export const GroupContainer = styled.View`
   display: flex;
-  gap: 32px;
+  gap: 16px;
   width: 100%;
   padding: 0;
 `;