itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-21 22:15:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FullscreenPlayer.tsx
+8 -8
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 // Reset to null on track change so the previous color doesn't linger while
// the new one is being extracted. // the new one is being extracted.
const [dynamicAccent, setDynamicAccent] = useState<string | null>(null); 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(() => { useEffect(() => {
setDynamicAccent(null); if (!resolvedCoverUrl) return;
if (!artUrl || !artKey) return;
let cancelled = false; let cancelled = false;
getCachedUrl(artUrl, artKey).then(blobUrl => { extractCoverColors(resolvedCoverUrl).then(colors => {
if (cancelled || !blobUrl) return; if (!cancelled && colors.accent) setDynamicAccent(colors.accent);
extractCoverColors(blobUrl).then(colors => {
if (!cancelled && colors.accent) setDynamicAccent(colors.accent);
});
}); });
return () => { cancelled = true; }; return () => { cancelled = true; };
}, [artKey]); // artKey is stable per track — artUrl would also work }, [resolvedCoverUrl]);
// Artist image → portrait on right. Falls back to cover art. // Artist image → portrait on right. Falls back to cover art.
const [artistBgUrl, setArtistBgUrl] = useState<string>(''); const [artistBgUrl, setArtistBgUrl] = useState<string>('');