From 87759c689a0899938930619f26ba24c262d1e1a8 Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Wed, 9 Jul 2025 23:33:31 +0200
Subject: [PATCH] ADD duration overlay to VideoCard

---
 frontend/src/components/video/VideoCard.tsx | 40 +++++++++++++++------
 frontend/src/pages/MyClips.tsx              |  2 +-
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx
index fd90eff..0a5e6a4 100644
--- a/frontend/src/components/video/VideoCard.tsx
+++ b/frontend/src/components/video/VideoCard.tsx
@@ -27,19 +27,37 @@ const VideoCard = ({
     return (
         <Link to={videoPath}>
             <div className={clsx("flex flex-col", className)}>
-                <img
-                    src={imgSrc}
-                    alt="Video Thumbnail"
-                    onError={() => {
-                        if (imgSrc !== fallbackThumbnail) {
-                            setImgSrc(fallbackThumbnail);
-                        }
-                    }}
-                />
+                <div className={"relative inline-block"}>
+                    <img
+                        src={imgSrc}
+                        alt="Video Thumbnail"
+                        onError={() => {
+                            if (imgSrc !== fallbackThumbnail) {
+                                setImgSrc(fallbackThumbnail);
+                            }
+                        }}
+                    />
+
+                    <p className="
+                            absolute
+                            top-2
+                            left-2
+                            bg-black bg-opacity-60
+                            text-white
+                            px-2
+                            py-1
+                            rounded
+                            pointer-events-none
+                            text-sm
+                            z-1
+                          ">
+                        {formatTime(duration)}
+                    </p>
+                </div>
+
 
                 <div className={"flex flex-row justify-between items-center p-2"}>
-                    <p>{title}</p>
-                    <p>{formatTime(duration)}</p>
+                    <p>{title == "" ? "(No Title)" : title}</p>
                 </div>
             </div>
         </Link>
diff --git a/frontend/src/pages/MyClips.tsx b/frontend/src/pages/MyClips.tsx
index f5c1e57..292514e 100644
--- a/frontend/src/pages/MyClips.tsx
+++ b/frontend/src/pages/MyClips.tsx
@@ -20,7 +20,7 @@ const MyClips = () => {
                     duration={clip.duration}
                     thumbnailPath={clip.thumbnailPath}
                     videoPath={clip.videoPath}
-                    className={"w-40 p-5"}
+                    className={"w-40 m-5"}
                 />
             ))}