192 lines
7.7 KiB
TypeScript
192 lines
7.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
|
|
import { usePanZoom } from '@/hooks/usePanZoom';
|
|
import type { Screenshot } from '@/constants/projects';
|
|
|
|
type ImageViewerProps = {
|
|
items: Screenshot[];
|
|
index: number;
|
|
onIndexChange: (i: number) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
/** Caption to display — falls back to the required `alt` text. */
|
|
const captionOf = (s: Screenshot) => s.caption ?? s.alt;
|
|
|
|
/**
|
|
* Full-bleed fullscreen image viewer with pan / pinch / wheel zoom, keyboard
|
|
* navigation, and a thumbnail rail (vertical on desktop, horizontal at the
|
|
* bottom on mobile). Borrowed from imagelab-gpu's FullscreenImage, trimmed to
|
|
* the parts this portfolio needs — no slideshow.
|
|
*/
|
|
export default function ImageViewer({ items, index, onIndexChange, onClose }: ImageViewerProps) {
|
|
// Natural size is tagged with the index it was measured for, so it reads as
|
|
// null until the *current* image's onLoad fires — no reset effect needed.
|
|
const [sized, setSized] = useState<{ i: number; w: number; h: number } | null>(null);
|
|
const stageRef = useRef<HTMLDivElement>(null);
|
|
const activeThumbRef = useRef<HTMLButtonElement>(null);
|
|
|
|
const len = items.length;
|
|
const item = items[index];
|
|
const prev = () => onIndexChange((index - 1 + len) % len);
|
|
const next = () => onIndexChange((index + 1) % len);
|
|
|
|
const { zoom, offset, reframing, handlers } = usePanZoom(stageRef, {
|
|
resetKey: index,
|
|
onSwipe: (dir) => onIndexChange((index + dir + len) % len),
|
|
onTap: onClose,
|
|
});
|
|
|
|
// Lock body scroll while the viewer is open.
|
|
useEffect(() => {
|
|
const original = document.body.style.overflow;
|
|
document.body.style.overflow = 'hidden';
|
|
return () => { document.body.style.overflow = original; };
|
|
}, []);
|
|
|
|
// Keyboard navigation: arrows to move, Esc to close.
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
else if (e.key === 'ArrowLeft') onIndexChange((index - 1 + len) % len);
|
|
else if (e.key === 'ArrowRight') onIndexChange((index + 1) % len);
|
|
};
|
|
document.addEventListener('keydown', onKey);
|
|
return () => document.removeEventListener('keydown', onKey);
|
|
}, [index, len, onClose, onIndexChange]);
|
|
|
|
// Keep the active thumbnail scrolled into view.
|
|
useEffect(() => {
|
|
activeThumbRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
|
}, [index]);
|
|
|
|
if (!item) return null;
|
|
|
|
const url = item.src;
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[80] flex flex-col overflow-hidden bg-black md:flex-row">
|
|
{/* Ambient backdrop sampled from the current image via heavy blur. */}
|
|
<div className="pointer-events-none absolute inset-0 z-0">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={url}
|
|
alt=""
|
|
aria-hidden
|
|
className="h-full w-full scale-125 object-cover opacity-40"
|
|
style={{ filter: 'blur(60px)' }}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
</div>
|
|
|
|
{/* Stage — owns the pan/zoom gestures. */}
|
|
<div
|
|
ref={stageRef}
|
|
className="relative z-10 min-h-0 flex-1 overflow-hidden"
|
|
style={{ touchAction: 'none' }}
|
|
onWheel={handlers.onWheel}
|
|
onPointerDown={handlers.onPointerDown}
|
|
onPointerMove={handlers.onPointerMove}
|
|
onPointerUp={handlers.onPointerUp}
|
|
onPointerCancel={handlers.onPointerUp}
|
|
onClick={handlers.onClick}
|
|
>
|
|
<div className="pointer-events-none absolute inset-0 flex items-center justify-center p-4">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={url}
|
|
alt={item.alt}
|
|
draggable={false}
|
|
onLoad={(e) => setSized({ i: index, w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })}
|
|
className="max-h-full max-w-full select-none rounded-md shadow-[0_20px_70px_rgba(0,0,0,0.7)]"
|
|
style={{
|
|
transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
|
|
transition: reframing ? 'transform 250ms cubic-bezier(0.22, 1, 0.36, 1)' : undefined,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Prev / next */}
|
|
{len > 1 && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
aria-label="Previous image"
|
|
onClick={(e) => { e.stopPropagation(); prev(); }}
|
|
className="absolute left-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-md transition-colors hover:bg-black/60 hover:text-white"
|
|
>
|
|
<IconChevronLeft size={24} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="Next image"
|
|
onClick={(e) => { e.stopPropagation(); next(); }}
|
|
className="absolute right-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-md transition-colors hover:bg-black/60 hover:text-white"
|
|
>
|
|
<IconChevronRight size={24} />
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{/* Close */}
|
|
<button
|
|
type="button"
|
|
aria-label="Close viewer"
|
|
onClick={(e) => { e.stopPropagation(); onClose(); }}
|
|
className="absolute right-4 top-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-md transition-colors hover:bg-black/60 hover:text-white"
|
|
>
|
|
<IconX size={18} />
|
|
</button>
|
|
|
|
{/* Page counter + dimensions */}
|
|
<div className="pointer-events-none absolute left-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/40 px-3 py-1.5 font-mono text-[12px] text-white/70 backdrop-blur-md">
|
|
<span>{index + 1} / {len}</span>
|
|
</div>
|
|
|
|
{/* Caption */}
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-4 z-10 flex justify-center px-16">
|
|
<p className="max-w-2xl rounded-full bg-black/40 px-4 py-1.5 text-center text-sm text-white/90 backdrop-blur-md">
|
|
{captionOf(item)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Thumbnail rail — horizontal at the bottom on mobile, vertical on the right on desktop. */}
|
|
{len > 1 && (
|
|
<div className="z-10 flex shrink-0 gap-2 overflow-x-auto border-t border-white/10 bg-black/40 p-3 backdrop-blur-md md:w-32 md:flex-col md:overflow-x-visible md:overflow-y-auto md:border-l md:border-t-0">
|
|
{items.map((shot, i) => {
|
|
const isActive = i === index;
|
|
return (
|
|
<button
|
|
key={shot.src}
|
|
ref={isActive ? activeThumbRef : null}
|
|
type="button"
|
|
aria-label={`View ${captionOf(shot)}`}
|
|
aria-current={isActive}
|
|
onClick={() => onIndexChange(i)}
|
|
className={`relative shrink-0 overflow-hidden rounded-md border transition-all md:w-full ${
|
|
isActive
|
|
? 'border-white/80 opacity-100 ring-2 ring-white/60'
|
|
: 'border-white/10 opacity-60 hover:opacity-100'
|
|
}`}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={shot.src}
|
|
alt=""
|
|
aria-hidden
|
|
className="h-16 w-24 object-cover md:h-20 md:w-full"
|
|
/>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|