perf(fullscreen): extract dynamic accent from already-loaded cover blob

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 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-08 15:56:18 +02:00
parent 47fcade3b3
commit 9047a44480
+7 -7
View File
@@ -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<string | null>(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 => {
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<string>('');