stream-chat-react-native-core 9.0.2-beta.2 → 9.1.0

package/src/hooks/usePendingAttachmentUpload.ts

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { UploadManagerState } from 'stream-chat';
+
+import { useStateStore } from './useStateStore';
+
+import { useChatContext } from '../contexts/chatContext/ChatContext';
+
+export type PendingAttachmentUpload = {
+  /** True when `client.uploadManager` has an in-flight upload for this attachment local id. */
+  isUploading: boolean;
+  /**
+   * Upload percent **0–100** from `client.uploadManager` (same scale as `attachmentManager`
+   * `onProgress` / `localMetadata.uploadProgress`). `undefined` when not computable or not uploading.
+   */
+  uploadProgress: number | undefined;
+};
+
+const idle: PendingAttachmentUpload = {
+  isUploading: false,
+  uploadProgress: undefined,
+};
+
+const completed: PendingAttachmentUpload = {
+  isUploading: true,
+  uploadProgress: 100,
+};
+
+const COMPLETION_HOLD_MS = 350;
+const COMPLETION_READY_PROGRESS = 90;
+
+const now = () => Date.now();
+
+/**
+ * Subscribes to `client.uploadManager` for the pending attachment identified by `localId`.
+ */
+export function usePendingAttachmentUpload(localId: string | undefined): PendingAttachmentUpload {
+  const { client } = useChatContext();
+  const [, setRenderTick] = useState(0);
+  const completedHoldUntilRef = useRef(0);
+  const holdTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const lastUploadProgressRef = useRef<number | undefined>(undefined);
+  const previousLocalIdRef = useRef<string | undefined>(localId);
+  const wasUploadingRef = useRef(false);
+
+  const selector = useCallback(
+    (state: UploadManagerState): PendingAttachmentUpload => {
+      if (!localId) {
+        return idle;
+      }
+      const record = state.uploads[localId];
+      if (!record) {
+        return idle;
+      }
+      return {
+        isUploading: true,
+        uploadProgress: record.uploadProgress,
+      };
+    },
+    [localId],
+  );
+
+  const result = useStateStore(localId ? client.uploadManager.state : undefined, selector);
+  const isUploading = result?.isUploading ?? false;
+  const uploadProgress = result?.uploadProgress;
+
+  if (previousLocalIdRef.current !== localId) {
+    previousLocalIdRef.current = localId;
+    completedHoldUntilRef.current = 0;
+    wasUploadingRef.current = false;
+    lastUploadProgressRef.current = undefined;
+  }
+
+  let pendingAttachmentUpload = result ?? idle;
+  if (localId && isUploading) {
+    completedHoldUntilRef.current = 0;
+    wasUploadingRef.current = true;
+    if (typeof uploadProgress === 'number') {
+      lastUploadProgressRef.current = uploadProgress;
+    }
+  } else if (localId && completedHoldUntilRef.current > now()) {
+    pendingAttachmentUpload = completed;
+  } else if (localId) {
+    const shouldStartCompletionHold =
+      wasUploadingRef.current &&
+      typeof lastUploadProgressRef.current === 'number' &&
+      lastUploadProgressRef.current >= COMPLETION_READY_PROGRESS;
+
+    wasUploadingRef.current = false;
+    lastUploadProgressRef.current = undefined;
+
+    if (shouldStartCompletionHold) {
+      completedHoldUntilRef.current = now() + COMPLETION_HOLD_MS;
+      pendingAttachmentUpload = completed;
+    } else {
+      completedHoldUntilRef.current = 0;
+    }
+  } else {
+    completedHoldUntilRef.current = 0;
+    wasUploadingRef.current = false;
+    lastUploadProgressRef.current = undefined;
+  }
+
+  useEffect(() => {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+      holdTimeoutRef.current = undefined;
+    }
+
+    const holdForMs = completedHoldUntilRef.current - now();
+    if (holdForMs <= 0) {
+      return;
+    }
+
+    holdTimeoutRef.current = setTimeout(() => {
+      holdTimeoutRef.current = undefined;
+      setRenderTick((tick) => tick + 1);
+    }, holdForMs);
+  }, [localId, pendingAttachmentUpload]);
+
+  useEffect(
+    () => () => {
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current);
+      }
+    },
+    [],
+  );
+
+  return pendingAttachmentUpload;
+}

