feat(covers): logo fallback for broken cover art images

CachedImage now shows /logo-psysonic.png when an image fails to load
instead of a broken icon. The fallback switches to object-fit: contain
with a card background so the logo stays proportional inside the container.

If the caller provides a custom onError (e.g. to hide the element), that
handler is used instead. A separate fallbackSrc state prevents React from
re-writing the broken URL on re-renders. The DOM-level onerror = null
guard prevents any infinite error loop.

extractCoverColors skips color extraction when the logo fallback is
active, falling back to the theme accent color instead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-08 13:25:25 +02:00
parent c7adb599ee
commit 0119e27f6d
2 changed files with 26 additions and 3 deletions
+2
View File
@@ -127,6 +127,8 @@ const MIN_CONTRAST = 4.5;
*/
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: '' });
return new Promise(resolve => {
const img = new Image();