refactor(frontend): move media blob fetch function to endpoint file

frontend/src/pages/VideoPlayer.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from "react";
 import {useParams} from "react-router-dom";
 import type {Clip} from "../utils/types";
-import {getClipById} from "../utils/endpoints.ts";
+import {getClipById, getVideoBlob  } from "../utils/endpoints.ts";
 import Box from "../components/Box.tsx"
 import {dateToTimeAgo, stringToDate} from "../utils/utils.ts";
 
@@ -13,28 +13,18 @@ const VideoPlayer = () => {
     const [timeAgo, setTimeAgo] = useState<String>("");
 
     useEffect(() => {
-        // Fetch the video URL from the server
-        fetch(`/api/v1/download/clip/${id}`)
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error("Failed to load video");
-                }
-                return response.blob();
-            })
-            .then(blob => {
-                const url = URL.createObjectURL(blob);
-                setVideoUrl(url);
-            })
-            .catch(err => {
-                console.error("Error fetching video:", err);
-                setError("Failed to load video. Please try again later.");
-            });
-
         if (!id) {
             setError("Clip ID is required.");
             return;
         }
 
+        getVideoBlob(id)
+            .then((blob) => {
+                const url = URL.createObjectURL(blob);
+                setVideoUrl(url);
+            })
+
+
         getClipById(id)
             .then((fetchedClip) => {setClip(fetchedClip)})
             .catch((err) => {

frontend/src/utils/endpoints.ts

@@ -239,6 +239,20 @@ const getClipById = async (id: string): Promise<Clip | null> => {
     }
 };
 
+const getVideoBlob = async(id: string): Promise<Blob> => {
+    const response = await fetch(API_URL + `/api/v1/download/clip/${id}`, {credentials: "include",});
+    
+    if (!response.ok) {
+        throw new Error(`Failed to fetch video: ${id}: ${response.status}`)
+    }
+
+    try {
+        return response.blob();
+    } catch {
+        throw new Error(`Failed to convert Clip Return Object to blob`);
+    }
+}
+
 const isThumbnailAvailable = async (id: number): Promise<boolean> => {
     const response = await fetch(API_URL + `/api/v1/download/thumbnail/${id}`, {credentials: "include"});
     if (!response.ok) {
@@ -260,5 +274,6 @@ export {
     getUser,
     getClips,
     getClipById,
+    getVideoBlob,
     isThumbnailAvailable
 };