131 lines
4.9 KiB
TypeScript
131 lines
4.9 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 [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
|
||
const touchStartX = useRef<number | null>(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;
|
||
|
||
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; };
|
||
const onTouchEnd = (e: TouchEvent) => {
|
||
if (touchStartX.current === null) return;
|
||
const delta = touchStartX.current - e.changedTouches[0].clientX;
|
||
if (Math.abs(delta) > 50) {
|
||
if (delta > 0 && nextId) onNavigate(nextId);
|
||
if (delta < 0 && prevId) onNavigate(prevId);
|
||
}
|
||
touchStartX.current = null;
|
||
};
|
||
window.addEventListener("keydown", onKey);
|
||
window.addEventListener("touchstart", onTouchStart);
|
||
window.addEventListener("touchend", onTouchEnd);
|
||
return () => {
|
||
window.removeEventListener("keydown", onKey);
|
||
window.removeEventListener("touchstart", onTouchStart);
|
||
window.removeEventListener("touchend", onTouchEnd);
|
||
};
|
||
}, [prevId, nextId, onClose, onNavigate]);
|
||
|
||
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 ? 276 : 16, 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
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", 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: 260, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
|
||
>
|
||
<TagPanel item={item} />
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|