Hide video title overlays on specific pages for a cleaner display

Add a `hideOverlay` prop to VideoCard component to conditionally render the title overlay. Update FolxStadlPage to utilize this prop.

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/Sy6XHzr
This commit is contained in:
sebastjanartic 2025-08-30 16:33:15 +00:00
parent 18f139a6cd
commit b0ac76dc9d
3 changed files with 5 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 435 KiB

View File

@ -7,6 +7,7 @@ interface VideoCardProps {
video: Video;
onClick: (video: Video) => void;
className?: string;
hideOverlay?: boolean;
}
function formatDuration(seconds: number): string {
@ -42,7 +43,7 @@ function formatDate(date: Date | string): string {
return `${Math.floor(diffDays / 30)} month${Math.floor(diffDays / 30) > 1 ? 's' : ''} ago`;
}
export default function VideoCard({ video, onClick, className = "" }: VideoCardProps) {
export default function VideoCard({ video, onClick, className = "", hideOverlay = false }: VideoCardProps) {
const [isHovered, setIsHovered] = useState(false);
const [showPreview, setShowPreview] = useState(false);
const hoverTimeoutRef = useRef<NodeJS.Timeout>();
@ -210,8 +211,8 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</div>
)}
{/* Title overlay - only show when not playing preview */}
{!showPreview && (
{/* Title overlay - only show when not playing preview and hideOverlay is false */}
{!showPreview && !hideOverlay && (
<div className="absolute bottom-2 left-2 right-2 bg-black/40 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
<div className="truncate font-semibold text-base bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">{video.title}</div>
<div className="text-xs text-gray-300 flex items-center space-x-1 mt-0.5">

View File

@ -108,6 +108,7 @@ export default function FolxStadlPage() {
video={video}
onClick={handleVideoClick}
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
hideOverlay={true}
/>
</div>