add doom scroll

2026-05-16 16:51:55 -04:00
parent 8ada8af62f
commit 8daf4e013b
5 changed files with 189 additions and 3 deletions
--- a/frontend/src/components/DoomScrollViewer/DoomScrollViewer.tsx
+++ b/frontend/src/components/DoomScrollViewer/DoomScrollViewer.tsx
@@ -0,0 +1,107 @@
+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 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();
+    };
+    window.addEventListener("wheel", onWheel, { passive: true });
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("wheel", onWheel);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [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)",
+        }}
+      >
+        <div style={{ color: "#ccc", fontSize: 13 }}>{item?.filename}</div>
+        {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>
+    </>
+  );
+}