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

Improve mobile responsiveness for video cards and page layouts

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-02 16:10:12 +00:00
parent ef17d8f256
commit 98a6f4860e
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,15 +48,31 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
const [showPreview, setShowPreview] = useState(false); const [showPreview, setShowPreview] = useState(false);
const [isMuted, setIsMuted] = useState(true); const [isMuted, setIsMuted] = useState(true);
const [showMoreInfo, setShowMoreInfo] = useState(false); const [showMoreInfo, setShowMoreInfo] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [isVideoPage, setIsVideoPage] = useState(false);
const hoverTimeoutRef = useRef<NodeJS.Timeout>(); const hoverTimeoutRef = useRef<NodeJS.Timeout>();
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<Hls | null>(null); const hlsRef = useRef<Hls | null>(null);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0); const [duration, setDuration] = useState(0);
// Check if device is mobile and if we're on video page // Check device type and page location
const isMobile = window.innerWidth < 768; useEffect(() => {
const isVideoPage = window.location.pathname.startsWith('/video/'); 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 // Load mute preference on component mount
useEffect(() => { useEffect(() => {