119 lines
3.9 KiB
TypeScript
119 lines
3.9 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { api, type MediaItem } from "../../api/client";
|
|
|
|
interface Props {
|
|
items: MediaItem[];
|
|
onClose: () => void;
|
|
onViewInLibrary: (item: MediaItem) => void;
|
|
}
|
|
|
|
export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Props) {
|
|
const [index, setIndex] = useState(0);
|
|
const [fading, setFading] = useState(false);
|
|
const wheelLock = useRef(false);
|
|
const touchStartY = useRef<number | null>(null);
|
|
|
|
const item = items[index];
|
|
|
|
function go(delta: 1 | -1) {
|
|
if (wheelLock.current) return;
|
|
const next = index + delta;
|
|
if (next < 0 || next >= items.length) return;
|
|
wheelLock.current = true;
|
|
setFading(true);
|
|
setTimeout(() => {
|
|
setIndex(next);
|
|
setFading(false);
|
|
wheelLock.current = false;
|
|
}, 200);
|
|
}
|
|
|
|
useEffect(() => {
|
|
const onWheel = (e: WheelEvent) => { e.deltaY > 0 ? go(1) : go(-1); };
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "ArrowDown" || e.key === " ") { e.preventDefault(); go(1); }
|
|
if (e.key === "ArrowUp") { e.preventDefault(); go(-1); }
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
const onTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY; };
|
|
const onTouchEnd = (e: TouchEvent) => {
|
|
if (touchStartY.current === null) return;
|
|
const delta = touchStartY.current - e.changedTouches[0].clientY;
|
|
if (Math.abs(delta) > 50) delta > 0 ? go(1) : go(-1);
|
|
touchStartY.current = null;
|
|
};
|
|
window.addEventListener("wheel", onWheel, { passive: true });
|
|
window.addEventListener("keydown", onKey);
|
|
window.addEventListener("touchstart", onTouchStart);
|
|
window.addEventListener("touchend", onTouchEnd);
|
|
return () => {
|
|
window.removeEventListener("wheel", onWheel);
|
|
window.removeEventListener("keydown", onKey);
|
|
window.removeEventListener("touchstart", onTouchStart);
|
|
window.removeEventListener("touchend", onTouchEnd);
|
|
};
|
|
}, [index, fading]);
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.95)", zIndex: 200 }} />
|
|
|
|
{/* Media area */}
|
|
<div
|
|
style={{
|
|
position: "fixed", inset: 0, zIndex: 201,
|
|
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
|
|
gap: 12, paddingBottom: 56,
|
|
transition: "opacity 0.2s ease, transform 0.2s ease",
|
|
opacity: fading ? 0 : 1,
|
|
transform: fading ? "translateY(-12px)" : "translateY(0)",
|
|
}}
|
|
>
|
|
{item?.media_type === "image" && (
|
|
<img
|
|
key={item.id}
|
|
src={api.media.fileUrl(item.id)}
|
|
alt={item.filename}
|
|
style={{ maxWidth: "90vw", maxHeight: "82vh", objectFit: "contain" }}
|
|
/>
|
|
)}
|
|
{item?.media_type === "video" && (
|
|
<video
|
|
key={item.id}
|
|
src={api.media.fileUrl(item.id)}
|
|
controls
|
|
autoPlay
|
|
style={{ maxWidth: "90vw", maxHeight: "82vh" }}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div
|
|
style={{
|
|
position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 202,
|
|
display: "flex", alignItems: "center", justifyContent: "space-between",
|
|
padding: "12px 20px", background: "rgba(0,0,0,0.6)",
|
|
}}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
style={{ background: "none", border: "none", color: "#fff", fontSize: 15, cursor: "pointer" }}
|
|
>
|
|
✕ Close
|
|
</button>
|
|
<span style={{ color: "#888", fontSize: 13 }}>
|
|
{index + 1} / {items.length}
|
|
</span>
|
|
<button
|
|
onClick={() => onViewInLibrary(item)}
|
|
style={{ background: "none", border: "none", color: "var(--accent, #60a5fa)", fontSize: 15, cursor: "pointer" }}
|
|
>
|
|
View in Library →
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|