From 72e447505c37fc11848c39808180b7c9def017f0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 14:33:05 +0000
Subject: [PATCH] Display video title and upload date directly on the video
 card preview

Update `VideoCard` component to overlay video title, view count, and upload date above the duration badge. Removes redundant title and metadata from below the preview.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/DVZN4Rp
---
 client/src/components/video-card.tsx | 31 +++++++++++-----------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index be982e0..d19e8b4 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -122,7 +122,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className={`video-card transition-transform duration-200 hover:scale-[1.02] p-3 ${className}`}
+      className={`video-card transition-transform duration-200 hover:scale-[1.02] ${className}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onTouchStart={() => setIsHovered(true)}
@@ -130,7 +130,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
     >
       {/* Video preview container */}
       <div 
-        className="relative gradient-card rounded-xl overflow-hidden mb-4 aspect-[16/9] cursor-pointer group"
+        className="relative gradient-card rounded-xl overflow-hidden aspect-[16/9] cursor-pointer group"
         onClick={() => onClick?.(video)}
       >
         {/* Static thumbnail - always visible */}
@@ -205,6 +205,16 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
           </div>
         )}
         
+        {/* Title overlay - positioned above duration */}
+        <div className="absolute bottom-8 left-2 right-14 bg-black/70 text-white text-sm px-2 py-1 rounded z-10">
+          <div className="truncate font-medium">{video.title}</div>
+          <div className="text-xs text-white/80 flex items-center space-x-2">
+            <span>{formatViews(video.views)}</span>
+            <span>•</span>
+            <span>{formatDate(video.createdAt)}</span>
+          </div>
+        </div>
+        
         {/* Duration badge */}
         <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded z-10">
           {formatDuration(video.duration)}
@@ -212,23 +222,6 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         
       </div>
       
-      <div className="space-y-2">
-        <h3 
-          className="font-semibold line-clamp-1 hover:text-bunny-blue transition-colors text-bunny-light cursor-pointer text-sm truncate"
-          onClick={() => onClick?.(video)}
-          data-testid={`text-title-${video.id}`}
-        >
-          {video.title}
-        </h3>
-        <div className="flex items-center space-x-3 text-sm text-bunny-muted">
-          <span data-testid={`text-views-${video.id}`}>
-            {formatViews(video.views)}
-          </span>
-          <span data-testid={`text-date-${video.id}`}>
-            {formatDate(video.createdAt)}
-          </span>
-        </div>
-      </div>
     </div>
   );
 }