package/src/index.ts

@@ -18,6 +18,7 @@ export * from './utils/i18n/Streami18n';
 export * from './utils/setupCommandUIMiddlewares';
 export * from './utils/createGenerateVideoThumbnails';
 export * from './utils/utils';
+export * from './nativeMultipartUpload';
 
 export { default as enTranslations } from './i18n/en.json';
 export { default as esTranslations } from './i18n/es.json';

package/src/middlewares/attachments.ts

@@ -26,6 +26,7 @@ export const localAttachmentToAttachment = (localAttachment: LocalAttachment) =>
     return {
       ...attachment,
       image_url: localMetadata?.previewUri,
+      localId: localMetadata?.id,
       originalFile: localMetadata.file,
     } as Attachment;
   } else {
@@ -35,6 +36,7 @@ export const localAttachmentToAttachment = (localAttachment: LocalAttachment) =>
     return {
       ...attachment,
       asset_url: (localMetadata.file as FileReference).uri,
+      localId: localMetadata?.id,
       originalFile: localMetadata.file,
     } as Attachment;
   }

package/src/native.ts

@@ -7,7 +7,27 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { NativeMultipartUpload } from './nativeMultipartUpload';
 import type { File } from './types/types';
+
+export type {
+  NativeMultipartAbortSignal,
+  NativeMultipartCanceledError,
+  NativeMultipartUpload,
+  NativeMultipartUploadEventEmitter,
+  NativeMultipartUploadHeader,
+  NativeMultipartUploadNativeResponse,
+  NativeMultipartUploadPart,
+  NativeMultipartUploadProgressConfig,
+  NativeMultipartUploadProgressEvent,
+  NativeMultipartUploadRequest,
+  NativeMultipartUploadResult,
+  NativeMultipartUploader,
+  NativeMultipartUploaderModule,
+  NativeMultipartUploaderProgressConfig,
+  NativeMultipartUploaderRequest,
+} from './nativeMultipartUpload';
+
 const fail = () => {
   throw Error(
     'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native',
@@ -308,6 +328,7 @@ type Handlers = {
   getLocalAssetUri?: GetLocalAssetUri;
   getPhotos?: GetPhotos;
   iOS14RefreshGallerySelection?: iOS14RefreshGallerySelection;
+  multipartUpload?: NativeMultipartUpload;
   oniOS14GalleryLibrarySelectionChange?: OniOS14LibrarySelectionChange;
   overrideAudioRecordingConfiguration?: (
     audioRecordingConfiguration: AudioRecordingConfiguration,
@@ -338,6 +359,7 @@ export const NativeHandlers: Pick<
       | 'getLocalAssetUri'
       | 'getPhotos'
       | 'iOS14RefreshGallerySelection'
+      | 'multipartUpload'
       | 'oniOS14GalleryLibrarySelectionChange'
       | 'pickDocument'
       | 'pickImage'
@@ -355,6 +377,7 @@ export const NativeHandlers: Pick<
   getLocalAssetUri: fail,
   getPhotos: fail,
   iOS14RefreshGallerySelection: fail,
+  multipartUpload: fail,
   oniOS14GalleryLibrarySelectionChange: fail,
   pickDocument: fail,
   pickImage: fail,
@@ -404,6 +427,10 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     NativeHandlers.iOS14RefreshGallerySelection = handlers.iOS14RefreshGallerySelection;
   }
 
+  if (handlers.multipartUpload !== undefined) {
+    NativeHandlers.multipartUpload = handlers.multipartUpload;
+  }
+
   if (handlers.oniOS14GalleryLibrarySelectionChange !== undefined) {
     NativeHandlers.oniOS14GalleryLibrarySelectionChange =
       handlers.oniOS14GalleryLibrarySelectionChange;
@@ -469,3 +496,4 @@ export const isImageMediaLibraryAvailable = () =>
   !!NativeHandlers.iOS14RefreshGallerySelection &&
   !!NativeHandlers.oniOS14GalleryLibrarySelectionChange &&
   !!NativeHandlers.getLocalAssetUri;
+export const isNativeMultipartUploadAvailable = () => NativeHandlers.multipartUpload !== fail;

package/src/nativeMultipartUpload.ts

@@ -0,0 +1,384 @@
+import { NativeEventEmitter } from 'react-native';
+
+const STREAM_MULTIPART_UPLOAD_PROGRESS_EVENT = 'streamMultipartUploadProgress';
+const CANCELED_ERROR_CODE = 'ERR_CANCELED';
+
+export type NativeMultipartAbortSignal = {
+  aborted: boolean;
+  addEventListener?: (...args: unknown[]) => unknown;
+  onabort?: ((...args: unknown[]) => unknown) | null;
+  removeEventListener?: (...args: unknown[]) => unknown;
+};
+
+export type NativeMultipartUploadHeader = {
+  name: string;
+  value: string;
+};
+
+export type NativeMultipartUploadPart =
+  | {
+      fieldName: string;
+      kind: 'file';
+      fileName: string;
+      mimeType?: string;
+      uri: string;
+    }
+  | {
+      fieldName: string;
+      kind: 'text';
+      value: string;
+    };
+
+export type NativeMultipartUploaderProgressConfig = {
+  count?: number;
+  intervalMs?: number;
+};
+
+export type NativeMultipartUploadProgressConfig = NativeMultipartUploaderProgressConfig & {
+  /**
+   * Maximum progress percentage reported while the native request body is still being sent.
+   * Completion is represented by the upload request resolving and the upload indicator being removed.
+   *
+   * @default 90
+   */
+  completionProgressCap?: number;
+};
+
+export type NativeMultipartUploadProgressEvent = {
+  loaded: number;
+  total?: number | null;
+  uploadId: string;
+};
+
+export type NativeMultipartUploadNativeResponse = {
+  body: string;
+  headers?: ReadonlyArray<NativeMultipartUploadHeader> | null;
+  status: number;
+  statusText?: string | null;
+};
+
+export type NativeMultipartUploadResult = {
+  body: string;
+  headers?: Record<string, string>;
+  status: number;
+  statusText?: string;
+};
+
+export type NativeMultipartUploadRequest = {
+  headers: Record<string, string>;
+  method: string;
+  onProgress?: (progress: { loaded: number; total?: number }) => void;
+  parts: NativeMultipartUploadPart[];
+  progress?: NativeMultipartUploadProgressConfig;
+  signal?: NativeMultipartAbortSignal;
+  timeoutMs?: number;
+  url: string;
+};
+
+export type NativeMultipartUploaderRequest = Omit<NativeMultipartUploadRequest, 'progress'> & {
+  progress?: NativeMultipartUploaderProgressConfig;
+  uploadId: string;
+};
+
+export type NativeMultipartUpload = (
+  request: NativeMultipartUploadRequest,
+) => Promise<NativeMultipartUploadResult | undefined> | never;
+
+export type NativeMultipartUploader = (
+  request: NativeMultipartUploaderRequest,
+) => Promise<NativeMultipartUploadResult>;
+
+export type NativeMultipartUploaderModule = {
+  addListener(eventType: string): void;
+  cancelUpload(uploadId: string): Promise<void>;
+  removeListeners(count: number): void;
+  uploadMultipart(
+    uploadId: string,
+    url: string,
+    method: string,
+    headers: ReadonlyArray<NativeMultipartUploadHeader>,
+    parts: ReadonlyArray<NativeMultipartUploadPart>,
+    progress?: NativeMultipartUploaderProgressConfig,
+    timeoutMs?: number | null,
+  ): Promise<NativeMultipartUploadNativeResponse>;
+};
+
+export type NativeMultipartUploadEventEmitter = {
+  addListener(
+    eventType: string,
+    listener: (event: NativeMultipartUploadProgressEvent) => void,
+  ): { remove: () => void };
+};
+
+export type NativeMultipartCanceledError = Error & {
+  __CANCEL__: true;
+  code: typeof CANCELED_ERROR_CODE;
+};
+
+type CreateNativeMultipartUploaderOptions = {
+  eventEmitter?: NativeMultipartUploadEventEmitter;
+};
+
+type CreateNativeMultipartUploadOptions = {
+  getLocalAssetUri?: ((uri: string) => Promise<string | null | undefined>) | null;
+  uploadIdFactory?: () => string;
+  uploadMultipart?: NativeMultipartUploader;
+};
+
+const createDefaultUploadId = () =>
+  `stream-upload-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const createCanceledError = (): NativeMultipartCanceledError => {
+  const error = new Error('Request aborted') as NativeMultipartCanceledError;
+  error.name = 'CanceledError';
+  error.code = CANCELED_ERROR_CODE;
+  // eslint-disable-next-line no-underscore-dangle -- Axios marks cancellation with this legacy field, and callers still use axios.isCancel.
+  error.__CANCEL__ = true;
+  return error;
+};
+
+const toUploadHeaders = (headers: Record<string, string>): NativeMultipartUploadHeader[] =>
+  Object.entries(headers).map(([name, value]) => ({ name, value }));
+
+const fromUploadHeaders = (
+  headers?: ReadonlyArray<NativeMultipartUploadHeader> | null,
+): Record<string, string> | undefined => {
+  if (!headers?.length) {
+    return undefined;
+  }
+
+  return headers.reduce<Record<string, string>>((acc, header) => {
+    acc[header.name] = header.value;
+    return acc;
+  }, {});
+};
+
+const addAbortHandler = (signal: NativeMultipartAbortSignal | undefined, onAbort: () => void) => {
+  if (!signal) {
+    return () => undefined;
+  }
+
+  let handled = false;
+  const handleAbort = () => {
+    if (handled) {
+      return;
+    }
+
+    handled = true;
+    onAbort();
+  };
+
+  if (typeof signal.addEventListener === 'function') {
+    signal.addEventListener('abort', handleAbort, { once: true });
+    return () => {
+      signal.removeEventListener?.('abort', handleAbort);
+    };
+  }
+
+  const previousOnAbort = signal.onabort;
+  const chainedOnAbort = (...args: unknown[]) => {
+    previousOnAbort?.(...args);
+    handleAbort();
+  };
+
+  signal.onabort = chainedOnAbort;
+
+  return () => {
+    if (signal.onabort === chainedOnAbort) {
+      signal.onabort = previousOnAbort ?? null;
+    }
+  };
+};
+
+const getNativeProgressConfig = (
+  progress?: NativeMultipartUploadProgressConfig,
+): NativeMultipartUploaderProgressConfig | undefined => {
+  if (!progress) {
+    return undefined;
+  }
+
+  const nativeProgressConfig = { ...progress };
+  delete nativeProgressConfig.completionProgressCap;
+
+  return Object.keys(nativeProgressConfig).length ? nativeProgressConfig : undefined;
+};
+
+const isPhotoLibraryUri = (uri: string) => {
+  const normalizedUri = uri.toLowerCase();
+  return normalizedUri.startsWith('ph://') || normalizedUri.startsWith('assets-library://');
+};
+
+const sanitizeResolvedFileUri = (uri: string) => {
+  const normalizedUri = uri.startsWith('/') ? `file://${uri}` : uri;
+
+  if (!normalizedUri.startsWith('file://')) {
+    return normalizedUri;
+  }
+
+  return normalizedUri.split('#')[0].split('?')[0];
+};
+
+const resolvePartUri = async (
+  part: NativeMultipartUploadPart,
+  getLocalAssetUri: CreateNativeMultipartUploadOptions['getLocalAssetUri'],
+): Promise<NativeMultipartUploadPart> => {
+  if (
+    part.kind !== 'file' ||
+    typeof getLocalAssetUri !== 'function' ||
+    !isPhotoLibraryUri(part.uri)
+  ) {
+    return part;
+  }
+
+  try {
+    const resolvedUri = await getLocalAssetUri(part.uri);
+
+    return {
+      ...part,
+      uri: resolvedUri ? sanitizeResolvedFileUri(resolvedUri) : part.uri,
+    };
+  } catch {
+    return part;
+  }
+};
+
+export const createNativeMultipartUploader = (
+  nativeModule: NativeMultipartUploaderModule | null | undefined,
+  options: CreateNativeMultipartUploaderOptions = {},
+): NativeMultipartUploader | undefined => {
+  if (!nativeModule) {
+    return undefined;
+  }
+
+  const multipartUploadEventEmitter = options.eventEmitter ?? new NativeEventEmitter(nativeModule);
+
+  return async ({
+    headers,
+    method,
+    onProgress,
+    parts,
+    progress,
+    signal,
+    timeoutMs,
+    uploadId,
+    url,
+  }: NativeMultipartUploaderRequest): Promise<NativeMultipartUploadResult> => {
+    let progressSubscription:
+      | {
+          remove: () => void;
+        }
+      | undefined;
+    let uploadStarted = false;
+
+    const abortUpload = async () => {
+      try {
+        await nativeModule.cancelUpload(uploadId);
+      } catch {
+        // Ignore cancellation races for already-finished uploads.
+      }
+    };
+
+    const handleAbort = () => {
+      if (uploadStarted) {
+        abortUpload().catch(() => undefined);
+      }
+    };
+
+    if (signal?.aborted) {
+      throw createCanceledError();
+    }
+
+    const removeAbortListener = addAbortHandler(signal, handleAbort);
+
+    if (signal?.aborted) {
+      removeAbortListener();
+      throw createCanceledError();
+    }
+
+    if (onProgress) {
+      progressSubscription = multipartUploadEventEmitter.addListener(
+        STREAM_MULTIPART_UPLOAD_PROGRESS_EVENT,
+        (event: NativeMultipartUploadProgressEvent) => {
+          if (event.uploadId !== uploadId) {
+            return;
+          }
+
+          onProgress({
+            loaded: event.loaded,
+            total: typeof event.total === 'number' ? event.total : undefined,
+          });
+        },
+      );
+    }
+
+    try {
+      uploadStarted = true;
+      const response = await nativeModule.uploadMultipart(
+        uploadId,
+        url,
+        method,
+        toUploadHeaders(headers),
+        parts,
+        progress ?? {},
+        timeoutMs,
+      );
+
+      if (signal?.aborted) {
+        throw createCanceledError();
+      }
+
+      return {
+        body: response.body,
+        headers: fromUploadHeaders(response.headers),
+        status: response.status,
+        statusText: typeof response.statusText === 'string' ? response.statusText : undefined,
+      };
+    } catch (error) {
+      if (signal?.aborted) {
+        throw createCanceledError();
+      }
+
+      throw error;
+    } finally {
+      progressSubscription?.remove();
+      removeAbortListener();
+    }
+  };
+};
+
+export const createNativeMultipartUpload = ({
+  getLocalAssetUri,
+  uploadIdFactory = createDefaultUploadId,
+  uploadMultipart,
+}: CreateNativeMultipartUploadOptions): NativeMultipartUpload | undefined => {
+  if (!uploadMultipart) {
+    return undefined;
+  }
+
+  return async ({
+    headers,
+    method,
+    onProgress,
+    parts,
+    progress,
+    signal,
+    timeoutMs,
+    url,
+  }: NativeMultipartUploadRequest) => {
+    const resolvedParts = await Promise.all(
+      parts.map((part) => resolvePartUri(part, getLocalAssetUri)),
+    );
+
+    return uploadMultipart({
+      headers,
+      method,
+      onProgress,
+      parts: resolvedParts,
+      progress: getNativeProgressConfig(progress),
+      signal,
+      timeoutMs,
+      uploadId: uploadIdFactory(),
+      url,
+    });
+  };
+};

package/src/types/types.ts

@@ -43,6 +43,8 @@ export type UploadAttachmentPreviewProps<A extends LocalUploadAttachment> = {
 
 export interface DefaultAttachmentData {
   originalFile?: File;
+  /** Matches `LocalAttachment.localMetadata.id` / `uploadManager` record id for pending uploads */
+  localId?: string;
 }
 
 export interface DefaultUserData {