3dtours
4f87f022da
A roll of a hundred thousand frames is read by a walk that tells the screen about every frame it lands. The column is redrawn out of that count, so the telling was a whole tree rebuilt a frame at a time — on the large library that is the reading spending its afternoon drawing itself, and to the reader it looks like a scan that has started over from the top every time the column breathes. Five tellings a second is a counter that still moves to the eye and a page that is doing the reading instead; every frame still lands in the counts, and only the copy the screen reads waits. What the counter said was wrong twice over, and both were the same mistake told two ways. The total was the frames already reached plus the frames still in the queue, so a roll whose catalogue already holds most of it announced itself as `29980/61211` — the numbers of the reading underneath, printed as if they were the numbers of the roll. The reading now measures itself against the frames the catalogue already holds of the folder it was pointed at: the roll's own size while the walk is still up in its first folders, and the frames under a subfolder alone when it was kept to one. And a row says at least what the catalogue holds of it, never less — where the reading's number alone had the head of the tree count 29980 while the line above it counted a hundred thousand, one question with two answers. Nor is a scan of nothing announced as `0/0` before its first pass has come back; the line waits until it knows what it is reading. The third thing is not a number but a weight. The tile kept for a frame is the tile the grid cell and the strip both paint, and there is one of them per frame of a roll that reaches six figures. At 512 on the long edge a tile weighed 42KB and a hundred and sixty thousand of them weighed six and a half gigabytes of the reader's disk — for a grid cell that is ~240px wide and a strip tile that is 132. A quarter of the pixels at the quality Lightroom keeps its own grid previews at puts the same picture in the same cell: the tile is now ~12KB and the roll a quarter of the disk it was. The canvas a tile is drawn onto is told it is opaque, so it no longer carries a channel of noughts through every draw and every encode. The stage loses a little softness at 2.4x, which is the trade and is known.
1643 lines
79 KiB
TypeScript
1643 lines
79 KiB
TypeScript
import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, type CSSProperties, type RefObject } from 'react';
|
||
import { useI18n } from './i18n/I18nProvider';
|
||
import { go } from './nav';
|
||
import { api } from './api';
|
||
import { keep, recall } from './remember';
|
||
import { readGps, readSpecs, specsLine } from './engine/imageOps';
|
||
import {
|
||
cachedPhotos,
|
||
canBrowseFolders,
|
||
ensurePermission,
|
||
getPhoto,
|
||
HEAD_BYTES,
|
||
jumpScan,
|
||
listEditedIds,
|
||
listFolders,
|
||
pickFolder,
|
||
readPhotoFile,
|
||
readPhotos,
|
||
removeFolder,
|
||
renameFolder,
|
||
scanBusy,
|
||
scanSession,
|
||
setStar,
|
||
startScan,
|
||
stopScan,
|
||
unfinished,
|
||
watchRows,
|
||
watchScan,
|
||
type LibraryDir,
|
||
type LibraryFolder,
|
||
type LibraryPhoto,
|
||
} from './engine/library';
|
||
import {
|
||
backupNow,
|
||
backupStatus,
|
||
pickBackupFolder,
|
||
restoreNow,
|
||
type BackupStatus,
|
||
} from './engine/libraryBackup';
|
||
|
||
// The catalogue screen, laid out like the admin's picture manager: the tree of
|
||
// folders and subfolders down the left, the frame that is up in the middle, and
|
||
// the open folder's strip of thumbnails across the bottom. The toolbar holds the
|
||
// one button that adds a folder and the two icons that swap the middle for every
|
||
// thumbnail of the open folder at once; a folder's own rescan and remove live on
|
||
// a right click. Nothing is uploaded — the page never holds more than
|
||
// thumbnails, and the RAW itself is read only when a frame is opened in the
|
||
// studio (`/app?lib=<id>`).
|
||
//
|
||
// ponytail: no search and no flag. A roll of date folders is three levels deep at
|
||
// most, and what a reader actually digs through a shelf with is the score they
|
||
// gave a frame, the year it was shot and the hours they shot it in — which are
|
||
// the three the thumbnail view filters on. Add the text box when a folder of
|
||
// mixed names makes one worth typing into.
|
||
interface Node {
|
||
// The tree's own key: a folder name, or `folder/sub/dir`.
|
||
key: string;
|
||
label: string;
|
||
depth: number;
|
||
count: number;
|
||
}
|
||
|
||
// What this screen remembers between visits: the folder that was open, the frame
|
||
// that was raised in it, how much room its column was given, and which folders of
|
||
// the tree were drawn open.
|
||
const NODE_KEY = 'recipescam.library.node';
|
||
const FRAME_KEY = 'recipescam.library.frame';
|
||
const COLUMN_KEY = 'recipescam.library.column';
|
||
const OPEN_KEY = 'recipescam.library.open';
|
||
const DEEP_KEY = 'recipescam.library.deep';
|
||
const COLUMN_MIN = 88;
|
||
const COLUMN_MAX = 460;
|
||
const COLUMN_DEFAULT = 118;
|
||
// How far a wheel tick over the frame magnifies it, and where it stops: past a
|
||
// handful of ticks the thumbnail behind the preview runs out of pixels anyway.
|
||
const ZOOM_MAX = 6;
|
||
const ZOOM_STEP = 1.15;
|
||
// The strip's tile: `.adm-thumb` is 132px wide and `.adm-filmstrip` leaves 8px
|
||
// between tiles, so a tile takes 140px of the strip wherever it sits.
|
||
const TILE_STEP = 140;
|
||
// How many tiles past each edge of the strip are drawn. Enough that a fast drag
|
||
// meets pictures rather than placeholders, few enough that the count does not
|
||
// matter: what is drawn is this many, whatever the shelf holds.
|
||
const STRIP_KEEP = 8;
|
||
// How many rows of the wall past each edge of its viewport are drawn. A row of
|
||
// cards is a couple of hundred pixels tall, so this is the row under the eye and
|
||
// two beyond it — enough that a flick lands on pictures.
|
||
const WALL_ROWS = 2;
|
||
// What `.adm-grid` leaves between its rows. A spacer has to stand the same
|
||
// distance past the last row it replaces as the row itself would have.
|
||
const WALL_GAP = 12;
|
||
// The hours a frame's own clock can read, and what the time filter offers: the
|
||
// whole day in the 24-hour form a camera writes into EXIF.
|
||
const HOURS = Array.from({ length: 24 }, (_, i) => i);
|
||
|
||
// What the frame's own file says about itself: the line of numbers the camera
|
||
// recorded, and where it was shot. Both sit in the EXIF at the head of the file,
|
||
// so the frame costs one read of its first few hundred kilobytes rather than the
|
||
// whole negative — and only the raised frame ever pays it.
|
||
interface Shot {
|
||
line: string;
|
||
lat: number | null;
|
||
lng: number | null;
|
||
// The geocoder's name for those coordinates, or null: naming a place is a
|
||
// network round trip on a PRO account, and a refusal leaves the numbers.
|
||
place: string | null;
|
||
}
|
||
// The frames already read this visit, by the read itself: the catalogue is read
|
||
// back on a timer while a scan runs, which hands this screen a new frame object
|
||
// every few hundred milliseconds, so what keeps the file from being read again is
|
||
// the read in flight rather than the object under it.
|
||
const shots = new Map<string, Promise<Shot | null>>();
|
||
|
||
// How often a running scan is allowed to have its catalogue read back, and how
|
||
// often the tab may walk the folder again just for being raised. Both are the
|
||
// same trade — the reading is watched, not driven — and both are seconds for the
|
||
// same reason: the roll is the long thing, and neither the strip nor a folder
|
||
// that has not moved is worth a frame of it.
|
||
const CATALOGUE_MS = 5000;
|
||
const CATCHUP_MS = 30000;
|
||
|
||
|
||
|
||
export function Library() {
|
||
const { t } = useI18n();
|
||
const [folders, setFolders] = useState<LibraryFolder[]>([]);
|
||
const [ready, setReady] = useState<Set<string>>(new Set());
|
||
// The strip starts on the catalogue the last screen read: coming back from the
|
||
// studio is a screen opening, not a page loading, and the frames the reader was
|
||
// looking at are already in hand. The read below replaces them a moment later.
|
||
const [photos, setPhotos] = useState<LibraryPhoto[]>(() => cachedPhotos());
|
||
// The folders the scan in flight has walked into: a roll's own shape is on
|
||
// screen from the first pass, before the frames under its folders are read.
|
||
// What a scan found is not filed away — the next visit draws the folders that
|
||
// hold frames, and the next scan names the rest again.
|
||
const [dirs, setDirs] = useState<LibraryDir[]>([]);
|
||
const [edited, setEdited] = useState<Set<string>>(new Set());
|
||
// Which tree node is open, which frame is up, and which of the two middle
|
||
// views (the frame, or every thumbnail of the open node) is on. The open node
|
||
// is picked up where the last visit left it.
|
||
const [node, setNode] = useState<string | null>(() => recall(NODE_KEY));
|
||
// The rows whose children are drawn. The column opens with every folder shut —
|
||
// a roll is a shelf of shelves and its whole shape is not what the screen is
|
||
// for — and remembers the ones the reader opened, so the next visit draws the
|
||
// tree the way the last one was left.
|
||
const [expanded, setExpanded] = useState<Set<string>>(() => {
|
||
const saved = recall(OPEN_KEY);
|
||
// Nothing remembered means this is the first visit under that rule, and the
|
||
// node the last visit left would then open behind a shut row: its own rows
|
||
// are opened for it. A visit that folded everything remembers the empty set,
|
||
// which is not this, and is drawn as it was left.
|
||
if (saved === null) {
|
||
const parts = (recall(NODE_KEY) ?? '').split('/');
|
||
return new Set(parts.slice(1).map((_, i) => parts.slice(0, i + 1).join('/')));
|
||
}
|
||
return new Set(saved.split(',').filter(Boolean));
|
||
});
|
||
// Whether the strip draws the whole branch under the open node or only the
|
||
// node itself. Deep is how a roll reads — its top level holds no file of its
|
||
// own — and shallow is what a folder of folders is for. The reader's answer is
|
||
// picked up where the last visit left it, the same as the open node above.
|
||
const [deep, setDeep] = useState(() => recall(DEEP_KEY) !== 'false');
|
||
// The frame that is up in the open node — raised by a click on its thumbnail,
|
||
// and picked up where the last visit left it, so a reader who leaves for the
|
||
// studio comes back to the negative they were looking at rather than to the
|
||
// first one the node happens to hold. A frame that is gone falls through to
|
||
// the first, the way a node that is gone falls back to its folder.
|
||
const [up, setUp] = useState<string | null>(() => recall(FRAME_KEY));
|
||
const [view, setView] = useState<'preview' | 'grid'>('preview');
|
||
// How the thumbnail view reads the open folder: every frame it holds, or only
|
||
// the ones that were given this many stars, shot in this year, shot between
|
||
// these hours — and in the order the reader picked. A way of looking, not part
|
||
// of the roll, so none of it outlives the visit; the strip below the frame does
|
||
// not follow it, because the strip is the shelf itself.
|
||
const [order, setOrder] = useState<'newest' | 'oldest' | 'star'>('newest');
|
||
const [minStar, setMinStar] = useState(0);
|
||
const [year, setYear] = useState('all');
|
||
const [from, setFrom] = useState('any');
|
||
const [to, setTo] = useState('any');
|
||
// How far the frame is magnified, and the point it is magnified about: the one
|
||
// under the pointer, so the picture grows around what is being looked at.
|
||
const [zoom, setZoom] = useState(1);
|
||
const [zoomAt, setZoomAt] = useState('50% 50%');
|
||
const [colWidth, setColWidth] = useState(() => {
|
||
const saved = Number(recall(COLUMN_KEY));
|
||
return saved >= COLUMN_MIN && saved <= COLUMN_MAX ? saved : COLUMN_DEFAULT;
|
||
});
|
||
// The scan is the tab's, not this screen's — see `scanSession`. This screen is
|
||
// one of its watchers, and the counter is what tells React the session it is
|
||
// holding has moved on.
|
||
const live = scanSession();
|
||
const [, bump] = useReducer((n: number) => n + 1, 0);
|
||
const [note, setNote] = useState<string | null>(null);
|
||
// The folder menu: what a right click opens, and where. No folder means the
|
||
// right click landed on the empty part of the column, which is the way in for
|
||
// one more folder; `root` means it landed on a row at the top level — the head
|
||
// of a tree — which also carries folding the whole tree.
|
||
const [menu, setMenu] = useState<{ folder: LibraryFolder | null; root?: boolean; rel?: string; x: number; y: number } | null>(null);
|
||
// Where the drag of the column divider started, and how wide the column was
|
||
// then — the pointer only ever reports a position, not a distance moved.
|
||
const grip = useRef<{ x: number; w: number } | null>(null);
|
||
|
||
// The catalogue is loaded once at start-up; until it is, the tree only knows
|
||
// the folders and cannot tell whether the remembered subfolder still exists.
|
||
const [loaded, setLoaded] = useState(false);
|
||
|
||
// The folder the catalogue is copied into, and whether the browser is still
|
||
// letting this page write to it — which it stops doing when the tab closes, so
|
||
// the row below says so rather than letting a write fail quietly. The ref is
|
||
// the same value for the scan that ends behind this screen's back: it reads it
|
||
// without being subscribed to it.
|
||
const [back, setBack] = useState<BackupStatus | null>(null);
|
||
const backRef = useRef<BackupStatus | null>(null);
|
||
const [backBusy, setBackBusy] = useState(false);
|
||
|
||
const reload = useCallback(async () => {
|
||
const [rows, edits] = await Promise.all([readPhotos(), listEditedIds()]);
|
||
// A read that came back with nothing is a read that failed, not a catalogue
|
||
// that emptied — and the frames it would have cleared are frames the reader
|
||
// was working their way through. The strip keeps them.
|
||
if (rows) setPhotos(rows);
|
||
setEdited(edits);
|
||
}, []);
|
||
|
||
// --- the catalogue's own copy ---------------------------------------------
|
||
|
||
const show = useCallback(async (status: BackupStatus) => {
|
||
backRef.current = status;
|
||
setBack(status);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let alive = true;
|
||
void backupStatus().then((status) => {
|
||
if (alive) void show(status);
|
||
});
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, [show]);
|
||
|
||
// Open the picker and take what it chose. False when the reader closed it, or
|
||
// when there is no picker to open — and the one thing this is asked for is the
|
||
// thing a folder cannot be reached without: it is where a folder is chosen,
|
||
// where a remembered one is handed its permission back, and where a backup is
|
||
// named, since the name of the folder is the name of the backup.
|
||
const pickBackup = useCallback(async (): Promise<boolean> => {
|
||
try {
|
||
await pickBackupFolder();
|
||
await show(await backupStatus());
|
||
return true;
|
||
} catch (err) {
|
||
// Closing the picker is a "not now", not a failure worth a line of text.
|
||
if (err instanceof DOMException && err.name === 'AbortError') return false;
|
||
setNote(t('lib.failed'));
|
||
return false;
|
||
}
|
||
}, [show, t]);
|
||
|
||
// Write the catalogue into the folder. With none picked yet this is also the
|
||
// way to pick one: one button, because a backup folder is not something to
|
||
// choose and then not use. `quiet` is the run that follows a scan — it says
|
||
// nothing, since a note about a backup would sit over the note about the scan.
|
||
const backup = useCallback(
|
||
async (quiet = false) => {
|
||
if (backBusy) return;
|
||
// A folder the browser has not let this page write to is a folder to pick
|
||
// again, and the picker is the only thing that can hand the permission
|
||
// back — a permission outlives the tab only while the tab does, so this is
|
||
// the run that follows every restart. Without it the button wrote nothing
|
||
// and said so, which is a backup that quietly stopped happening. A quiet
|
||
// run never comes here: it is guarded by the permission it would ask for.
|
||
if ((!backRef.current?.folder || !backRef.current.granted) && !(await pickBackup())) return;
|
||
setBackBusy(true);
|
||
if (!quiet) setNote(t('lib.backupRun', { done: 0, total: backRef.current?.photos ?? 0 }));
|
||
try {
|
||
const result = await backupNow((p) => setNote(t('lib.backupRun', { done: p.done, total: p.total })));
|
||
await show(await backupStatus());
|
||
if (!quiet) setNote(t('lib.backupDone', { n: result.photos, w: result.written }));
|
||
} catch {
|
||
if (!quiet) setNote(t('lib.backupFailed'));
|
||
} finally {
|
||
setBackBusy(false);
|
||
}
|
||
},
|
||
[backBusy, pickBackup, show, t]
|
||
);
|
||
|
||
// Where the copy goes, said out loud: the line that names the folder is the
|
||
// control that changes it. A backup is a folder of rows and tiles, so the
|
||
// folder's name — the one the reader gave it in the picker, or the disk it was
|
||
// carried in on — is the whole of what tells one backup from another, and
|
||
// nothing else on this screen can offer a name.
|
||
const choose = useCallback(async () => {
|
||
if (backBusy) return;
|
||
await pickBackup();
|
||
}, [backBusy, pickBackup]);
|
||
|
||
// The other direction, and the one that replaces rows: the frames come back
|
||
// without a file handle — a handle is not a thing that can be written down —
|
||
// and picking the folder again afterwards is what hands every one of them back,
|
||
// without a frame being read.
|
||
//
|
||
// The folder is asked for every time, whatever this screen remembers, because
|
||
// the folder is the whole of the choice: which backup to come back from is
|
||
// which folder the reader points at — the copy on the other disk, the one made
|
||
// before the edit. The count and the date on the confirm are read out of the
|
||
// folder just picked, so the thing described is the thing restored, and a
|
||
// folder with no catalogue of its own is a folder to point somewhere else at
|
||
// rather than a run that replaces the reading with nothing.
|
||
const restore = useCallback(async () => {
|
||
if (backBusy) return;
|
||
if (!(await pickBackup())) return;
|
||
const status = backRef.current;
|
||
if (!status?.at) {
|
||
setNote(t('lib.restoreNothing', { folder: status?.folder ?? '' }));
|
||
return;
|
||
}
|
||
const when = new Date(status.at).toLocaleString();
|
||
if (!window.confirm(t('lib.restoreConfirm', { folder: status.folder ?? '', n: status.photos, time: when }))) return;
|
||
setBackBusy(true);
|
||
setNote(t('lib.restoreRun', { done: 0, total: status.photos }));
|
||
try {
|
||
const result = await restoreNow((p) => setNote(t('lib.restoreRun', { done: p.done, total: p.total })));
|
||
await reload();
|
||
setFolders(await listFolders());
|
||
setNote(t('lib.restoreDone', { n: result.photos }));
|
||
} catch {
|
||
setNote(t('lib.restoreFailed'));
|
||
} finally {
|
||
setBackBusy(false);
|
||
}
|
||
}, [backBusy, pickBackup, reload, t]);
|
||
|
||
// A reading that is over is the one moment the rows are finished, so it is the
|
||
// moment the catalogue is copied out: a timer would fire in the middle of a
|
||
// roll or not at all. Held in a ref because the watch below subscribes once and
|
||
// this changes with every render — and nothing is written without a folder
|
||
// picked and the browser still allowing the write, which are the two states the
|
||
// row on screen is already saying.
|
||
const afterScan = useRef(() => {});
|
||
afterScan.current = () => {
|
||
const status = backRef.current;
|
||
if (status?.folder && status.granted) void backup(true);
|
||
};
|
||
|
||
// A scan runs for as long as the roll takes, and this screen watches it rather
|
||
// than running it: the studio may be up instead, and the scan carries on. The
|
||
// names a pass has walked into are drawn as they arrive, a pass ahead of the
|
||
// frames under them, and the frames themselves are handed over by the reading
|
||
// as it stores them — so the strip fills with the roll and the only read back
|
||
// is the one a reading in another window needs, whose rows never come here.
|
||
useEffect(() => {
|
||
// The folder the last pass was on, so the pass that comes back empty — the
|
||
// one that says the scan is through — is recognisable as an end rather than
|
||
// as a screen with nothing to do.
|
||
let was: string | null = null;
|
||
// How much of the roll the catalogue was last read back at, and the shape the
|
||
// column was last drawn at: reading the whole catalogue back costs every
|
||
// thumbnail in it, so it waits for a batch to have landed rather than for a
|
||
// frame to have been read, and the column is redrawn only when a pass has
|
||
// walked into something new.
|
||
let wrote = -1;
|
||
let drew = '';
|
||
// And when it was last read back. A batch lands every second or so on a
|
||
// folder of JPEGs, and reading a catalogue of a hundred thousand frames is a
|
||
// second and a half of the page held still and sixty megabytes of rows thrown
|
||
// away — a scan that read it back every batch spent the roll doing nothing
|
||
// else, and a folder of RAW, with a quarter of a gigabyte of LibRaw open
|
||
// beside it, went past what a page is given and took the tab with it. On a
|
||
// clock the strip still fills while the scan runs.
|
||
let read = 0;
|
||
// And how many frames arrived the short way, handed over by the reading
|
||
// itself: a reading of this window's hands over every frame it stores, and
|
||
// there is no read to do for any of them.
|
||
let fresh = 0;
|
||
const watching = () => {
|
||
bump();
|
||
const session = scanSession();
|
||
const folder = session?.folder ?? null;
|
||
// A reading that is over leaves the catalogue it filled behind: this screen
|
||
// reads back the last of it, whether the reading was this window's or the
|
||
// one beside it — and the window watching never saw it otherwise, because a
|
||
// reading that is through has nothing left to hand over.
|
||
if (was && !folder) {
|
||
was = null;
|
||
void reload();
|
||
afterScan.current();
|
||
return;
|
||
}
|
||
was = folder;
|
||
if (!session) return;
|
||
const { progress } = session;
|
||
const shape = progress.dirs.length ? `${progress.dirs.length}:${progress.dirs[progress.dirs.length - 1].id}` : '';
|
||
if (shape !== drew) {
|
||
drew = shape;
|
||
// The names of a reading kept to one folder are the folders under that
|
||
// one and no others: the column keeps what it has, and the rows it
|
||
// already drew stay where they are.
|
||
if (!progress.from) setDirs(progress.dirs);
|
||
}
|
||
// A window beside the reading is handed the progress of another build, which
|
||
// may have no such count: the frames it has stored are then read back on a
|
||
// frame, as they were before there was one.
|
||
const written = progress.written ?? progress.done;
|
||
const now = Date.now();
|
||
if (written !== wrote && now - read >= CATALOGUE_MS) {
|
||
wrote = written;
|
||
read = now;
|
||
// Nothing came over the side, so the frames are another window's and
|
||
// there is nothing else to draw them from. The reading in this window
|
||
// handed its own over as they landed.
|
||
if (!fresh) void reload();
|
||
fresh = 0;
|
||
}
|
||
};
|
||
// The reading hands its frames over the moment their batch is stored, so the
|
||
// strip is the roll arriving rather than the roll being found again — a read
|
||
// of the whole catalogue costs every thumbnail in it, and on a folder of RAW
|
||
// that read beside a quarter of a gigabyte of decoder is what took the tab.
|
||
watchRows((rows) => {
|
||
fresh += rows.length;
|
||
setPhotos((prev) => [...prev, ...rows]);
|
||
});
|
||
const unwatch = watchScan(watching);
|
||
// A scan already in flight when this screen opens is picked up where it is:
|
||
// the reader who left for the studio comes back to the same roll.
|
||
watching();
|
||
return () => {
|
||
unwatch();
|
||
watchRows(null);
|
||
};
|
||
}, [reload]);
|
||
|
||
// The catalogue outlives the tab; the permission to read those folders does
|
||
// not. Asking is a quiet prompt, and a refusal leaves the folder listed with
|
||
// a button that asks again on a click.
|
||
useEffect(() => {
|
||
let alive = true;
|
||
void (async () => {
|
||
const rows = await listFolders();
|
||
if (!alive) return;
|
||
setFolders(rows);
|
||
// The remembered folder only stands while the folder it belongs to does: a
|
||
// folder that was removed is not a folder to open on.
|
||
setNode((prev) => (prev && rows.some((f) => f.name === prev.split('/')[0]) ? prev : (rows[0]?.name ?? null)));
|
||
const ok = new Set<string>();
|
||
for (const folder of rows) {
|
||
if (await ensurePermission(folder.handle)) ok.add(folder.name);
|
||
}
|
||
if (!alive) return;
|
||
setReady(ok);
|
||
await reload();
|
||
if (!alive) return;
|
||
setLoaded(true);
|
||
})();
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, [reload]);
|
||
|
||
// What the screen remembers: the folder that was open, the frame that was up in
|
||
// it, the width its column was dragged to, and whether the strip drew the whole
|
||
// branch under that folder or only the folder itself.
|
||
useEffect(() => {
|
||
if (node) keep(NODE_KEY, node);
|
||
}, [node]);
|
||
useEffect(() => {
|
||
if (up) keep(FRAME_KEY, up);
|
||
}, [up]);
|
||
useEffect(() => {
|
||
keep(COLUMN_KEY, String(colWidth));
|
||
}, [colWidth]);
|
||
useEffect(() => {
|
||
keep(OPEN_KEY, [...expanded].join(','));
|
||
}, [expanded]);
|
||
useEffect(() => {
|
||
keep(DEEP_KEY, String(deep));
|
||
}, [deep]);
|
||
|
||
// The menu closes on the next click anywhere but its own items, and on Escape.
|
||
// Escape is the whole reason this listens on the document instead of sitting
|
||
// behind a full-screen scrim: a scrim would eat the click that opens the next
|
||
// folder, which is half of how this screen is used.
|
||
useEffect(() => {
|
||
if (!menu) return;
|
||
const away = (e: Event) => {
|
||
if (e.target instanceof Element && e.target.closest('.lib-menu')) return;
|
||
setMenu(null);
|
||
};
|
||
const key = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') setMenu(null);
|
||
};
|
||
document.addEventListener('pointerdown', away);
|
||
document.addEventListener('keydown', key);
|
||
return () => {
|
||
document.removeEventListener('pointerdown', away);
|
||
document.removeEventListener('keydown', key);
|
||
};
|
||
}, [menu]);
|
||
|
||
const scan = useCallback(
|
||
async (folder: LibraryFolder, quiet = false, from = '') => {
|
||
setNote(null);
|
||
try {
|
||
const result = await startScan(folder, from);
|
||
if (!quiet) setNote(t('lib.scanned', { folder: from ? `${folder.name}/${from.slice(0, -1)}` : folder.name, added: result.added, total: result.total }));
|
||
// A reading kept to one folder names the folders under that one, which
|
||
// is no reason to fold the column down to them: the roll is still the
|
||
// roll, and the rows outside the folder being re-read are rows the
|
||
// reader is looking at.
|
||
if (!from) setDirs(result.dirs);
|
||
// No read back here. The reading handed its frames over as it stored
|
||
// them, and the screen watching it reads the catalogue back once the
|
||
// reading is done — the same read, half a beat later, and not a second
|
||
// one of the whole catalogue for a strip that is already drawn.
|
||
} catch {
|
||
setNote(t('lib.failed'));
|
||
}
|
||
},
|
||
[t]
|
||
);
|
||
|
||
// The folder this screen is on is read back to the disk on the way in, and again
|
||
// every time the tab is raised — but only when the last reading of it never
|
||
// finished. A reading that ran to its end has nothing left to find, and the
|
||
// reader who opens the library to choose a frame is not a reader who asked for
|
||
// their disk walked behind their back: on the folder they are opening, a walk
|
||
// is a hundred thousand names read off the disk and the band and the memory
|
||
// that goes with them, which is the whole of what this screen must not cost.
|
||
// A folder the reader wants looked at again says so itself, from the menu on
|
||
// its row; what is picked up here is the roll whose reading ended when the app
|
||
// did, and nothing else. No note either way: the ring on the row and the
|
||
// progress line are the report.
|
||
const rootKey = node ? node.split('/')[0] : null;
|
||
// When the folder was last walked for being raised. It stands outside the
|
||
// effect because the effect is rebuilt for the folder the reader moves to, and
|
||
// the walk it guards is of the folder on the disk, where nothing has moved
|
||
// either way.
|
||
const synced = useRef(0);
|
||
useEffect(() => {
|
||
const root = folders.find((f) => f.name === rootKey);
|
||
if (!loaded || !root || !ready.has(root.name)) return;
|
||
// Another window may hold the reading — the app beside the browser, which
|
||
// this window cannot see. Asking is a round trip, and the answer is what
|
||
// keeps this one from reading the same roll a second time.
|
||
const catchUp = () => {
|
||
if (scanSession()) return;
|
||
// A folder of a hundred thousand frames is a hundred thousand stats on the
|
||
// disk, and this screen is raised every time the reader comes back from the
|
||
// studio — so the walk waits for the folder to have had a moment to change,
|
||
// which is a second of a roll the reader was not going to notice and not
|
||
// the several it took to walk it again.
|
||
if (Date.now() - synced.current < CATCHUP_MS) return;
|
||
synced.current = Date.now();
|
||
void scanBusy().then(async (busy) => {
|
||
if (busy || scanSession()) return;
|
||
// A position left on the disk is a roll that stopped in the middle of
|
||
// itself and the only thing that finishes it is reading it again. This
|
||
// is the question, and it is answered by one small file opened and shut
|
||
// — not by the walk it decides on.
|
||
if (await unfinished(root.name)) void scan(root, true);
|
||
});
|
||
};
|
||
catchUp();
|
||
const raised = () => {
|
||
if (document.visibilityState === 'visible') catchUp();
|
||
};
|
||
document.addEventListener('visibilitychange', raised);
|
||
return () => document.removeEventListener('visibilitychange', raised);
|
||
// `folders` and `ready` are read here, not watched: the two only ever gain a
|
||
// name or a permission, and neither is a reason to read the disk again.
|
||
}, [loaded, rootKey, scan]);
|
||
|
||
const add = useCallback(async () => {
|
||
setNote(null);
|
||
try {
|
||
const folder = await pickFolder();
|
||
if (!folder) return;
|
||
setFolders((prev) => [...prev.filter((f) => f.name !== folder.name), folder].sort((a, b) => a.name.localeCompare(b.name)));
|
||
setReady((prev) => new Set(prev).add(folder.name));
|
||
setNode(folder.name);
|
||
await scan(folder);
|
||
} catch (err) {
|
||
// Closing the picker is a "not now", not a failure worth a line of text.
|
||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||
setNote(t('lib.failed'));
|
||
}
|
||
}, [scan, t]);
|
||
|
||
const reconnect = useCallback(
|
||
async (folder: LibraryFolder) => {
|
||
if (await ensurePermission(folder.handle)) {
|
||
setReady((prev) => new Set(prev).add(folder.name));
|
||
await scan(folder);
|
||
} else {
|
||
setNote(t('lib.failed'));
|
||
}
|
||
},
|
||
[scan, t]
|
||
);
|
||
|
||
// A rename only paints a label over the folder — the directory it points at is
|
||
// not touched, which is the whole point of keeping the two apart.
|
||
const rename = useCallback(
|
||
async (folder: LibraryFolder) => {
|
||
// The browser's own box: one line, no dialog to build, and it already knows
|
||
// how to ask. ponytail: swap it for an inline field if a label ever needs
|
||
// validating or previewing.
|
||
const label = window.prompt(t('lib.renameAsk'), folder.label ?? folder.name)?.trim();
|
||
if (!label || label === (folder.label ?? folder.name)) return;
|
||
await renameFolder(folder, label);
|
||
setFolders((prev) => prev.map((f) => (f.name === folder.name ? { ...f, label } : f)));
|
||
},
|
||
[t]
|
||
);
|
||
|
||
const drop = useCallback(
|
||
async (folder: LibraryFolder) => {
|
||
await removeFolder(folder.name);
|
||
const rest = folders.filter((f) => f.name !== folder.name);
|
||
setFolders(rest);
|
||
setDirs((prev) => prev.filter((d) => d.folder !== folder.name));
|
||
setNode(rest[0]?.name ?? null);
|
||
await reload();
|
||
},
|
||
[folders, reload]
|
||
);
|
||
|
||
// The frame goes to the studio through the address bar: the studio owns the
|
||
// load (develop, EXIF, session) and this page owns no part of it. While a scan
|
||
// is running the address bar is the one thing that changes — `go` keeps the
|
||
// reading where it is instead of reloading the page out from under it.
|
||
const open = useCallback(async (photo: LibraryPhoto) => {
|
||
const row = await getPhoto(photo.id);
|
||
if (!row) return;
|
||
// Read once here so a moved or deleted file answers with a note instead of
|
||
// a studio that opens on nothing.
|
||
try {
|
||
await readPhotoFile(row);
|
||
} catch {
|
||
setNote(t('lib.missing', { name: row.name }));
|
||
return;
|
||
}
|
||
go(`/app?lib=${encodeURIComponent(photo.id)}`);
|
||
}, [t]);
|
||
|
||
const rootName = node ? node.split('/')[0] : null;
|
||
|
||
// A row's folder as the walk spells it: '' for the picked folder itself, the
|
||
// path under it for a subfolder, and nothing for a row belonging to another
|
||
// folder — that one is not a folder of this roll.
|
||
const relOf = (key: string): string | null =>
|
||
!rootName ? null : key === rootName ? '' : key.startsWith(`${rootName}/`) ? `${key.slice(rootName.length + 1)}/` : null;
|
||
|
||
// The tree: one row per picked folder, then one per subfolder, indented by its
|
||
// depth — the folders the walk has named, whether or not a frame has been read
|
||
// out of them, each carrying how many frames sit at or under it. While a scan is
|
||
// running the count is the scan's own, so a row says how far the reading has
|
||
// come; the frames only reach the catalogue in one batch at the end, and a row
|
||
// that stood still until then would say nothing at all.
|
||
// A reading kept to one folder counts the frames of that folder and of what
|
||
// lies under it, with nothing at all to say about the rest of the roll: its
|
||
// numbers drawn over the column would count a roll down to a branch of itself.
|
||
// The column falls back on the catalogue until the reading is through.
|
||
const read = live && !live.progress.from ? live.progress.counts : null;
|
||
const nodes = useMemo<Node[]>(() => {
|
||
const hits = new Map<string, number>();
|
||
// The reading's own count is a floor, never a ceiling: a row says at least
|
||
// what the catalogue already holds of it. A roll being read again says its
|
||
// own size while the reading is still walking up to it — where the reading's
|
||
// number alone would have the head of the tree count 29980 while the line
|
||
// above it counts a hundred thousand, one question with two answers.
|
||
const counted = (key: string, hit: number | undefined) => Math.max(hit ?? 0, read?.[key] ?? 0);
|
||
const foldersUnder = new Map<string, Set<string>>();
|
||
// One path per folder between the picked one and `rel`, so a row is drawn for
|
||
// every folder on the way to a frame as well as for the frame's own.
|
||
const add = (folder: string, rel: string, counted: boolean) => {
|
||
const set = foldersUnder.get(folder) ?? new Set<string>();
|
||
foldersUnder.set(folder, set);
|
||
let path = '';
|
||
for (const part of rel.split('/')) {
|
||
path = path ? `${path}/${part}` : part;
|
||
set.add(path);
|
||
if (counted) hits.set(`${folder}/${path}`, (hits.get(`${folder}/${path}`) ?? 0) + 1);
|
||
}
|
||
};
|
||
for (const photo of photos) {
|
||
hits.set(photo.folder, (hits.get(photo.folder) ?? 0) + 1);
|
||
if (photo.dir) add(photo.folder, photo.dir, true);
|
||
}
|
||
// A folder the walk found is a row before it holds a frame: the names arrive
|
||
// a pass ahead of the thumbnails.
|
||
for (const dir of dirs) add(dir.folder, dir.rel, false);
|
||
const out: Node[] = [];
|
||
for (const folder of folders) {
|
||
out.push({ key: folder.name, label: folder.label || folder.name, depth: 0, count: counted(folder.name, hits.get(folder.name)) });
|
||
// Path order puts a folder before its own children, which is the order the
|
||
// indented rows have to come in.
|
||
for (const dir of [...(foldersUnder.get(folder.name) ?? [])].sort((a, b) => a.localeCompare(b))) {
|
||
const parts = dir.split('/');
|
||
out.push({
|
||
key: `${folder.name}/${dir}`,
|
||
label: parts[parts.length - 1],
|
||
depth: parts.length,
|
||
count: counted(`${folder.name}/${dir}`, hits.get(`${folder.name}/${dir}`)),
|
||
});
|
||
}
|
||
}
|
||
return out;
|
||
}, [dirs, folders, photos, read]);
|
||
|
||
// A row with anything under it is the one that folds: its key is the prefix of
|
||
// its children's, in the path order the rows come in.
|
||
const parents = useMemo(
|
||
() => new Set(nodes.filter((n) => n.depth > 0).map((n) => n.key.slice(0, n.key.lastIndexOf('/')))),
|
||
[nodes]
|
||
);
|
||
|
||
// What the column draws: a row whose parent is not open goes with it.
|
||
const rows = useMemo(
|
||
() =>
|
||
nodes.filter((n) => {
|
||
const parts = n.key.split('/');
|
||
for (let i = 1; i < parts.length; i++) if (!expanded.has(parts.slice(0, i).join('/'))) return false;
|
||
return true;
|
||
}),
|
||
[nodes, expanded]
|
||
);
|
||
|
||
// A remembered subfolder that no longer holds a frame falls back to the folder
|
||
// it sits in, so the screen never opens on a node that is not drawn.
|
||
useEffect(() => {
|
||
if (!loaded || !node || nodes.some((n) => n.key === node)) return;
|
||
setNode(nodes.find((n) => n.key === node.split('/')[0])?.key ?? nodes[0]?.key ?? null);
|
||
}, [loaded, node, nodes]);
|
||
|
||
// What the open node draws: its own frames, and — unless the branch has been
|
||
// shut out of the strip — the ones in every subfolder under it, because a
|
||
// roll's top level usually holds no file of its own.
|
||
const shown = useMemo(() => {
|
||
if (!rootName) return photos;
|
||
const dir = node === rootName ? '' : (node ?? '').slice(rootName.length + 1);
|
||
const below = dir === '' ? (p: LibraryPhoto) => p.dir !== '' : (p: LibraryPhoto) => p.dir.startsWith(`${dir}/`);
|
||
return photos.filter((p) => p.folder === rootName && (p.dir === dir || (deep && below(p))));
|
||
}, [deep, node, photos, rootName]);
|
||
|
||
const frame = shown.find((p) => p.id === up) ?? shown[0] ?? null;
|
||
// The strip draws the tiles around the one under the eye, not the whole shelf.
|
||
// A roll is thousands of frames and every tile drawn costs a `<button>`, an
|
||
// `<img>` and an object URL of its own — and a URL is about a tenth of a
|
||
// millisecond to make, which is a second of blocked main thread for pictures
|
||
// nobody has scrolled to. The spacers on either side of the drawn run keep the
|
||
// scrollbar measuring the shelf.
|
||
const strip = useStripWindow(shown.length, view === 'preview');
|
||
const drawn = useMemo(
|
||
() => shown.slice(Math.min(strip.from, shown.length), Math.min(strip.to, shown.length)),
|
||
[shown, strip.from, strip.to]
|
||
);
|
||
// The years the open folder holds, newest first: the filter offers the years
|
||
// there are frames to find in rather than a century of empty ones.
|
||
const years = useMemo(
|
||
() => [...new Set(photos.map((p) => new Date(p.taken).getFullYear()))].sort((a, b) => b - a),
|
||
[photos]
|
||
);
|
||
|
||
// What the thumbnail view draws, out of what the open node holds. A frame's
|
||
// hour is the hour the shutter fired in, on this machine's clock — the same
|
||
// reading the frame's own date line prints, so 16:00–18:00 is the afternoon
|
||
// the reader was out and not an offset of it.
|
||
const listed = useMemo(() => {
|
||
const rows = shown.filter((p) => {
|
||
if (minStar && (p.star ?? 0) < minStar) return false;
|
||
const at = new Date(p.taken);
|
||
if (year !== 'all' && at.getFullYear() !== Number(year)) return false;
|
||
if (from !== 'any' && at.getHours() < Number(from)) return false;
|
||
if (to !== 'any' && at.getHours() > Number(to)) return false;
|
||
return true;
|
||
});
|
||
// `shown` is already newest shutter first, so the oldest is the same list
|
||
// read backwards; the score comes first in the third, and the shutter breaks
|
||
// its ties the way the shelf does.
|
||
if (order === 'star') return [...rows].sort((a, b) => (b.star ?? 0) - (a.star ?? 0) || b.taken - a.taken);
|
||
return order === 'oldest' ? [...rows].reverse() : rows;
|
||
}, [shown, minStar, year, from, to, order]);
|
||
|
||
// The wall is the other list, and it draws its rows the way the strip draws its
|
||
// tiles: the ones around the eye, with a spacer standing in for the rest. A card
|
||
// is a card, an `<img>` and an object URL of its own, and twenty thousand of them
|
||
// is seven seconds of dead screen — the URL is only a tenth of it; the rest is
|
||
// the DOM and the number the browser formats for each date. The frame on the
|
||
// stage is given a picture wherever it sits — the stage is not the wall.
|
||
const wall = useWallWindow(listed.length, view === 'grid');
|
||
const painted = listed.slice(Math.min(wall.from, listed.length), Math.min(wall.to, listed.length));
|
||
const urls = useThumbUrls(view === 'preview' ? drawn : painted, frame);
|
||
|
||
// A frame's score: click a star to give it, click the star it already has to
|
||
// take the score back. The catalogue holds it, so it is the same score the next
|
||
// visit reads — and the list on screen is told, rather than read back whole for
|
||
// one number.
|
||
const rate = useCallback(async (photo: LibraryPhoto, n: number) => {
|
||
await setStar(photo.id, n);
|
||
setPhotos((prev) => prev.map((p) => (p.id === photo.id ? { ...p, star: n } : p)));
|
||
}, []);
|
||
const [shot, setShot] = useState<Shot | null>(null);
|
||
// Where the frame was shot, as the coordinates it carries — the fallback for a
|
||
// file whose place the geocoder could not name.
|
||
const coords = shot && shot.lat !== null && shot.lng !== null ? `${shot.lat.toFixed(4)}, ${shot.lng.toFixed(4)}` : null;
|
||
|
||
// The two lines the stage prints under the frame. The numbers come off the
|
||
// file's own head, so what is on screen is what the camera wrote and nothing
|
||
// this page invented; the place name is a network round trip that lands after
|
||
// them, and one that is refused leaves the coordinates standing.
|
||
useEffect(() => {
|
||
if (!frame) return;
|
||
const id = frame.id;
|
||
let live = true;
|
||
let read = shots.get(id);
|
||
if (!read) {
|
||
read = (async () => {
|
||
try {
|
||
const head = new Uint8Array(await (await readPhotoFile(frame)).slice(0, HEAD_BYTES).arrayBuffer());
|
||
const [specs, gps] = await Promise.all([readSpecs(head), readGps(head)]);
|
||
const shot: Shot = { line: specsLine(specs), lat: gps?.latitude ?? null, lng: gps?.longitude ?? null, place: null };
|
||
if (shot.lat !== null && shot.lng !== null) {
|
||
// Naming a place is a round trip on a PRO account; the numbers do not
|
||
// wait for it, and a refusal or a miss simply leaves them alone.
|
||
void api
|
||
.place(shot.lat, shot.lng)
|
||
.then(({ place }) => {
|
||
if (!place) return;
|
||
shot.place = place;
|
||
if (live) setShot({ ...shot });
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
return shot;
|
||
} catch {
|
||
// A file that cannot be read says nothing about itself.
|
||
return null;
|
||
}
|
||
})();
|
||
shots.set(id, read);
|
||
}
|
||
void read.then((shot) => {
|
||
if (live) setShot(shot);
|
||
});
|
||
return () => {
|
||
live = false;
|
||
};
|
||
}, [frame?.id]);
|
||
|
||
// A frame that has just come up is fitted: the zoom belonged to the negative
|
||
// that was up before it.
|
||
useEffect(() => {
|
||
setZoom(1);
|
||
}, [frame?.id]);
|
||
|
||
// A wheel tick over the frame is the zoom — a negative is the one thing on this
|
||
// screen worth filling the window with — and the point under the pointer is the
|
||
// point that stays put, which is how a reader aims at what to magnify. The
|
||
// listener goes on the element rather than through `onWheel`, because React's
|
||
// own wheel is passive and this one has to hold the page still while it zooms.
|
||
// It is not taken off again: it lives on the element, and the element leaves
|
||
// with it (the guard keeps a re-attach off the same node, which is what a
|
||
// double-invoked render would otherwise do).
|
||
const frameRef = useCallback((el: HTMLImageElement | null) => {
|
||
if (!el || el.dataset.zoom === 'bound') return;
|
||
el.dataset.zoom = 'bound';
|
||
el.addEventListener(
|
||
'wheel',
|
||
(e) => {
|
||
// A tick with no vertical axis (a wheel pushed sideways) is not a zoom.
|
||
if (!e.deltaY) return;
|
||
e.preventDefault();
|
||
const box = el.getBoundingClientRect();
|
||
// A tick is a notch, and a trackpad sends its notches in small pieces: the
|
||
// step is taken from how far the wheel turned rather than assumed, so both
|
||
// turn into the same travel under the pointer.
|
||
const notches = Math.max(-3, Math.min(3, -e.deltaY / 100));
|
||
setZoomAt(`${(((e.clientX - box.left) / box.width) * 100).toFixed(2)}% ${(((e.clientY - box.top) / box.height) * 100).toFixed(2)}%`);
|
||
setZoom((z) => Math.min(ZOOM_MAX, Math.max(1, z * ZOOM_STEP ** notches)));
|
||
},
|
||
{ passive: false }
|
||
);
|
||
}, []);
|
||
|
||
// The tile: the thumbnail the catalogue kept, or a stand-in for the RAW whose
|
||
// preview the camera never wrote. A tile only carries a handler where a click
|
||
// on the picture means "open it" — in the strip the click belongs to the frame
|
||
// it raises, not to the studio. The word is only for a frame that has no
|
||
// thumbnail to give: one that has one and has not been handed it yet — the wall
|
||
// hands pictures out only around the eye — keeps the box and says nothing.
|
||
const tile = (photo: LibraryPhoto, onPick?: () => void) =>
|
||
urls[photo.id] ? (
|
||
<img src={urls[photo.id]} alt="" loading="lazy" onClick={onPick} title={onPick ? t('lib.open') : undefined} />
|
||
) : (
|
||
<div className="lib-noimg" onClick={onPick} title={onPick ? t('lib.open') : undefined}>
|
||
{photo.thumb ? '' : 'RAW'}
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="adm lib-root">
|
||
<header className="adm-bar">
|
||
<a className="adm-brand" href="/">
|
||
<img src="/assets/RecipesCamIcon.png" alt="" width="26" height="26" />
|
||
<span>Recipes<em>Cam</em></span>
|
||
</a>
|
||
<b className="adm-title">{t('lib.title')}</b>
|
||
<span className="adm-spacer" />
|
||
<span className="hint" data-key="lib-count">
|
||
{t('lib.count', { n: photos.length })}
|
||
</span>
|
||
<a className="btn" data-key="lib-studio" href="/app">
|
||
{t('nav.studio')}
|
||
</a>
|
||
</header>
|
||
|
||
{note ? <p className="hint adm-note">{note}</p> : null}
|
||
|
||
{canBrowseFolders() ? (
|
||
<div className="adm-frame" data-key="lib-frame">
|
||
<div className="adm-pane">
|
||
{/* One toolbar for the whole screen: add, the scan in flight, and the
|
||
two ways to look at the open folder. The hint rides along on the
|
||
same row and ellipsises — the catalogue is the content, this bar
|
||
is furniture. */}
|
||
<div className="chip-row lib-bar">
|
||
<button type="button" className="btn primary" data-key="lib-add" disabled={!!live} onClick={() => void add()}>
|
||
{t('lib.add')}
|
||
</button>
|
||
{live ? (
|
||
<button type="button" className="btn" data-key="lib-stop" onClick={stopScan}>
|
||
{t('lib.stop')}
|
||
</button>
|
||
) : null}
|
||
{/* The catalogue's own copy: one button that picks the folder the
|
||
first time and writes into it every time after, and one that
|
||
reads it back. Both are furniture next to the reading itself,
|
||
so they sit behind the hint rather than in front of it. */}
|
||
<button
|
||
type="button"
|
||
className="btn"
|
||
data-key="lib-backup"
|
||
disabled={backBusy}
|
||
onClick={() => void backup()}
|
||
>
|
||
{t('lib.backup')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn"
|
||
data-key="lib-restore"
|
||
disabled={backBusy}
|
||
onClick={() => void restore()}
|
||
>
|
||
{t('lib.restore')}
|
||
</button>
|
||
{/* The folder is a control, not a caption: it is the whole of what
|
||
tells one backup from another, and pressing it is how a folder
|
||
is picked, a name given, a permission handed back. */}
|
||
<button
|
||
type="button"
|
||
className="hint"
|
||
data-key="lib-backup-state"
|
||
disabled={backBusy}
|
||
title={t('lib.backupPick')}
|
||
onClick={() => void choose()}
|
||
>
|
||
{back?.folder
|
||
? back.granted
|
||
? t('lib.backupAt', {
|
||
folder: back.folder,
|
||
n: back.photos,
|
||
time: back.at ? new Date(back.at).toLocaleString() : '—',
|
||
})
|
||
: t('lib.backupBlocked', { folder: back.folder })
|
||
: t('lib.backupNone')}
|
||
</button>
|
||
<span className="hint lib-bar-hint" title={t('lib.hint')}>
|
||
{t('lib.hint')}
|
||
</span>
|
||
{/* Nothing is drawn until the reading knows what it is reading: a
|
||
roll of nothing over nothing is the line talking before the
|
||
first pass has come back, which is a scan of a hundred
|
||
thousand frames announced as `0/0`. */}
|
||
<span className="hint" data-key="lib-progress">
|
||
{live && live.progress.total
|
||
? t('lib.scanning', { done: live.progress.done, total: live.progress.total, added: live.progress.added })
|
||
: ''}
|
||
</span>
|
||
<span className="adm-spacer" />
|
||
{folders.length > 0 ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className={`chip lib-icon${view === 'preview' ? ' on' : ''}`}
|
||
data-key="lib-view-preview"
|
||
aria-pressed={view === 'preview'}
|
||
aria-label={t('lib.viewPreview')}
|
||
title={t('lib.viewPreview')}
|
||
onClick={() => setView('preview')}
|
||
>
|
||
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor">
|
||
<rect x="1.5" y="3.5" width="13" height="9" rx="1.5" />
|
||
<circle cx="5.4" cy="6.8" r="1.1" fill="currentColor" stroke="none" />
|
||
<path d="M2.4 11.6 6 8.5l2.3 1.9 2.5-2.6 2.8 2.6" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`chip lib-icon${view === 'grid' ? ' on' : ''}`}
|
||
data-key="lib-view-grid"
|
||
aria-pressed={view === 'grid'}
|
||
aria-label={t('lib.viewGrid')}
|
||
title={t('lib.viewGrid')}
|
||
onClick={() => setView('grid')}
|
||
>
|
||
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor">
|
||
<rect x="2" y="2" width="5" height="5" rx="1" />
|
||
<rect x="9" y="2" width="5" height="5" rx="1" />
|
||
<rect x="2" y="9" width="5" height="5" rx="1" />
|
||
<rect x="9" y="9" width="5" height="5" rx="1" />
|
||
</svg>
|
||
</button>
|
||
{/* Whether the strip draws the branch under the open folder or
|
||
only the folder itself. The label says what the click does,
|
||
`on` says where the strip is now. */}
|
||
<button
|
||
type="button"
|
||
className={`chip${deep ? ' on' : ''}`}
|
||
data-key="lib-subs"
|
||
aria-pressed={deep}
|
||
title={t('lib.subsHint')}
|
||
onClick={() => setDeep((prev) => !prev)}
|
||
>
|
||
<span className="chip-label">{t(deep ? 'lib.subsHide' : 'lib.subsShow')}</span>
|
||
</button>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
|
||
{/* The folders are on their way in for as long as the catalogue behind
|
||
them is being read back, and a screen that says there is no folder
|
||
before it has looked is a screen that says it every visit. */}
|
||
{loaded && folders.length === 0 ? <p className="hint adm-note">{t('lib.noFolders')}</p> : null}
|
||
|
||
{folders.length > 0 ? (
|
||
<div className="adm-col">
|
||
|
||
<div className="adm-split" style={{ '--lib-col': `${colWidth}px` } as CSSProperties}>
|
||
{/* The shelf itself answers a right click on its empty part: the
|
||
column is the folder control, so one more folder is added
|
||
where folders are. */}
|
||
<aside
|
||
className="adm-album-list"
|
||
data-key="lib-tree"
|
||
title={t('lib.colHint')}
|
||
onContextMenu={(e) => {
|
||
if (e.target !== e.currentTarget) return;
|
||
e.preventDefault();
|
||
setMenu({ folder: null, x: Math.min(e.clientX, window.innerWidth - 190), y: Math.min(e.clientY, window.innerHeight - 96) });
|
||
}}
|
||
>
|
||
{rows.map((n) => {
|
||
const folder = folders.find((f) => f.name === n.key.split('/')[0]) ?? null;
|
||
// A roll being read says so on its own row: while a scan runs
|
||
// the toolbar's progress line is nowhere near the eye.
|
||
const scanning = !!folder && live?.folder === folder.name;
|
||
const under = parents.has(n.key);
|
||
return (
|
||
<button
|
||
key={n.key}
|
||
type="button"
|
||
className={`adm-album${node === n.key ? ' on' : ''}`}
|
||
data-key={`lib-node-${n.key}`}
|
||
aria-current={node === n.key}
|
||
aria-busy={scanning}
|
||
aria-expanded={under ? expanded.has(n.key) : undefined}
|
||
title={t('lib.nodeHint')}
|
||
style={{ paddingLeft: 9 + n.depth * 12 }}
|
||
// A row with children opens on the folder and folds it in
|
||
// the same click: the frames below stay in the strip, only
|
||
// the rows go.
|
||
onClick={() => {
|
||
setNode(n.key);
|
||
// The folder just clicked is the one a scan in flight
|
||
// reads next, whatever layer it sits in.
|
||
jumpScan(relOf(n.key));
|
||
if (!under) return;
|
||
setExpanded((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(n.key)) next.delete(n.key);
|
||
else next.add(n.key);
|
||
return next;
|
||
});
|
||
}}
|
||
// A folder's own menu: rename, scan again, forget. Rename
|
||
// and forget act on the folder that was picked, so a right
|
||
// click on a subfolder row brings up its roll's menu. The
|
||
// scan acts on the row under the pointer instead: the
|
||
// reader who right-clicks April wants April read, and
|
||
// reading the four years around it to reach the one folder
|
||
// they are looking at is a roll read for nothing. A row at
|
||
// the top level is a whole tree's head, so it also carries
|
||
// folding what sits under it, where a reader actually
|
||
// right-clicks. Shift+F10 raises the same event, which is
|
||
// the keyboard's way in.
|
||
onContextMenu={(e) => {
|
||
if (!folder) return;
|
||
e.preventDefault();
|
||
const box = e.currentTarget.getBoundingClientRect();
|
||
// The row's own path under the picked folder, '' for
|
||
// the picked folder itself — what a scan started from
|
||
// here would be kept to. Spelled the way the walk
|
||
// spells it, trailing slash and all.
|
||
const under = n.key.slice(folder.name.length + 1);
|
||
setMenu({
|
||
folder,
|
||
root: n.depth === 0,
|
||
rel: under ? `${under}/` : '',
|
||
x: Math.min(e.clientX || box.left, window.innerWidth - 190),
|
||
y: Math.min(e.clientY || box.top, window.innerHeight - 96),
|
||
});
|
||
}}
|
||
>
|
||
<span
|
||
className={`lib-caret${under ? (expanded.has(n.key) ? ' open' : '') : ' leaf'}`}
|
||
aria-hidden="true"
|
||
/>
|
||
<span className="adm-album-name">{n.label}</span>
|
||
{scanning ? <span className="lib-spin" aria-hidden="true" /> : null}
|
||
<span className="adm-album-count">{n.count}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</aside>
|
||
|
||
<div
|
||
className="lib-grip"
|
||
data-key="lib-grip"
|
||
role="separator"
|
||
aria-orientation="vertical"
|
||
aria-label={t('lib.colWidth')}
|
||
aria-valuenow={colWidth}
|
||
aria-valuemin={COLUMN_MIN}
|
||
aria-valuemax={COLUMN_MAX}
|
||
tabIndex={0}
|
||
title={t('lib.colWidth')}
|
||
onPointerDown={(e) => {
|
||
e.currentTarget.setPointerCapture(e.pointerId);
|
||
grip.current = { x: e.clientX, w: colWidth };
|
||
}}
|
||
onPointerMove={(e) => {
|
||
const held = grip.current;
|
||
if (!held) return;
|
||
// 88px is the narrowest a name and its count still read at,
|
||
// 460 the widest the stage can lose and stay a stage.
|
||
setColWidth(Math.round(Math.min(COLUMN_MAX, Math.max(COLUMN_MIN, held.w + e.clientX - held.x))));
|
||
}}
|
||
onPointerUp={(e) => {
|
||
grip.current = null;
|
||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
const step = e.key === 'ArrowLeft' ? -12 : e.key === 'ArrowRight' ? 12 : 0;
|
||
if (!step) return;
|
||
e.preventDefault();
|
||
setColWidth((w) => Math.min(COLUMN_MAX, Math.max(COLUMN_MIN, w + step)));
|
||
}}
|
||
/>
|
||
|
||
<section className="adm-stage" data-key="lib-stage">
|
||
{view === 'grid' ? (
|
||
<>
|
||
{/* What the shelf is read through. It holds every frame the
|
||
open node does — a filter is a way of looking, not a
|
||
second shelf — and the line at its end says how many
|
||
are left, so a filter that finds nothing says so. */}
|
||
<div className="chip-row lib-filters">
|
||
<select
|
||
className="adm-input"
|
||
data-key="lib-sort"
|
||
aria-label={t('lib.sort')}
|
||
value={order}
|
||
onChange={(e) => setOrder(e.target.value as 'newest' | 'oldest' | 'star')}
|
||
>
|
||
<option value="newest">{t('lib.sortNewest')}</option>
|
||
<option value="oldest">{t('lib.sortOldest')}</option>
|
||
<option value="star">{t('lib.sortStars')}</option>
|
||
</select>
|
||
<select
|
||
className="adm-input"
|
||
data-key="lib-filter-star"
|
||
aria-label={t('lib.rating')}
|
||
value={String(minStar)}
|
||
onChange={(e) => setMinStar(Number(e.target.value))}
|
||
>
|
||
<option value="0">{t('lib.ratingAll')}</option>
|
||
{[5, 4, 3, 2, 1].map((n) => (
|
||
<option key={n} value={String(n)}>
|
||
{t('lib.ratingAtLeast', { n })}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
className="adm-input"
|
||
data-key="lib-filter-year"
|
||
aria-label={t('lib.year')}
|
||
value={year}
|
||
onChange={(e) => setYear(e.target.value)}
|
||
>
|
||
<option value="all">{t('lib.yearAll')}</option>
|
||
{years.map((y) => (
|
||
<option key={y} value={String(y)}>
|
||
{y}
|
||
</option>
|
||
))}
|
||
</select>
|
||
{/* The two ends of the hours: 16:00 to 18:00 is the
|
||
afternoon the reader was out, and either end on its
|
||
own is "from 16:00" or "up to 18:00". */}
|
||
<select
|
||
className="adm-input"
|
||
data-key="lib-filter-from"
|
||
aria-label={t('lib.hourFrom')}
|
||
value={from}
|
||
onChange={(e) => setFrom(e.target.value)}
|
||
>
|
||
<option value="any">{t('lib.hourFromAny')}</option>
|
||
{HOURS.map((h) => (
|
||
<option key={h} value={String(h)}>
|
||
{`${String(h).padStart(2, '0')}:00`}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
className="adm-input"
|
||
data-key="lib-filter-to"
|
||
aria-label={t('lib.hourTo')}
|
||
value={to}
|
||
onChange={(e) => setTo(e.target.value)}
|
||
>
|
||
<option value="any">{t('lib.hourToAny')}</option>
|
||
{HOURS.map((h) => (
|
||
<option key={h} value={String(h)}>
|
||
{`${String(h).padStart(2, '0')}:00`}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<span className="hint" data-key="lib-listed">
|
||
{t('lib.count', { n: listed.length })}
|
||
</span>
|
||
</div>
|
||
{/* The wall is the shelf's own length, so the scrollbar on
|
||
its right edge still reaches every frame; what is drawn
|
||
is the rows around the eye, with a spacer standing in
|
||
for the rows above and below. A card is a card, an
|
||
<img> and an object URL of its own, and twenty thousand
|
||
of them is a dead screen. */}
|
||
<div className="adm-grid" ref={wall.ref}>
|
||
{wall.above > 0 ? <span className="adm-wall-gap" style={{ height: wall.above }} aria-hidden="true" /> : null}
|
||
{painted.map((photo) => (
|
||
<article className="adm-card" key={photo.id} data-key={`lib-photo-${photo.id}`}>
|
||
{tile(photo, () => void open(photo))}
|
||
<div className="adm-meta">
|
||
<b>{photo.name}</b>
|
||
<span>
|
||
{photo.star ? `★${photo.star} · ` : ''}
|
||
{new Date(photo.taken).toLocaleDateString()} · {t('lib.size', { mb: (photo.size / 1048576).toFixed(1) })}
|
||
{edited.has(photo.id) ? ` · ${t('lib.edited')}` : ''}
|
||
</span>
|
||
</div>
|
||
<button type="button" className="btn primary" data-key={`lib-open-${photo.id}`} onClick={() => void open(photo)}>
|
||
{t('lib.open')}
|
||
</button>
|
||
</article>
|
||
))}
|
||
{wall.below > 0 ? <span className="adm-wall-gap" style={{ height: wall.below }} aria-hidden="true" /> : null}
|
||
</div>
|
||
</>
|
||
) : frame ? (
|
||
<>
|
||
{urls[frame.id] ? (
|
||
<img
|
||
className="adm-stage-img"
|
||
data-key="lib-stage-img"
|
||
ref={frameRef}
|
||
src={urls[frame.id]}
|
||
alt=""
|
||
onClick={() => void open(frame)}
|
||
title={t('lib.open')}
|
||
style={zoom === 1 ? undefined : { transformOrigin: zoomAt, transform: `scale(${zoom})` }}
|
||
/>
|
||
) : (
|
||
<div className="lib-noimg" onClick={() => void open(frame)} title={t('lib.open')}>
|
||
RAW
|
||
</div>
|
||
)}
|
||
<div className="adm-meta" data-key="lib-stage-meta">
|
||
<b>{frame.name}</b>
|
||
<span>{frame.dir || node}</span>
|
||
<span>
|
||
{new Date(frame.taken).toLocaleString()} · {t('lib.size', { mb: (frame.size / 1048576).toFixed(1) })}
|
||
{edited.has(frame.id) ? ` · ${t('lib.edited')}` : ''}
|
||
</span>
|
||
{shot?.place || coords ? (
|
||
<span data-key="lib-stage-place" title={coords ?? undefined}>
|
||
{shot?.place ?? coords}
|
||
</span>
|
||
) : null}
|
||
{shot?.line ? <span data-key="lib-stage-specs">{shot.line}</span> : null}
|
||
</div>
|
||
<div className="chip-row">
|
||
<button type="button" className="btn primary" data-key="lib-open" onClick={() => void open(frame)}>
|
||
{t('lib.open')}
|
||
</button>
|
||
<span className="adm-spacer" />
|
||
{/* The frame's own score, and the only place one is
|
||
given: the star that is lit is the score it has,
|
||
and the star under the click is the score it gets —
|
||
the one it already has takes the score back. */}
|
||
<div className="lib-stars" data-key="lib-stars" role="group" aria-label={t('lib.rating')}>
|
||
{[1, 2, 3, 4, 5].map((n) => (
|
||
<button
|
||
key={n}
|
||
type="button"
|
||
className={`lib-star${(frame.star ?? 0) >= n ? ' on' : ''}`}
|
||
data-key={`lib-star-${n}`}
|
||
aria-pressed={(frame.star ?? 0) >= n}
|
||
aria-label={t('lib.starHint', { n })}
|
||
title={t('lib.starHint', { n })}
|
||
onClick={() => void rate(frame, (frame.star ?? 0) === n ? 0 : n)}
|
||
>
|
||
★
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<p className="hint adm-row-empty">{t('lib.empty')}</p>
|
||
)}
|
||
</section>
|
||
</div>
|
||
|
||
{/* The strip: one thumbnail per frame the open node holds, in the
|
||
order the catalogue reads them (newest shutter first) — the ones
|
||
around the eye, with a spacer standing in for each run that is
|
||
not drawn, so the scrollbar still measures the whole shelf. */}
|
||
{view === 'preview' ? (
|
||
<div
|
||
ref={strip.ref}
|
||
className="adm-filmstrip"
|
||
data-key="lib-strip"
|
||
// A wheel has no sideways axis, so a plain tick over the strip
|
||
// walks the frames along it. Nothing else there can scroll.
|
||
onWheel={(e) => {
|
||
if (!e.deltaX) e.currentTarget.scrollLeft += e.deltaY;
|
||
}}
|
||
>
|
||
{strip.from > 0 ? (
|
||
<span className="adm-thumb-gap" style={{ flexBasis: strip.from * TILE_STEP - 8 }} aria-hidden="true" />
|
||
) : null}
|
||
{drawn.map((photo) => (
|
||
<button
|
||
key={photo.id}
|
||
type="button"
|
||
className={`adm-thumb${frame?.id === photo.id ? ' on' : ''}`}
|
||
data-key={`lib-thumb-${photo.id}`}
|
||
title={photo.name}
|
||
onClick={() => setUp(photo.id)}
|
||
>
|
||
{tile(photo)}
|
||
<span className="adm-thumb-cap">{photo.name}</span>
|
||
</button>
|
||
))}
|
||
{shown.length - strip.to > 0 ? (
|
||
<span className="adm-thumb-gap" style={{ flexBasis: (shown.length - strip.to) * TILE_STEP - 8 }} aria-hidden="true" />
|
||
) : null}
|
||
{shown.length === 0 ? <p className="hint adm-row-empty">{t('lib.empty')}</p> : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<p className="adm-note hint">{t('lib.unsupported')}</p>
|
||
)}
|
||
|
||
{/* The context menu: a folder gets what belongs to a folder rather than to a
|
||
frame, the empty part of the column gets the folder that is missing, and
|
||
the head of the tree gets the whole tree folded. A folder whose
|
||
permission has lapsed gets the one thing that can be done about it. */}
|
||
{menu ? (
|
||
<div className="lib-menu" data-key="lib-menu" style={{ left: menu.x, top: menu.y }} onContextMenu={(e) => e.preventDefault()}>
|
||
{/* Fold-the-tree leads the menu of a row at the top level, and is the
|
||
way back to the column's rest: every row shut, the top-level one
|
||
included, which is the shape the column opens in. A row's own click
|
||
still draws its subtree and folds it again, so this is for a tree
|
||
that was walked into rather than for one row. */}
|
||
{menu.root ? (
|
||
<button
|
||
type="button"
|
||
className="lib-menu-item"
|
||
data-key="lib-menu-collapse"
|
||
disabled={expanded.size === 0}
|
||
onClick={() => {
|
||
setMenu(null);
|
||
setExpanded(new Set());
|
||
}}
|
||
>
|
||
<span className="lib-menu-icon" aria-hidden="true">▴</span>
|
||
{t('lib.collapseAll')}
|
||
</button>
|
||
) : null}
|
||
{menu.folder ? (
|
||
ready.has(menu.folder.name) ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="lib-menu-item"
|
||
data-key={`lib-rename-${menu.folder.name}`}
|
||
onClick={() => {
|
||
setMenu(null);
|
||
void rename(menu.folder!);
|
||
}}
|
||
>
|
||
<span className="lib-menu-icon" aria-hidden="true">✎</span>
|
||
{t('lib.rename')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="lib-menu-item"
|
||
data-key={`lib-rescan-${menu.folder.name}`}
|
||
disabled={!!live}
|
||
onClick={() => {
|
||
setMenu(null);
|
||
void scan(menu.folder!, false, menu.rel ?? '');
|
||
}}
|
||
>
|
||
<span className="lib-menu-icon" aria-hidden="true">↻</span>
|
||
{t('lib.rescan')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="lib-menu-item"
|
||
data-key={`lib-drop-${menu.folder.name}`}
|
||
onClick={() => {
|
||
setMenu(null);
|
||
void drop(menu.folder!);
|
||
}}
|
||
>
|
||
<span className="lib-menu-icon" aria-hidden="true">✕</span>
|
||
{t('lib.remove')}
|
||
</button>
|
||
</>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
className="lib-menu-item"
|
||
data-key={`lib-reconnect-${menu.folder.name}`}
|
||
disabled={!!live}
|
||
onClick={() => {
|
||
setMenu(null);
|
||
void reconnect(menu.folder!);
|
||
}}
|
||
>
|
||
<span className="lib-menu-icon" aria-hidden="true">⚿</span>
|
||
{t('lib.reconnect')}
|
||
</button>
|
||
)
|
||
) : (
|
||
<button
|
||
type="button"
|
||
className="lib-menu-item"
|
||
data-key="lib-menu-add"
|
||
disabled={!!live}
|
||
onClick={() => {
|
||
setMenu(null);
|
||
void add();
|
||
}}
|
||
>
|
||
<span className="lib-menu-icon" aria-hidden="true">＋</span>
|
||
{t('lib.add')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// One object URL per tile, made when the row does and dropped with it: a folder
|
||
// of thousands cannot hold thousands of live URLs, and the list the panels paint is
|
||
// the only list to make them for. `also` is a frame drawn outside that list — the
|
||
// one on the stage, whose tile may be nowhere near the strip's window.
|
||
function useThumbUrls(photos: LibraryPhoto[], also?: LibraryPhoto | null): Record<string, string> {
|
||
const [urls, setUrls] = useState<Record<string, string>>({});
|
||
// The URL a row was given, kept for as long as the row is on screen. A scan lands
|
||
// in batches, and each batch hands the screen the whole list again — so a URL
|
||
// made afresh per list is a picture the browser decodes afresh per batch:
|
||
// thousands of bitmaps over a roll, for tiles that have not moved. A row that
|
||
// leaves the list takes its URL with it.
|
||
const made = useRef(new Map<string, string>());
|
||
useEffect(() => {
|
||
const list = also && !photos.includes(also) ? [...photos, also] : photos;
|
||
const next: Record<string, string> = {};
|
||
for (const photo of list) {
|
||
if (!photo.thumb) continue;
|
||
const had = made.current.get(photo.id);
|
||
if (had) next[photo.id] = had;
|
||
else {
|
||
const url = URL.createObjectURL(photo.thumb);
|
||
made.current.set(photo.id, url);
|
||
next[photo.id] = url;
|
||
}
|
||
}
|
||
for (const [id, url] of made.current) {
|
||
if (id in next) continue;
|
||
URL.revokeObjectURL(url);
|
||
made.current.delete(id);
|
||
}
|
||
setUrls(next);
|
||
}, [photos, also]);
|
||
// The screen going away takes every URL with it.
|
||
useEffect(
|
||
() => () => {
|
||
for (const url of made.current.values()) URL.revokeObjectURL(url);
|
||
made.current.clear();
|
||
},
|
||
[]
|
||
);
|
||
return urls;
|
||
}
|
||
|
||
// Which tiles of the strip are drawn: the run under the viewport and `STRIP_KEEP`
|
||
// either side of it. Without this the strip builds a tile for every frame the open
|
||
// node holds before the reader has seen one — 400ms of DOM and a second of object
|
||
// URLs on a roll of twenty thousand — and the screen is dead for the whole of it.
|
||
// `on` is the strip being up: the element the window measures is the strip's own.
|
||
function useStripWindow(count: number, on: boolean): { ref: RefObject<HTMLDivElement>; from: number; to: number } {
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
// The first window is a screenful: the strip is not in the DOM yet when this
|
||
// runs, so what it measures is the next paint's, and this is what the first
|
||
// paint draws.
|
||
const [win, setWin] = useState(() => ({ from: 0, to: Math.min(count, STRIP_KEEP * 2 + 24) }));
|
||
useEffect(() => {
|
||
if (!on) return;
|
||
const el = ref.current;
|
||
if (!el) return;
|
||
const measure = () => {
|
||
const from = Math.max(0, Math.floor(el.scrollLeft / TILE_STEP) - STRIP_KEEP);
|
||
const to = Math.min(count, Math.ceil((el.scrollLeft + el.clientWidth) / TILE_STEP) + STRIP_KEEP);
|
||
setWin((prev) => (prev.from === from && prev.to === to ? prev : { from, to }));
|
||
};
|
||
measure();
|
||
el.addEventListener('scroll', measure, { passive: true });
|
||
const ro = new ResizeObserver(measure);
|
||
ro.observe(el);
|
||
return () => {
|
||
el.removeEventListener('scroll', measure);
|
||
ro.disconnect();
|
||
};
|
||
}, [count, on]);
|
||
return { ref, from: win.from, to: win.to };
|
||
}
|
||
|
||
|
||
// Which rows of the wall are drawn: the ones under its viewport and `WALL_ROWS`
|
||
// either side, with a spacer standing in for the rest so the scrollbar still spans
|
||
// the shelf. The wall holds every frame the open node does — a filter is a way of
|
||
// looking, not a second shelf — and a card is a card, an `<img>` and an object URL
|
||
// of its own; twenty thousand of them is a dead screen for as long as they take to
|
||
// build. `on` is the wall being up, since the element measured is its own.
|
||
function useWallWindow(count: number, on: boolean): { ref: RefObject<HTMLDivElement>; from: number; to: number; above: number; below: number } {
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
// The first window is a screenful: the wall has not been measured yet.
|
||
const [win, setWin] = useState(() => ({ from: 0, to: Math.min(count, 24), above: 0, below: 0 }));
|
||
const measureRef = useRef<() => void>(() => {});
|
||
// The window over a scroll container is taken rather than kept, so it is taken
|
||
// after every render: the first pass draws a screenful, the next reads the row's
|
||
// step off it and lays out the spacers, and the pass after that leaves both
|
||
// alone. The listeners are for the two things no render can see coming — a
|
||
// scroll of the wall, and the window itself changing size.
|
||
useEffect(() => {
|
||
if (!on) return;
|
||
const el = ref.current;
|
||
if (!el) return;
|
||
const measure = () => {
|
||
const cards = el.querySelectorAll<HTMLElement>(':scope > .adm-card');
|
||
const first = cards[0];
|
||
let cols = 0;
|
||
if (first) while (cols < cards.length && cards[cols].offsetTop === first.offsetTop) cols++;
|
||
// One row, or a wall not yet drawn: open on the first screenful and let the
|
||
// next pass read the step off what it drew.
|
||
if (cards.length <= cols) {
|
||
const to = Math.min(count, 24);
|
||
setWin((prev) => (prev.from === 0 && prev.to === to && !prev.above && !prev.below ? prev : { from: 0, to, above: 0, below: 0 }));
|
||
return;
|
||
}
|
||
// The step from one row to the next, taken as the drawn run's own average.
|
||
// The cards do NOT all stand the same height — a caption that wraps makes
|
||
// its row taller — and `offsetTop` is rounded to whole pixels, so the
|
||
// smallest step would be a pixel short on every one of thousands of rows.
|
||
// The average of the rows in hand is the honest guess at the ones that are
|
||
// not in hand.
|
||
const rowsDrawn = Math.floor(cards.length / cols);
|
||
if (rowsDrawn < 2) return;
|
||
const pitch = (cards[(rowsDrawn - 1) * cols].getBoundingClientRect().top - cards[0].getBoundingClientRect().top) / (rowsDrawn - 1);
|
||
if (!(pitch > 0)) return;
|
||
const rows = Math.ceil(count / cols);
|
||
const row0 = Math.max(0, Math.floor(el.scrollTop / pitch) - WALL_ROWS);
|
||
const row1 = Math.min(rows, Math.ceil((el.scrollTop + el.clientHeight) / pitch) + WALL_ROWS);
|
||
const from = row0 * cols;
|
||
const to = Math.min(count, row1 * cols);
|
||
// A spacer's own height keeps the gap the grid would have left under the
|
||
// last row it stands in for.
|
||
const above = row0 ? row0 * pitch - WALL_GAP : 0;
|
||
const below = row1 < rows ? (rows - row1) * pitch - WALL_GAP : 0;
|
||
setWin((prev) =>
|
||
prev.from === from && prev.to === to && prev.above === above && prev.below === below ? prev : { from, to, above, below }
|
||
);
|
||
};
|
||
measureRef.current = measure;
|
||
const onScroll = () => measure();
|
||
el.addEventListener('scroll', onScroll, { passive: true });
|
||
const ro = new ResizeObserver(onScroll);
|
||
ro.observe(el);
|
||
return () => {
|
||
measureRef.current = () => {};
|
||
el.removeEventListener('scroll', onScroll);
|
||
ro.disconnect();
|
||
};
|
||
}, [count, on]);
|
||
useLayoutEffect(() => {
|
||
measureRef.current();
|
||
});
|
||
return { ref, from: win.from, to: win.to, above: win.above, below: win.below };
|
||
}
|