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) { 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 [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
const touchStartX = useRef<number | null>(null); const touchStartX = useRef<number | null>(null);
const touchStartY = 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 currentIndex = mediaSiblings.findIndex((e) => e.media_item_id === mediaId);
const prevId = currentIndex > 0 ? mediaSiblings[currentIndex - 1].media_item_id : null; 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 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 // Clear inline styles when a new item loads so the card appears cleanly
useEffect(() => { useEffect(() => {
if (contentRef.current) { if (contentRef.current) {
contentRef.current.style.transition = ""; contentRef.current.style.transition = "";
contentRef.current.style.transform = ""; contentRef.current.style.transform = BASE_CARD_TRANSFORM;
contentRef.current.style.opacity = ""; contentRef.current.style.opacity = "1";
} }
}, [mediaId]); }, [mediaId, BASE_CARD_TRANSFORM]);
useEffect(() => { useEffect(() => {
function onKey(e: KeyboardEvent) { function onKey(e: KeyboardEvent) {
@@ -80,8 +84,8 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
swipeAxis.current = null; swipeAxis.current = null;
if (contentRef.current) { if (contentRef.current) {
contentRef.current.style.transition = ""; contentRef.current.style.transition = "";
contentRef.current.style.transform = ""; contentRef.current.style.transform = BASE_CARD_TRANSFORM;
contentRef.current.style.opacity = ""; contentRef.current.style.opacity = "1";
} }
return; return;
} }
@@ -110,8 +114,8 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
setTimeout(() => { setTimeout(() => {
if (contentRef.current) { if (contentRef.current) {
contentRef.current.style.transition = ""; contentRef.current.style.transition = "";
contentRef.current.style.transform = ""; contentRef.current.style.transform = BASE_CARD_TRANSFORM;
contentRef.current.style.opacity = ""; contentRef.current.style.opacity = "1";
} }
}, 260); }, 260);
} }
@@ -128,7 +132,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
window.removeEventListener("touchmove", onTouchMove); window.removeEventListener("touchmove", onTouchMove);
window.removeEventListener("touchend", onTouchEnd); window.removeEventListener("touchend", onTouchEnd);
}; };
}, [prevId, nextId, onClose, onNavigate]); }, [prevId, nextId, onClose, onNavigate, BASE_CARD_TRANSFORM]);
return ( return (
<> <>
@@ -151,7 +155,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
<button <button
onClick={() => nextId && onNavigate(nextId)} onClick={() => nextId && onNavigate(nextId)}
disabled={!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> </button>
@@ -160,7 +164,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
<div <div
ref={contentRef} ref={contentRef}
onClick={(e) => e.stopPropagation()} 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 && ( {item?.filename && (
<div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div> <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
@@ -201,7 +205,7 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
{showTags && item && ( {showTags && item && (
<div <div
onClick={(e) => e.stopPropagation()} 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} /> <TagPanel item={item} />
</div> </div>