From 9047a44480e3e1f96063c20ebfd167e53f276108 Mon Sep 17 00:00:00 2001 From: Psychotoxical Date: Wed, 8 Apr 2026 15:56:18 +0200 Subject: [PATCH] perf(fullscreen): extract dynamic accent from already-loaded cover blob MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously a separate getCachedUrl call fetched the 300px cover art just for color extraction, racing with the 500px fetch for display. Now reuses resolvedCoverUrl directly — color appears as soon as the display image is ready, with no redundant network request. Co-Authored-By: Claude Sonnet 4.6 --- src/components/FullscreenPlayer.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/FullscreenPlayer.tsx b/src/components/FullscreenPlayer.tsx index 5af6a571..dd6fd206 100644 --- a/src/components/FullscreenPlayer.tsx +++ b/src/components/FullscreenPlayer.tsx @@ -291,18 +291,18 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) { // Reset to null on track change so the previous color doesn't linger while // the new one is being extracted. const [dynamicAccent, setDynamicAccent] = useState(null); + // Reset immediately on track change so the previous color doesn't linger. + useEffect(() => { setDynamicAccent(null); }, [artKey]); + // Extract as soon as the display blob is ready — reuses resolvedCoverUrl so + // no redundant network request for a separate cover size. useEffect(() => { - setDynamicAccent(null); - if (!artUrl || !artKey) return; + if (!resolvedCoverUrl) return; let cancelled = false; - getCachedUrl(artUrl, artKey).then(blobUrl => { - if (cancelled || !blobUrl) return; - extractCoverColors(blobUrl).then(colors => { - if (!cancelled && colors.accent) setDynamicAccent(colors.accent); - }); + extractCoverColors(resolvedCoverUrl).then(colors => { + if (!cancelled && colors.accent) setDynamicAccent(colors.accent); }); return () => { cancelled = true; }; - }, [artKey]); // artKey is stable per track — artUrl would also work + }, [resolvedCoverUrl]); // Artist image → portrait on right. Falls back to cover art. const [artistBgUrl, setArtistBgUrl] = useState('');