diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx index 62ec9be735..9c8ab31630 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx @@ -75,7 +75,7 @@ const AttachmentVideo: React.FC = (props) => { return [ ...files, { - duration: durationLabel, + duration: asset.duration, id: asset.id, mimeType, name: asset.name, diff --git a/package/src/components/MessageInput/FileUploadPreview.tsx b/package/src/components/MessageInput/FileUploadPreview.tsx index 3d13227d2d..a141223cb5 100644 --- a/package/src/components/MessageInput/FileUploadPreview.tsx +++ b/package/src/components/MessageInput/FileUploadPreview.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import dayjs from 'dayjs'; + import { UploadProgressIndicator } from './UploadProgressIndicator'; import { ChatContextValue, useChatContext } from '../../contexts'; @@ -101,6 +103,19 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({ }, } = useTheme(); + const ONE_HOUR_IN_SECONDS = 3600; + let durationLabel = '00:00'; + const videoDuration = item.file.duration; + + if (videoDuration) { + const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1; + const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss'; + const formattedVideoDuration = dayjs + .duration(videoDuration, 'second') + .format(formattedDurationParam); + durationLabel = formattedVideoDuration; + } + const { t } = useTranslationContext(); return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? ( @@ -117,7 +132,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({ ) : ( - {item.file.duration || getFileSizeDisplayText(item.file.size)} + {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)} ); }; diff --git a/package/src/types/types.ts b/package/src/types/types.ts index 0c6c1a5f50..3810db34c8 100644 --- a/package/src/types/types.ts +++ b/package/src/types/types.ts @@ -1,7 +1,7 @@ import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat'; export type Asset = { - duration: number | null; + duration: number; height: number; name: string; source: 'camera' | 'picker'; @@ -14,7 +14,7 @@ export type Asset = { export type File = { name: string; - duration?: string | null; + duration?: number; id?: string; mimeType?: string; size?: number;