gallery/harnesses/ttimg/frontend/dist/index.html
Greg Pomerantz 16cd868f22 gtauri: pure-push watching only; one emit per burst; live swipe preview
Watch de-duplication (per the plan review): FileObserver (inotify,
push) and MediaStore ContentObserver (URI push) are the ONLY change
detectors. Removed: the 100 ms recv_timeout tick, the fast_dir_sig
mtime-diff watcher, collect_watched_dirs, changed_dirs, dir_sig,
rescan_subtrees, and the 5-minute full-rescan timer thread.
watch_files now blocks on the push channel; on Android each wake
coalesces ~50 ms so a burst of N file events becomes one payload
batch, one SQLite connection, and ONE grid emit (verified on the
emulator: 20-file copy = 1-2 emits, 20-file delete = 1 emit,
single add still lands in ~75-95 ms).

FileObserver rewritten: recursive registration (Pictures/DCIM tree,
cap 5000 dirs) and self-extending — a CREATE/MOVED_TO on a directory
spawns a new observer for it, so new albums are watched too.
tif/tiff added to the image filter.

Dead code removed (the Tauri port never wired them): scan::walk,
walk_dir_nostats, walk_dir_into, mtime_ns, decode_jpeg (full-size),
images::thumb_png, db::set_thumb, db::list_entries, db::count,
db::delete_by_media_id; Thumb shrunk to {rgb,width,height} (the
grid is uniform squares; the viewer uses full-res). Tests now
compile (tempfile dev-dependency was missing — the test module
never built) and were fixed to match the current API.

Viewer: live swipe preview — while a horizontal drag is in flight at
fit scale, the picture being swiped in renders on the page strip
(second <img>, its grid thumb, a ~1 ms mem hit) and tracks the
finger, so there is no blank side. On commit the primary image takes
over from exactly where the preview was; on snap-back the preview
slides back with the tween. Verified on the emulator (two images
visible mid-drag, clean slide home).

Not re-verified: 120 Hz jank (per instruction — measure once when
settled). Desktop paths untouched (deferred).
2026-11-03 12:49:30 -05:00

106 lines
3.5 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ttimg</title>
<style>
/* The question this page answers: put the FULL 8,580-image layout in
the DOM and let Chromium own everything — lazy loading, async
decode, downsampled-decode, image cache + eviction, and
compositor-driven native scroll. No JS scroll, no virtualization. */
html, body {
margin: 0; padding: 0;
background: #0a0a0c;
overscroll-behavior: none; /* no rubber-band / chain, clean measurement */
}
body { overflow-y: scroll; }
#grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 4px;
}
/* Explicit intrinsic aspect via width/height attrs on each <img> →
zero layout shift when the bytes land. */
#grid img {
width: 100%;
height: auto;
display: block;
background: #1c1c22; /* visible placeholder until the image lands */
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
"use strict";
const N = 8580; // same population as the gallery/sltest
const UNIQ = 512; // unique source JPEGs, cycled across slots
const W0 = 1024, H0 = 768;
// ---- build the FULL DOM (no virtualization) -----------------------------
// 8,580 <img> elements; Chromium's lazy loading (intersection-based) is
// the "virtualization": fetch + decode only what is near the viewport,
// downsampled to display size, cached, evicted under memory pressure.
const grid = document.getElementById("grid");
let loaded = 0;
{
const frag = document.createDocumentFragment();
for (let i = 0; i < N; i++) {
const im = new Image();
im.loading = "lazy"; // Chromium intersection-based fetch
im.decoding = "async"; // decode off the main thread
im.width = W0; im.height = H0; // aspect locked, no shift
im.src = "img/" + String(i % UNIQ).padStart(3, "0") + ".jpg";
im.addEventListener("load", () => loaded++);
frag.appendChild(im);
}
grid.appendChild(frag);
}
// ---- FR logging (fr_capture.py convention) ------------------------------
let frLast = -1;
let frBatch = [];
let frLines = 0;
function frLog(t) {
const work = performance.now() - t;
if (frLast >= 0) {
frBatch.push("FR " + t.toFixed(2).padStart(11) +
" gap=" + (t - frLast).toFixed(2).padStart(7) +
" cost=" + work.toFixed(2).padStart(6) + " drew=1");
}
frLast = t;
if (++frLines % 120 === 0) flushFr();
}
function flushFr() {
if (frBatch.length === 0) return;
// Also report image-load progress on a separate line prefix (the
// capture tool's FR regex ignores these).
frBatch.push("IMG t=" + frLast.toFixed(1) + " loaded=" + loaded + "/" + N +
" scrollY=" + Math.round(window.scrollY));
const payload = frBatch.join("\n") + "\n";
frBatch = [];
try { window.__TAURI__.event.emit("ttimg-fr", payload); } catch (e) {}
}
// rAF = the frame clock the user sees (Chromium fires it every
// composited frame, 120 Hz while scrolling). Cost is ~0 here because
// the DOM is static: the interesting work (decode, paint-on-arrival)
// happens BETWEEN callbacks, and would show up as gap spikes.
function frame(t) { frLog(t); requestAnimationFrame(frame); }
requestAnimationFrame(frame);
window.addEventListener("load", () => {
try {
window.__TAURI__.event.emit("ttimg-log", {
msg: "ttimg up " + window.innerWidth + "x" + window.innerHeight +
" dpr=" + window.devicePixelRatio + " imgs=" + N,
});
} catch (e) {}
});
</script>
</body>
</html>