mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
attempt to prevent thread blocking from fac
This commit is contained in:
@@ -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]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user