mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
Perf/UI cover cache mainstage (#468)
* Enhance CachedImage and ArtistDetail components with improved image caching and priority handling - Refactor CachedImage to utilize a priority system for image loading based on viewport visibility, improving performance during scrolling. - Update useCachedUrl to accept an optional getPriority function for better cache management. - Optimize ArtistDetail and Artists components by using useMemo for cover art URLs, reducing redundant calculations and improving rendering efficiency. - Adjust image loading logic in CachedImage to ensure smoother transitions and avoid unnecessary fetch requests. * perf(ui): unblock IDB cover art, stabilize mainstage rails and virtual lists Let IndexedDB reads bypass the network concurrency slot so cached thumbnails paint without queueing behind remote fetches; debounce disk eviction during heavy scrolling. Fix mainstage horizontal rails: dedupe album/song ids for React keys, widen artwork budget overscan, avoid resetting the budget on list append, and raise Home initial artwork budgets. CachedImage treats already-decoded images as loaded; rail cards load cover images eagerly. Refresh dynamic color extraction and extend virtual scrolling / scroll roots on Albums, Artists, Playlists, and related surfaces. Remove local agent-only commit instructions from the repository tree. * perf(virtual): viewport-based overscan for main scroll lists Drive TanStack Virtual overscan from measured scroll height so each list renders about one screen of extra rows above and below the viewport for snappier scrolling on Albums, Artists (list mode), and Tracks virtual song list. Introduce useResizeClientHeight helpers (ID + ref) for ResizeObserver-based clientHeight tracking. * docs(changelog): note PR #468 UI cover cache, rails, and virtual lists Add a coarse summary under 1.46.0 Changed for cover-art pipeline, mainstage rails, viewport-based overscan, and library/chrome polish.
This commit is contained in:
cucadmuh
GitHub
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Keeps the first occurrence of each `id`. Subsonic responses (and merged pages)
|
||||
* occasionally repeat the same album/song id; duplicate React keys then warn and
|
||||
* break reconciliation.
|
||||
*/
|
||||
export function dedupeById<T extends { id: string }>(items: T[]): T[] {
|
||||
const seen = new Set<string>();
|
||||
const out: T[] = [];
|
||||
for (const item of items) {
|
||||
if (seen.has(item.id)) continue;
|
||||
seen.add(item.id);
|
||||
out.push(item);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
+93
-33
@@ -117,49 +117,109 @@ export function ensureContrast(
|
||||
const FS_BG_LUMINANCE = 0.010;
|
||||
const MIN_CONTRAST = 4.5;
|
||||
|
||||
function isRemoteHttpUrl(url: string): boolean {
|
||||
return /^https?:\/\//i.test(url);
|
||||
}
|
||||
|
||||
function isBlobOrDataUrl(url: string): boolean {
|
||||
return url.startsWith('blob:') || url.startsWith('data:');
|
||||
}
|
||||
|
||||
/**
|
||||
* Samples decoded pixels from an HTMLImageElement (already loaded).
|
||||
* Throws if the canvas is tainted (caller should catch).
|
||||
*/
|
||||
function sampleImageToAccent(img: HTMLImageElement): CoverColors {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 8;
|
||||
canvas.height = 8;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return { accent: '' };
|
||||
|
||||
ctx.drawImage(img, 0, 0, 8, 8);
|
||||
const { data } = ctx.getImageData(0, 0, 8, 8);
|
||||
|
||||
let bestSat = -1;
|
||||
let bestR = 180;
|
||||
let bestG = 100;
|
||||
let bestB = 50;
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const r = data[i];
|
||||
const g = data[i + 1];
|
||||
const b = data[i + 2];
|
||||
const [, s] = rgbToHsl(r, g, b);
|
||||
if (s > bestSat) {
|
||||
bestSat = s;
|
||||
bestR = r;
|
||||
bestG = g;
|
||||
bestB = b;
|
||||
}
|
||||
}
|
||||
|
||||
const [fr, fg, fb] = ensureContrast([bestR, bestG, bestB], FS_BG_LUMINANCE, MIN_CONTRAST);
|
||||
return { accent: `rgb(${fr},${fg},${fb})` };
|
||||
}
|
||||
|
||||
function loadImage(url: string, crossOrigin: '' | 'anonymous'): Promise<HTMLImageElement> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = () => reject(new Error('image load failed'));
|
||||
if (crossOrigin) img.crossOrigin = crossOrigin;
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads `imageUrl` into an 8×8 canvas and finds the most vibrant pixel
|
||||
* (highest HSL saturation). Applies `ensureContrast` to guarantee
|
||||
* WCAG AA readability against the FS player background.
|
||||
*
|
||||
* Remote `https?://` URLs would taint a canvas if drawn from a plain `<img>`
|
||||
* without CORS — we prefer `fetch` → `blob:` for sampling, then fall back to
|
||||
* `crossOrigin = "anonymous"` when the server allows it.
|
||||
*
|
||||
* Resolves with `{ accent: '' }` on any error — the caller's CSS
|
||||
* `var(--dynamic-fs-accent, var(--accent))` then falls back to the theme accent.
|
||||
*/
|
||||
export function extractCoverColors(imageUrl: string): Promise<CoverColors> {
|
||||
if (!imageUrl) return Promise.resolve({ accent: '' });
|
||||
// Logo fallback has no meaningful color — skip extraction and use theme accent
|
||||
if (imageUrl.includes('logo-psysonic')) return Promise.resolve({ accent: '' });
|
||||
export async function extractCoverColors(imageUrl: string): Promise<CoverColors> {
|
||||
if (!imageUrl) return { accent: '' };
|
||||
if (imageUrl.includes('logo-psysonic')) return { accent: '' };
|
||||
|
||||
return new Promise(resolve => {
|
||||
const img = new Image();
|
||||
// Blob URLs are same-origin in Tauri WebKit — no crossOrigin needed.
|
||||
img.onload = () => {
|
||||
const safeSample = async (url: string, co: '' | 'anonymous'): Promise<CoverColors> => {
|
||||
try {
|
||||
const img = await loadImage(url, co);
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 8;
|
||||
canvas.height = 8;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) { resolve({ accent: '' }); return; }
|
||||
|
||||
ctx.drawImage(img, 0, 0, 8, 8);
|
||||
const { data } = ctx.getImageData(0, 0, 8, 8);
|
||||
|
||||
// Pick pixel with highest HSL saturation (most vibrant).
|
||||
let bestSat = -1;
|
||||
let bestR = 180, bestG = 100, bestB = 50; // warm orange fallback
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const r = data[i], g = data[i + 1], b = data[i + 2];
|
||||
const [, s] = rgbToHsl(r, g, b);
|
||||
if (s > bestSat) { bestSat = s; bestR = r; bestG = g; bestB = b; }
|
||||
}
|
||||
|
||||
const [fr, fg, fb] = ensureContrast([bestR, bestG, bestB], FS_BG_LUMINANCE, MIN_CONTRAST);
|
||||
resolve({ accent: `rgb(${fr},${fg},${fb})` });
|
||||
return sampleImageToAccent(img);
|
||||
} catch {
|
||||
resolve({ accent: '' });
|
||||
return { accent: '' };
|
||||
}
|
||||
};
|
||||
img.onerror = () => resolve({ accent: '' });
|
||||
img.src = imageUrl;
|
||||
});
|
||||
} catch {
|
||||
return { accent: '' };
|
||||
}
|
||||
};
|
||||
|
||||
if (isBlobOrDataUrl(imageUrl)) {
|
||||
return safeSample(imageUrl, '');
|
||||
}
|
||||
|
||||
if (isRemoteHttpUrl(imageUrl)) {
|
||||
try {
|
||||
const resp = await fetch(imageUrl);
|
||||
if (resp.ok) {
|
||||
const blob = await resp.blob();
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
try {
|
||||
return await safeSample(objectUrl, '');
|
||||
} finally {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// CORS / network — try credentialed image load if server sends ACAO for art
|
||||
}
|
||||
return safeSample(imageUrl, 'anonymous');
|
||||
}
|
||||
|
||||
return safeSample(imageUrl, '');
|
||||
}
|
||||
|
||||
+152
-54
@@ -3,8 +3,19 @@ import { useAuthStore } from '../store/authStore';
|
||||
const DB_NAME = 'psysonic-img-cache';
|
||||
const STORE_NAME = 'images';
|
||||
const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
|
||||
const MAX_BLOB_CACHE = 200; // hot in-memory blob entries (LRU)
|
||||
const MAX_CONCURRENT_FETCHES = 5;
|
||||
/** In-memory blobs — scrolling large grids used to thrash at 200 and re-hit IndexedDB for “cold” keys that still had a live shared object URL. */
|
||||
const MAX_BLOB_CACHE = 600; // hot in-memory blob entries (LRU)
|
||||
/** Network-only pool — IndexedDB hits must not queue behind remote fetches. */
|
||||
const MAX_CONCURRENT_NET_FETCHES = 6;
|
||||
|
||||
type LoadWaiter = {
|
||||
getPriority: () => number;
|
||||
resolve: (granted: boolean) => void;
|
||||
};
|
||||
const loadWaiters: LoadWaiter[] = [];
|
||||
|
||||
/** One in-flight read per logical image — avoids duplicate IndexedDB transactions when many cells mount together. */
|
||||
const inflightBlobGets = new Map<string, Promise<Blob | null>>();
|
||||
|
||||
// In-memory blob cache: cacheKey → Blob (insertion-order = LRU approximation).
|
||||
// Only the Map entry is dropped on overflow — the underlying Blob is freed by
|
||||
@@ -32,21 +43,34 @@ function purgeUrlEntry(cacheKey: string): void {
|
||||
* Returns a shared object URL for the cached blob of `cacheKey`, or null if
|
||||
* not currently in memory. Pair every successful call with releaseUrl().
|
||||
* Subsequent acquires reuse the same URL and just bump the refcount.
|
||||
*
|
||||
* IMPORTANT: the Blob can be LRU-evicted from `blobCache` while `urlEntries`
|
||||
* still holds a valid object URL (another `<img>` still references it). We
|
||||
* must reuse that URL — otherwise callers fall through to IndexedDB / network
|
||||
* again and scrolling janks even when data was already resolved once.
|
||||
*/
|
||||
export function acquireUrl(cacheKey: string): string | null {
|
||||
const blob = blobCache.get(cacheKey);
|
||||
if (!blob) return null;
|
||||
rememberBlob(cacheKey, blob); // refresh LRU position
|
||||
let entry = urlEntries.get(cacheKey);
|
||||
if (!entry) {
|
||||
entry = { url: URL.createObjectURL(blob), refs: 0, revokeTimer: null };
|
||||
urlEntries.set(cacheKey, entry);
|
||||
} else if (entry.revokeTimer) {
|
||||
clearTimeout(entry.revokeTimer);
|
||||
entry.revokeTimer = null;
|
||||
if (blob) {
|
||||
rememberBlob(cacheKey, blob); // refresh LRU position
|
||||
}
|
||||
entry.refs++;
|
||||
return entry.url;
|
||||
|
||||
const entry = urlEntries.get(cacheKey);
|
||||
if (entry) {
|
||||
if (entry.revokeTimer) {
|
||||
clearTimeout(entry.revokeTimer);
|
||||
entry.revokeTimer = null;
|
||||
}
|
||||
entry.refs++;
|
||||
return entry.url;
|
||||
}
|
||||
|
||||
if (!blob) return null;
|
||||
|
||||
const newEntry: UrlEntry = { url: URL.createObjectURL(blob), refs: 0, revokeTimer: null };
|
||||
urlEntries.set(cacheKey, newEntry);
|
||||
newEntry.refs++;
|
||||
return newEntry.url;
|
||||
}
|
||||
|
||||
/** Decrements the refcount; revokes (after grace delay) when it reaches zero. */
|
||||
@@ -61,34 +85,72 @@ export function releaseUrl(cacheKey: string): void {
|
||||
}, URL_REVOKE_DELAY_MS);
|
||||
}
|
||||
|
||||
let activeFetches = 0;
|
||||
const fetchQueue: Array<() => void> = [];
|
||||
let activeNetFetches = 0;
|
||||
|
||||
function acquireFetchSlot(signal?: AbortSignal): Promise<boolean> {
|
||||
function removeLoadWaiter(waiter: LoadWaiter): void {
|
||||
const i = loadWaiters.indexOf(waiter);
|
||||
if (i !== -1) loadWaiters.splice(i, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Slot for remote `fetch` only. IndexedDB reads run before this — cached disk
|
||||
* art can render without waiting on in-flight network downloads.
|
||||
*/
|
||||
function acquireNetFetchSlot(signal?: AbortSignal, getPriority?: () => number): Promise<boolean> {
|
||||
if (signal?.aborted) return Promise.resolve(false);
|
||||
if (activeFetches < MAX_CONCURRENT_FETCHES) {
|
||||
activeFetches++;
|
||||
if (activeNetFetches < MAX_CONCURRENT_NET_FETCHES) {
|
||||
activeNetFetches++;
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
return new Promise<boolean>(resolve => {
|
||||
const onGrant = () => {
|
||||
signal?.removeEventListener('abort', onAbort);
|
||||
resolve(true);
|
||||
};
|
||||
let waiter: LoadWaiter;
|
||||
const onAbort = () => {
|
||||
const idx = fetchQueue.indexOf(onGrant);
|
||||
if (idx !== -1) fetchQueue.splice(idx, 1);
|
||||
signal?.removeEventListener('abort', onAbort);
|
||||
removeLoadWaiter(waiter);
|
||||
resolve(false);
|
||||
};
|
||||
fetchQueue.push(onGrant);
|
||||
waiter = {
|
||||
getPriority: getPriority ?? (() => 0),
|
||||
resolve: (granted: boolean) => {
|
||||
signal?.removeEventListener('abort', onAbort);
|
||||
resolve(granted);
|
||||
},
|
||||
};
|
||||
loadWaiters.push(waiter);
|
||||
signal?.addEventListener('abort', onAbort, { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
function releaseFetchSlot(): void {
|
||||
activeFetches--;
|
||||
const next = fetchQueue.shift();
|
||||
if (next) { activeFetches++; next(); }
|
||||
function pickHighestPriorityWaiterIndex(): number {
|
||||
if (loadWaiters.length === 0) return -1;
|
||||
let best = 0;
|
||||
let bestP = safePriority(loadWaiters[0].getPriority);
|
||||
for (let i = 1; i < loadWaiters.length; i++) {
|
||||
const p = safePriority(loadWaiters[i].getPriority);
|
||||
if (p > bestP) {
|
||||
bestP = p;
|
||||
best = i;
|
||||
}
|
||||
}
|
||||
return best;
|
||||
}
|
||||
|
||||
function safePriority(fn: () => number): number {
|
||||
try {
|
||||
return fn();
|
||||
} catch {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function releaseNetFetchSlot(): void {
|
||||
activeNetFetches = Math.max(0, activeNetFetches - 1);
|
||||
if (activeNetFetches >= MAX_CONCURRENT_NET_FETCHES) return;
|
||||
const idx = pickHighestPriorityWaiterIndex();
|
||||
if (idx === -1) return;
|
||||
const [w] = loadWaiters.splice(idx, 1);
|
||||
activeNetFetches++;
|
||||
w.resolve(true);
|
||||
}
|
||||
|
||||
function rememberBlob(key: string, blob: Blob): void {
|
||||
@@ -175,6 +237,19 @@ async function evictDiskIfNeeded(maxBytes: number): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
/** Batched eviction — avoids `getAll()` on every cover write during fast scrolling. */
|
||||
let evictDebounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let evictPendingMaxBytes = 0;
|
||||
|
||||
function scheduleEvictDiskIfNeeded(maxBytes: number): void {
|
||||
evictPendingMaxBytes = maxBytes;
|
||||
if (evictDebounceTimer) clearTimeout(evictDebounceTimer);
|
||||
evictDebounceTimer = setTimeout(() => {
|
||||
evictDebounceTimer = null;
|
||||
void evictDiskIfNeeded(evictPendingMaxBytes);
|
||||
}, 450);
|
||||
}
|
||||
|
||||
async function putBlob(key: string, blob: Blob): Promise<void> {
|
||||
try {
|
||||
const database = await openDB();
|
||||
@@ -185,7 +260,7 @@ async function putBlob(key: string, blob: Blob): Promise<void> {
|
||||
tx.onerror = () => resolve();
|
||||
});
|
||||
const maxBytes = useAuthStore.getState().maxCacheMb * 1024 * 1024;
|
||||
evictDiskIfNeeded(maxBytes);
|
||||
scheduleEvictDiskIfNeeded(maxBytes);
|
||||
} catch {
|
||||
// Ignore write errors
|
||||
}
|
||||
@@ -210,6 +285,7 @@ export async function getImageCacheSize(): Promise<number> {
|
||||
export async function invalidateCacheKey(cacheKey: string): Promise<void> {
|
||||
blobCache.delete(cacheKey);
|
||||
purgeUrlEntry(cacheKey);
|
||||
inflightBlobGets.delete(cacheKey);
|
||||
try {
|
||||
const database = await openDB();
|
||||
await new Promise<void>(resolve => {
|
||||
@@ -230,7 +306,12 @@ export async function invalidateCoverArt(entityId: string): Promise<void> {
|
||||
}
|
||||
|
||||
export async function clearImageCache(): Promise<void> {
|
||||
if (evictDebounceTimer) {
|
||||
clearTimeout(evictDebounceTimer);
|
||||
evictDebounceTimer = null;
|
||||
}
|
||||
blobCache.clear();
|
||||
inflightBlobGets.clear();
|
||||
for (const key of Array.from(urlEntries.keys())) purgeUrlEntry(key);
|
||||
try {
|
||||
const database = await openDB();
|
||||
@@ -253,8 +334,14 @@ export async function clearImageCache(): Promise<void> {
|
||||
* @param fetchUrl The actual URL to fetch from (may contain ephemeral auth params).
|
||||
* @param cacheKey A stable key that identifies the image across sessions.
|
||||
* @param signal Optional AbortSignal — aborts queue-waiting and in-flight fetches.
|
||||
* @param getPriority Called when waiting for a **network** slot (IndexedDB hits skip this queue).
|
||||
*/
|
||||
export async function getCachedBlob(fetchUrl: string, cacheKey: string, signal?: AbortSignal): Promise<Blob | null> {
|
||||
export async function getCachedBlob(
|
||||
fetchUrl: string,
|
||||
cacheKey: string,
|
||||
signal?: AbortSignal,
|
||||
getPriority?: () => number,
|
||||
): Promise<Blob | null> {
|
||||
if (!fetchUrl || signal?.aborted) return null;
|
||||
|
||||
const memHit = blobCache.get(cacheKey);
|
||||
@@ -263,29 +350,40 @@ export async function getCachedBlob(fetchUrl: string, cacheKey: string, signal?:
|
||||
return memHit;
|
||||
}
|
||||
|
||||
const idbHit = await getBlobFromIDB(cacheKey);
|
||||
if (signal?.aborted) return null;
|
||||
if (idbHit) {
|
||||
rememberBlob(cacheKey, idbHit);
|
||||
return idbHit;
|
||||
}
|
||||
const existing = inflightBlobGets.get(cacheKey);
|
||||
if (existing) return existing;
|
||||
|
||||
const acquired = await acquireFetchSlot(signal);
|
||||
if (!acquired || signal?.aborted) {
|
||||
if (acquired) releaseFetchSlot();
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const resp = await fetch(fetchUrl, { signal });
|
||||
if (!resp.ok) return null;
|
||||
const newBlob = await resp.blob();
|
||||
const run = (async () => {
|
||||
if (signal?.aborted) return null;
|
||||
putBlob(cacheKey, newBlob); // fire-and-forget
|
||||
rememberBlob(cacheKey, newBlob);
|
||||
return newBlob;
|
||||
} catch {
|
||||
return null;
|
||||
} finally {
|
||||
releaseFetchSlot();
|
||||
}
|
||||
|
||||
const idbHit = await getBlobFromIDB(cacheKey);
|
||||
if (signal?.aborted) return null;
|
||||
if (idbHit) {
|
||||
rememberBlob(cacheKey, idbHit);
|
||||
return idbHit;
|
||||
}
|
||||
|
||||
const acquired = await acquireNetFetchSlot(signal, getPriority);
|
||||
if (!acquired || signal?.aborted) {
|
||||
if (acquired) releaseNetFetchSlot();
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const resp = await fetch(fetchUrl, { signal });
|
||||
if (!resp.ok) return null;
|
||||
const newBlob = await resp.blob();
|
||||
if (signal?.aborted) return null;
|
||||
putBlob(cacheKey, newBlob); // fire-and-forget
|
||||
rememberBlob(cacheKey, newBlob);
|
||||
return newBlob;
|
||||
} catch {
|
||||
return null;
|
||||
} finally {
|
||||
releaseNetFetchSlot();
|
||||
}
|
||||
})();
|
||||
|
||||
inflightBlobGets.set(cacheKey, run);
|
||||
run.finally(() => inflightBlobGets.delete(cacheKey));
|
||||
return run;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user