GKaszewski/libertas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add media details sidebar and date handling features, including media grouping by date

Browse Source
This commit is contained in:
Gabriel Kaszewski
2025-11-16 03:32:18 +01:00
parent 94b184d3b0
commit 2003a55ff7
16 changed files with 362 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
libertas-frontend/src/components/media/media-details-sidebar.tsx Normal file
View 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>
);
}

60
libertas-frontend/src/components/media/media-viewer.tsx
View File

@@ -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>
);

36
libertas-frontend/src/components/people/person-face-badge.tsx Normal file
View File

@@ -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>
);
}

11
libertas-frontend/src/domain/types.ts
View File

@@ -17,6 +17,8 @@ export type Media = {
hash: string;
file_url: string;
thumbnail_url: string | null;
created_at: string;
date_taken: string | null;
};
export type Album = {
@@ -72,7 +74,14 @@ export type PaginatedResponse<T> = {
export type MediaDetails = {
media: Media;
id: string;
original_filename: string;
mime_type: string;
hash: string;
file_url: string;
thumbnail_url: string | null;
created_at: string;
date_taken: string | null;
metadata: MediaMetadata[];
};

36
libertas-frontend/src/lib/date-utils.ts Normal file
View File

@@ -0,0 +1,36 @@
import { format, parseISO, isToday, isYesterday } from "date-fns";
import type { Media } from "@/domain/types";
/**
* Groups a flat array of media items into a Map
* where keys are human-readable date strings.
* Assumes the media array is already sorted chronologically.
*/
export const groupMediaByDate = (
media: Media[],
): Map<string, Media[]> => { // <-- Return a Map
return media.reduce(
(acc, m) => {
const dateString = m.date_taken ?? m.created_at;
const date = parseISO(dateString);
let groupTitle: string;
if (isToday(date)) {
groupTitle = "Today";
} else if (isYesterday(date)) {
groupTitle = "Yesterday";
} else {
// e.g., "November 2025"
groupTitle = format(date, "MMMM yyyy");
}
if (!acc.has(groupTitle)) {
acc.set(groupTitle, []);
}
acc.get(groupTitle)!.push(m);
return acc;
},
new Map<string, Media[]>(),
);
};

60
libertas-frontend/src/routes/media/index.tsx
View File

@@ -3,8 +3,10 @@ import { createFileRoute } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { AuthenticatedImage } from "@/components/media/authenticated-image";
import type { Media } from "@/domain/types";
import { useState } from "react";
import { useMemo, useState } from "react"; // Import useMemo
import { MediaViewer } from "@/components/media/media-viewer";
import { groupMediaByDate } from "@/lib/date-utils"; // Import our new helper
import { parseISO } from "date-fns";
export const Route = createFileRoute("/media/")({
component: MediaPage,
@@ -22,6 +24,26 @@ function MediaPage() {
const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
const allMedia = useMemo(
() =>
data?.pages
.flatMap((page) => page.data)
.sort((a, b) => {
// Sort by date (newest first)
const dateA = a.date_taken ?? a.created_at;
const dateB = b.date_taken ?? b.created_at;
return parseISO(dateB).getTime() - parseISO(dateA).getTime();
}) ?? [],
[data]
);
const groupedMedia = useMemo(() => groupMediaByDate(allMedia), [allMedia]);
const groupEntries = useMemo(
() => Array.from(groupedMedia.entries()),
[groupedMedia]
);
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
@@ -32,22 +54,28 @@ function MediaPage() {
{error && <p>Error loading photos: {error.message}</p>}
{data && (
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
{data.pages.map((page) =>
page.data.map((media) => (
<div
key={media.id}
className="aspect-square bg-gray-200 rounded-md overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => setSelectedMedia(media)}
>
<AuthenticatedImage
src={media.thumbnail_url ?? media.file_url}
alt={media.original_filename}
className="w-full h-full object-cover"
/>
<div className="space-y-8">
{groupEntries.map(([title, media]) => (
<section key={title}>
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
{media.map((media) => (
<div
key={media.id}
className="aspect-square bg-gray-200 rounded-md overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => setSelectedMedia(media)}
>
<AuthenticatedImage
src={media.thumbnail_url ?? media.file_url}
alt={media.original_filename}
className="w-full h-full object-cover"
/>
</div>
))}
</div>
))
)}
</section>
))}
</div>
)}

10
libertas-frontend/src/services/media-service.ts
View File

@@ -63,8 +63,14 @@ export const getMediaDetails = async (
mediaId: string,
): Promise<MediaDetails> => {
const { data } = await apiClient.get(`/media/${mediaId}`);
// Process the nested media object's URLs
data.media = processMediaUrls(data.media);
console.log('Data for media details: ', data);
// Process the media URLs in the details response
data.file_url = `${API_PREFIX}${data.file_url}`;
data.thumbnail_url = data.thumbnail_url
? `${API_PREFIX}${data.thumbnail_url}`
: null;
return data;
};

4
libertas_api/migrations/20251116020048_add_date_taken_to_media.sql Normal file
View File

@@ -0,0 +1,4 @@
ALTER TABLE media
ADD COLUMN date_taken TIMESTAMPTZ;
CREATE INDEX IF NOT EXISTS idx_media_date_taken ON media (date_taken);

4
libertas_api/src/schema.rs
View File

@@ -14,6 +14,8 @@ pub struct MediaResponse {
pub hash: String,
pub file_url: String,
pub thumbnail_url: Option<String>,
pub created_at: chrono::DateTime<chrono::Utc>,
pub date_taken: Option<chrono::DateTime<chrono::Utc>>,
}
impl From<Media> for MediaResponse {
@@ -27,6 +29,8 @@ impl From<Media> for MediaResponse {
thumbnail_url: media
.thumbnail_path
.map(|_| format!("/api/v1/media/{}/thumbnail", media.id)),
created_at: media.created_at,
date_taken: media.date_taken,
}
}
}

5
libertas_api/src/services/media_service.rs
View File

@@ -67,7 +67,7 @@ impl MediaService for MediaServiceImpl {
.await
.unwrap()?;
let (storage_path_buf, _date_taken) = get_storage_path_and_date(&extracted_data, &filename);
let (storage_path_buf, date_taken) = get_storage_path_and_date(&extracted_data, &filename);
let storage_path_str = self
.persist_media_file(&file_bytes, &storage_path_buf)
@@ -81,6 +81,7 @@ impl MediaService for MediaServiceImpl {
storage_path_str,
hash,
file_size,
date_taken,
)
.await?;
@@ -282,6 +283,7 @@ impl MediaServiceImpl {
storage_path: String,
hash: String,
file_size: i64,
date_taken: Option<chrono::DateTime<chrono::Utc>>,
) -> CoreResult<Media> {
let media_model = Media {
id: Uuid::new_v4(),
@@ -292,6 +294,7 @@ impl MediaServiceImpl {
hash,
created_at: chrono::Utc::now(),
thumbnail_path: None,
date_taken,
};
self.repo.create(&media_model).await?;

1
libertas_core/src/models.rs
View File

@@ -59,6 +59,7 @@ pub struct Media {
pub hash: String,
pub created_at: chrono::DateTime<chrono::Utc>,
pub thumbnail_path: Option<String>,
pub date_taken: Option<chrono::DateTime<chrono::Utc>>,
}
pub struct MediaMetadata {

3
libertas_importer/src/main.rs
View File

@@ -141,7 +141,7 @@ async fn process_file(
}
};
let (storage_path_buf, _date_taken) = get_storage_path_and_date(&extracted_data, &filename);
let (storage_path_buf, date_taken) = get_storage_path_and_date(&extracted_data, &filename);
let mut dest_path_buf = PathBuf::from(&state.config.media_library_path);
dest_path_buf.push(&storage_path_buf);
@@ -169,6 +169,7 @@ async fn process_file(
hash,
created_at: chrono::Utc::now(),
thumbnail_path: None,
date_taken: date_taken,
};
let mut metadata_models = Vec::new();

1
libertas_infra/src/db_models.rs
View File

@@ -52,6 +52,7 @@ pub struct PostgresMedia {
pub hash: String,
pub created_at: chrono::DateTime<chrono::Utc>,
pub thumbnail_path: Option<String>,
pub date_taken: Option<chrono::DateTime<chrono::Utc>>,
}
#[derive(sqlx::FromRow)]

1
libertas_infra/src/mappers.rs
View File

@@ -87,6 +87,7 @@ impl From<PostgresMedia> for Media {
hash: pg_media.hash,
created_at: pg_media.created_at,
thumbnail_path: pg_media.thumbnail_path,
date_taken: pg_media.date_taken,
}
}
}

2
libertas_infra/src/repositories/album_repository.rs
View File

@@ -133,7 +133,7 @@ impl AlbumRepository for PostgresAlbumRepository {
PostgresMedia,
r#"
SELECT m.id, m.owner_id, m.storage_path, m.original_filename, m.mime_type,
m.hash, m.created_at, m.thumbnail_path
m.hash, m.created_at, m.thumbnail_path, m.date_taken
FROM media m
JOIN album_media am ON m.id = am.media_id
WHERE am.album_id = $1

15
libertas_infra/src/repositories/media_repository.rs
View File

@@ -38,8 +38,8 @@ impl PostgresMediaRepository {
) -> CoreResult<()> {
sqlx::query!(
r#"
INSERT INTO media (id, owner_id, storage_path, original_filename, mime_type, hash, created_at, thumbnail_path)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
INSERT INTO media (id, owner_id, storage_path, original_filename, mime_type, hash, created_at, thumbnail_path, date_taken)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
"#,
media.id,
media.owner_id,
@@ -48,7 +48,8 @@ impl PostgresMediaRepository {
media.mime_type,
media.hash,
media.created_at,
media.thumbnail_path
media.thumbnail_path,
media.date_taken
)
.execute(exec)
.await
@@ -68,7 +69,7 @@ impl MediaRepository for PostgresMediaRepository {
PostgresMedia,
r#"
SELECT id, owner_id, storage_path, original_filename, mime_type, hash, created_at,
thumbnail_path
thumbnail_path, date_taken
FROM media
WHERE hash = $1
"#,
@@ -86,7 +87,7 @@ impl MediaRepository for PostgresMediaRepository {
PostgresMedia,
r#"
SELECT id, owner_id, storage_path, original_filename, mime_type, hash, created_at,
thumbnail_path
thumbnail_path, date_taken
FROM media
WHERE id = $1
"#,
@@ -130,7 +131,7 @@ impl MediaRepository for PostgresMediaRepository {
.await
.map_err(|e| CoreError::Database(e.to_string()))?;
let data_base_sql = "SELECT media.id, media.owner_id, media.storage_path, media.original_filename, media.mime_type, media.hash, media.created_at, media.thumbnail_path FROM media";
let data_base_sql = "SELECT media.id, media.owner_id, media.storage_path, media.original_filename, media.mime_type, media.hash, media.created_at, media.thumbnail_path, media.date_taken FROM media";
let mut data_query = sqlx::QueryBuilder::new(data_base_sql);
data_query.push(" WHERE media.owner_id = ");
data_query.push_bind(user_id);
@@ -189,7 +190,7 @@ impl MediaRepository for PostgresMediaRepository {
let data_base_sql = "
SELECT media.id, media.owner_id, media.storage_path,
media.original_filename, media.mime_type,
media.hash, media.created_at, media.thumbnail_path
media.hash, media.created_at, media.thumbnail_path, media.date_taken
FROM media
JOIN face_regions fr ON media.id = fr.media_id
";