From 01d2a7136ca4a070d95e7f9ac773a06f9a8fdd14 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 10 Sep 2021 16:05:57 -0700
Subject: [PATCH] Fix active speaker and speaking

---
 src/ConferenceCallManagerHooks.js | 15 ++++-----------
 src/Room.jsx                      |  9 +++++++--
 src/VideoGrid.jsx                 |  8 ++++----
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js
index 87ed7b9d..abd2b0c4 100644
--- a/src/ConferenceCallManagerHooks.js
+++ b/src/ConferenceCallManagerHooks.js
@@ -328,7 +328,6 @@ export function useGroupCall(client, roomId) {
 
   useEffect(() => {
     function onParticipantsChanged(...args) {
-      console.log(...args);
       updateState({ participants: getParticipants(groupCallRef.current) });
     }
 
@@ -348,8 +347,8 @@ export function useGroupCall(client, roomId) {
       groupCall.on("participants_changed", onParticipantsChanged);
       groupCall.on("speaking", onParticipantsChanged);
       groupCall.on("mute_state_changed", onParticipantsChanged);
-      groupCall.on("participant_call_replaced", onParticipantsChanged);
-      groupCall.on("participant_call_feeds_changed", onParticipantsChanged);
+      groupCall.on("call_replaced", onParticipantsChanged);
+      groupCall.on("call_feeds_changed", onParticipantsChanged);
       groupCall.on("local_mute_state_changed", onLocalMuteStateChanged);
 
       updateState({
@@ -368,14 +367,8 @@ export function useGroupCall(client, roomId) {
         groupCall.removeListener("participants_changed", onParticipantsChanged);
         groupCall.removeListener("speaking", onParticipantsChanged);
         groupCall.removeListener("mute_state_changed", onParticipantsChanged);
-        groupCall.removeListener(
-          "participant_call_replaced",
-          onParticipantsChanged
-        );
-        groupCall.removeListener(
-          "participant_call_feeds_changed",
-          onParticipantsChanged
-        );
+        groupCall.removeListener("call_replaced", onParticipantsChanged);
+        groupCall.removeListener("call_feeds_changed", onParticipantsChanged);
         groupCall.removeListener(
           "local_mute_state_changed",
           onLocalMuteStateChanged
diff --git a/src/Room.jsx b/src/Room.jsx
index aeb9abc0..fbb52e42 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -167,6 +167,10 @@ export function EnteringRoomView() {
 }
 
 export function LoadingErrorView({ error }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
   return (
     <>
       <div className={styles.centerMessage}>
@@ -190,7 +194,6 @@ function RoomSetupView({
   localVideoMuted,
   toggleLocalVideoMuted,
   toggleMicrophoneMuted,
-  groupCall,
 }) {
   const videoRef = useRef();
   const [permissionState, setPermissionState] = useState(
@@ -206,7 +209,9 @@ function RoomSetupView({
           setPermissionState(PermissionState.Granted);
         }
       })
-      .catch(() => {
+      .catch((error) => {
+        console.error(error);
+
         if (videoRef.current) {
           setPermissionState(PermissionState.Denied);
         }
diff --git a/src/VideoGrid.jsx b/src/VideoGrid.jsx
index 836ce0dd..6bed3a1f 100644
--- a/src/VideoGrid.jsx
+++ b/src/VideoGrid.jsx
@@ -436,7 +436,7 @@ export function VideoGrid({ participants, layout }) {
         let presenter;
 
         if (layout === "spotlight") {
-          presenter = participant.activeSpeaker;
+          presenter = participant.isActiveSpeaker();
         } else {
           presenter = layout === lastLayoutRef.current ? tile.presenter : false;
         }
@@ -459,7 +459,7 @@ export function VideoGrid({ participants, layout }) {
           key: participant.member.userId,
           participant,
           remove: false,
-          presenter: layout === "spotlight" && participant.activeSpeaker,
+          presenter: layout === "spotlight" && participant.isActiveSpeaker(),
         });
       }
 
@@ -740,10 +740,10 @@ function ParticipantTile({ style, participant, remove, presenter, ...rest }) {
     <animated.div className={styles.participantTile} style={style} {...rest}>
       <div
         className={classNames(styles.participantName, {
-          [styles.speaking]: participant.usermediaStream?.speaking,
+          [styles.speaking]: participant.usermediaFeed?.isSpeaking(),
         })}
       >
-        {participant.usermediaStream?.speaking ? (
+        {participant.usermediaFeed?.isSpeaking() ? (
           <MicIcon />
         ) : participant.isAudioMuted() ? (
           <MuteMicIcon className={styles.muteMicIcon} />