Skip to content

Commit e91b028

Browse files
isekovanicisekovanic
committed
feat: message composer progress
1 parent 1cea748 commit e91b028

5 files changed

Lines changed: 75 additions & 50 deletions

File tree

‎package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx‎

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,39 @@
11
import React, { useMemo } from 'react';
2-
import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
2+
import { Pressable, StyleSheet, Text, View } from 'react-native';
33

44
import { LocalAttachmentUploadMetadata } from 'stream-chat';
55

6+
import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
67
import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
78
import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
89
import { Warning } from '../../../../icons/exclamation-triangle-fill';
910
import { primitives } from '../../../../theme';
1011
import { RetryBadge } from '../../../ui/Badge/RetryBadge';
1112

12-
export const FileUploadInProgressIndicator = () => {
13+
export type UploadInProgressIndicatorProps = {
14+
localId?: string;
15+
sourceUrl?: string;
16+
};
17+
18+
export const FileUploadInProgressIndicator = ({
19+
localId,
20+
sourceUrl,
21+
}: UploadInProgressIndicatorProps = {}) => {
1322
const {
1423
theme: {
15-
semantics,
1624
messageComposer: { fileUploadInProgressIndicator },
1725
},
1826
} = useTheme();
27+
const { AttachmentUploadIndicator } = useComponentsContext();
1928

2029
return (
21-
<View
22-
style={[styles.activityIndicatorContainer, fileUploadInProgressIndicator.container]}
30+
<AttachmentUploadIndicator
31+
containerStyle={[styles.activityIndicatorContainer, fileUploadInProgressIndicator.container]}
32+
localId={localId}
33+
sourceUrl={sourceUrl}
34+
style={[styles.activityIndicator, fileUploadInProgressIndicator.indicator]}
2335
testID='upload-progress-indicator'
24-
>
25-
<ActivityIndicator
26-
color={semantics.accentPrimary}
27-
style={[styles.activityIndicator, fileUploadInProgressIndicator.indicator]}
28-
/>
29-
</View>
36+
/>
3037
);
3138
};
3239

@@ -103,23 +110,19 @@ export const FileUploadNotSupportedIndicator = ({
103110
);
104111
};
105112

106-
export const ImageUploadInProgressIndicator = () => {
107-
const {
108-
theme: {
109-
semantics,
110-
messageComposer: { imageUploadInProgressIndicator },
111-
},
112-
} = useTheme();
113-
const styles = useImageUploadInProgressIndicatorStyles();
113+
export const ImageUploadInProgressIndicator = ({
114+
localId,
115+
sourceUrl,
116+
}: UploadInProgressIndicatorProps = {}) => {
117+
const { AttachmentUploadIndicator } = useComponentsContext();
118+
114119
return (
115-
<View style={[styles.container, imageUploadInProgressIndicator.container]}>
116-
<ActivityIndicator
117-
size='small'
118-
color={semantics.accentPrimary}
119-
style={imageUploadInProgressIndicator.indicator}
120-
testID='upload-progress-indicator'
121-
/>
122-
</View>
120+
<AttachmentUploadIndicator
121+
localId={localId}
122+
sourceUrl={sourceUrl}
123+
testID='upload-progress-indicator'
124+
variant='overlay'
125+
/>
123126
);
124127
};
125128

@@ -153,16 +156,6 @@ export const ImageUploadNotSupportedIndicator = () => {
153156
);
154157
};
155158

156-
const useImageUploadInProgressIndicatorStyles = () => {
157-
return StyleSheet.create({
158-
container: {
159-
position: 'absolute',
160-
left: primitives.spacingXxs,
161-
bottom: primitives.spacingXxs,
162-
},
163-
});
164-
};
165-
166159
const useImageUploadNotSupportedIndicatorStyles = () => {
167160
const {
168161
theme: { semantics },
@@ -230,7 +223,10 @@ const useFileUploadNotSupportedStyles = () => {
230223
};
231224

232225
const styles = StyleSheet.create({
233-
activityIndicatorContainer: {},
226+
activityIndicatorContainer: {
227+
alignItems: 'center',
228+
justifyContent: 'center',
229+
},
234230
activityIndicator: {
235231
alignItems: 'flex-start',
236232
justifyContent: 'flex-start',

‎package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,9 @@ export const AudioAttachmentUploadPreview = ({
6363

6464
const renderIndicator = useMemo(() => {
6565
if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) {
66-
return <FileUploadInProgressIndicator />;
66+
return (
67+
<FileUploadInProgressIndicator localId={attachment.localMetadata.id} sourceUrl={assetUrl} />
68+
);
6769
}
6870
if (indicatorType === ProgressIndicatorTypes.RETRY) {
6971
return <FileUploadRetryIndicator onPress={onRetryHandler} />;
@@ -72,7 +74,7 @@ export const AudioAttachmentUploadPreview = ({
7274
return <FileUploadNotSupportedIndicator localMetadata={attachment.localMetadata} />;
7375
}
7476
return null;
75-
}, [attachment.localMetadata, indicatorType, onRetryHandler]);
77+
}, [assetUrl, attachment.localMetadata, indicatorType, onRetryHandler]);
7678

7779
return (
7880
<View style={styles.wrapper} testID={'audio-attachment-upload-preview'}>

‎package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React, { useCallback, useMemo } from 'react';
22

33
import { StyleSheet, View } from 'react-native';
44

5-
import { LocalAudioAttachment, LocalFileAttachment, LocalVideoAttachment } from 'stream-chat';
5+
import {
6+
FileReference,
7+
LocalAudioAttachment,
8+
LocalFileAttachment,
9+
LocalVideoAttachment,
10+
} from 'stream-chat';
611

712
import { AttachmentRemoveControl } from './AttachmentRemoveControl';
813

@@ -27,6 +32,8 @@ export const FileAttachmentUploadPreview = ({
2732
removeAttachments,
2833
}: FileAttachmentUploadPreviewProps) => {
2934
const styles = useStyles();
35+
const sourceUrl =
36+
attachment.asset_url ?? (attachment.localMetadata.file as FileReference | undefined)?.uri;
3037
const {
3138
FileUploadInProgressIndicator,
3239
FileUploadRetryIndicator,
@@ -56,7 +63,12 @@ export const FileAttachmentUploadPreview = ({
5663

5764
const renderIndicator = useMemo(() => {
5865
if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) {
59-
return <FileUploadInProgressIndicator />;
66+
return (
67+
<FileUploadInProgressIndicator
68+
localId={attachment.localMetadata.id}
69+
sourceUrl={sourceUrl}
70+
/>
71+
);
6072
}
6173
if (indicatorType === ProgressIndicatorTypes.RETRY) {
6274
return <FileUploadRetryIndicator onPress={onRetryHandler} />;
@@ -72,6 +84,7 @@ export const FileAttachmentUploadPreview = ({
7284
attachment.localMetadata,
7385
indicatorType,
7486
onRetryHandler,
87+
sourceUrl,
7588
]);
7689

7790
return (

‎package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,18 @@ export const ImageAttachmentUploadPreview = ({
2626
const [loading, setLoading] = useState(true);
2727
const { enableOfflineSupport } = useChatContext();
2828
const {
29+
ImageLoadingIndicator,
2930
ImageUploadInProgressIndicator,
3031
ImageUploadRetryIndicator,
3132
ImageUploadNotSupportedIndicator,
3233
} = useComponentsContext();
33-
const indicatorType = loading
34-
? ProgressIndicatorTypes.IN_PROGRESS
35-
: getIndicatorTypeForFileState(attachment.localMetadata.uploadState, enableOfflineSupport);
34+
const indicatorType = getIndicatorTypeForFileState(
35+
attachment.localMetadata.uploadState,
36+
enableOfflineSupport,
37+
);
38+
const previewUri = attachment.localMetadata.previewUri ?? attachment.image_url;
39+
const shouldShowImageLoadingIndicator =
40+
loading && indicatorType !== ProgressIndicatorTypes.IN_PROGRESS;
3641

3742
const {
3843
theme: {
@@ -65,15 +70,21 @@ export const ImageAttachmentUploadPreview = ({
6570
<Image
6671
onError={onErrorHandler}
6772
onLoadEnd={onLoadEndHandler}
68-
source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
73+
source={{ uri: previewUri }}
6974
style={StyleSheet.absoluteFill}
7075
testID={'image-attachment-upload-preview-image'}
7176
/>
72-
{indicatorType === ProgressIndicatorTypes.IN_PROGRESS && <ImageUploadInProgressIndicator />}
73-
{indicatorType === ProgressIndicatorTypes.RETRY && (
77+
{shouldShowImageLoadingIndicator ? <ImageLoadingIndicator /> : null}
78+
{indicatorType === ProgressIndicatorTypes.IN_PROGRESS && (
79+
<ImageUploadInProgressIndicator
80+
localId={attachment.localMetadata.id}
81+
sourceUrl={previewUri}
82+
/>
83+
)}
84+
{!loading && indicatorType === ProgressIndicatorTypes.RETRY && (
7485
<ImageUploadRetryIndicator onRetryHandler={onRetryHandler} />
7586
)}
76-
{indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && (
87+
{!loading && indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && (
7788
<ImageUploadNotSupportedIndicator />
7889
)}
7990
</View>

‎package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const VideoAttachmentUploadPreview = ({
2222
removeAttachments,
2323
}: VideoAttachmentUploadPreviewProps) => {
2424
const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
25+
const shouldShowMetadataPill = attachment.localMetadata.uploadState !== 'uploading';
2526

2627
return previewUri ? (
2728
<>
@@ -38,7 +39,9 @@ export const VideoAttachmentUploadPreview = ({
3839
handleRetry={handleRetry}
3940
removeAttachments={removeAttachments}
4041
/>
41-
<VideoAttachmentMetadataPill duration={attachment.duration} format={'descriptive'} />
42+
{shouldShowMetadataPill ? (
43+
<VideoAttachmentMetadataPill duration={attachment.duration} format={'descriptive'} />
44+
) : null}
4245
</>
4346
) : (
4447
<FileAttachmentUploadPreview

0 commit comments

Comments
 (0)