New button for stop all animations and audios

[hernanjls]

Hi, I'm trying to put a button in the UI and when the button is clicked, I need any animation and sound to stop. I am try to put this function in the avatar component

const { message, onMessagePlayed, chat, setStopAudioAndAnimation } = useChat();

.....

const stopAudioAndAnimation = () => { if (audio) { audio.pause(); audio.currentTime = 0; console.log("deteniendo audio") } if (actions[animation]) { actions[animation].fadeOut(0.5); console.log("deteniendo animacion") } setAnimation("Idle"); };

useEffect(() => { setStopAudioAndAnimation(() => stopAudioAndAnimation); }, [stopAudioAndAnimation]);

and in the useChat i put the reference in the context

import { createContext, useContext, useEffect, useState, useRef } from "react"; ..... const stopAudioAndAnimationRef = useRef(null);

const setStopAudioAndAnimation = (fn) => { stopAudioAndAnimationRef.current = fn; };

const stopAudioAndAnimation = () => { if (stopAudioAndAnimationRef.current) { stopAudioAndAnimationRef.current(); } };

.....

return ( <ChatContext.Provider value={{ chat, message, onMessagePlayed, onMessagesVaciar, stopAudioAndAnimation, setStopAudioAndAnimation, loading, cameraZoomed, setCameraZoomed, }}

{children} </ChatContext.Provider> );

but the code is not stop the animation and the audio when the code is called from the UI