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

Adjust video card display on mobile based on current page

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-02 16:05:55 +00:00
parent e790b679fc
commit ef17d8f256
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'}}>