/** * JTZL_WebIRC_Chat - Image Preview Modal Component * * @package JTZL_WebIRC_Chat * @copyright Copyright (c) 2025, JT. G. * @license GPL-3.0+ * @since 3.1.0 */ import { useState, useEffect, useRef, useCallback, memo } from 'react'; import { createPortal } from 'react-dom'; import type { ImageData } from '../../types/image'; interface ImagePreviewProps { images: ImageData[]; initialIndex: number; isOpen: boolean; onClose: () => void; } /** * Format file size for display. * * @since 3.1.0 */ function formatFileSize(bytes: number): string { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } /** * ImagePreview modal component for full-size image viewing. * * @since 3.1.0 */ export const ImagePreview = memo( ({ images, initialIndex, isOpen, onClose }: ImagePreviewProps) => { const [currentIndex, setCurrentIndex] = useState(initialIndex); const [zoom, setZoom] = useState(1); const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); const imageRef = useRef(null); const containerRef = useRef(null); const touchStartRef = useRef<{ x: number; y: number } | null>(null); const touchDistanceRef = useRef(0); // Reset state when modal opens or index changes. useEffect(() => { if (isOpen) { setCurrentIndex(initialIndex); setZoom(1); setIsLoading(true); setHasError(false); } }, [isOpen, initialIndex]); // Handle keyboard navigation. useEffect(() => { if (!isOpen) return; const handleKeyDown = (e: KeyboardEvent) => { switch (e.key) { case 'Escape': onClose(); break; case 'ArrowLeft': e.preventDefault(); handlePrevious(); break; case 'ArrowRight': e.preventDefault(); handleNext(); break; case '+': case '=': e.preventDefault(); handleZoomIn(); break; case '-': e.preventDefault(); handleZoomOut(); break; case '0': e.preventDefault(); setZoom(1); break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isOpen, currentIndex, images.length, onClose]); // Prevent body scroll when modal is open. useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [isOpen]); const handlePrevious = useCallback(() => { setCurrentIndex((prev) => { const newIndex = prev > 0 ? prev - 1 : images.length - 1; setIsLoading(true); setHasError(false); setZoom(1); return newIndex; }); }, [images.length]); const handleNext = useCallback(() => { setCurrentIndex((prev) => { const newIndex = prev < images.length - 1 ? prev + 1 : 0; setIsLoading(true); setHasError(false); setZoom(1); return newIndex; }); }, [images.length]); const handleZoomIn = useCallback(() => { setZoom((prev) => Math.min(prev + 0.25, 3)); }, []); const handleZoomOut = useCallback(() => { setZoom((prev) => Math.max(prev - 0.25, 0.5)); }, []); const handleImageLoad = () => { setIsLoading(false); }; const handleImageError = () => { setIsLoading(false); setHasError(true); }; const handleBackdropClick = (e: React.MouseEvent) => { if (e.target === e.currentTarget) { onClose(); } }; const handleBackdropKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Escape') { onClose(); } }; /** * Handle touch start for swipe gestures. * * @since 3.1.0 */ const handleTouchStart = useCallback((e: React.TouchEvent) => { if (e.touches.length === 1) { touchStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY, }; } else if (e.touches.length === 2) { // Calculate initial distance for pinch zoom. const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; touchDistanceRef.current = Math.sqrt(dx * dx + dy * dy); } }, []); /** * Handle touch move for swipe and pinch gestures. * * @since 3.1.0 */ const handleTouchMove = useCallback((e: React.TouchEvent) => { if (e.touches.length === 2) { // Handle pinch zoom. e.preventDefault(); const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; const distance = Math.sqrt(dx * dx + dy * dy); if (touchDistanceRef.current > 0) { const scale = distance / touchDistanceRef.current; setZoom((prev) => Math.max(0.5, Math.min(3, prev * scale))); } touchDistanceRef.current = distance; } }, []); /** * Handle touch end for swipe navigation. * * @since 3.1.0 */ const handleTouchEnd = useCallback( (e: React.TouchEvent) => { if (e.changedTouches.length === 1 && touchStartRef.current) { const touchEnd = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY, }; const dx = touchEnd.x - touchStartRef.current.x; const dy = touchEnd.y - touchStartRef.current.y; // Only trigger swipe if horizontal movement is significant. if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) { if (dx > 0) { handlePrevious(); } else { handleNext(); } } touchStartRef.current = null; } touchDistanceRef.current = 0; }, [handleNext, handlePrevious] ); if (!isOpen) return null; const currentImage = images[currentIndex]; const showNavigation = images.length > 1; const modalContent = ( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions