ADD duration overlay to VideoCard

frontend/src/components/video/VideoCard.tsx

@@ -27,6 +27,7 @@ const VideoCard = ({
     return (
         <Link to={videoPath}>
             <div className={clsx("flex flex-col", className)}>
+                <div className={"relative inline-block"}>
                     <img
                         src={imgSrc}
                         alt="Video Thumbnail"
@@ -37,9 +38,26 @@ const VideoCard = ({
                         }}
                     />
 
+                    <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>

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"}
                 />
             ))}