97 lines
3.0 KiB
JavaScript
97 lines
3.0 KiB
JavaScript
/**
|
|
* ArtworkViewer
|
|
*
|
|
* Fullscreen image modal. Opens on image click or keyboard F.
|
|
* Controls: ESC to close, click outside to close.
|
|
*/
|
|
import React, { useEffect, useRef } from 'react';
|
|
|
|
export default function ArtworkViewer({ isOpen, onClose, artwork, presentLg, presentXl }) {
|
|
const dialogRef = useRef(null);
|
|
|
|
// Resolve best quality source
|
|
const imgSrc =
|
|
presentXl?.url ||
|
|
presentLg?.url ||
|
|
artwork?.thumbs?.xl?.url ||
|
|
artwork?.thumbs?.lg?.url ||
|
|
artwork?.thumb ||
|
|
null;
|
|
|
|
// ESC to close
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
function onKey(e) {
|
|
if (e.key === 'Escape') onClose();
|
|
}
|
|
window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, [isOpen, onClose]);
|
|
|
|
// Lock scroll while open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
// Focus the dialog for accessibility
|
|
requestAnimationFrame(() => dialogRef.current?.focus());
|
|
} else {
|
|
document.body.style.overflow = '';
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = '';
|
|
};
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen || !imgSrc) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={dialogRef}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Fullscreen artwork viewer"
|
|
tabIndex={-1}
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm outline-none"
|
|
onClick={onClose}
|
|
>
|
|
{/* Close button */}
|
|
<button
|
|
className="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white/70 ring-1 ring-white/15 transition-colors hover:bg-black/80 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
|
|
onClick={onClose}
|
|
aria-label="Close viewer (Esc)"
|
|
type="button"
|
|
>
|
|
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Image — stopPropagation so clicking image doesn't close modal */}
|
|
<img
|
|
src={imgSrc}
|
|
alt={artwork?.title ?? 'Artwork'}
|
|
className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain shadow-2xl shadow-black/60 select-none"
|
|
onClick={(e) => e.stopPropagation()}
|
|
draggable={false}
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
|
|
{/* Title / author footer */}
|
|
{artwork?.title && (
|
|
<div
|
|
className="absolute bottom-5 left-1/2 -translate-x-1/2 max-w-[70vw] truncate rounded-lg bg-black/65 px-4 py-2 text-center text-sm text-white backdrop-blur-sm"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{artwork.title}
|
|
</div>
|
|
)}
|
|
|
|
{/* ESC hint */}
|
|
<span className="pointer-events-none absolute bottom-5 right-5 text-xs text-white/30 select-none">
|
|
ESC to close
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|