fix: upload progress styles

Author: isekovanic

package/src/components/Attachment/AttachmentUploadIndicator.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { CircularProgressIndicator } from './CircularProgressIndicator';
+import { MediaUploadProgressOverlay } from './MediaUploadProgressOverlay';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload';
@@ -16,6 +17,7 @@ export type AttachmentUploadIndicatorProps = {
   strokeWidth?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  variant?: 'compact' | 'overlay';
 };
 
 /**
@@ -28,18 +30,32 @@ export const AttachmentUploadIndicatorUI = ({
   strokeWidth = 2,
   style,
   testID,
+  variant = 'compact',
 }: AttachmentUploadIndicatorProps) => {
   const {
     theme: { semantics },
   } = useTheme();
   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 ? (
@@ -52,12 +68,14 @@ export const AttachmentUploadIndicatorUI = ({
         </View>
       ) : (
         <CircularProgressIndicator
-          color={semantics.accentPrimary}
+          backgroundColor={semantics.backgroundCoreElevation0}
+          filledColor={semantics.accentPrimary}
           progress={uploadProgress}
-          size={size}
-          strokeWidth={strokeWidth}
+          size={resolvedSize}
+          strokeWidth={resolvedStrokeWidth}
           style={style}
           testID={testID}
+          unfilledColor={semantics.borderCoreDefault}
         />
       )}
     </View>
@@ -68,6 +86,7 @@ export const AttachmentUploadIndicator = ({
   containerStyle,
   localId,
   sourceUrl,
+  variant,
   ...props
 }: AttachmentUploadIndicatorProps) => {
   const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl);
@@ -81,6 +100,7 @@ export const AttachmentUploadIndicator = ({
       {...props}
       containerStyle={containerStyle}
       localId={localId}
+      variant={variant}
     />
   );
 };

package/src/components/Attachment/CircularProgressIndicator.tsx

@@ -17,8 +17,10 @@ const PROGRESS_ANIMATION_DURATION_MS = 1200;
 
 export type CircularProgressIndicatorProps = {
   /** Upload percent **0–100**. */
+  backgroundColor: ColorValue;
+  filledColor: ColorValue;
   progress: number;
-  color: ColorValue;
+  unfilledColor: ColorValue;
   size?: number;
   strokeWidth?: number;
   style?: StyleProp<ViewStyle>;
@@ -29,12 +31,14 @@ export type CircularProgressIndicatorProps = {
  * Circular upload progress ring (determinate) or rotating arc (indeterminate).
  */
 export const CircularProgressIndicator = ({
-  color,
+  backgroundColor,
+  filledColor,
   progress,
   size = 16,
   strokeWidth = 2,
   style,
   testID,
+  unfilledColor,
 }: CircularProgressIndicatorProps) => {
   const animatedProgress = useSharedValue(0);
   const rotation = useSharedValue(0);
@@ -99,13 +103,21 @@ export const CircularProgressIndicator = ({
   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={color as string}
+          stroke={filledColor}
           strokeDasharray={`${circumference}`}
           strokeLinecap='round'
           strokeWidth={strokeWidth}
@@ -124,12 +136,20 @@ export const CircularProgressIndicator = ({
       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={color as string}
+          stroke={filledColor}
           strokeDasharray={`${arc} ${gap}`}
           strokeLinecap='round'
           strokeWidth={strokeWidth}

package/src/components/Attachment/Gallery.tsx

@@ -378,9 +378,9 @@ const GalleryImageThumbnail = ({
           />
           {isLoadingImage ? <ImageLoadingIndicator /> : null}
           <AttachmentUploadIndicator
-            containerStyle={styles.uploadProgressOnImage}
             localId={thumbnail.localId}
             sourceUrl={thumbnail.url}
+            variant='overlay'
           />
         </>
       )}
@@ -604,11 +604,6 @@ const useStyles = () => {
         top: 0,
         overflow: 'hidden',
       },
-      uploadProgressOnImage: {
-        bottom: primitives.spacingXxs,
-        left: primitives.spacingXxs,
-        position: 'absolute',
-      },
     });
   }, [semantics, isMyMessage]);
 };

package/src/components/Attachment/MediaUploadProgressOverlay.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { CircularProgressIndicator } from './CircularProgressIndicator';
+
+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 {
+    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

@@ -5,17 +5,9 @@ import { AttachmentUploadIndicator } from './AttachmentUploadIndicator';
 
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { primitives } from '../../theme';
 import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
 const styles = StyleSheet.create({
-  uploadProgressContainer: {
-    alignItems: 'flex-start',
-    bottom: primitives.spacingXxs,
-    justifyContent: 'flex-start',
-    left: primitives.spacingXxs,
-    position: 'absolute',
-  },
   container: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -53,11 +45,7 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => {
         style={[StyleSheet.absoluteFill, imageStyle]}
       />
       <VideoPlayIndicator size='md' />
-      <AttachmentUploadIndicator
-        containerStyle={styles.uploadProgressContainer}
-        localId={localId}
-        sourceUrl={thumb_url}
-      />
+      <AttachmentUploadIndicator localId={localId} sourceUrl={thumb_url} variant='overlay' />
     </View>
   );
 };

package/src/contexts/themeContext/utils/theme.ts

@@ -677,6 +677,11 @@ export type Theme = {
       attachmentContainer: ViewStyle;
       container: ViewStyle;
     };
+    attachmentUploadIndicator: {
+      indicator: ViewStyle;
+      overlay: ViewStyle;
+      overlayContent: ViewStyle;
+    };
     gallery: {
       galleryContainer: ViewStyle;
       galleryItemColumn: ViewStyle;
@@ -1602,6 +1607,11 @@ export const defaultTheme: Theme = {
       attachmentContainer: {},
       container: {},
     },
+    attachmentUploadIndicator: {
+      indicator: {},
+      overlay: {},
+      overlayContent: {},
+    },
     gallery: {
       galleryContainer: {},
       galleryItemColumn: {},