@ethora/chat-component-rn 26.6.10 → 26.6.12

package/src/components/styled/VideoMessage.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { useVideoPlayer, VideoView } from 'expo-video';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import {
   setActiveFile,
@@ -18,72 +17,134 @@ interface CustomMessageVideoProps {
   fileName: 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,
   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(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={() => 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;
@@ -99,7 +160,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/hooks/useSendMessage.tsx

@@ -9,7 +9,7 @@ import {
   clearMessageFailure,
   markMessageFailed,
 } from '../roomStore/roomHeapSlice';
-import { uploadFileViaFetch } from '../networking/api-requests/auth.api';
+import { uploadFileMultipart } from '../networking/api-requests/auth.api';
 import { enqueueOutboundSend } from '../networking/outboundQueue';
 import { RootState, store } from '../roomStore';
 import { getGlobalXmppClient } from '../utils/clientRegistry';
@@ -479,7 +479,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         const fd = new FormData();
         fd.append('files', fileBlob as any);
         try {
-          return await uploadFileViaFetch(fd);
+          return await uploadFileMultipart(fd);
         } catch (err: any) {
           if (err?.response?.status === 500) {
             console.warn(
@@ -488,7 +488,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
             );
             const fd2 = new FormData();
             fd2.append('file', fileBlob as any);
-            return await uploadFileViaFetch(fd2);
+            return await uploadFileMultipart(fd2);
           }
           throw err;
         }

package/src/networking/api-requests/auth.api.ts

@@ -144,55 +144,90 @@ export function uploadFile(formData: FormData) {
   });
 }
 
-export async function uploadFileViaFetch(formData: FormData): Promise<{ data: any }> {
+const UPLOAD_PATH = '/files/';
+
+/**
+ * Multipart upload of a picked file, sent over `XMLHttpRequest`.
+ *
+ * The transport matters here, and both obvious alternatives are wrong:
+ *
+ *   - `fetch`. Expo SDK 54 shipped a WinterCG-compliant fetch and SDK 57
+ *     installs it as the GLOBAL fetch. It accepts only `Blob` / `File` /
+ *     string form parts, so React Native's own `{ uri, type, name }` part
+ *     — which is exactly what an image/document picker hands us — is
+ *     rejected with "Unsupported FormDataPart implementation", surfacing
+ *     to the caller as ERR_NETWORK. A host can set
+ *     `EXPO_PUBLIC_USE_RN_FETCH=1`, but that opts their whole app out of
+ *     Expo's fetch just to satisfy this SDK; not a cost we get to impose
+ *     on a consumer.
+ *   - axios. It forces its own `Content-Type: multipart/form-data`
+ *     WITHOUT a boundary, so the server mis-parses one file as many and
+ *     answers HTTP 413 TOO_MANY_FILES (bug #10 — this is why the upload
+ *     was moved off axios in the first place).
+ *
+ * `XMLHttpRequest` avoids both. Expo replaces `fetch`, not `XHR`, so the
+ * request still goes through React Native's native networking module,
+ * which understands the `{ uri, type, name }` part, streams the file
+ * straight from disk (a 50MB video never lands in JS memory) and writes
+ * its own `Content-Type` with a valid boundary — which is precisely why
+ * we must NOT set that header ourselves below.
+ */
+export function uploadFileMultipart(formData: FormData): Promise<{ data: any }> {
   const token = store.getState().chatSettingStore?.user?.token ?? '';
   const baseUrl = getCurrentBaseURL();
-  const url = `${baseUrl.replace(/\/$/, '')}/files/`;
+  const url = `${baseUrl.replace(/\/$/, '')}${UPLOAD_PATH}`;
 
-  pushLog('http', `→ POST ${url} (fetch)`, {
+  pushLog('http', `→ POST ${url} (xhr)`, {
     headers: { Authorization: token ? token.slice(0, 16) + '…' : '[empty]', Accept: '*/*' },
   });
 
-  let res: Response;
-  try {
-    res = await fetch(url, {
-      method: 'POST',
-      headers: {
-        Authorization: token,
-        Accept: '*/*',
-      },
-      body: formData as any,
-    });
-  } catch (e: any) {
-    pushLog('http', `← ERR fetch /files/`, {
-      name: e?.name,
-      message: e?.message,
-      stack: e?.stack,
-    });
-    const err: any = new Error(e?.message || 'Network request failed');
-    err.code = 'ERR_NETWORK';
-    err.cause = e;
-    err.config = { url: '/files/' };
-    throw err;
-  }
-
-  if (!res.ok) {
-    let body: any = null;
-    try {
-      body = await res.json();
-    } catch {
-      try { body = await res.text(); } catch { body = null; }
-    }
-    pushLog('http', `← ${res.status} POST /files/ (fetch)`, body);
-    const err: any = new Error(`Upload failed: ${res.status}`);
-    err.response = { status: res.status, statusText: res.statusText, data: body };
-    err.config = { url: '/files/' };
-    throw err;
-  }
-
-  const data = await res.json();
-  pushLog('http', `← ${res.status} POST /files/ (fetch)`, {
-    resultsCount: Array.isArray(data?.results) ? data.results.length : 'n/a',
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    const failNetwork = (reason: string) => {
+      pushLog('http', `← ERR xhr ${UPLOAD_PATH}`, { reason });
+      const err: any = new Error(reason);
+      err.code = 'ERR_NETWORK';
+      err.config = { url: UPLOAD_PATH };
+      reject(err);
+    };
+
+    xhr.onload = () => {
+      const status = xhr.status;
+      let body: any = null;
+      try {
+        body = JSON.parse(xhr.responseText);
+      } catch {
+        body = xhr.responseText || null;
+      }
+
+      if (status < 200 || status >= 300) {
+        pushLog('http', `← ${status} POST ${UPLOAD_PATH} (xhr)`, body);
+        const err: any = new Error(`Upload failed: ${status}`);
+        // Shaped like an axios error so callers' `err.response.status`
+        // checks keep working — notably useSendMessage's retry with the
+        // singular "file" field on 500.
+        err.response = { status, statusText: xhr.statusText, data: body };
+        err.config = { url: UPLOAD_PATH };
+        reject(err);
+        return;
+      }
+
+      pushLog('http', `← ${status} POST ${UPLOAD_PATH} (xhr)`, {
+        resultsCount: Array.isArray(body?.results) ? body.results.length : 'n/a',
+      });
+      resolve({ data: body });
+    };
+
+    xhr.onerror = () => failNetwork('Network request failed');
+    xhr.ontimeout = () => failNetwork('Upload timed out');
+    xhr.onabort = () => failNetwork('Upload aborted');
+
+    xhr.open('POST', url);
+    xhr.setRequestHeader('Authorization', token);
+    xhr.setRequestHeader('Accept', '*/*');
+    // Deliberately no Content-Type — see the note above: RN fills it in
+    // along with the multipart boundary it generated.
+    xhr.send(formData as any);
   });
-  return { data };
 }