From ef17d8f2562f3358101c9ee336aad929ac317d21 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 16:05:55 +0000
Subject: [PATCH] Adjust video card display on mobile based on current page

Conditionally render elements in VideoCard component based on device type and current URL path to improve mobile user experience on video pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
---
 client/src/components/video-card.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 1a5bb87..7ebba94 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -54,8 +54,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   
-  // Check if device is mobile
+  // Check if device is mobile and if we're on video page
   const isMobile = window.innerWidth < 768;
+  const isVideoPage = window.location.pathname.startsWith('/video/');
 
   // Load mute preference on component mount
   useEffect(() => {
@@ -273,8 +274,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         )}
         
         
-        {/* Desktop gradient overlay with title - hidden on mobile */}
-        {!showPreview && !hideOverlay && !isMobile && (
+        {/* Desktop gradient overlay with title - hidden on mobile video pages */}
+        {!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
           <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
             <div className="w-full">
               <h3 className="text-white font-extrabold text-xl leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
@@ -288,8 +289,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         )}
       </div>
       
-      {/* Mobile info section - below video */}
-      {isMobile && (
+      {/* Mobile info section - below video - only on video pages */}
+      {isMobile && isVideoPage && (
         <div className="mt-3 px-1">
           {/* Full title */}
           <h3 className="text-white font-bold text-base leading-tight mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>