@ethora/chat-component-rn 26.8.1 → 26.8.2

package/src/components/styled/SendInput.tsx

@@ -10,14 +10,16 @@ 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 from '../Modals/AttachSheet/AttachSheet';
+import AttachSheet, { PickedMedia } 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
@@ -259,22 +261,59 @@ 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,
@@ -297,8 +336,39 @@ 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 = () => {
-    setShowMediaMenu(true);
+    if (libraryPermissionCheckedRef.current) {
+      setShowMediaMenu(true);
+      return;
+    }
+    libraryPermissionCheckedRef.current = true;
+    ensureLibraryPermission().finally(() => setShowMediaMenu(true));
   };
 
   // ─── Voice recording ──────────────────────────────────────────────
@@ -700,6 +770,7 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
+          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -28,9 +28,15 @@ export const ChatContainerHeader = styled.View`
   background-color: #ffffff;
   align-items: center;
   justify-content: space-between;
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e7eb;
-  border-style: solid;
+  /* 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;
   z-index: 1000;
 `;
 

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

@@ -13,14 +13,21 @@ const colors = {
 
 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`

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;