roster is empty sometimes?

While using useRosterState I see roster is empty sometimes.

const { roster } = useRosterState();
 const attendees = Object.values(roster);

But the attendeeIdToTileId has the right details. const { attendeeIdToTileId } = useRemoteVideoTileState(); I am not able to reproduce when is that happening exactly, but I see it empty sometimes. What could be the reason? Is there a way I can make sure, it is not empty.

Using it like

// userCreatedRoom.jsx not root
<MeetingProvider>
     <div className={classes.root}>
       <UserActivityProvider>
         <MeetingView
           id={id}
         />
       </UserActivityProvider>
     </div>
   </MeetingProvider>

then in MeetingView

export default function MeetingView({
 id,
}) {
 const meetingManager = useMeetingManager();
 const meetingStatus = useMeetingStatus();
 const audioVideo = useAudioVideo();
 const { attendeeIdToTileId } = useRemoteVideoTileState();
 const { roster } = useRosterState();
 const attendees = Object.values(roster);
 console.log('attendees', attendees); // empty array

useEffect(() => {
   join(); // calls meetingManager.join() and start()
   return () => {
     console.log('closing meeting for', id);
     meetingManager.leave();
   };
 }, [id]);

return(
<NiceUI />
);
}

[subhendukundu]

So you are saying we need to add meetingManager.getAttendee? ATM we arent using this at all. Then meetingManager.getAttendee should be must when you are using useRosterState.

[devalevenkatesh]

Hi @subhendukundu ,

The roster is initialized to {} when the RosterProvider is re-mounted or un-mounted (check here) and hence the state you are seeing is {}.

The library currently does not do any state management to maintain app-refreshes (browser window refreshes). The RosterProvider is dependent on the realtimeSubscribeToAttendeeIdPresence API from Amazon Chime SDK for JavaScript, which we un-subscribe while un-mounting and subscribe while mounting if a valid audioVideo object is present from the meetingSession created in the MeetingManager when you call join and then start on meetingManager from useMeetingManager. So, on browser window refresh, since, no attendee would be present as there is no re-joining taking place in the meetingManager upon browser window refresh, the roster state will be {} as expected.

Now, I am a bit confused on the useRemoteVideoTileState issue. The roster management is audio driven and the RemoteVideoTileProvider which provides the remote video tile state using useRemoteVideoTileState is videoTileDidUpdate and videoTileDidRemoved driven. We do reset the state (check here) when the component un-mounts and hence the map attendeeIdToTileId should be getting cleared as well. I suspect in your case, since the audioVideo object is not valid hence upon window refresh, this RESET never runs and hence the mismatch in state. Can you please add a breakpoint and see if the RESET action is triggered?

I tested this by joining a meeting and leaving the meeting in our react meeting demo and it worked as expected and went through the RESET flow. Unfortunately, as mentioned we do not support browser window refresh and I could not test it as our meeting demo is not setup to handle such use-case.

I tried to check your minimal app but I could not run it due to multiple errors. To debug this further, could you please add an updated README in your minimal app with repro steps? Also, it would be great if you could remove any components that are un-related to this issue to make this a small repro demo.