add missing cleanup functions on visualizers

This commit is contained in:
jeffvli
2026-01-03 00:47:41 -08:00
parent ffe3f08705
commit ace4c77bdc
2 changed files with 34 additions and 4 deletions
@@ -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]);