mirror of
https://github.com/jeffvli/feishin.git
synced 2026-06-15 07:54:18 +02:00
add missing cleanup functions on visualizers
This commit is contained in:
@@ -187,6 +187,7 @@ const VisualizerInner = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { context, gains } = webAudio || {};
|
const { context, gains } = webAudio || {};
|
||||||
|
let audioMotion: AudioMotionAnalyzer | undefined;
|
||||||
if (gains && context && canvasRef.current && !motion) {
|
if (gains && context && canvasRef.current && !motion) {
|
||||||
// Reset gradients registered flag on new instance
|
// Reset gradients registered flag on new instance
|
||||||
setGradientsRegistered(false);
|
setGradientsRegistered(false);
|
||||||
@@ -208,7 +209,7 @@ const VisualizerInner = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const audioMotion = new AudioMotionAnalyzer(canvasRef.current, {
|
audioMotion = new AudioMotionAnalyzer(canvasRef.current, {
|
||||||
...initOptions,
|
...initOptions,
|
||||||
audioCtx: context,
|
audioCtx: context,
|
||||||
});
|
});
|
||||||
@@ -220,16 +221,21 @@ const VisualizerInner = () => {
|
|||||||
for (const gain of gains) audioMotion.connectInput(gain);
|
for (const gain of gains) audioMotion.connectInput(gain);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {};
|
return () => {
|
||||||
|
if (motion) {
|
||||||
|
motion.destroy();
|
||||||
|
setMotion(undefined);
|
||||||
|
}
|
||||||
|
};
|
||||||
}, [
|
}, [
|
||||||
accent,
|
accent,
|
||||||
canvasRef,
|
canvasRef,
|
||||||
motion,
|
|
||||||
registerCustomGradients,
|
registerCustomGradients,
|
||||||
webAudio,
|
webAudio,
|
||||||
visualizer,
|
visualizer,
|
||||||
options,
|
options,
|
||||||
isCustomGradient,
|
isCustomGradient,
|
||||||
|
motion,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Re-register custom gradients when they change
|
// Re-register custom gradients when they change
|
||||||
|
|||||||
@@ -112,7 +112,31 @@ const VisualizerInner = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {};
|
return () => {
|
||||||
|
if (animationFrameRef.current) {
|
||||||
|
cancelAnimationFrame(animationFrameRef.current);
|
||||||
|
animationFrameRef.current = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cycleTimerRef.current) {
|
||||||
|
clearInterval(cycleTimerRef.current);
|
||||||
|
cycleTimerRef.current = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pauseTimerRef.current) {
|
||||||
|
clearTimeout(pauseTimerRef.current);
|
||||||
|
pauseTimerRef.current = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (resizeObserverRef.current) {
|
||||||
|
resizeObserverRef.current.disconnect();
|
||||||
|
resizeObserverRef.current = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (visualizer) {
|
||||||
|
setVisualizer(undefined);
|
||||||
|
}
|
||||||
|
};
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [webAudio, canvasRef, containerRef, visualizer, isPlaying]);
|
}, [webAudio, canvasRef, containerRef, visualizer, isPlaying]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user