216 lines
8.1 KiB
TypeScript
216 lines
8.1 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { api, type BrowseEntry, type MediaItem } from "../../api/client";
|
||
import TagPanel from "../TagPanel/TagPanel";
|
||
|
||
interface Props {
|
||
mediaId: number;
|
||
siblings: BrowseEntry[];
|
||
onClose: () => void;
|
||
onNavigate: (id: number) => void;
|
||
}
|
||
|
||
export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
|
||
const TAG_PANEL_WIDTH = 260;
|
||
const EDGE_GAP = 16;
|
||
const BASE_CARD_TRANSFORM = "translate(-50%, -50%)";
|
||
const [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
|
||
const touchStartX = useRef<number | null>(null);
|
||
const touchStartY = useRef<number | null>(null);
|
||
const swipeAxis = useRef<"horizontal" | "vertical" | null>(null);
|
||
const contentRef = useRef<HTMLDivElement>(null);
|
||
|
||
const { data: item } = useQuery<MediaItem>({
|
||
queryKey: ["media", mediaId],
|
||
queryFn: () => api.media.get(mediaId),
|
||
});
|
||
|
||
const mediaSiblings = siblings.filter((e) => e.media_item_id != null);
|
||
const currentIndex = mediaSiblings.findIndex((e) => e.media_item_id === mediaId);
|
||
const prevId = currentIndex > 0 ? mediaSiblings[currentIndex - 1].media_item_id : null;
|
||
const nextId = currentIndex < mediaSiblings.length - 1 ? mediaSiblings[currentIndex + 1].media_item_id : null;
|
||
const cardCenterX = showTags ? `calc((100vw - ${TAG_PANEL_WIDTH}px) / 2)` : "50%";
|
||
|
||
// Clear inline styles when a new item loads so the card appears cleanly
|
||
useEffect(() => {
|
||
if (contentRef.current) {
|
||
contentRef.current.style.transition = "";
|
||
contentRef.current.style.transform = BASE_CARD_TRANSFORM;
|
||
contentRef.current.style.opacity = "1";
|
||
}
|
||
}, [mediaId, BASE_CARD_TRANSFORM]);
|
||
|
||
useEffect(() => {
|
||
function onKey(e: KeyboardEvent) {
|
||
if (e.key === "Escape") onClose();
|
||
if (e.key === "ArrowLeft" && prevId) onNavigate(prevId);
|
||
if (e.key === "ArrowRight" && nextId) onNavigate(nextId);
|
||
}
|
||
|
||
const onTouchStart = (e: TouchEvent) => {
|
||
touchStartX.current = e.touches[0].clientX;
|
||
touchStartY.current = e.touches[0].clientY;
|
||
swipeAxis.current = null;
|
||
if (contentRef.current) contentRef.current.style.transition = "none";
|
||
};
|
||
|
||
const onTouchMove = (e: TouchEvent) => {
|
||
if (touchStartX.current === null || touchStartY.current === null) return;
|
||
const dx = e.touches[0].clientX - touchStartX.current;
|
||
const dy = e.touches[0].clientY - touchStartY.current;
|
||
|
||
// Commit to an axis on the first significant movement
|
||
if (swipeAxis.current === null && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) {
|
||
swipeAxis.current = Math.abs(dx) >= Math.abs(dy) ? "horizontal" : "vertical";
|
||
}
|
||
|
||
// Vertical gestures (tag panel scroll, etc.) pass through untouched
|
||
if (swipeAxis.current !== "horizontal") return;
|
||
|
||
e.preventDefault();
|
||
if (!contentRef.current) return;
|
||
contentRef.current.style.transform = `translate(calc(-50% + ${dx}px), -50%)`;
|
||
contentRef.current.style.opacity = String(Math.max(0.4, 1 - Math.abs(dx) / 400));
|
||
};
|
||
|
||
const onTouchEnd = (e: TouchEvent) => {
|
||
if (touchStartX.current === null) return;
|
||
const delta = touchStartX.current - e.changedTouches[0].clientX;
|
||
touchStartX.current = null;
|
||
touchStartY.current = null;
|
||
|
||
// Non-horizontal gesture: just reset the transition we disabled on touchstart
|
||
if (swipeAxis.current !== "horizontal") {
|
||
swipeAxis.current = null;
|
||
if (contentRef.current) {
|
||
contentRef.current.style.transition = "";
|
||
contentRef.current.style.transform = BASE_CARD_TRANSFORM;
|
||
contentRef.current.style.opacity = "1";
|
||
}
|
||
return;
|
||
}
|
||
swipeAxis.current = null;
|
||
|
||
const targetId = delta > 0 ? nextId : prevId;
|
||
|
||
if (Math.abs(delta) > 80 && targetId) {
|
||
const el = contentRef.current;
|
||
if (el) {
|
||
const slideX = delta > 0 ? -120 : 120;
|
||
el.style.transition = "opacity 0.2s ease, transform 0.2s ease";
|
||
el.style.transform = `translate(calc(-50% + ${slideX}px), -50%)`;
|
||
el.style.opacity = "0";
|
||
setTimeout(() => onNavigate(targetId), 200);
|
||
} else {
|
||
onNavigate(targetId);
|
||
}
|
||
} else {
|
||
// Snap back to center
|
||
const el = contentRef.current;
|
||
if (el) {
|
||
el.style.transition = "opacity 0.25s ease, transform 0.25s ease";
|
||
el.style.transform = "translate(-50%, -50%)";
|
||
el.style.opacity = "1";
|
||
setTimeout(() => {
|
||
if (contentRef.current) {
|
||
contentRef.current.style.transition = "";
|
||
contentRef.current.style.transform = BASE_CARD_TRANSFORM;
|
||
contentRef.current.style.opacity = "1";
|
||
}
|
||
}, 260);
|
||
}
|
||
}
|
||
};
|
||
|
||
window.addEventListener("keydown", onKey);
|
||
window.addEventListener("touchstart", onTouchStart);
|
||
window.addEventListener("touchmove", onTouchMove, { passive: false });
|
||
window.addEventListener("touchend", onTouchEnd);
|
||
return () => {
|
||
window.removeEventListener("keydown", onKey);
|
||
window.removeEventListener("touchstart", onTouchStart);
|
||
window.removeEventListener("touchmove", onTouchMove);
|
||
window.removeEventListener("touchend", onTouchEnd);
|
||
};
|
||
}, [prevId, nextId, onClose, onNavigate, BASE_CARD_TRANSFORM]);
|
||
|
||
return (
|
||
<>
|
||
{/* Backdrop */}
|
||
<div
|
||
onClick={onClose}
|
||
style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 100 }}
|
||
/>
|
||
|
||
{/* Prev */}
|
||
<button
|
||
onClick={() => prevId && onNavigate(prevId)}
|
||
disabled={!prevId}
|
||
style={{ position: "fixed", left: 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
|
||
>
|
||
‹
|
||
</button>
|
||
|
||
{/* Next */}
|
||
<button
|
||
onClick={() => nextId && onNavigate(nextId)}
|
||
disabled={!nextId}
|
||
style={{ position: "fixed", right: showTags ? TAG_PANEL_WIDTH + EDGE_GAP : EDGE_GAP, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
|
||
>
|
||
›
|
||
</button>
|
||
|
||
{/* Media card */}
|
||
<div
|
||
ref={contentRef}
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{ position: "fixed", top: "50%", left: cardCenterX, transform: BASE_CARD_TRANSFORM, zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
|
||
>
|
||
{item?.filename && (
|
||
<div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
|
||
)}
|
||
{item?.media_type === "image" && (
|
||
<img
|
||
src={api.media.fileUrl(mediaId)}
|
||
alt={item.filename}
|
||
style={{ maxWidth: "70vw", maxHeight: "82vh", objectFit: "contain" }}
|
||
/>
|
||
)}
|
||
{item?.media_type === "video" && (
|
||
<video
|
||
src={api.media.fileUrl(mediaId)}
|
||
controls
|
||
style={{ maxWidth: "70vw", maxHeight: "82vh" }}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Top-right controls */}
|
||
<div style={{ position: "fixed", top: 16, right: 16, zIndex: 103, display: "flex", gap: 8 }}>
|
||
<button
|
||
onClick={() => setShowTags((v) => !v)}
|
||
style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
|
||
>
|
||
☰
|
||
</button>
|
||
<button
|
||
onClick={onClose}
|
||
style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tag panel */}
|
||
{showTags && item && (
|
||
<div
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{ position: "fixed", top: 0, right: 0, height: "100%", width: TAG_PANEL_WIDTH, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
|
||
>
|
||
<TagPanel item={item} />
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|