From a74ab9ee0a15943b6f189c40cf9bc2e0d718f29c Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sun, 17 May 2026 21:06:13 +0100
Subject: [PATCH] fix(frontend): missing URL prefixes

---
 frontend/src/components/video/VideoCard.tsx | 3 ++-
 frontend/src/pages/ClipEdit.tsx             | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx
index ffc2ab1..5b7a06e 100644
--- a/frontend/src/components/video/VideoCard.tsx
+++ b/frontend/src/components/video/VideoCard.tsx
@@ -13,6 +13,7 @@ type VideoCardProps = {
 }
 
 const fallbackThumbnail = "../../../public/default_thumbnail.png";
+const API_URL = import.meta.env.VITE_API_URL;
 
 const VideoCard = ({
                        id,
@@ -45,7 +46,7 @@ const VideoCard = ({
             <div className={clsx("flex flex-col", className)}>
                 <div className={"relative inline-block"}>
                     <img
-                        src={thumbnailAvailable ? `/api/v1/download/thumbnail/${id}` : fallbackThumbnail}
+                        src={thumbnailAvailable ? API_URL + `/api/v1/download/thumbnail/${id}` : fallbackThumbnail}
                         alt="Video Thumbnail"
                     />
 
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index f9b3fad..ffc9814 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -10,10 +10,12 @@ import type { VideoMetadata } from "../utils/types.ts";
 import Box from "../components/Box.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";
 
+const API_URL = import.meta.env.VITE_API_URL;
+
 const ClipEdit = () => {
     const { id } = useParams();
     const videoRef = useRef<HTMLVideoElement | null>(null);
-    const videoUrl = `/api/v1/download/input/${id}`
+    const videoUrl = API_URL + `/api/v1/download/input/${id}`
     const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
     const [playbackValue, setPlaybackValue] = useState(0);
     const [outputMetadata, setOutputMetadata] = useState<VideoMetadata>({
@@ -65,7 +67,7 @@ const ClipEdit = () => {
     }
 
     const handleDownload = async () => {
-        const response = await fetch(`/api/v1/download/output/${id}`);
+        const response = await fetch(API_URL + `/api/v1/download/output/${id}`);
 
         if (!response.ok) {
             console.error('Download failed');