fix centering issue in media viewer

frontend/src/components/DoomScrollViewer/DoomScrollViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { api, type MediaItem } from "../../api/client";
 
 interface Props {
@@ -12,10 +12,11 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
   const [fading, setFading] = useState(false);
   const wheelLock = useRef(false);
   const touchStartY = useRef<number | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const item = items[index];
 
-  function go(delta: 1 | -1) {
+  const go = useCallback((delta: 1 | -1) => {
     if (wheelLock.current) return;
     const next = index + delta;
     if (next < 0 || next >= items.length) return;
@@ -26,7 +27,7 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
       setFading(false);
       wheelLock.current = false;
     }, 200);
-  }
+  }, [index, items.length]);
 
   useEffect(() => {
     const onWheel = (e: WheelEvent) => { e.deltaY > 0 ? go(1) : go(-1); };
@@ -35,24 +36,68 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
       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);
+    };
+  }, [go, onClose]);
+
+  useEffect(() => {
+    const onTouchStart = (e: TouchEvent) => {
+      touchStartY.current = e.touches[0].clientY;
+      if (contentRef.current) contentRef.current.style.transition = "none";
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault();
+      if (touchStartY.current === null || !contentRef.current) return;
+      const offset = e.touches[0].clientY - touchStartY.current;
+      contentRef.current.style.transform = `translateY(${offset}px)`;
+      contentRef.current.style.opacity = String(Math.max(0.3, 1 - Math.abs(offset) / 300));
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      if (touchStartY.current === null) return;
+      const delta = touchStartY.current - e.changedTouches[0].clientY;
+      touchStartY.current = null;
+
+      if (Math.abs(delta) > 80) {
+        // Hand off to the fading animation
+        if (contentRef.current) {
+          contentRef.current.style.transition = "";
+          contentRef.current.style.transform = "";
+          contentRef.current.style.opacity = "";
+        }
+        go(delta > 0 ? 1 : -1);
+      } else {
+        // Snap back to center
+        if (contentRef.current) {
+          const el = contentRef.current;
+          el.style.transition = "opacity 0.25s ease, transform 0.25s ease";
+          el.style.transform = "translateY(0)";
+          el.style.opacity = "1";
+          setTimeout(() => {
+            if (contentRef.current) {
+              contentRef.current.style.transition = "";
+              contentRef.current.style.transform = "";
+              contentRef.current.style.opacity = "";
+            }
+          }, 260);
+        }
+      }
+    };
+
+    window.addEventListener("touchstart", onTouchStart);
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd);
+    return () => {
       window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchmove", onTouchMove);
       window.removeEventListener("touchend", onTouchEnd);
     };
-  }, [index, fading]);
+  }, [go]);
 
   return (
     <>
@@ -61,6 +106,7 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
 
       {/* Media area */}
       <div
+        ref={contentRef}
         style={{
           position: "fixed", inset: 0, zIndex: 201,
           display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
@@ -82,8 +128,11 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
           <video
             key={item.id}
             src={api.media.fileUrl(item.id)}
-            controls
             autoPlay
+            muted
+            playsInline
+            controls
+            loop
             style={{ maxWidth: "90vw", maxHeight: "82vh" }}
           />
         )}

frontend/src/components/MediaViewer/MediaViewer.tsx

@@ -11,8 +11,14 @@ interface Props {
 }
 
 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],
@@ -23,6 +29,16 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
   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) {
@@ -30,25 +46,93 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       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 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;
-      if (Math.abs(delta) > 50) {
-        if (delta > 0 && nextId) onNavigate(nextId);
-        if (delta < 0 && prevId) onNavigate(prevId);
-      }
       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]);
+  }, [prevId, nextId, onClose, onNavigate, BASE_CARD_TRANSFORM]);
 
   return (
     <>
@@ -71,15 +155,16 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       <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" }}
+        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: "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" }}
+        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>
@@ -120,7 +205,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       {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" }}
+          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>