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

media viewer visual update

Browse Source
This commit is contained in:
Garret Patti
2026-05-16 15:32:29 -04:00
parent 5c766f042c
commit b8eab67a93
1 changed files with 67 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { api, type BrowseEntry, type MediaItem } from "../../api/client";
import TagPanel from "../TagPanel/TagPanel";
@@ -11,6 +11,8 @@ interface Props {
}
export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
const [showTags, setShowTags] = useState(true);
const { data: item } = useQuery<MediaItem>({
queryKey: ["media", mediaId],
queryFn: () => api.media.get(mediaId),
@@ -32,31 +34,36 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
}, [prevId, nextId, onClose, onNavigate]);
return (
<>
{/* Backdrop */}
<div
onClick={onClose}
style={{
position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
}}
>
<div
onClick={(e) => e.stopPropagation()}
style={{
display: "flex", gap: 16, background: "#1a1a1a", borderRadius: 8,
padding: 16, maxWidth: "95vw", maxHeight: "95vh", overflow: "auto",
}}
>
style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 100 }}
/>
{/* Prev */}
<button
onClick={() => prevId && onNavigate(prevId)}
disabled={!prevId}
style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
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>
{/* Media */}
<div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
{/* 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>
)}
@@ -64,42 +71,43 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
<img
src={api.media.fileUrl(mediaId)}
alt={item.filename}
style={{ maxWidth: "70vw", maxHeight: "80vh", objectFit: "contain" }}
style={{ maxWidth: "70vw", maxHeight: "82vh", objectFit: "contain" }}
/>
)}
{item?.media_type === "video" && (
<video
src={api.media.fileUrl(mediaId)}
controls
style={{ maxWidth: "70vw", maxHeight: "80vh" }}
style={{ maxWidth: "70vw", maxHeight: "82vh" }}
/>
)}
</div>
{/* Next */}
{/* Top-right controls */}
<div style={{ position: "fixed", top: 16, right: 16, zIndex: 103, display: "flex", gap: 8 }}>
<button
onClick={() => nextId && onNavigate(nextId)}
disabled={!nextId}
style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
onClick={() => setShowTags((v) => !v)}
style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
>
›
☰
</button>
{/* Tag panel */}
{item && (
<div style={{ color: "#fff", borderLeft: "1px solid #333", paddingLeft: 16, minWidth: 200 }}>
<TagPanel item={item} />
</div>
)}
{/* Close */}
<button
onClick={onClose}
style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
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>
)}
</>
);
}