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

package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload';
+import { primitives } from '../../theme';
+import { isLocalUrl } from '../../utils/utils';
+
+export type AttachmentFileUploadProgressIndicatorProps = {
+  containerStyle?: StyleProp<ViewStyle>;
+  localId?: string;
+  sourceUrl?: string;
+  totalBytes?: number | string | null;
+};
+
+const parseTotalBytes = (value: number | string | null | undefined): number | null => {
+  if (value == null) {
+    return null;
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : null;
+  }
+  return null;
+};
+
+const formatMegabytesOneDecimal = (bytes: number) => {
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return '0.0 MB';
+  }
+  return `${(bytes / (1000 * 1000)).toFixed(1)} MB`;
+};
+
+/**
+ * Circular progress plus `uploaded / total` for file and audio attachments during upload.
+ */
+export const AttachmentFileUploadProgressIndicatorUI = ({
+  containerStyle,
+  localId,
+  sourceUrl,
+  totalBytes,
+}: AttachmentFileUploadProgressIndicatorProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const { AttachmentUploadIndicator } = useComponentsContext();
+  const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl);
+  const pendingUpload = usePendingAttachmentUpload(shouldTrackPendingUpload ? localId : undefined);
+  const uploadProgress = pendingUpload.uploadProgress;
+  const shouldRender = pendingUpload.isUploading;
+
+  const progressLabel = useMemo(() => {
+    const bytes = parseTotalBytes(totalBytes);
+    if (bytes == null || bytes <= 0) {
+      return null;
+    }
+    const uploaded = ((uploadProgress ?? 0) / 100) * bytes;
+    return `${formatMegabytesOneDecimal(uploaded)} / ${formatMegabytesOneDecimal(bytes)}`;
+  }, [totalBytes, uploadProgress]);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.row, containerStyle]}>
+      <AttachmentUploadIndicator localId={localId} sourceUrl={sourceUrl} />
+      {progressLabel ? (
+        <Text numberOfLines={1} style={[styles.label, { color: semantics.textSecondary }]}>
+          {progressLabel}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+export const AttachmentFileUploadProgressIndicator = (
+  props: AttachmentFileUploadProgressIndicatorProps,
+) => {
+  const { localId, sourceUrl } = props;
+  const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl);
+
+  if (!shouldTrackPendingUpload) {
+    return null;
+  }
+
+  return <AttachmentFileUploadProgressIndicatorUI {...props} />;
+};
+
+const styles = StyleSheet.create({
+  label: {
+    flex: 1,
+    flexShrink: 1,
+    fontSize: primitives.typographyFontSizeXs,
+    fontWeight: primitives.typographyFontWeightRegular,
+    lineHeight: primitives.typographyLineHeightTight,
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: primitives.spacingXxs,
+  },
+});

package/src/components/Attachment/AttachmentUploadIndicator.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload';
+import { isLocalUrl } from '../../utils/utils';
+
+export type AttachmentUploadIndicatorProps = {
+  containerStyle?: StyleProp<ViewStyle>;
+  localId?: string;
+  size?: number;
+  sourceUrl?: string;
+  strokeWidth?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  variant?: 'compact' | 'overlay';
+};
+
+/**
+ * Upload state for attachment previews: determinate ring when progress is known, otherwise `ActivityIndicator`.
+ */
+export const AttachmentUploadIndicatorUI = ({
+  containerStyle,
+  localId,
+  size = 16,
+  strokeWidth = 2,
+  style,
+  testID,
+  variant = 'compact',
+}: AttachmentUploadIndicatorProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const { CircularProgressIndicator, MediaUploadProgressOverlay } = useComponentsContext();
+  const pendingUpload = usePendingAttachmentUpload(localId);
+  const uploadProgress = pendingUpload.uploadProgress;
+  const shouldRender = pendingUpload.isUploading;
+  const resolvedSize = variant === 'overlay' && size === 16 ? 28 : size;
+  const resolvedStrokeWidth = variant === 'overlay' && strokeWidth === 2 ? 3 : strokeWidth;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  if (variant === 'overlay') {
+    return (
+      <MediaUploadProgressOverlay
+        progress={uploadProgress}
+        size={resolvedSize}
+        strokeWidth={resolvedStrokeWidth}
+        testID={testID}
+      />
+    );
+  }
+
+  return (
+    <View pointerEvents='none' style={containerStyle}>
+      {uploadProgress === undefined ? (
+        <View
+          pointerEvents='none'
+          style={[styles.indeterminateWrap, { height: size, width: size }, style]}
+          testID={testID}
+        >
+          <ActivityIndicator color={semantics.accentPrimary} size='small' />
+        </View>
+      ) : (
+        <CircularProgressIndicator
+          backgroundColor={semantics.backgroundCoreElevation0}
+          filledColor={semantics.accentPrimary}
+          progress={uploadProgress}
+          size={resolvedSize}
+          strokeWidth={resolvedStrokeWidth}
+          style={style}
+          testID={testID}
+          unfilledColor={semantics.borderCoreDefault}
+        />
+      )}
+    </View>
+  );
+};
+
+export const AttachmentUploadIndicator = ({
+  containerStyle,
+  localId,
+  sourceUrl,
+  variant,
+  ...props
+}: AttachmentUploadIndicatorProps) => {
+  const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl);
+
+  if (!shouldTrackPendingUpload) {
+    return null;
+  }
+
+  return (
+    <AttachmentUploadIndicatorUI
+      {...props}
+      containerStyle={containerStyle}
+      localId={localId}
+      variant={variant}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  indeterminateWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Attachment/CircularProgressIndicator.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useMemo } from 'react';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const SPIN_DURATION_MS = 900;
+const PROGRESS_ANIMATION_DURATION_MS = 1200;
+
+export type CircularProgressIndicatorProps = {
+  /** Upload percent **0–100**. */
+  backgroundColor: ColorValue;
+  filledColor: ColorValue;
+  progress: number;
+  unfilledColor: ColorValue;
+  size?: number;
+  strokeWidth?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+/**
+ * Circular upload progress ring (determinate) or rotating arc (indeterminate).
+ */
+export const CircularProgressIndicator = ({
+  backgroundColor,
+  filledColor,
+  progress,
+  size = 16,
+  strokeWidth = 2,
+  style,
+  testID,
+  unfilledColor,
+}: CircularProgressIndicatorProps) => {
+  const animatedProgress = useSharedValue(0);
+  const rotation = useSharedValue(0);
+
+  const { cx, cy, r, circumference } = useMemo(() => {
+    const pad = strokeWidth / 2;
+    const rInner = size / 2 - pad;
+    return {
+      cx: size / 2,
+      cy: size / 2,
+      r: rInner,
+      circumference: 2 * Math.PI * rInner,
+    };
+  }, [size, strokeWidth]);
+
+  const fraction =
+    progress === undefined || Number.isNaN(progress)
+      ? undefined
+      : Math.min(100, Math.max(0, progress)) / 100;
+
+  useEffect(() => {
+    if (fraction === undefined) {
+      animatedProgress.value = 0;
+      return;
+    }
+
+    animatedProgress.value = withTiming(fraction, {
+      duration: PROGRESS_ANIMATION_DURATION_MS,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [animatedProgress, fraction]);
+
+  useEffect(() => {
+    if (fraction !== undefined) {
+      cancelAnimation(rotation);
+      rotation.value = 0;
+      return;
+    }
+
+    rotation.value = withRepeat(
+      withTiming(360, {
+        duration: SPIN_DURATION_MS,
+        easing: Easing.linear,
+      }),
+      -1,
+      false,
+    );
+
+    return () => {
+      cancelAnimation(rotation);
+    };
+  }, [fraction, rotation]);
+
+  const animatedCircleProps = useAnimatedProps(() => ({
+    strokeDashoffset: circumference * (1 - animatedProgress.value),
+  }));
+
+  const animatedSpinStyle = useAnimatedStyle<ViewStyle>(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  if (fraction !== undefined) {
+    return (
+      <Svg height={size} style={style} testID={testID} viewBox={`0 0 ${size} ${size}`} width={size}>
+        <Circle
+          cx={cx}
+          cy={cy}
+          fill={backgroundColor}
+          r={r}
+          stroke={unfilledColor}
+          strokeWidth={strokeWidth}
+        />
+        <AnimatedCircle
+          animatedProps={animatedCircleProps}
+          cx={cx}
+          cy={cy}
+          fill='none'
+          r={r}
+          stroke={filledColor}
+          strokeDasharray={`${circumference}`}
+          strokeLinecap='round'
+          strokeWidth={strokeWidth}
+          transform={`rotate(-90 ${cx} ${cy})`}
+        />
+      </Svg>
+    );
+  }
+
+  const arc = circumference * 0.22;
+  const gap = circumference - arc;
+
+  return (
+    <Animated.View
+      style={[{ height: size, width: size }, style, animatedSpinStyle]}
+      testID={testID}
+    >
+      <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size}>
+        <Circle
+          cx={cx}
+          cy={cy}
+          fill={backgroundColor}
+          r={r}
+          stroke={unfilledColor}
+          strokeWidth={strokeWidth}
+        />
+        <Circle
+          cx={cx}
+          cy={cy}
+          fill='none'
+          r={r}
+          stroke={filledColor}
+          strokeDasharray={`${arc} ${gap}`}
+          strokeLinecap='round'
+          strokeWidth={strokeWidth}
+          transform={`rotate(-90 ${cx} ${cy})`}
+        />
+      </Svg>
+    </Animated.View>
+  );
+};

package/src/components/Attachment/FileAttachment.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
-import { Pressable, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native';
+import { Pressable, StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
+import { AttachmentFileUploadProgressIndicator } from './AttachmentFileUploadProgressIndicator';
 import { openUrlSafely } from './utils/openUrlSafely';
 
 import { FileIconProps } from '../../components/Attachment/FileIcon';
@@ -17,6 +18,7 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultAttachmentData } from '../../types/types';
 
 export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
@@ -50,6 +52,8 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
   } = props;
   const { FilePreview } = useComponentsContext();
 
+  const localId = (attachment as DefaultAttachmentData).localId;
+
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
   return (
@@ -87,11 +91,20 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
       testID='file-attachment'
       {...additionalPressableProps}
     >
-      <FilePreview
-        attachment={attachment}
-        attachmentIconSize={attachmentIconSize}
-        styles={stylesProp}
-      />
+      <View style={styles.previewWrap}>
+        <FilePreview
+          attachment={attachment}
+          attachmentIconSize={attachmentIconSize}
+          indicator={
+            <AttachmentFileUploadProgressIndicator
+              localId={localId}
+              sourceUrl={attachment.asset_url ?? attachment.originalFile?.uri}
+              totalBytes={attachment.file_size}
+            />
+          }
+          styles={stylesProp}
+        />
+      </View>
     </Pressable>
   );
 };
@@ -135,6 +148,9 @@ const useStyles = () => {
             ? semantics.chatBgAttachmentOutgoing
             : semantics.chatBgAttachmentIncoming,
       },
+      previewWrap: {
+        position: 'relative',
+      },
     });
   }, [showBackgroundTransparent, isMyMessage, semantics]);
 };

