@ethora/chat-component-rn 26.7.9 → 26.8.1

package/src/components/styled/NewMessageLabel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
+import { useT } from '../../i18n/useT';
 
 const Container = styled.View`
   flex-direction: row;
@@ -39,11 +40,12 @@ interface NewMessageLabelProps {
 }
 
 const NewMessageLabel: React.FC<NewMessageLabelProps> = () => {
+  const t = useT();
   return (
     <Container>
       <Line />
       <StyledLabel>
-        <StyledLabelText>New messages</StyledLabelText>
+        <StyledLabelText>{t('message.newMessages')}</StyledLabelText>
       </StyledLabel>
       <Line />
     </Container>

package/src/components/styled/SendInput.tsx

@@ -10,16 +10,14 @@ import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 import { SendIcon, AttachIcon, RecordIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Linking } from 'react-native';
-import AttachSheet, { PickedMedia } from '../Modals/AttachSheet/AttachSheet';
+import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
-import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
-import * as FileSystem from 'expo-file-system/legacy';
 // expo-audio replaces the discontinued expo-av: `useAudioRecorder` owns a
 // single reusable recorder for this input's lifetime (prepare → record →
 // stop → prepare again), and the module-level helpers cover permissions
@@ -171,16 +169,16 @@ const SendInput: React.FC<SendInputProps> = ({
   // rolled check/request flow.
 
   const promptOpenSettings = (message: string) => {
-    Alert.alert('Permission required', message, [
-      { text: 'Cancel', style: 'cancel' },
-      { text: 'Open Settings', onPress: () => Linking.openSettings() },
+    Alert.alert(t('permission.requiredTitle'), message, [
+      { text: t('action.cancel'), style: 'cancel' },
+      { text: t('action.openSettings'), onPress: () => Linking.openSettings() },
     ]);
   };
 
   const handleCameraSelection = async () => {
     const perm = await ImagePicker.requestCameraPermissionsAsync();
     if (!perm.granted) {
-      promptOpenSettings('Camera permission is needed to take photos and videos.');
+      promptOpenSettings(t('permission.camera'));
       return;
     }
 
@@ -220,7 +218,7 @@ const SendInput: React.FC<SendInputProps> = ({
   const handleGallerySelection = async () => {
     const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!perm.granted) {
-      promptOpenSettings('Gallery permission is needed to select photos and videos.');
+      promptOpenSettings(t('permission.gallery'));
       return;
     }
 
@@ -261,59 +259,22 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
-  // A tap on a thumbnail in the attach sheet's recents strip. The sheet
-  // already resolved the asset to a real on-disk uri (iOS `ph://` ids are
-  // not uploadable); here we apply the same treatment the full-blown
-  // pickers get — HEIC→JPEG for images, and a size probe so the 50 MB cap
-  // is enforced before anything hits the network.
-  const handleRecentMediaSelection = async (media: PickedMedia) => {
-    try {
-      let size: number | undefined;
-      try {
-        const info = await FileSystem.getInfoAsync(media.uri);
-        if (info.exists && typeof (info as any).size === 'number') {
-          size = (info as any).size;
-        }
-      } catch {
-        // Size is a nice-to-have; the backend still rejects oversized bodies.
-      }
-
-      if (media.isVideo) {
-        handleFileSelect([
-          {
-            uri: media.uri,
-            type: media.mimeType || 'video/mp4',
-            name: media.name,
-            size,
-          },
-        ]);
-        return;
-      }
-
-      const normalized = await normalizeImageAsset({
-        uri: media.uri,
-        mimeType: media.mimeType,
-        fileName: media.name,
-      } as ImagePicker.ImagePickerAsset);
-      handleFileSelect([
-        {
-          uri: normalized.uri,
-          type: normalized.mime,
-          name: normalized.name,
-          size,
-        },
-      ]);
-    } catch (error) {
-      console.error('Recent media error:', error);
-    }
-  };
-
   const handleFileSelection = async () => {
     // Drop overlapping invocations — a second getDocumentAsync while the
     // first is still presented throws PickingInProgressException on iOS.
     if (pickingDocRef.current) {return;}
     pickingDocRef.current = true;
     try {
+      // Let the attach-sheet's modal finish its NATIVE dismissal before we
+      // present the picker. The sheet fires this handler right after its
+      // slide-out animation, but the underlying RN Modal view-controller
+      // dismissal is async — presenting the document picker over a still-
+      // dismissing modal makes iOS tear it down without a cancel callback,
+      // which strands expo-document-picker's pickingContext and makes every
+      // subsequent open throw "Different document picking in progress".
+      if (Platform.OS === 'ios') {
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      }
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
         multiple: false,
@@ -336,39 +297,8 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
-  // Photo-library access is requested HERE, not inside the sheet: iOS
-  // cannot present the permission alert while an RN <Modal> owns the
-  // screen (the same UIKit limitation that used to swallow the pickers),
-  // so asking from inside resolved to a silent "denied" and the recents
-  // strip stayed empty forever. Asking on the paperclip tap puts the
-  // system alert over the plain chat screen, where it can actually show.
-  // Only the first tap ever waits on it — afterwards the status is
-  // already determined and `getPermissionsAsync` returns immediately.
-  const ensureLibraryPermission = async () => {
-    const MediaLibrary = getMediaLibrary();
-    if (!MediaLibrary?.getPermissionsAsync) {return;}
-    try {
-      const perm = await MediaLibrary.getPermissionsAsync();
-      if (perm?.granted || perm?.canAskAgain === false) {return;}
-      await MediaLibrary.requestPermissionsAsync();
-    } catch (err) {
-      // Optional peer / unsupported platform: the sheet just shows the
-      // camera tile and the full-library route.
-      console.warn('Media library permission check failed:', err);
-    }
-  };
-
-  // Only the very first tap of a session goes through the permission
-  // check; afterwards the sheet opens with zero added latency.
-  const libraryPermissionCheckedRef = useRef(false);
-
   const handleAttachPress = () => {
-    if (libraryPermissionCheckedRef.current) {
-      setShowMediaMenu(true);
-      return;
-    }
-    libraryPermissionCheckedRef.current = true;
-    ensureLibraryPermission().finally(() => setShowMediaMenu(true));
+    setShowMediaMenu(true);
   };
 
   // ─── Voice recording ──────────────────────────────────────────────
@@ -405,9 +335,7 @@ const SendInput: React.FC<SendInputProps> = ({
     try {
       const perm = await requestRecordingPermissionsAsync();
       if (!perm.granted) {
-        promptOpenSettings(
-          'Microphone permission is needed to record voice messages.'
-        );
+        promptOpenSettings(t('permission.microphone'));
         return;
       }
       // `allowsRecording` is not just an iOS session flag: expo-audio's
@@ -772,7 +700,6 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
-          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -28,15 +28,9 @@ export const ChatContainerHeader = styled.View`
   background-color: #ffffff;
   align-items: center;
   justify-content: space-between;
-  /* Rounded bottom corners + a soft drop shadow instead of the hairline
-   * rule, so the header reads as a card over the conversation. */
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  shadow-color: #101828;
-  shadow-offset: 0px 4px;
-  shadow-opacity: 0.06;
-  shadow-radius: 12px;
-  elevation: 4;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+  border-style: solid;
   z-index: 1000;
 `;
 

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

@@ -13,21 +13,14 @@ const colors = {
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  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;
+  padding: 8px 16px 4px 16px;
+  background-color: ${colors.white};
   z-index: 100;
   width: 100%;
   bottom: 0;
   left: 0;
-  /* 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. */
+  border-top-width: 1px;
+  border-top-color: #e5e7eb;
 `;
 
 export const MediaContainer = styled.View`

package/src/components/styled/UnsupportedType.tsx

@@ -18,7 +18,6 @@ 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;
@@ -48,15 +47,6 @@ 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);
 
@@ -111,9 +101,9 @@ const FileDownload: React.FC<FileDownloadProps> = ({
   };
 
   const extensionLabel = (() => {
-    const dotIndex = displayName.lastIndexOf('.');
-    if (dotIndex !== -1 && dotIndex < displayName.length - 1) {
-      return displayName.slice(dotIndex + 1).toUpperCase();
+    const dotIndex = fileName.lastIndexOf('.');
+    if (dotIndex !== -1 && dotIndex < fileName.length - 1) {
+      return fileName.slice(dotIndex + 1).toUpperCase();
     }
     return getExtensionForMime(mimetype).replace('.', '').toUpperCase();
   })();
@@ -133,7 +123,7 @@ const FileDownload: React.FC<FileDownloadProps> = ({
           isUser={isUser}
           colorIsUser={config?.colors?.primary}
           colorUsers={config?.colors?.secondary}
-        >{formatFileName(displayName, 20)}</FileName>
+        >{formatFileName(fileName, 20)}</FileName>
         {(pending || size) && (
           <FileSizeContainer>
             {pending ? (

package/src/components/styled/VideoMessage.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import {
-  isSecureFileUrl,
-  requestFileTokenRecovery,
-} from '../../helpers/secureFileUrl';
-import { Image, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
 import { useDispatch } from 'react-redux';
 import {
   setActiveFile,
@@ -19,148 +16,74 @@ 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 [posterFailed, setPosterFailed] = useState(false);
+  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 handleOpen = () => {
-    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
+    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
-  if (previewURL && !posterFailed) {
-    return (
-      <PosterVideo
-        previewURL={previewURL}
-        onOpen={handleOpen}
-        onPosterError={() => {
-          if (isSecureFileUrl(previewURL)) {
-            requestFileTokenRecovery();
-          }
-          setPosterFailed(true);
-        }}
+  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"
       />
-    );
-  }
-
-  return <PlaceholderVideo onOpen={handleOpen} />;
+      <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>
+  );
 };
 
 export default CustomMessageVideo;