@ethora/chat-component-rn 26.6.10 → 26.6.11

package/lib/typescript/networking/api-requests/auth.api.d.ts

@@ -9,7 +9,33 @@ export declare function registerSocial(idToken: string, accessToken: string, aut
 export declare function checkEmailExist(email: string): Promise<import("axios").AxiosResponse<any, any, {}>>;
 export declare function loginViaJwt(clientToken: string): Promise<User>;
 export declare function uploadFile(formData: FormData): Promise<import("axios").AxiosResponse<any, any, {}>>;
-export declare function uploadFileViaFetch(formData: FormData): Promise<{
+/**
+ * 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 declare function uploadFileMultipart(formData: FormData): Promise<{
     data: any;
 }>;
 //# sourceMappingURL=auth.api.d.ts.map

package/lib/typescript/networking/api-requests/auth.api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.api.d.ts","sourceRoot":"","sources":["../../../../src/networking/api-requests/auth.api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAezC,wBAAsB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;UAEtD,IAAI;kBACI,MAAM;WACb,MAAM;aAahB;AAED,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,SAAS,GAAE,MAAoB,wDAYhC;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,UAAU,CAAC,EAAE,MAAM,wDAapB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,wDAM5C;AAED,wBAAsB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CA4BpE;AAuBD,wBAAgB,UAAU,CAAC,QAAQ,EAAE,QAAQ,wDAa5C;AAED,wBAAsB,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,CAAC,CAmDnF"}
+{"version":3,"file":"auth.api.d.ts","sourceRoot":"","sources":["../../../../src/networking/api-requests/auth.api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAezC,wBAAsB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;UAEtD,IAAI;kBACI,MAAM;WACb,MAAM;aAahB;AAED,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,SAAS,GAAE,MAAoB,wDAYhC;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,UAAU,CAAC,EAAE,MAAM,wDAapB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,wDAM5C;AAED,wBAAsB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CA4BpE;AAuBD,wBAAgB,UAAU,CAAC,QAAQ,EAAE,QAAQ,wDAa5C;AAID;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,CAAC,CA0D9E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.6.10",
+  "version": "26.6.11",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "module": "lib/module/main.js",

package/src/components/MainComponents/MediaMessage.tsx

@@ -183,6 +183,11 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
           <CustomMessageVideo
             fileName={displayName}
             fileURL={location || ''}
+            // `messageText` is the message's locationPreview — the poster
+            // frame the backend generated for this video. Handing it over
+            // lets the bubble render as a still + play badge instead of
+            // mounting a video surface per row (see VideoMessage).
+            previewURL={messageText}
             mimetype={mimeType}
           />
         );

package/src/components/styled/VideoMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { useDispatch } from 'react-redux';
 import {
@@ -18,14 +18,90 @@ interface CustomMessageVideoProps {
   fileName: string;
   fileURL: string;
   mimetype: string;
+  /** The backend-generated poster frame (message.locationPreview). */
+  previewURL?: string;
 }
 
-const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
-  fileName,
-  fileURL,
-  mimetype,
-}) => {
-  const dispatch = useDispatch();
+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.
+ *
+ * The VideoView path below cannot make that promise: expo-video draws
+ * into a native surface, and depending on platform, expo-video version
+ * and surfaceType that surface can end up above its sibling RN views —
+ * swallowing the badge and leaving the video looking like a plain photo.
+ * It is also cheaper: no video player instance per row in a long list.
+ */
+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, hand the row back to
+        // the player so it can paint a first frame.
+        onError={onPosterError}
+      />
+      <PlayBadge />
+    </Pressable>
+  );
+};
+
+/**
+ * Fallback for messages with no usable poster frame: mount the player
+ * purely to paint its first frame.
+ */
+const VideoSurfaceVideo: React.FC<{
+  fileURL: string;
+  onOpen: () => void;
+}> = ({ fileURL, onOpen }) => {
   const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
 
   const player = useVideoPlayer(fileURL, (p) => {
@@ -42,11 +118,6 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
     return () => sub.remove();
   }, [player]);
 
-  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
@@ -56,7 +127,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
     // 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`.
+    // reaches `onOpen`.
     <View
       style={[styles.wrapper, { width: dims.width, height: dims.height }]}
     >
@@ -68,16 +139,12 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
         surfaceType="textureView"
         pointerEvents="none"
       />
-      <View style={styles.overlay} pointerEvents="none">
-        <View style={styles.playButton}>
-          <PlayIcon width={28} height={28} />
-        </View>
-      </View>
+      <PlayBadge />
       <Pressable
-        onPress={handleOpen}
+        onPress={onOpen}
         // 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).
+        // routes to onOpen → setActiveModal(FILE_PREVIEW).
         style={StyleSheet.absoluteFill}
         accessibilityRole="button"
         accessibilityLabel="Play video"
@@ -86,6 +153,33 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   );
 };
 
+const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
+  fileName,
+  fileURL,
+  mimetype,
+  previewURL,
+}) => {
+  const dispatch = useDispatch();
+  const [posterFailed, setPosterFailed] = useState(false);
+
+  const handleOpen = () => {
+    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
+  };
+
+  if (previewURL && !posterFailed) {
+    return (
+      <PosterVideo
+        previewURL={previewURL}
+        onOpen={handleOpen}
+        onPosterError={() => setPosterFailed(true)}
+      />
+    );
+  }
+
+  return <VideoSurfaceVideo fileURL={fileURL} onOpen={handleOpen} />;
+};
+
 export default CustomMessageVideo;
 
 const styles = StyleSheet.create({

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 };
 }