add ref for current button state

Signed-off-by: Timo K <toger5@hotmail.de>

src/livekit/useLiveKit.ts

@@ -103,8 +103,14 @@ export function useLiveKit(
 
   // Store if audio/video are currently updating. If to prohibit unnecessary calls
   // to setMicrophoneEnabled/setCameraEnabled
-  const [audioMuteUpdating, setAudioMuteUpdating] = useState(false);
+  const audioMuteUpdating = useRef(false);
-  const [videoMuteUpdating, setVideoMuteUpdating] = useState(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.current.audio.enabled,
+    video: initialMuteStates.current.video.enabled,
+  });
 
   // We have to create the room manually here due to a bug inside
   // @livekit/components-react. JSON.stringify() is used in deps of a
@@ -142,47 +148,52 @@ export function useLiveKit(
     // and setting tracks to be enabled during this time causes errors.
     if (room !== undefined && connectionState === ConnectionState.Connected) {
       const participant = room.localParticipant;
-
+      // Always update the muteButtonState Ref so that we can read the current
+      // state in awaited blocks.
+      buttonEnabled.current = {
+        audio: muteStates.audio.enabled,
+        video: muteStates.video.enabled,
+      };
       const syncMuteStateAudio = async () => {
         if (
-          participant.isMicrophoneEnabled !== muteStates.audio.enabled &&
+          participant.isMicrophoneEnabled !== buttonEnabled.current.audio &&
-          !audioMuteUpdating
+          !audioMuteUpdating.current
         ) {
-          setAudioMuteUpdating(true);
+          audioMuteUpdating.current = true;
-          await participant
+          try {
-            .setMicrophoneEnabled(muteStates.audio.enabled)
+            await participant.setMicrophoneEnabled(buttonEnabled.current.audio);
-            .catch((e) =>
+          } catch (e) {
-              logger.error("Failed to sync audio mute state with LiveKit", e)
+            logger.error("Failed to sync audio mute state with LiveKit", e);
-            );
+          }
+          audioMuteUpdating.current = false;
           // Run the check again after the change is done. Because the user
           // can update the state (presses mute button) while the device is enabling
           // itself we need might need to update the mute state right away.
           // This async recursion makes sure that setCamera/MicrophoneEnabled is
           // called as little times as possible.
-          setAudioMuteUpdating(false);
           syncMuteStateAudio();
         }
       };
       const syncMuteStateVideo = async () => {
         if (
-          participant.isCameraEnabled !== muteStates.video.enabled &&
+          participant.isCameraEnabled !== buttonEnabled.current.video &&
-          !videoMuteUpdating
+          !videoMuteUpdating.current
         ) {
-          setVideoMuteUpdating(true);
+          videoMuteUpdating.current = true;
-          await participant
+          try {
-            .setCameraEnabled(muteStates.video.enabled)
+            await participant.setCameraEnabled(buttonEnabled.current.video);
-            .catch((e) =>
+          } catch (e) {
-              logger.error("Failed to sync video mute state with LiveKit", e)
+            logger.error("Failed to sync audio mute state with LiveKit", e);
-            );
+          }
+          videoMuteUpdating.current = false;
           // see above
-          setVideoMuteUpdating(false);
           syncMuteStateVideo();
         }
       };
       syncMuteStateAudio();
       syncMuteStateVideo();
     }
-  }, [room, muteStates, connectionState, audioMuteUpdating, videoMuteUpdating]);
+  }, [room, muteStates, connectionState]);
 
   useEffect(() => {
     // Sync the requested devices with LiveKit's devices