Add a VU meter-style animation to radio mode

src/room/usePTT.ts

@@ -49,6 +49,7 @@ export interface PTTState {
   talkOverEnabled: boolean;
   setTalkOverEnabled: (boolean) => void;
   activeSpeakerUserId: string;
+  activeSpeakerVolume: number;
   startTalking: () => void;
   stopTalking: () => void;
   transmitBlocked: boolean;
@@ -87,6 +88,7 @@ export const usePTT = (
       isAdmin,
       talkOverEnabled,
       activeSpeakerUserId,
+      activeSpeakerVolume,
       transmitBlocked,
     },
     setState,
@@ -100,6 +102,7 @@ export const usePTT = (
       talkOverEnabled: false,
       pttButtonHeld: false,
       activeSpeakerUserId: activeSpeakerFeed ? activeSpeakerFeed.userId : null,
+      activeSpeakerVolume: -Infinity,
       transmitBlocked: false,
     };
   });
@@ -131,15 +134,11 @@ export const usePTT = (
       playClip(PTTClipID.BLOCKED);
     }
 
-    setState((prevState) => {
-      return {
-        ...prevState,
-        activeSpeakerUserId: activeSpeakerFeed
-          ? activeSpeakerFeed.userId
-          : null,
-        transmitBlocked: blocked,
-      };
-    });
+    setState((prevState) => ({
+      ...prevState,
+      activeSpeakerUserId: activeSpeakerFeed ? activeSpeakerFeed.userId : null,
+      transmitBlocked: blocked,
+    }));
   }, [
     playClip,
     groupCall,
@@ -152,7 +151,7 @@ export const usePTT = (
 
   useEffect(() => {
     for (const callFeed of userMediaFeeds) {
-      callFeed.addListener(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
+      callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
     }
 
     const activeSpeakerFeed = getActiveSpeakerFeed(userMediaFeeds, groupCall);
@@ -164,14 +163,30 @@ export const usePTT = (
 
     return () => {
       for (const callFeed of userMediaFeeds) {
-        callFeed.removeListener(
-          CallFeedEvent.MuteStateChanged,
-          onMuteStateChanged
-        );
+        callFeed.off(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
       }
     };
   }, [userMediaFeeds, onMuteStateChanged, groupCall]);
 
+  const onVolumeChanged = useCallback((volume: number) => {
+    setState((prevState) => ({
+      ...prevState,
+      activeSpeakerVolume: volume,
+    }));
+  }, []);
+
+  useEffect(() => {
+    const activeSpeakerFeed = getActiveSpeakerFeed(userMediaFeeds, groupCall);
+    activeSpeakerFeed?.on(CallFeedEvent.VolumeChanged, onVolumeChanged);
+    return () => {
+      activeSpeakerFeed?.off(CallFeedEvent.VolumeChanged, onVolumeChanged);
+      setState((prevState) => ({
+        ...prevState,
+        activeSpeakerVolume: -Infinity,
+      }));
+    };
+  }, [activeSpeakerUserId, onVolumeChanged, userMediaFeeds, groupCall]);
+
   const startTalking = useCallback(async () => {
     if (pttButtonHeld) return;
 
@@ -275,6 +290,7 @@ export const usePTT = (
     talkOverEnabled,
     setTalkOverEnabled,
     activeSpeakerUserId,
+    activeSpeakerVolume,
     startTalking,
     stopTalking,
     transmitBlocked,