LyAhn
21f6c30d25
Each month was a single virtual item that rendered all of its tiles, so scrolling into a busy month mounted thousands of ImageTiles at once. Flatten months into a fixed-height row list (header rows + tile rows of `cols` images), mirroring the Gallery grid, so only on-screen rows render and thumbnails stream in as you scroll. Active-month tracking and scrubber jump-to-month are remapped to the flat row model.
413 lines
15 KiB
TypeScript
413 lines
15 KiB
TypeScript
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
import { ImageRecord, tileSizeForZoom, useGalleryStore } from "../store";
|
|
import { ContextMenu, ImageTile } from "./Gallery";
|
|
|
|
const GAP = 6;
|
|
const HEADER_HEIGHT = 52;
|
|
const SCRUBBER_WIDTH = 48;
|
|
const MONTH_SHORT = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] as const;
|
|
|
|
interface TimelineGroup {
|
|
key: string;
|
|
label: string;
|
|
images: ImageRecord[];
|
|
}
|
|
|
|
// One virtualized row: either a month header or a row of up to `cols` tiles.
|
|
type TimelineRow =
|
|
| { type: "header"; group: TimelineGroup }
|
|
| { type: "tiles"; images: ImageRecord[] };
|
|
|
|
interface ScrubberMonth {
|
|
monthNum: number;
|
|
label: string;
|
|
groupIndex: number;
|
|
}
|
|
|
|
interface ScrubberYear {
|
|
year: string;
|
|
firstGroupIndex: number;
|
|
months: ScrubberMonth[];
|
|
}
|
|
|
|
function buildLabel(key: string): string {
|
|
if (key === "unknown") return "Unknown Date";
|
|
const [yearStr, monthStr] = key.split("-");
|
|
const year = Number(yearStr);
|
|
const month = Number(monthStr);
|
|
if (!isFinite(year) || !isFinite(month) || month < 1 || month > 12) return "Unknown Date";
|
|
const date = new Date(year, month - 1);
|
|
if (isNaN(date.getTime())) return "Unknown Date";
|
|
return date.toLocaleDateString(undefined, { month: "long", year: "numeric" });
|
|
}
|
|
|
|
function groupImages(images: ImageRecord[]): TimelineGroup[] {
|
|
const map = new Map<string, ImageRecord[]>();
|
|
for (const img of images) {
|
|
const ds = img.taken_at ?? img.modified_at;
|
|
const key = ds ? ds.substring(0, 7) : "unknown";
|
|
let bucket = map.get(key);
|
|
if (bucket === undefined) {
|
|
bucket = [];
|
|
map.set(key, bucket);
|
|
}
|
|
bucket.push(img);
|
|
}
|
|
return Array.from(map.entries())
|
|
.sort(([a], [b]) => {
|
|
if (a === "unknown") return 1;
|
|
if (b === "unknown") return -1;
|
|
return a < b ? -1 : a > b ? 1 : 0;
|
|
})
|
|
.map(([key, imgs]) => ({ key, label: buildLabel(key), images: imgs }));
|
|
}
|
|
|
|
function buildScrubberYears(groups: TimelineGroup[]): ScrubberYear[] {
|
|
const byYear = new Map<string, ScrubberYear>();
|
|
for (let i = 0; i < groups.length; i++) {
|
|
const group = groups[i];
|
|
if (group.key === "unknown") continue;
|
|
const year = group.key.substring(0, 4);
|
|
const monthNum = Number(group.key.substring(5, 7));
|
|
if (!byYear.has(year)) {
|
|
byYear.set(year, { year, firstGroupIndex: i, months: [] });
|
|
}
|
|
byYear.get(year)!.months.push({
|
|
monthNum,
|
|
label: MONTH_SHORT[monthNum - 1] ?? "",
|
|
groupIndex: i,
|
|
});
|
|
}
|
|
// Keep insertion order so the scrubber runs the same direction as the scrolled
|
|
// content (oldest at top with taken_asc), keeping the active highlight aligned.
|
|
return Array.from(byYear.values());
|
|
}
|
|
|
|
export function Timeline() {
|
|
const images = useGalleryStore((s) => s.images);
|
|
const loadMoreImages = useGalleryStore((s) => s.loadMoreImages);
|
|
const openImage = useGalleryStore((s) => s.openImage);
|
|
const totalImages = useGalleryStore((s) => s.totalImages);
|
|
const loadingImages = useGalleryStore((s) => s.loadingImages);
|
|
const imageLoadError = useGalleryStore((s) => s.imageLoadError);
|
|
const zoomPreset = useGalleryStore((s) => s.zoomPreset);
|
|
|
|
const parentRef = useRef<HTMLDivElement>(null);
|
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
const [activeGroupIndex, setActiveGroupIndex] = useState(0);
|
|
const [contextMenu, setContextMenu] = useState<{
|
|
x: number;
|
|
y: number;
|
|
image: ImageRecord;
|
|
} | null>(null);
|
|
|
|
// parentRef is the scroll container. Its clientWidth already excludes the
|
|
// scrubber because they are flex siblings, so no further adjustment is needed.
|
|
useLayoutEffect(() => {
|
|
const el = parentRef.current;
|
|
if (!el) return;
|
|
setContainerWidth(el.clientWidth);
|
|
const ro = new ResizeObserver((entries) => {
|
|
setContainerWidth(entries[0].contentRect.width);
|
|
});
|
|
ro.observe(el);
|
|
return () => ro.disconnect();
|
|
}, []);
|
|
|
|
const tileSize = tileSizeForZoom(zoomPreset);
|
|
const groups = useMemo(() => groupImages(images), [images]);
|
|
const scrubberYears = useMemo(() => buildScrubberYears(groups), [groups]);
|
|
// Show as soon as there's more than one month to jump between — not gated on
|
|
// a full year. With taken_asc sort the loaded set is oldest-first, so this
|
|
// reflects whatever range is currently loaded.
|
|
const showScrubber = groups.length > 1;
|
|
|
|
const cols = useMemo(
|
|
() => Math.max(1, Math.floor((containerWidth - GAP) / (tileSize + GAP))),
|
|
[containerWidth, tileSize],
|
|
);
|
|
|
|
// Flatten the month groups into a single list of fixed-height rows — one
|
|
// header row per group, then one tile-row per `cols` images. This lets the
|
|
// virtualizer render only the on-screen rows, exactly like the Gallery.
|
|
// Previously each *group* was one virtual item that rendered ALL of its
|
|
// images, so scrolling into a busy month mounted thousands of tiles at once.
|
|
const { rows, rowToGroupIndex, groupFirstRow } = useMemo(() => {
|
|
const rows: TimelineRow[] = [];
|
|
const rowToGroupIndex: number[] = [];
|
|
const groupFirstRow: number[] = [];
|
|
groups.forEach((group, groupIndex) => {
|
|
groupFirstRow[groupIndex] = rows.length;
|
|
rows.push({ type: "header", group });
|
|
rowToGroupIndex.push(groupIndex);
|
|
for (let i = 0; i < group.images.length; i += cols) {
|
|
rows.push({ type: "tiles", images: group.images.slice(i, i + cols) });
|
|
rowToGroupIndex.push(groupIndex);
|
|
}
|
|
});
|
|
return { rows, rowToGroupIndex, groupFirstRow };
|
|
}, [groups, cols]);
|
|
|
|
const estimateSize = useCallback(
|
|
(index: number): number =>
|
|
rows[index]?.type === "header" ? HEADER_HEIGHT : tileSize + GAP,
|
|
[rows, tileSize],
|
|
);
|
|
|
|
const virtualizer = useVirtualizer({
|
|
count: rows.length,
|
|
getScrollElement: () => parentRef.current,
|
|
estimateSize,
|
|
overscan: 6,
|
|
paddingStart: GAP,
|
|
});
|
|
|
|
// Refs so the scroll handler can read the latest mappings without re-binding.
|
|
const rowToGroupIndexRef = useRef(rowToGroupIndex);
|
|
rowToGroupIndexRef.current = rowToGroupIndex;
|
|
const groupFirstRowRef = useRef(groupFirstRow);
|
|
groupFirstRowRef.current = groupFirstRow;
|
|
|
|
useEffect(() => {
|
|
virtualizer.measure();
|
|
}, [cols, virtualizer]);
|
|
|
|
const handleScroll = useCallback(() => {
|
|
const el = parentRef.current;
|
|
if (!el) return;
|
|
|
|
// Active month = the group owning the first row still visible at the top.
|
|
const scrollTop = el.scrollTop;
|
|
const items = virtualizer.getVirtualItems();
|
|
let activeRow = items.length > 0 ? items[0].index : 0;
|
|
for (const item of items) {
|
|
if (item.start + item.size > scrollTop + HEADER_HEIGHT / 2) {
|
|
activeRow = item.index;
|
|
break;
|
|
}
|
|
}
|
|
setActiveGroupIndex(rowToGroupIndexRef.current[activeRow] ?? 0);
|
|
|
|
if (scrollTop < 24) return;
|
|
const nearBottom = scrollTop + el.clientHeight >= el.scrollHeight - 600;
|
|
if (nearBottom && !loadingImages && images.length < totalImages) {
|
|
void loadMoreImages();
|
|
}
|
|
}, [virtualizer, images.length, loadMoreImages, loadingImages, totalImages]);
|
|
|
|
useEffect(() => {
|
|
const el = parentRef.current;
|
|
if (!el) return;
|
|
el.addEventListener("scroll", handleScroll, { passive: true });
|
|
return () => el.removeEventListener("scroll", handleScroll);
|
|
}, [handleScroll]);
|
|
|
|
useEffect(() => {
|
|
const close = (e: PointerEvent) => {
|
|
if ((e.target as HTMLElement | null)?.closest("[data-gallery-context-menu]")) return;
|
|
setContextMenu(null);
|
|
};
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setContextMenu(null);
|
|
};
|
|
window.addEventListener("pointerdown", close);
|
|
window.addEventListener("keydown", onKey);
|
|
return () => {
|
|
window.removeEventListener("pointerdown", close);
|
|
window.removeEventListener("keydown", onKey);
|
|
};
|
|
}, []);
|
|
|
|
const scrollToGroup = useCallback(
|
|
(groupIndex: number) => {
|
|
const row = groupFirstRowRef.current[groupIndex] ?? 0;
|
|
virtualizer.scrollToIndex(row, { align: "start" });
|
|
},
|
|
[virtualizer],
|
|
);
|
|
|
|
return (
|
|
// Outer flex-row: fills remaining height in <main>'s flex-col, then
|
|
// splits horizontally between the scroll area and the scrubber.
|
|
<div className="flex flex-1 min-h-0 bg-gray-950">
|
|
{/* Scroll container — flex-1 takes all width except the scrubber */}
|
|
<div
|
|
ref={parentRef}
|
|
className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0"
|
|
>
|
|
{images.length === 0 && loadingImages ? (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
|
|
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8 min-w-72">
|
|
<div className="h-5 w-5 mx-auto rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
|
|
<p className="mt-4 text-sm text-white/40 font-medium">Loading timeline</p>
|
|
<p className="text-xs text-white/20 mt-1">Fetching results</p>
|
|
</div>
|
|
</div>
|
|
) : images.length === 0 ? (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
|
|
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8">
|
|
<svg
|
|
className="h-12 w-12 mx-auto text-white/10 mb-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={0.75}
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<p className="text-sm text-white/30 font-medium">
|
|
{imageLoadError ? "Could not load timeline" : "No media found"}
|
|
</p>
|
|
<p className="text-xs text-white/15 mt-1">
|
|
{imageLoadError ?? "Add a folder to see your timeline"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
|
|
{virtualizer.getVirtualItems().map((virtualItem) => {
|
|
const row = rows[virtualItem.index];
|
|
if (!row) return null;
|
|
return (
|
|
<div
|
|
key={virtualItem.key}
|
|
style={{
|
|
position: "absolute",
|
|
top: virtualItem.start,
|
|
width: "100%",
|
|
height: virtualItem.size,
|
|
}}
|
|
>
|
|
{row.type === "header" ? (
|
|
<div
|
|
className="flex items-center gap-3 px-4"
|
|
style={{ height: HEADER_HEIGHT }}
|
|
>
|
|
<span className="text-sm font-semibold text-white/80 shrink-0">
|
|
{row.group.label}
|
|
</span>
|
|
<span className="text-xs text-white/25 shrink-0 tabular-nums">
|
|
{row.group.images.length}
|
|
</span>
|
|
<div className="flex-1 h-px bg-white/[0.06]" />
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
|
|
gap: GAP,
|
|
paddingLeft: GAP,
|
|
paddingRight: GAP,
|
|
paddingBottom: GAP,
|
|
boxSizing: "border-box",
|
|
}}
|
|
>
|
|
{row.images.map((image) => (
|
|
<ImageTile
|
|
key={image.id}
|
|
image={image}
|
|
onClick={() => openImage(image)}
|
|
onContextMenu={(event) => {
|
|
event.preventDefault();
|
|
setContextMenu({ x: event.clientX, y: event.clientY, image });
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{images.length > 0 && loadingImages ? (
|
|
<div className="flex justify-center py-8">
|
|
<div className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Scrubber — flex sibling so it stays visible while the left panel scrolls */}
|
|
{showScrubber ? (
|
|
<div
|
|
className="overflow-y-auto border-l border-white/[0.04] py-2 flex flex-col items-center gap-0.5"
|
|
style={{ width: SCRUBBER_WIDTH }}
|
|
>
|
|
{scrubberYears.map((yearEntry) => (
|
|
<ScrubberYearBlock
|
|
key={yearEntry.year}
|
|
yearEntry={yearEntry}
|
|
activeGroupIndex={activeGroupIndex}
|
|
onScrollTo={scrollToGroup}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{contextMenu ? (
|
|
<ContextMenu
|
|
x={contextMenu.x}
|
|
y={contextMenu.y}
|
|
image={contextMenu.image}
|
|
onClose={() => setContextMenu(null)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ScrubberYearBlockProps {
|
|
yearEntry: ScrubberYear;
|
|
activeGroupIndex: number;
|
|
onScrollTo: (index: number) => void;
|
|
}
|
|
|
|
function ScrubberYearBlock({ yearEntry, activeGroupIndex, onScrollTo }: ScrubberYearBlockProps) {
|
|
const isYearActive = yearEntry.months.some((m) => m.groupIndex === activeGroupIndex);
|
|
|
|
return (
|
|
<div className="w-full flex flex-col items-center">
|
|
<button
|
|
className={`w-full text-center py-0.5 text-[10px] font-semibold tracking-wide transition-colors ${
|
|
isYearActive ? "text-white/80" : "text-white/30 hover:text-white/55"
|
|
}`}
|
|
onClick={() => onScrollTo(yearEntry.firstGroupIndex)}
|
|
title={yearEntry.year}
|
|
>
|
|
{yearEntry.year}
|
|
</button>
|
|
|
|
<div
|
|
className="grid gap-[3px] pb-1.5"
|
|
style={{ gridTemplateColumns: "repeat(3, 10px)" }}
|
|
>
|
|
{Array.from({ length: 12 }, (_, i) => {
|
|
const monthNum = i + 1;
|
|
const monthEntry = yearEntry.months.find((m) => m.monthNum === monthNum);
|
|
const isActive = monthEntry !== undefined && monthEntry.groupIndex === activeGroupIndex;
|
|
if (!monthEntry) {
|
|
return <span key={monthNum} className="h-[10px] w-[10px]" />;
|
|
}
|
|
return (
|
|
<button
|
|
key={monthNum}
|
|
title={`${monthEntry.label} ${yearEntry.year}`}
|
|
onClick={() => onScrollTo(monthEntry.groupIndex)}
|
|
className={`h-[10px] w-[10px] rounded-full transition-colors ${
|
|
isActive ? "bg-white/70" : "bg-white/15 hover:bg-white/40"
|
|
}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|