Skip to content

Commit 62cd53f

Browse files
szuperazszuperaz
committed
feat: add FileSizeIndicator to ComponentContext
1 parent 4b51412 commit 62cd53f

File tree

7 files changed

+59
-41
lines changed

7 files changed

+59
-41
lines changed

‎src/components/Attachment/Audio.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import type { Attachment } from 'stream-chat';
33

4-
import { FileSizeIndicator } from './components';
4+
import { FileSizeIndicator as DefaultFileSizeIndicator } from './components';
55
import type { AudioPlayerState } from '../AudioPlayback/AudioPlayer';
66
import { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';
77
import { useStateStore } from '../../store';
8-
import { useMessageContext } from '../../context';
8+
import { useComponentContext, useMessageContext } from '../../context';
99
import type { AudioPlayer } from '../AudioPlayback/AudioPlayer';
1010
import { PlayButton } from '../Button/PlayButton';
1111
import { FileIcon } from '../FileIcon';
@@ -17,6 +17,7 @@ type AudioAttachmentUIProps = {
1717

1818
// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI
1919
const AudioAttachmentUI = ({ audioPlayer }: AudioAttachmentUIProps) => {
20+
const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();
2021
const dataTestId = 'audio-widget';
2122
const rootClassName = 'str-chat__message-attachment-audio-widget';
2223

‎src/components/Attachment/FileAttachment.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import { useComponentContext } from '../../context/ComponentContext';
33
import { FileIcon } from '../FileIcon';
44
import type { Attachment } from 'stream-chat';
55

6-
import { FileSizeIndicator } from './components';
6+
import { FileSizeIndicator as DefaultFileSizeIndicator } from './components';
77

88
export type FileAttachmentProps = {
99
attachment: Attachment;
1010
};
1111

1212
export const FileAttachment = ({ attachment }: FileAttachmentProps) => {
13-
const { AttachmentFileIcon } = useComponentContext();
13+
const { AttachmentFileIcon, FileSizeIndicator = DefaultFileSizeIndicator } =
14+
useComponentContext();
1415
const FileIconComponent = AttachmentFileIcon ?? FileIcon;
1516
return (
1617
<div

‎src/components/Attachment/VoiceRecording.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React from 'react';
22
import type { Attachment } from 'stream-chat';
33

4-
import { FileSizeIndicator } from './components';
4+
import { FileSizeIndicator as DefaultFileSizeIndicator } from './components';
55
import { FileIcon } from '../FileIcon';
6-
import { useMessageContext, useTranslationContext } from '../../context';
6+
import {
7+
useComponentContext,
8+
useMessageContext,
9+
useTranslationContext,
10+
} from '../../context';
711
import {
812
type AudioPlayer,
913
type AudioPlayerState,
@@ -32,6 +36,7 @@ type VoiceRecordingPlayerUIProps = {
3236

3337
// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI
3438
const VoiceRecordingPlayerUI = ({ audioPlayer }: VoiceRecordingPlayerUIProps) => {
39+
const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();
3540
const {
3641
canPlayRecord,
3742
durationSeconds,
@@ -130,31 +135,32 @@ export const VoiceRecordingPlayer = ({
130135

131136
export type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;
132137

133-
export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => (
134-
// const { t } = useTranslationContext();
135-
// const title = attachment.title || t('Voice message');
136-
<div className={rootClassName} data-testid='quoted-voice-recording-widget'>
137-
<div className='str-chat__message-attachment__voice-recording-widget__metadata'>
138-
<div className='str-chat__message-attachment__voice-recording-widget__audio-state'>
139-
<div className='str-chat__message-attachment__voice-recording-widget__timer'>
140-
{attachment.duration ? (
141-
<DurationDisplay
142-
duration={attachment.duration}
143-
isPlaying={false}
144-
secondsElapsed={undefined}
145-
/>
146-
) : (
147-
<FileSizeIndicator
148-
fileSize={attachment.file_size}
149-
maximumFractionDigits={0}
150-
/>
151-
)}
138+
export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {
139+
const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();
140+
return (
141+
<div className={rootClassName} data-testid='quoted-voice-recording-widget'>
142+
<div className='str-chat__message-attachment__voice-recording-widget__metadata'>
143+
<div className='str-chat__message-attachment__voice-recording-widget__audio-state'>
144+
<div className='str-chat__message-attachment__voice-recording-widget__timer'>
145+
{attachment.duration ? (
146+
<DurationDisplay
147+
duration={attachment.duration}
148+
isPlaying={false}
149+
secondsElapsed={undefined}
150+
/>
151+
) : (
152+
<FileSizeIndicator
153+
fileSize={attachment.file_size}
154+
maximumFractionDigits={0}
155+
/>
156+
)}
157+
</div>
152158
</div>
153159
</div>
160+
<FileIcon mimeType={attachment.mime_type} />
154161
</div>
155-
<FileIcon mimeType={attachment.mime_type} />
156-
</div>
157-
);
162+
);
163+
};
158164

159165
export type VoiceRecordingProps = {
160166
/** The attachment object from the message's attachment list. */

‎src/components/Attachment/components/FileSizeIndicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { prettifyFileSize } from '../../MessageComposer/hooks/utils';
33

4-
type FileSizeIndicatorProps = {
4+
export type FileSizeIndicatorProps = {
55
/** file size in byte */
66
fileSize?: number | string;
77
/**

‎src/components/Loading/UploadedSizeIndicator.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

3-
import { FileSizeIndicator } from '../Attachment';
3+
import { useComponentContext } from '../../context';
4+
import { FileSizeIndicator as DefaultFileSizeIndicator } from '../Attachment/components/FileSizeIndicator';
45

56
export type UploadedSizeIndicatorProps = {
67
fullBytes: number;
@@ -10,12 +11,15 @@ export type UploadedSizeIndicatorProps = {
1011
export const UploadedSizeIndicator = ({
1112
fullBytes,
1213
uploadedBytes,
13-
}: UploadedSizeIndicatorProps) => (
14-
<div
15-
className='str-chat__attachment-preview-file__upload-size-fraction'
16-
data-testid='upload-size-fraction'
17-
>
18-
<FileSizeIndicator fileSize={uploadedBytes} /> {` / `}
19-
<FileSizeIndicator fileSize={fullBytes} />
20-
</div>
21-
);
14+
}: UploadedSizeIndicatorProps) => {
15+
const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();
16+
return (
17+
<div
18+
className='str-chat__attachment-preview-file__upload-size-fraction'
19+
data-testid='upload-size-fraction'
20+
>
21+
<FileSizeIndicator fileSize={uploadedBytes} /> {` / `}
22+
<FileSizeIndicator fileSize={fullBytes} />
23+
</div>
24+
);
25+
};

‎src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { useComponentContext } from '../../../context';
4-
import { FileSizeIndicator } from '../../Attachment';
4+
import { FileSizeIndicator as DefaultFileSizeIndicator } from '../../Attachment/components/FileSizeIndicator';
55
import { UploadedSizeIndicator as DefaultUploadedSizeIndicator } from '../../Loading/UploadedSizeIndicator';
66

77
function resolveAttachmentFullByteSize(attachment: {
@@ -35,7 +35,10 @@ export type AttachmentUploadedSizeIndicatorProps = {
3535
export const AttachmentUploadedSizeIndicator = ({
3636
attachment,
3737
}: AttachmentUploadedSizeIndicatorProps) => {
38-
const { UploadedSizeIndicator = DefaultUploadedSizeIndicator } = useComponentContext();
38+
const {
39+
FileSizeIndicator = DefaultFileSizeIndicator,
40+
UploadedSizeIndicator = DefaultUploadedSizeIndicator,
41+
} = useComponentContext();
3942
const { uploadProgress, uploadState } = attachment.localMetadata ?? {};
4043
const fullBytes = resolveAttachmentFullByteSize(attachment);
4144
const uploaded =

‎src/context/ComponentContext.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ import type { StopAIGenerationButtonProps } from '../components/MessageComposer/
7373
import type { VideoPlayerProps } from '../components/VideoPlayer';
7474
import type { EditedMessagePreviewProps } from '../components/MessageComposer/EditedMessagePreview';
7575
import type { FileIconProps } from '../components/FileIcon/FileIcon';
76+
import type { FileSizeIndicatorProps } from '../components/Attachment/components/FileSizeIndicator';
7677
import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
7778
import type { ProgressIndicatorProps } from '../components/Loading/progress-indicators';
7879
import type { UploadedSizeIndicatorProps } from '../components/Loading/UploadedSizeIndicator';
@@ -126,6 +127,8 @@ export type ComponentContextValue = {
126127
DateSeparator?: React.ComponentType<DateSeparatorProps>;
127128
/** Custom UI component to display the contents on file drag-and-drop overlay, defaults to and accepts same props as: [FileDragAndDropContent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/WithDragAndDropUpload.tsx) */
128129
FileDragAndDropContent?: React.ComponentType<FileDragAndDropContentProps>;
130+
/** Custom UI component to display a formatted file byte size (message attachments, upload previews), defaults to and accepts same props as: [FileSizeIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/components/FileSizeIndicator.tsx) */
131+
FileSizeIndicator?: React.ComponentType<FileSizeIndicatorProps>;
129132
/** Custom UI component to override default preview of edited message, defaults to and accepts same props as: [EditedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/EditedMessagePreview.tsx) */
130133
EditedMessagePreview?: React.ComponentType<EditedMessagePreviewProps>;
131134
/** Custom UI component for rendering button with emoji picker in MessageComposer */

0 commit comments

Comments
 (0)