feat: display video duration

DIYgod · DIYgod · commit 2234b4b1a681 · 2025-05-18T14:00:14.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/Items/video-item.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/Items/video-item.tsx
@@ -2,6 +2,7 @@ import { isMobile } from "@follow/components/hooks/useMobile.js"
 import { Skeleton } from "@follow/components/ui/skeleton/index.jsx"
 import { IN_ELECTRON } from "@follow/shared/constants"
 import { stopPropagation } from "@follow/utils/dom"
+import { formatDuration } from "@follow/utils/duration"
 import { transformVideoUrl } from "@follow/utils/url-for-video"
 import { cn } from "@follow/utils/utils"
 import { useHover } from "@use-gesture/react"
@@ -77,6 +78,16 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
     }
   }, [hovered])
 
+  const duration = useMemo(() => {
+    const seconds = entry?.entries.attachments?.find(
+      (attachment) => attachment.duration_in_seconds,
+    )?.duration_in_seconds
+    if (seconds) {
+      return formatDuration(Number.parseInt(seconds.toString()))
+    }
+    return 0
+  }, [entry?.entries.attachments])
+
   if (!entry) return null
   return (
     <GridItem entryId={entryId} entryPreview={entryPreview} translation={translation}>
@@ -107,7 +118,7 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
           }
         }}
       >
-        <div className="overflow-x-auto" ref={ref}>
+        <div className="relative overflow-x-auto" ref={ref}>
           {miniIframeSrc && showPreview ? (
             <ViewTag
               src={miniIframeSrc}
@@ -139,6 +150,11 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
               No media available
             </div>
           )}
+          {!!duration && (
+            <div className="absolute bottom-2 right-2 rounded-md bg-black/50 px-1 py-0.5 text-xs font-medium text-white">
+              {duration}
+            </div>
+          )}
         </div>
       </div>
     </GridItem>
diff --git a/apps/mobile/src/modules/entry-list/templates/EntryVideoItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntryVideoItem.tsx
@@ -1,7 +1,7 @@
 import { FeedViewType } from "@follow/constants"
 import { tracker } from "@follow/tracker"
-import { transformVideoUrl } from "@follow/utils"
-import { memo } from "react"
+import { formatDuration, transformVideoUrl } from "@follow/utils"
+import { memo, useMemo } from "react"
 import { Linking, Text, View } from "react-native"
 
 import { getGeneralSettings } from "@/src/atoms/settings/general"
@@ -19,6 +19,16 @@ import { EntryGridFooter } from "../../entry-content/EntryGridFooter"
 export const EntryVideoItem = memo(({ id }: { id: string }) => {
   const item = useEntry(id)
 
+  const duration = useMemo(() => {
+    const seconds = item?.attachments?.find(
+      (attachment) => attachment.duration_in_seconds,
+    )?.duration_in_seconds
+    if (seconds) {
+      return formatDuration(Number.parseInt(seconds.toString()))
+    }
+    return 0
+  }, [item?.attachments])
+
   if (!item) {
     return null
   }
@@ -44,18 +54,25 @@ export const EntryVideoItem = memo(({ id }: { id: string }) => {
             openVideo(item.url)
           }}
         >
-          {imageUrl ? (
-            <Image
-              source={{ uri: imageUrl }}
-              aspectRatio={16 / 9}
-              className="w-full rounded-lg"
-              proxy={{
-                width: 200,
-              }}
-            />
-          ) : (
-            <FallbackMedia />
-          )}
+          <View className="relative">
+            {imageUrl ? (
+              <Image
+                source={{ uri: imageUrl }}
+                aspectRatio={16 / 9}
+                className="w-full rounded-lg"
+                proxy={{
+                  width: 200,
+                }}
+              />
+            ) : (
+              <FallbackMedia />
+            )}
+            {!!duration && (
+              <Text className="absolute bottom-2 right-2 rounded-md bg-black/50 px-1 py-0.5 text-xs font-medium text-white">
+                {duration}
+              </Text>
+            )}
+          </View>
           <EntryGridFooter entryId={id} view={FeedViewType.Videos} />
         </ItemPressable>
       </VideoContextMenu>
diff --git a/packages/internal/utils/exports.ts b/packages/internal/utils/exports.ts
@@ -1,6 +1,7 @@
 export * from "./src/cjk"
 export * from "./src/color"
 export * from "./src/dom"
+export * from "./src/duration"
 export * from "./src/jotai"
 export * from "./src/path-parser"
 export * from "./src/url-for-video"
diff --git a/packages/internal/utils/src/duration.ts b/packages/internal/utils/src/duration.ts
@@ -0,0 +1,19 @@
+/**
+ * format seconds to "MM:SS" or "HH:MM:SS"
+ * @param {number} totalSeconds - 3661
+ * @returns {string}            - "01:01:01"
+ */
+export function formatDuration(totalSeconds: number) {
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+
+  const mm = minutes.toString().padStart(2, "0")
+  const ss = seconds.toString().padStart(2, "0")
+
+  if (hours === 0) {
+    return `${mm}:${ss}` // "MM:SS"
+  }
+  const hh = hours.toString().padStart(2, "0")
+  return `${hh}:${mm}:${ss}` // "HH:MM:SS"
+}
