refactor: change duration type to number for both Asset and File type (…

…#2330)
GetStream · Nov 24, 2023 · 2b13bd5 · 2b13bd5
1 parent 2567900
commit 2b13bd5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx
@@ -75,7 +75,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (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
@@ -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 = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

diff --git 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;