package/src/components/Attachment/Gallery.tsx

@@ -299,6 +299,7 @@ const GalleryThumbnail = ({
     >
       {thumbnail.type === FileTypes.Video ? (
         <VideoThumbnail
+          localId={thumbnail.localId}
           style={[styles.image, imageBorderRadius ?? borderRadius, image]}
           thumb_url={thumbnail.thumb_url}
         />
@@ -330,7 +331,8 @@ const GalleryImageThumbnail = ({
   borderRadius,
   thumbnail,
 }: Pick<GalleryThumbnailProps, 'thumbnail' | 'borderRadius'>) => {
-  const { ImageLoadingFailedIndicator, ImageLoadingIndicator } = useComponentsContext();
+  const { AttachmentUploadIndicator, ImageLoadingFailedIndicator, ImageLoadingIndicator } =
+    useComponentsContext();
   const {
     isLoadingImage,
     isLoadingImageError,
@@ -344,6 +346,7 @@ const GalleryImageThumbnail = ({
     },
   } = useTheme();
   const styles = useStyles();
+
   const onLoadStart = useStableCallback(() => {
     setLoadingImageError(false);
     setLoadingImage(true);
@@ -374,6 +377,11 @@ const GalleryImageThumbnail = ({
             uri={thumbnail.url}
           />
           {isLoadingImage ? <ImageLoadingIndicator /> : null}
+          <AttachmentUploadIndicator
+            localId={thumbnail.localId}
+            sourceUrl={thumbnail.url}
+            variant='overlay'
+          />
         </>
       )}
     </View>

package/src/components/Attachment/MediaUploadProgressOverlay.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export type MediaUploadProgressOverlayProps = {
+  progress?: number;
+  size?: number;
+  strokeWidth?: number;
+  testID?: string;
+};
+
+/**
+ * Full-cover upload overlay for image and video thumbnails.
+ */
+export const MediaUploadProgressOverlay = ({
+  progress,
+  size = 18,
+  strokeWidth = 3,
+  testID,
+}: MediaUploadProgressOverlayProps) => {
+  const styles = useStyles();
+  const { CircularProgressIndicator } = useComponentsContext();
+  const {
+    theme: {
+      messageItemView: { attachmentUploadIndicator },
+      semantics,
+    },
+  } = useTheme();
+
+  return (
+    <View
+      pointerEvents='none'
+      style={[
+        StyleSheet.absoluteFill,
+        styles.indicatorContainer,
+        attachmentUploadIndicator.overlayContent,
+      ]}
+      testID={testID ? `${testID}-content` : undefined}
+    >
+      {typeof progress === 'number' ? (
+        <CircularProgressIndicator
+          backgroundColor={semantics.backgroundCoreElevation0}
+          filledColor={semantics.accentPrimary}
+          progress={progress}
+          size={size}
+          strokeWidth={strokeWidth}
+          style={attachmentUploadIndicator.indicator}
+          unfilledColor={semantics.borderCoreDefault}
+        />
+      ) : (
+        <ActivityIndicator
+          color={semantics.accentPrimary}
+          style={attachmentUploadIndicator.indicator}
+        />
+      )}
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        indicatorContainer: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: semantics.backgroundCoreOverlayLight,
+        },
+      }),
+    [semantics],
+  );
+};

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
@@ -15,6 +16,10 @@ const styles = StyleSheet.create({
 
 export type VideoThumbnailProps = {
   imageStyle?: StyleProp<ImageStyle>;
+  /**
+   * When set, upload state is read from `client.uploadManager` for this pending attachment id.
+   */
+  localId?: string;
   style?: StyleProp<ViewStyle>;
   thumb_url?: string;
 };
@@ -27,15 +32,18 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => {
       },
     },
   } = useTheme();
-  const { imageStyle, style, thumb_url } = props;
+  const { AttachmentUploadIndicator, ImageComponent } = useComponentsContext();
+  const { imageStyle, localId, style, thumb_url } = props;
+
   return (
-    <ImageBackground
-      accessibilityLabel='Video Thumbnail'
-      imageStyle={imageStyle}
-      source={{ uri: thumb_url }}
-      style={[styles.container, container, style]}
-    >
+    <View style={[styles.container, container, style]}>
+      <ImageComponent
+        accessibilityLabel='Video Thumbnail'
+        source={{ uri: thumb_url }}
+        style={[StyleSheet.absoluteFill, imageStyle]}
+      />
       <VideoPlayIndicator size='md' />
-    </ImageBackground>
+      <AttachmentUploadIndicator localId={localId} sourceUrl={thumb_url} variant='overlay' />
+    </View>
   );
 };