ADD live update for clip creation time

frontend/src/pages/VideoPlayer.tsx

@@ -3,12 +3,14 @@ import {useParams} from "react-router-dom";
 import type {Clip} from "../utils/types";
 import {getClipById} from "../utils/endpoints.ts";
 import Box from "../components/Box.tsx"
+import {dateToTimeAgo, stringToDate} from "../utils/utils.ts";
 
 const VideoPlayer = () => {
     const { id } = useParams();
-    const [videoUrl, setVideoUrl] = useState<string>("");
+    const [videoUrl, setVideoUrl] = useState<string | undefined>(undefined);
     const [error, setError] = useState<string | null>(null);
     const [clip, setClip] = useState<Clip | null>(null);
+    const [timeAgo, setTimeAgo] = useState<String>("");
 
     useEffect(() => {
         // Fetch the video URL from the server
@@ -33,14 +35,34 @@ const VideoPlayer = () => {
             return;
         }
 
-        getClipById(id).then((fetchedClip) => {setClip(fetchedClip)})
+        getClipById(id)
+            .then((fetchedClip) => {setClip(fetchedClip)})
+            .catch((err) => {
+                console.error("Error fetching clip:", err);
+                setError("Failed to load clip details. Please try again later.");
+            });
 
     }, [id]);
 
+    // Update timeAgo live every second
+    useEffect(() => {
+        if (!clip || !clip.createdAt) return;
+
+        const update = () => {
+            const date = stringToDate(clip.createdAt);
+            setTimeAgo(dateToTimeAgo(date));
+        };
+
+        update(); // initial update
+        const interval = setInterval(update, 1000);
+
+        return () => clearInterval(interval); // cleanup
+    }, [clip]);
+
     return (
-        <div className="video-player">
+        <div className={"w-9/10 m-auto"}>
             <video
-                className="w-full h-full"
+                className={"w-full h-full rounded-lg m-auto"}
                 controls
                 autoPlay
                 src={videoUrl}
@@ -54,8 +76,9 @@ const VideoPlayer = () => {
             {error && <div className="text-red-500 mt-2">{error}</div>}
             {!videoUrl && !error && <div className="text-gray-500 mt-2">Loading video...</div>}
 
-            <Box className={"p-2 m-2"}>
+            <Box className={"p-2 m-2 flex flex-col"}>
-                <p className={"text-2xl font-bold text-gray-600"}>{clip?.title}</p>
+                <p className={"text-2xl font-bold text-gray-600"}>{clip?.title ? clip?.title : "(No Title)"}</p>
+                <p>{timeAgo}</p>
             </Box>
 
         </div>