feat: Add media details sidebar and date handling features, including media grouping by date
This commit is contained in:
165
libertas-frontend/src/components/media/media-details-sidebar.tsx
Normal file
165
libertas-frontend/src/components/media/media-details-sidebar.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import type { Media, MediaMetadata } from "@/domain/types";
|
||||
import { useGetMediaDetails } from "@/features/media/use-media";
|
||||
import { useListMediaFaces } from "@/features/faces/use-faces";
|
||||
import { useListMediaTags } from "@/features/tags/use-tags";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PersonFaceBadge } from "@/components/people/person-face-badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { format, parseISO } from "date-fns";
|
||||
import { Separator } from "../ui/separator";
|
||||
|
||||
type MediaDetailsSidebarProps = {
|
||||
media: Media;
|
||||
};
|
||||
|
||||
function findMeta(
|
||||
metadata: MediaMetadata[] | undefined,
|
||||
tagName: string
|
||||
): string | null {
|
||||
return metadata?.find((m) => m.tag_name === tagName)?.tag_value ?? null;
|
||||
}
|
||||
|
||||
const manualTags = new Set(["DateTimeOriginal", "Make", "Model"]);
|
||||
|
||||
export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
|
||||
const { data: details, isLoading: isLoadingDetails } = useGetMediaDetails(
|
||||
media.id
|
||||
);
|
||||
const { data: tags, isLoading: isLoadingTags } = useListMediaTags(media.id);
|
||||
const { data: faces, isLoading: isLoadingFaces } = useListMediaFaces(
|
||||
media.id
|
||||
);
|
||||
|
||||
const displayDate = media.date_taken
|
||||
? format(parseISO(media.date_taken), "MMMM d, yyyy 'at' h:mm a")
|
||||
: format(parseISO(media.created_at), "MMMM d, yyyy 'at' h:mm a");
|
||||
|
||||
const cameraMake = findMeta(details?.metadata, "Make");
|
||||
const cameraModel = findMeta(details?.metadata, "Model");
|
||||
|
||||
const otherMetadata = details?.metadata
|
||||
.filter(
|
||||
(meta) =>
|
||||
!manualTags.has(meta.tag_name) &&
|
||||
meta.tag_value &&
|
||||
meta.tag_value.trim() !== ""
|
||||
)
|
||||
.sort((a, b) => a.tag_name.localeCompare(b.tag_name));
|
||||
|
||||
console.log("Other Metadata:", details);
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full w-full">
|
||||
<div className="p-4 space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold truncate">
|
||||
{media.original_filename}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">{displayDate}</p>
|
||||
</div>
|
||||
|
||||
<Accordion
|
||||
type="multiple"
|
||||
defaultValue={["details", "tags", "people"]}
|
||||
className="w-full"
|
||||
>
|
||||
{/* --- People Section (Unchanged) --- */}
|
||||
<AccordionItem value="people">
|
||||
<AccordionTrigger>People</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
{isLoadingFaces && <Skeleton className="h-8 w-full" />}
|
||||
{faces && faces.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{faces.map((face) => (
|
||||
<PersonFaceBadge key={face.id} personId={face.person_id} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{faces && faces.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No people found.
|
||||
</p>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="tags">
|
||||
<AccordionTrigger>Tags</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
{/* TODO: Add input to add tags */}
|
||||
{isLoadingTags && <Skeleton className="h-8 w-full" />}
|
||||
{tags && tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((tag) => (
|
||||
<Badge key={tag.id} variant="secondary">
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{tags && tags.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">No tags yet.</p>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="details">
|
||||
<AccordionTrigger>Details</AccordionTrigger>
|
||||
<AccordionContent className="space-y-2">
|
||||
{isLoadingDetails && <Skeleton className="h-20 w-full" />}
|
||||
{cameraMake && cameraModel && (
|
||||
<DetailRow
|
||||
label="Camera"
|
||||
value={`${cameraMake} ${cameraModel}`}
|
||||
/>
|
||||
)}
|
||||
<DetailRow label="MIME Type" value={media.mime_type} />
|
||||
<DetailRow label="File Hash" value={media.hash} isMono />
|
||||
|
||||
{otherMetadata && otherMetadata.length > 0 && (
|
||||
<>
|
||||
<Separator className="my-2" />
|
||||
{otherMetadata.map((meta, index) => (
|
||||
<DetailRow
|
||||
key={`${meta.tag_name}-${index}`}
|
||||
label={meta.tag_name}
|
||||
value={meta.tag_value}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
isMono = false,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
isMono?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
<span
|
||||
className={`text-sm text-muted-foreground wrap-break-words ${isMono ? "font-mono text-xs" : ""}`}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,13 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { type Media } from "@/domain/types";
|
||||
import { AuthenticatedImage } from "./authenticated-image";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import {
|
||||
ResizablePanelGroup,
|
||||
ResizablePanel,
|
||||
ResizableHandle,
|
||||
} from "@/components/ui/resizable";
|
||||
import { MediaDetailsSidebar } from "./media-details-sidebar";
|
||||
|
||||
type MediaViewerProps = {
|
||||
media: Media | null;
|
||||
@@ -18,23 +19,36 @@ export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="min-w-[90vw] max-w-full h-[90vh] flex flex-col p-4">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="truncate">
|
||||
{media?.original_filename}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex-1 flex items-center justify-center overflow-hidden relative">
|
||||
{media ? (
|
||||
<AuthenticatedImage
|
||||
src={media.file_url}
|
||||
alt={media.original_filename}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="w-full h-full" />
|
||||
)}
|
||||
</div>
|
||||
<DialogContent className="min-w-[90vw] max-w-full h-[90vh] p-0 border-0">
|
||||
{/* We use a resizable panel group to show the image and sidebar */}
|
||||
<ResizablePanelGroup direction="horizontal" className="h-full">
|
||||
{/* --- Panel 1: The Image --- */}
|
||||
<ResizablePanel defaultSize={75} className="bg-gray-100">
|
||||
<div className="flex h-full items-center justify-center overflow-hidden relative p-4">
|
||||
{media ? (
|
||||
<AuthenticatedImage
|
||||
src={media.file_url}
|
||||
alt={media.original_filename}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="w-full h-full" />
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
{/* --- The Handle --- */}
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* --- Panel 2: The Details Sidebar --- */}
|
||||
<ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
|
||||
{media ? (
|
||||
<MediaDetailsSidebar media={media} />
|
||||
) : (
|
||||
<Skeleton className="w-full h-full" />
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useGetPerson } from "@/features/people/use-people";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { UserSquare } from "lucide-react";
|
||||
|
||||
type PersonFaceBadgeProps = {
|
||||
personId: string | null;
|
||||
};
|
||||
|
||||
export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
|
||||
const { data: person } = useGetPerson(personId ?? "");
|
||||
|
||||
const content = (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="inline-flex items-center gap-2 text-sm"
|
||||
>
|
||||
<UserSquare size={16} />
|
||||
{person ? person.name : personId ? "Loading..." : "Unknown"}
|
||||
</Badge>
|
||||
);
|
||||
|
||||
if (!personId || !person) {
|
||||
return content;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to="/people/$personId"
|
||||
params={{ personId: person.id }}
|
||||
className="hover:opacity-80"
|
||||
>
|
||||
{content}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user