attempt to prevent thread blocking from fac

This commit is contained in:
jeffvli
2025-11-26 03:35:02 -08:00
parent 94a7829882
commit 948f428546
+63 -36
View File
@@ -14,14 +14,24 @@ export const getFastAverageColor = async (args: {
algorithm?: 'dominant' | 'simple' | 'sqrt'; algorithm?: 'dominant' | 'simple' | 'sqrt';
src: string; src: string;
}) => { }) => {
const fac = new FastAverageColor(); return new Promise<string>((resolve, reject) => {
const background = await fac.getColorAsync(args.src, { setTimeout(() => {
algorithm: args.algorithm || 'dominant', const fac = new FastAverageColor();
ignoredColor: ignoredColors, fac.getColorAsync(args.src, {
mode: 'speed', algorithm: args.algorithm || 'dominant',
ignoredColor: ignoredColors,
mode: 'speed',
})
.then((background) => {
resolve(background.rgb);
fac.destroy();
})
.catch((error) => {
fac.destroy();
reject(error);
});
});
}); });
return background.rgb;
}; };
export const useFastAverageColor = (args: { export const useFastAverageColor = (args: {
@@ -48,38 +58,52 @@ export const useFastAverageColor = (args: {
useEffect(() => { useEffect(() => {
let isMounted = true; let isMounted = true;
const fac = new FastAverageColor(); let fac: FastAverageColor | null = null;
if (src && srcLoaded) { if (src && srcLoaded) {
setIsLoading(true); setIsLoading(true);
fac.getColorAsync(src, {
algorithm: algorithm || 'dominant', setTimeout(() => {
ignoredColor: ignoredColors, if (!isMounted) return;
mode: 'speed',
}) fac = new FastAverageColor();
.then((color) => { fac.getColorAsync(src, {
if (isMounted) { algorithm: algorithm || 'dominant',
idRef.current = id; ignoredColor: ignoredColors,
setBackground({ mode: 'speed',
background: color.rgb,
isDark: color.isDark,
isLight: color.isLight,
});
setIsLoading(false);
}
}) })
.catch((e) => { .then((color) => {
if (isMounted) { if (isMounted) {
console.error('Error fetching average color', e); idRef.current = id;
idRef.current = id; setBackground({
setBackground({ background: color.rgb,
background: 'rgba(0, 0, 0, 0)', isDark: color.isDark,
isDark: true, isLight: color.isLight,
isLight: false, });
}); setIsLoading(false);
setIsLoading(false); }
} if (fac) {
}); fac.destroy();
fac = null;
}
})
.catch((e) => {
if (isMounted) {
console.error('Error fetching average color', e);
idRef.current = id;
setBackground({
background: 'rgba(0, 0, 0, 0)',
isDark: true,
isLight: false,
});
setIsLoading(false);
}
if (fac) {
fac.destroy();
fac = null;
}
});
});
} else if (srcLoaded) { } else if (srcLoaded) {
if (isMounted) { if (isMounted) {
idRef.current = id; idRef.current = id;
@@ -93,7 +117,10 @@ export const useFastAverageColor = (args: {
return () => { return () => {
isMounted = false; isMounted = false;
fac.destroy(); if (fac) {
fac.destroy();
fac = null;
}
}; };
}, [algorithm, srcLoaded, src, id]); }, [algorithm, srcLoaded, src, id]);