useAttendeeStatus not Working Properly

[pawanl77]

Describe the bug I have 4 page appliction in React where the main section is only updated when the path changes. The sidebar component which shows the name of the users along with their device status is same for the 4 pages (commong Component). When I change the middle component using the controls made in common Footer component then the status of the Video is updated everytime but after 2 pages change in the useAttendeeStatus() is always returning the old state of Audio no matter what current state is.

To Reproduce Steps to reproduce the behavior:

1. Create a 4-5 page application.
2. Update the middle container. Now change component 4-5 times.
3. Now the useAttendeeStatus will not work properly.

Expected behavior useAttendeeStatus should always return the updated values. Screenshots

Desktop (please complete the following information):

• Windows
• Chrome

[bradmanAWS]

Hi @pawanl77, it is difficult to get a sense of what's going on here without seeing the code. Is it possible for you to reproduce this issue in a minimal example hosted in something like codesandbox.io? It sounds, off the cuff, like this maybe be an issue passing props around in React, but it's impossible to know without seeing the code. Thanks!

[acorbel]

Hi, We encountered the same error. We have a simple React component with the following code for the local participant:

 const {toggleMute, muted: toggleMuted} = useToggleLocalMute();
    const {
        videoEnabled,
        sharingContent,
        muted,
    } = useAttendeeStatus(props.chimeAttendeeId);

When we hit the toggleMute button, the toggleMuted state from useToggleLocalMute has the up to date state whereas the the muted state from useAttendeeStatus has a stale state. It works for several seconds then the state is not updated afterwards.

It could be the same bug but the microphone activity icon freezes as well.

[pawanl77]

Yes @bradmanAWS I am getting the same issue as @acorbel.

[michhyun1]

@pawanl77 @acorbel I just ran the components meeting demo. It looks like we use useToggleLocalMute toggleMute() in the AudioInputControl component and we use the useAttendeeStatus 'muted' in RosterAttendee component. I just tried it out, and it seems to be in sync for me. When I toggleMute, the useAttendeeStatus 'muted' state is correctly updated in the RosterAttendee. When I toggleMute again, the RosterAttendee shows that the mic is unmuted again.

Could you clarify what you mean by "It works for several seconds then the state is not updated afterwards." What state is the microphone icon dependent on?

[junedlanja]

Facing same issue. videoEnabled,/muted flag got stuck some time and not getting updated.

[p-foucht]

Hey all -- few questions to try and troubleshoot where the bug is

• Is the issue specific to the local attendee, or all/any attendees?
• Is there specific state that goes out of sync? Such as ony the videoEnabled, muted, sharingContent state
• Do you notice the bug ocurring after dismounting/remounting a component that uses the hook, or does it go out of sync regardless?

[p-foucht]

Any updates here? We are releasing version 2.x which pulls in the SDK PR linked above (#979), which caused a few bugs and may be related to the issue you are seeing.

[p-foucht]

Closing due to inactivity. Please reopen if the issue persists or if you have further details

[DSp4wN]

1. The issue specific to all attendees
2. There is no change in muted, videoEnabled, sharingContent and signalStrength state of useAttendeeState hook no matter what I do.

All other hooks are working fine for me except the one I mentioned above.

Need help!

[michhyun1]

I would suggest double checking the attendee ID being used. @DSp4wN We've tested this hook and it seems everything is working fine. Can you please let us know what attendee ID you are using?

[DSp4wN]

I was using useToggleLocalMute hook previously and looks like it was causing the issue for me now I am using the audioVideo hook directly instead of useToggleLocalMute and everything works fine with it.

[xuesichao]

Hi @DSp4wN, thanks for bringing up this issue. I assume the issue is about the wrong attendeeId. Could you let us know how you get the attendeeId for useAttendeeStatus(attendeeId) hook? I tried locally, if passing a wrong attendeeId, the hook will return a stale state:

{
  "muted": false,
  "signalStrength": 1,
  "videoEnabled": false,
  "sharingContent": false
}

To get the attendeeId, for example:

const HookStates: React.FC = () => {
  const { roster } = useRosterState();

  const states = Object.entries(roster).map(([attendeeId, attendee]) =>
    <AttendeeState key={attendeeId} attendeeId={attendeeId} attendee={attendee} />
  );

  return <pre>{states}</pre>;
};

const AttendeeState: React.FC<{
  attendeeId: string,
  attendee: RosterAttendeeType
}> = ({ attendeeId, attendee }) => {
  const attendeeStatus = useAttendeeStatus(attendeeId);
  const state = {};

  if (attendee.name) {
    state[attendee.name] = attendeeStatus;
  }

  return (
    <code
      style={{ display: 'block' }}
    >
      {JSON.stringify(state, null, 2)}
    </code>
  );
};

[DSp4wN]

I was pretty sure about using the correct attendeeId as it was getting logged in the console too, but the issue was that I was not able to get the future updates for that attendee when using useToggleLocalMute. e.g. if user had already made his mic active and video active before joining, I was getting the correct state when the user joined but no future updates.

Now, when I switched to using AudioVideo hook in the code directly, I am getting the joining states as well as the future updates properly reflecting in roster.

[DSp4wN]

I use meetingManager.getAttendee call back to get the attendeeId, store it and then map it via a local state.