gpatti/MediaLore-Web-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix centering issue in media viewer

Browse Source
This commit is contained in:
Garret Patti
2026-05-20 17:14:51 -04:00
parent cab5b28a4d
commit 39bd815ff0
1 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/MediaViewer/MediaViewer.tsx
View File

@@ -11,6 +11,9 @@ 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);
@@ -26,15 +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 = "";
contentRef.current.style.opacity = "";
contentRef.current.style.transform = BASE_CARD_TRANSFORM;
contentRef.current.style.opacity = "1";
}
}, [mediaId]);
}, [mediaId, BASE_CARD_TRANSFORM]);
useEffect(() => {
function onKey(e: KeyboardEvent) {
@@ -80,8 +84,8 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
swipeAxis.current = null;
if (contentRef.current) {
contentRef.current.style.transition = "";
contentRef.current.style.transform = "";
contentRef.current.style.opacity = "";
contentRef.current.style.transform = BASE_CARD_TRANSFORM;
contentRef.current.style.opacity = "1";
}
return;
}
@@ -110,8 +114,8 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
setTimeout(() => {
if (contentRef.current) {
contentRef.current.style.transition = "";
contentRef.current.style.transform = "";
contentRef.current.style.opacity = "";
contentRef.current.style.transform = BASE_CARD_TRANSFORM;
contentRef.current.style.opacity = "1";
}
}, 260);
}
@@ -128,7 +132,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
window.removeEventListener("touchmove", onTouchMove);
window.removeEventListener("touchend", onTouchEnd);
};
}, [prevId, nextId, onClose, onNavigate]);
}, [prevId, nextId, onClose, onNavigate, BASE_CARD_TRANSFORM]);
return (
<>
@@ -151,7 +155,7 @@ 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>
@@ -160,7 +164,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
<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>
@@ -201,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>