From 98a6f4860e2909303382675f882558cfe8309ad5 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 16:10:12 +0000
Subject: [PATCH] Improve mobile responsiveness for video cards and page
 layouts

Refactor client-side logic in `video-card.tsx` to dynamically detect mobile devices and video page presence using `useState` and `useEffect` hooks, improving responsiveness and handling navigation changes.

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 | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 7ebba94..31742a3 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -48,15 +48,31 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   const [showPreview, setShowPreview] = useState(false);
   const [isMuted, setIsMuted] = useState(true);
   const [showMoreInfo, setShowMoreInfo] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isVideoPage, setIsVideoPage] = useState(false);
   const hoverTimeoutRef = useRef<NodeJS.Timeout>();
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   
-  // Check if device is mobile and if we're on video page
-  const isMobile = window.innerWidth < 768;
-  const isVideoPage = window.location.pathname.startsWith('/video/');
+  // Check device type and page location
+  useEffect(() => {
+    const checkDevice = () => {
+      setIsMobile(window.innerWidth < 768);
+      setIsVideoPage(window.location.pathname.startsWith('/video/'));
+    };
+    
+    checkDevice(); // Initial check
+    
+    window.addEventListener('resize', checkDevice);
+    window.addEventListener('popstate', checkDevice);
+    
+    return () => {
+      window.removeEventListener('resize', checkDevice);
+      window.removeEventListener('popstate', checkDevice);
+    };
+  }, []);
 
   // Load mute preference on component mount
   useEffect(() => {