@ethora/chat-component-rn 26.5.7 → 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,19 +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';
 
-export const FullScreenVideo = styled.View`
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-`;
+// 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);
+
+  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;
@@ -39,7 +114,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     (state: RootState) => state.chatSettingStore
   );
 
-  if (!activeFile) {return;}
+  if (!activeFile) {return null;}
 
   const requestStoragePermission = async () => {
     try {
@@ -143,30 +218,47 @@ 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} />;
@@ -175,6 +267,20 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           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={{
@@ -198,7 +304,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       }
     }
-  }, [activeFile]);
+  })();
 
   return (
     <ModalContainerFullScreen>
@@ -217,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}
@@ -230,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;
@@ -53,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
@@ -61,64 +102,35 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
       onRequestClose={handleCloseModal}
     >
       <ModalBackground>
-        <ModalContainer
-          style={
-            compact
-              ? {
-                  flex: 0,
-                  width: '85%',
-                  maxWidth: 360,
-                  height: 'auto',
-                  padding: 24,
-                  borderRadius: 16,
-                  gap: 16,
-                }
-              : { 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 && !config?.disableProfilesInteractions && (
+          {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;
 `;

package/src/components/styled/MediaFilePreview.tsx

@@ -7,13 +7,56 @@ import { FileIcon } from '../../assets/icons';
 import { RemoveButton, RemoveButtonText } from './StyledComponents';
 import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
-import { Video, ResizeMode } from 'expo-av';
+import { useVideoPlayer, VideoView } from 'expo-video';
 
 interface MediaFilePreviewProps {
   filePreviews: MediaFile[];
   handleRemoveImage: (index: number) => void;
 }
 
+const VideoThumb: FC<{ uri: string; onPress: () => void }> = ({
+  uri,
+  onPress,
+}) => {
+  const player = useVideoPlayer(uri, (p) => {
+    p.muted = true;
+  });
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={styles.videoThumb}
+    >
+      <VideoView
+        player={player}
+        style={StyleSheet.absoluteFill}
+        contentFit="cover"
+        nativeControls={false}
+        surfaceType="textureView"
+        pointerEvents="none"
+      />
+      <View style={styles.playOverlay}>
+        <Text style={styles.playIcon}>▶</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const FullscreenPreviewVideo: FC<{ uri: string }> = ({ uri }) => {
+  const player = useVideoPlayer(uri, (p) => {
+    p.play();
+  });
+  return (
+    <VideoView
+      player={player}
+      style={styles.fullVideo}
+      contentFit="contain"
+      nativeControls
+      surfaceType="textureView"
+    />
+  );
+};
+
 export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
   filePreviews,
   handleRemoveImage,
@@ -30,22 +73,7 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
             {isImage ? (
               <MediaImage source={{ uri: file.uri }} />
             ) : isVideo ? (
-              <TouchableOpacity
-                activeOpacity={0.8}
-                onPress={() => setPreviewUri(file.uri)}
-                style={styles.videoThumb}
-              >
-                <Video
-                  source={{ uri: file.uri }}
-                  style={StyleSheet.absoluteFill}
-                  resizeMode={ResizeMode.COVER}
-                  shouldPlay={false}
-                  isMuted
-                />
-                <View style={styles.playOverlay}>
-                  <Text style={styles.playIcon}>▶</Text>
-                </View>
-              </TouchableOpacity>
+              <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
             ) : (
               <View style={{ width: 70, height: 70, borderRadius: 8 }}>
                 <FileIcon width={70} height={70} />
@@ -66,15 +94,7 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
           >
             <Text style={styles.closeText}>✕</Text>
           </TouchableOpacity>
-          {previewUri && (
-            <Video
-              source={{ uri: previewUri }}
-              style={styles.fullVideo}
-              resizeMode={ResizeMode.CONTAIN}
-              useNativeControls
-              shouldPlay
-            />
-          )}
+          {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
         </SafeAreaView>
       </Modal>
     </MediaContainer>