feat: cover art proxy with disk cache for instant thumbnail loading

Add CoverArtProxy that fetches cover art from CAA, caches the image
bytes on disk (~/.local/share/yellowjacket/cover-art-cache/), and
returns base64 data URLs via the GetThumbnail Wails binding.

First load: fetches from CAA (rate-limited), caches to disk.
Subsequent loads: instant from disk cache, no network.
404s: cached as empty files to avoid re-fetching.

Frontend explore-view loads thumbnails async via GetThumbnail()
calls that fire during render. Cached thumbnails appear as data
URLs directly in img src, bypassing the browser's HTTP stack.
Uncached thumbnails fall back to the CAA URL while the proxy
fetches in the background, then re-render with the cached version.

Also stores caa_id and caa_release_mbid in the search index's
extra_json for future direct Internet Archive URL construction.
This commit is contained in:
2026-03-25 14:09:30 -04:00
parent 1141febf29
commit 49a26c6163
6 changed files with 275 additions and 121 deletions
@@ -1,7 +1,7 @@
import { LitElement, html, css, nothing } from 'lit';
import { customElement, state, query as litQuery } from 'lit/decorators.js';
import { designTokens } from '../../styles/tokens.css';
import { Search } from '@go/explore/Service';
import { Search, GetThumbnail } from '@go/explore/Service';
import type {
MBSearchResult,
MBArtist,
@@ -74,6 +74,7 @@ export class ExploreView extends LitElement {
/** Monotonic counter to discard stale responses. */
private searchVersion = 0;
private debounceTimer: ReturnType<typeof setTimeout> | null = null;
private thumbnailCache = new Map<string, string>();
@litQuery('input') private inputEl!: HTMLInputElement;
@@ -584,6 +585,25 @@ export class ExploreView extends LitElement {
}
}
/* ── Thumbnail Loading ── */
private loadThumbnail(mbid: string) {
// Don't re-fetch if already loading or cached.
if (this.thumbnailCache.has(mbid)) return;
// Mark as loading to prevent duplicate requests.
this.thumbnailCache.set(mbid, '');
GetThumbnail(mbid).then((dataUrl) => {
if (dataUrl) {
this.thumbnailCache.set(mbid, dataUrl);
this.requestUpdate();
}
}).catch(() => {
// Leave empty string in cache — fallback will show.
});
}
/* ── Top Results ── */
private getTopResults(): ScoredItem[] {
@@ -868,8 +888,15 @@ export class ExploreView extends LitElement {
<h3 class="section-header">Albums</h3>
<div class="horizontal-row">
${releaseGroups.map((rg) => {
const artURL = CoverArtGroupURL(rg.mbid);
const cachedArt = this.thumbnailCache.get(rg.mbid);
const artURL = cachedArt || CoverArtGroupURL(rg.mbid);
const year = extractYear(rg.firstReleaseDate);
// Kick off async thumbnail fetch if not cached.
if (!cachedArt) {
this.loadThumbnail(rg.mbid);
}
return html`
<div
class="album-card"