diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx index 0a5e6a4..f288887 100644 --- a/frontend/src/components/video/VideoCard.tsx +++ b/frontend/src/components/video/VideoCard.tsx @@ -1,5 +1,5 @@ import clsx from "clsx"; -import { formatTime } from "../../utils/utils.ts"; +import { formatTime, stringToDate, dateToTimeAgo } from "../../utils/utils.ts"; import { Link } from "react-router-dom"; import { useState } from "react"; @@ -8,6 +8,7 @@ type VideoCardProps = { duration: number, thumbnailPath: string | null, videoPath: string, + createdAt: string, className?: string } @@ -18,6 +19,7 @@ const VideoCard = ({ duration, thumbnailPath, videoPath, + createdAt, className }: VideoCardProps) => { @@ -53,6 +55,10 @@ const VideoCard = ({ "> {formatTime(duration)}
+ ++ {dateToTimeAgo(stringToDate(createdAt))} +
diff --git a/frontend/src/pages/MyClips.tsx b/frontend/src/pages/MyClips.tsx index 292514e..cae90a1 100644 --- a/frontend/src/pages/MyClips.tsx +++ b/frontend/src/pages/MyClips.tsx @@ -20,6 +20,7 @@ const MyClips = () => { duration={clip.duration} thumbnailPath={clip.thumbnailPath} videoPath={clip.videoPath} + createdAt={clip.createdAt} className={"w-40 m-5"} /> ))} diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts index 5a56bf7..818d042 100644 --- a/frontend/src/utils/utils.ts +++ b/frontend/src/utils/utils.ts @@ -12,6 +12,50 @@ function formatTime(seconds: number): string { } } +function stringToDate(dateString: string): Date { + const validIso = dateString.substring(0, 23); + const date = new Date(validIso); + if (isNaN(date.getTime())) { + throw new Error("Invalid date string"); + } + return date; +} + +function dateToTimeAgo(date: Date): string { + const now = new Date(); + const secondsAgo = Math.floor((now.getTime() - date.getTime()) / 1000); + + if (secondsAgo < 60) { + return `${secondsAgo} seconds ago`; + } else if (secondsAgo < 3600) { + const minutes = Math.floor(secondsAgo / 60); + + if (minutes === 1) { + return "1 minute ago"; + } + + return `${minutes} minutes ago`; + } else if (secondsAgo < 86400) { + const hours = Math.floor(secondsAgo / 3600); + + if (hours === 1) { + return "1 hour ago"; + } + + return `${hours} hours ago`; + } else { + const days = Math.floor(secondsAgo / 86400); + + if (days === 1) { + return "1 day ago"; + } + + return `${days} days ago`; + } +} + export { - formatTime + formatTime, + stringToDate, + dateToTimeAgo } \ No newline at end of file