ADD functionality to retrieve and display clips by ID

frontend/src/pages/VideoPlayer.tsx

@@ -1,10 +1,14 @@
 import {useEffect, useState} from "react";
 import {useParams} from "react-router-dom";
+import type {Clip} from "../utils/types";
+import {getClipById} from "../utils/endpoints.ts";
+import Box from "../components/Box.tsx"
 
 const VideoPlayer = () => {
     const { id } = useParams();
     const [videoUrl, setVideoUrl] = useState<string>("");
     const [error, setError] = useState<string | null>(null);
+    const [clip, setClip] = useState<Clip | null>(null);
 
     useEffect(() => {
         // Fetch the video URL from the server
@@ -23,6 +27,14 @@ const VideoPlayer = () => {
                 console.error("Error fetching video:", err);
                 setError("Failed to load video. Please try again later.");
             });
+
+        if (!id) {
+            setError("Clip ID is required.");
+            return;
+        }
+
+        getClipById(id).then((fetchedClip) => {setClip(fetchedClip)})
+
     }, [id]);
 
     return (
@@ -41,6 +53,11 @@ 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"}>
+                <p className={"text-2xl font-bold text-gray-600"}>{clip?.title}</p>
+            </Box>
+
         </div>
     );
 };

frontend/src/utils/endpoints.ts

@@ -167,6 +167,23 @@ const getClips = async (setError: Function): Promise< Clip[]> => {
     }
 }
 
+const getClipById = async (id: string): Promise<Clip | null> => {
+    try {
+        const response = await fetch(`/api/v1/clips/${id}`, {credentials: "include",});
+
+        if (!response.ok) {
+            console.error('Failed to fetch clip:', response.status);
+            return null;
+        }
+
+        const result: APIResponse = await response.json();
+        return result.data;
+    } catch (error: unknown) {
+        console.error('Error fetching clip:', error);
+        return null;
+    }
+};
+
 export {
     uploadFile,
     editFile,
@@ -174,5 +191,6 @@ export {
     getProgress,
     getMetadata,
     getUser,
-    getClips
+    getClips,
+    getClipById
 };