From 5d610bcad55c5d908a4ae046390124b5f5174762 Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Fri, 10 Apr 2026 01:00:45 +0900 Subject: better debug, change button sorting --- src/App.svelte | 48 ++++++------ src/lib/cache/autoCacheService.ts | 24 +++++- src/lib/cache/imageCache.ts | 76 +++++++++++++++++-- src/lib/components/CacheDebug.svelte | 122 ++++++++++++------------------ src/lib/components/CachedThumbnail.svelte | 5 +- src/lib/components/ImageList.svelte | 2 +- src/lib/components/ImagePreview.svelte | 4 +- 7 files changed, 171 insertions(+), 110 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index cd63c9b..d224306 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -147,6 +147,7 @@ newImagePaths = updated; } + let showDebug = $state(false); let saving = $state(false); async function saveToDevice() { @@ -219,9 +220,7 @@
Photos {cachedCount}/{totalCount > 0 ? totalCount : images.length} - {#if isAutoCaching} - - {/if} +
@@ -231,14 +230,22 @@
-
+ +
-
- ✕ -
+ + - - - -
@@ -305,4 +299,6 @@ {/if} - +{#if showDebug} + +{/if} diff --git a/src/lib/cache/autoCacheService.ts b/src/lib/cache/autoCacheService.ts index 6d29598..b144f1d 100644 --- a/src/lib/cache/autoCacheService.ts +++ b/src/lib/cache/autoCacheService.ts @@ -45,6 +45,9 @@ class AutoCacheService { /** The AbortController for the current background download. */ private _currentAbort: AbortController | undefined; + /** Current download speed in bytes/sec. 0 when idle. */ + private _downloadSpeed = 0; + /** The image list to work through (newest first). */ private _images: FlashAirFileEntry[] = []; @@ -100,6 +103,11 @@ class AutoCacheService { return this._images.length; } + /** Current download speed in bytes/second. 0 when not downloading. */ + get downloadSpeed(): number { + return this._downloadSpeed; + } + /** Check if a path has been confirmed fully cached. */ isCached(path: string): boolean { return this._cachedPaths.has(path); @@ -245,7 +253,7 @@ class AutoCacheService { if (reader === undefined) { const blob = await res.blob(); if (abort.signal.aborted) return false; - void imageCache.put('full', image.path, blob); + void imageCache.put('full', image.path, blob, undefined, image.date.getTime()); this._progressMap.set(image.path, 1); this._notify(); return true; @@ -253,6 +261,8 @@ class AutoCacheService { const chunks: Uint8Array[] = []; let received = 0; + let speedStartTime = performance.now(); + let speedStartBytes = 0; while (true) { const { done, value } = await reader.read(); @@ -261,6 +271,17 @@ class AutoCacheService { received += value.byteLength; const progress = totalBytes > 0 ? received / totalBytes : 0; this._progressMap.set(image.path, progress); + + // Calculate speed every ~500ms to avoid excessive jitter + const now = performance.now(); + const elapsed = now - speedStartTime; + if (elapsed >= 500) { + const bytesInWindow = received - speedStartBytes; + this._downloadSpeed = Math.round(bytesInWindow / (elapsed / 1000)); + speedStartTime = now; + speedStartBytes = received; + } + this._notify(); } @@ -278,6 +299,7 @@ class AutoCacheService { return false; } finally { this._downloading = false; + this._downloadSpeed = 0; this._currentAbort = undefined; } } diff --git a/src/lib/cache/imageCache.ts b/src/lib/cache/imageCache.ts index 5ff7393..0ccb975 100644 --- a/src/lib/cache/imageCache.ts +++ b/src/lib/cache/imageCache.ts @@ -15,6 +15,8 @@ export interface CachedImage { readonly meta: ThumbnailMeta | undefined; /** Unix timestamp (ms) when this entry was stored. */ readonly storedAt: number; + /** Unix timestamp (ms) of the file's date on the camera. Used for eviction priority. */ + readonly fileDate: number | undefined; } type CacheKey = `${'thumbnail' | 'full'}:${string}`; @@ -86,6 +88,7 @@ interface StoredRecord { readonly blob: Blob; readonly meta: ThumbnailMeta | undefined; readonly storedAt: number; + readonly fileDate: number | undefined; } /** Read a single record from IndexedDB. Returns undefined on any failure. */ @@ -162,8 +165,44 @@ async function idbDelete(key: CacheKey): Promise { }); } -/** 30 days in milliseconds. */ -const CACHE_TTL_MS = 30 * 24 * 60 * 60 * 1000; +/** 3 days in milliseconds. */ +const CACHE_TTL_MS = 3 * 24 * 60 * 60 * 1000; + +/** Maximum total size of cached blobs (memory + IDB). 850 MB. */ +const MAX_CACHE_BYTES = 850 * 1024 * 1024; + +/** Current total bytes tracked in the memory cache. */ +let memoryCacheTotalBytes = 0; + +/** + * Evict the oldest entries from the cache until we're under the size budget. + * Evicts from both memory and IndexedDB. + */ +async function evictIfOverBudget(): Promise { + if (memoryCacheTotalBytes <= MAX_CACHE_BYTES) return; + + // Sort entries for eviction: oldest camera file date first. + // Full images before thumbnails (evict large items first for faster budget recovery). + // Entries without fileDate are evicted first (they're from older cache formats). + const entries = [...memoryCache.entries()].sort((a, b) => { + // Full images before thumbnails + if (a[1].kind !== b[1].kind) { + return a[1].kind === 'full' ? -1 : 1; + } + // Entries without fileDate go first (unknown = low priority) + const aDate = a[1].fileDate ?? 0; + const bDate = b[1].fileDate ?? 0; + // Oldest file date first (smallest timestamp = taken earliest = evict first) + return aDate - bDate; + }); + + for (const [key, entry] of entries) { + if (memoryCacheTotalBytes <= MAX_CACHE_BYTES) break; + memoryCacheTotalBytes -= entry.blob.size; + memoryCache.delete(key); + void idbDelete(key); + } +} function isExpired(storedAt: number): boolean { return Date.now() - storedAt > CACHE_TTL_MS; @@ -183,6 +222,7 @@ export const imageCache = { const mem = memoryCache.get(key); if (mem !== undefined) { if (isExpired(mem.storedAt)) { + memoryCacheTotalBytes -= mem.blob.size; memoryCache.delete(key); void idbDelete(key); return undefined; @@ -204,9 +244,11 @@ export const imageCache = { blob: record.blob, meta: record.meta, storedAt: record.storedAt, + fileDate: record.fileDate, }; // Promote to memory for future fast lookups memoryCache.set(key, cached); + memoryCacheTotalBytes += cached.blob.size; return cached; }, @@ -218,17 +260,31 @@ export const imageCache = { * instantly visible to subsequent get() calls. * IndexedDB persistence happens in the background. */ - async put(kind: 'thumbnail' | 'full', path: string, blob: Blob, meta?: ThumbnailMeta): Promise { + async put( + kind: 'thumbnail' | 'full', + path: string, + blob: Blob, + meta?: ThumbnailMeta, + fileDate?: number, + ): Promise { const key = makeCacheKey(kind, path); const storedAt = Date.now(); - const cached: CachedImage = { path, kind, blob, meta, storedAt }; + const cached: CachedImage = { path, kind, blob, meta, storedAt, fileDate }; - // Instant: write to memory + // Instant: write to memory (replace existing if present) + const existing = memoryCache.get(key); + if (existing !== undefined) { + memoryCacheTotalBytes -= existing.blob.size; + } memoryCache.set(key, cached); + memoryCacheTotalBytes += blob.size; + + // Evict oldest entries if over budget + void evictIfOverBudget(); // Background: persist to IndexedDB - const record: StoredRecord = { key, path, kind, blob, meta, storedAt }; + const record: StoredRecord = { key, path, kind, blob, meta, storedAt, fileDate }; await idbPut(record); }, @@ -237,6 +293,10 @@ export const imageCache = { */ async delete(kind: 'thumbnail' | 'full', path: string): Promise { const key = makeCacheKey(kind, path); + const existing = memoryCache.get(key); + if (existing !== undefined) { + memoryCacheTotalBytes -= existing.blob.size; + } memoryCache.delete(key); await idbDelete(key); }, @@ -248,6 +308,7 @@ export const imageCache = { // Prune in-memory for (const [key, entry] of memoryCache) { if (isExpired(entry.storedAt)) { + memoryCacheTotalBytes -= entry.blob.size; memoryCache.delete(key); } } @@ -294,6 +355,7 @@ export const imageCache = { fullCount: number; thumbCount: number; totalBytes: number; + maxBytes: number; idbEntries: number; idbBytes: number; idbError: string | undefined; @@ -348,6 +410,7 @@ export const imageCache = { fullCount, thumbCount, totalBytes, + maxBytes: MAX_CACHE_BYTES, idbEntries, idbBytes, idbError, @@ -361,6 +424,7 @@ export const imageCache = { */ async clear(): Promise { memoryCache.clear(); + memoryCacheTotalBytes = 0; const db = await openDb(); if (db === undefined) return; diff --git a/src/lib/components/CacheDebug.svelte b/src/lib/components/CacheDebug.svelte index 09e859d..ea1386d 100644 --- a/src/lib/components/CacheDebug.svelte +++ b/src/lib/components/CacheDebug.svelte @@ -1,11 +1,14 @@ -
- +
+
Cache Debug
- {#if !collapsed && stats !== undefined} + {#if stats !== undefined}
+ +
+ DL Speed: + {#if downloadSpeed > 0} + {formatBytes(downloadSpeed)}/s + {:else} + N/A + {/if} +
+
Memory Cache
Entries: {stats.entries} ({stats.fullCount} full, {stats.thumbCount} thumb)
-
Size: {formatBytes(stats.totalBytes)}
+
Size: {formatBytes(stats.totalBytes)} / {formatBytes(stats.maxBytes)}
+
+ + 90} class:text-warning={budgetPct > 70 && budgetPct <= 90}>{budgetPct.toFixed(1)}% of budget +
@@ -99,46 +93,30 @@
Error: {stats.idbError}
{:else}
Entries: {stats.idbEntries}
-
Size: {formatBytes(stats.idbBytes)}
+
Size: {formatBytes(stats.idbBytes)} / {formatBytes(stats.maxBytes)}
+
+ + 90} class:text-warning={idbBudgetPct > 70 && idbBudgetPct <= 90}>{idbBudgetPct.toFixed(1)}% of budget +
{#if stats.idbWriteErrorCount > 0} -
❌ {stats.idbWriteErrorCount} write errors
+
{stats.idbWriteErrorCount} write errors
{#if stats.idbLastWriteError !== undefined}
{stats.idbLastWriteError}
{/if} {/if}
{#if stats.idbEntries === stats.entries} - ✅ In sync with memory + In sync with memory {:else if stats.idbEntries < stats.entries} - ⏳ IDB behind ({stats.entries - stats.idbEntries} pending) + IDB behind ({stats.entries - stats.idbEntries} pending) {:else} IDB has {stats.idbEntries - stats.entries} extra (pre-loaded) {/if}
{/if}
- -
-
Storage Quota
- {#if storageEstimate !== undefined} -
Used: {formatBytes(storageEstimate.usage)} / {formatBytes(storageEstimate.quota)}
- {#if storageEstimate.quota > 0} - {@const pct = (storageEstimate.usage / storageEstimate.quota * 100)} -
- - 90} class:text-warning={pct > 70 && pct <= 90}>{pct.toFixed(1)}% -
- {/if} - {:else if storageError !== undefined} -
{storageError}
- {:else} -
Querying…
- {/if} -
-
- {:else if !collapsed} -
- {#if refreshing}Loading…{:else}No data{/if}
+ {:else} +
Loading…
{/if}
diff --git a/src/lib/components/CachedThumbnail.svelte b/src/lib/components/CachedThumbnail.svelte index 3a6d452..dada22a 100644 --- a/src/lib/components/CachedThumbnail.svelte +++ b/src/lib/components/CachedThumbnail.svelte @@ -6,9 +6,10 @@ interface Props { path: string; alt: string; + fileDate?: number; } - let { path, alt }: Props = $props(); + let { path, alt, fileDate }: Props = $props(); let blobUrl = $state(undefined); let rawBlobUrl: string | undefined; @@ -56,7 +57,7 @@ try { const { blob, meta } = await flashair.fetchThumbnail(filePath); // Store in cache (fire-and-forget) - void imageCache.put('thumbnail', filePath, blob, meta); + void imageCache.put('thumbnail', filePath, blob, meta, fileDate); const url = URL.createObjectURL(blob); rawBlobUrl = url; blobUrl = url; diff --git a/src/lib/components/ImageList.svelte b/src/lib/components/ImageList.svelte index 5048e1b..d56c95c 100644 --- a/src/lib/components/ImageList.svelte +++ b/src/lib/components/ImageList.svelte @@ -40,7 +40,7 @@ onclick={() => onSelect(file)} > {#if thumbUrl} - + {:else}
🖼️ diff --git a/src/lib/components/ImagePreview.svelte b/src/lib/components/ImagePreview.svelte index 914f9a1..335e231 100644 --- a/src/lib/components/ImagePreview.svelte +++ b/src/lib/components/ImagePreview.svelte @@ -320,7 +320,7 @@ // Check staleness after await if (activePath !== entry.path) return; // Store in cache (fire-and-forget) - void imageCache.put('thumbnail', entry.path, blob, meta); + void imageCache.put('thumbnail', entry.path, blob, meta, entry.date.getTime()); const blobUrl = URL.createObjectURL(blob); rawThumbnailUrl = blobUrl; thumbnailBlobUrl = blobUrl; @@ -386,7 +386,7 @@ const blob = await res.blob(); if (abort.signal.aborted || activePath !== entry.path) return; // Store in cache (fire-and-forget) - void imageCache.put('full', entry.path, blob); + void imageCache.put('full', entry.path, blob, undefined, entry.date.getTime()); autoCacheService.markCached(entry.path); const objectUrl = URL.createObjectURL(blob); rawObjectUrl = objectUrl; -- cgit v1.2.3