Fix waiting state not disappearing after the 20 second timeout

src/room/PTTCallView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useEffect } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { GroupCall, MatrixClient, RoomMember } from "matrix-js-sdk";
@@ -142,8 +142,7 @@ export const PTTCallView: React.FC<Props> = ({
   const networkWaiting =
     talkingExpected && !activeSpeakerUserId && !showTalkOverError;
 
-  const activeSpeakerIsLocalUser =
+  const activeSpeakerIsLocalUser = activeSpeakerUserId === client.getUserId();
-    activeSpeakerUserId && client.getUserId() === activeSpeakerUserId;
   const activeSpeakerUser = activeSpeakerUserId
     ? client.getUser(activeSpeakerUserId)
     : null;
@@ -152,6 +151,10 @@ export const PTTCallView: React.FC<Props> = ({
     ? activeSpeakerUser.displayName
     : "";
 
+  useEffect(() => {
+    setTalkingExpected(activeSpeakerIsLocalUser);
+  }, [activeSpeakerIsLocalUser, setTalkingExpected]);
+
   return (
     <div className={styles.pttCallView} ref={containerRef}>
       <PTTClips

src/useDelayedState.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useState, useRef } from "react";
+import { useState, useRef, useCallback } from "react";
 
 // Like useState, except state updates can be enqueued with a configurable delay
 export const useDelayedState = <T>(
@@ -24,20 +24,26 @@ export const useDelayedState = <T>(
   const timers = useRef<Set<ReturnType<typeof setTimeout>>>();
   if (!timers.current) timers.current = new Set();
 
-  const setStateDelayed = (value: T, delay: number) => {
+  const setStateDelayed = useCallback(
-    const timer = setTimeout(() => {
+    (value: T, delay: number) => {
-      setState(value);
+      const timer = setTimeout(() => {
-      timers.current.delete(timer);
+        setState(value);
-    }, delay);
+        timers.current.delete(timer);
-    timers.current.add(timer);
+      }, delay);
-  };
+      timers.current.add(timer);
-  const setStateImmediate = (value: T) => {
+    },
-    // Clear all updates currently in the queue
+    [setState, timers]
-    for (const timer of timers.current) clearTimeout(timer);
+  );
-    timers.current.clear();
+  const setStateImmediate = useCallback(
+    (value: T) => {
+      // Clear all updates currently in the queue
+      for (const timer of timers.current) clearTimeout(timer);
+      timers.current.clear();
 
-    setState(value);
+      setState(value);
-  };
+    },
+    [setState, timers]
+  );
 
   return [state, setStateDelayed, setStateImmediate];
 };