From b19fd50dfabd61461f06e7d7e62737c37f158cee Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Wed, 9 Jul 2025 23:52:45 +0200
Subject: [PATCH] ADD time ago display to VideoCard component

---
 frontend/src/components/video/VideoCard.tsx |  8 +++-
 frontend/src/pages/MyClips.tsx              |  1 +
 frontend/src/utils/utils.ts                 | 46 ++++++++++++++++++++-
 3 files changed, 53 insertions(+), 2 deletions(-)

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)}
                     </p>
+
+                    <p>
+                        {dateToTimeAgo(stringToDate(createdAt))}
+                    </p>
                 </div>
 
 
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