sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display video title and upload date directly on the video card preview

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 14:33:05 +00:00
parent 1a996d1009
commit 72e447505c
1 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/components/video-card.tsx
View File

@ -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>
);
}