Unpin participant when they disconnect from room

src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx

@@ -1,51 +1,59 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, HookResult, renderHook, RenderHookResult } from '@testing-library/react-hooks';
 import { EventEmitter } from 'events';
 import React from 'react';
-import { Room } from 'twilio-video';
+import { Participant, Room } from 'twilio-video';
 import useSelectedParticipant, { SelectedParticipantProvider } from './useSelectedParticipant';
 
 describe('the useSelectedParticipant hook', () => {
   let mockRoom: Room;
+  let result: HookResult<readonly [Participant | null, (participant: Participant) => void]>;
+
   beforeEach(() => (mockRoom = new EventEmitter() as Room));
 
-  it('should return null as the default value', () => {
-    const { result } = renderHook(useSelectedParticipant, {
+  beforeEach(() => {
+    ({ result } = renderHook(useSelectedParticipant, {
       wrapper: ({ children }) => <SelectedParticipantProvider room={mockRoom}>{children}</SelectedParticipantProvider>,
-    });
+    }));
+  });
+
+  it('should return null as the default value', () => {
     expect(result.current[0]).toBe(null);
   });
 
   it('should set a selected participant', () => {
-    const { result } = renderHook(useSelectedParticipant, {
-      wrapper: ({ children }) => <SelectedParticipantProvider room={mockRoom}>{children}</SelectedParticipantProvider>,
-    });
-
     act(() => result.current[1]('mockParticipant' as any));
-
     expect(result.current[0]).toBe('mockParticipant');
   });
 
   it('should set "null" as the selected participant when the user selects the currently selected participant', () => {
-    const { result } = renderHook(useSelectedParticipant, {
-      wrapper: ({ children }) => <SelectedParticipantProvider room={mockRoom}>{children}</SelectedParticipantProvider>,
-    });
-
     act(() => result.current[1]('mockParticipant' as any));
     act(() => result.current[1]('mockParticipant' as any));
 
     expect(result.current[0]).toBe(null);
   });
 
   it('should set "null" as the selected participant on room disconnect', () => {
-    const { result } = renderHook(useSelectedParticipant, {
-      wrapper: ({ children }) => <SelectedParticipantProvider room={mockRoom}>{children}</SelectedParticipantProvider>,
-    });
-
     act(() => result.current[1]('mockParticipant' as any));
     expect(result.current[0]).toBe('mockParticipant');
     act(() => {
       mockRoom.emit('disconnected');
     });
     expect(result.current[0]).toBe(null);
   });
+
+  it('should set "null" as the selected participant when the participant disconnects from the room', () => {
+    act(() => result.current[1]('mockParticipant' as any));
+    act(() => {
+      mockRoom.emit('participantDisconnected', 'mockParticipant');
+    });
+    expect(result.current[0]).toBe(null);
+  });
+
+  it('should not set "null" as the selected participant when a non-selected participant disconnects from the room', () => {
+    act(() => result.current[1]('mockParticipant' as any));
+    act(() => {
+      mockRoom.emit('participantDisconnected', 'otherMockParticipant');
+    });
+    expect(result.current[0]).toBe('mockParticipant');
+  });
 });

src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx

@@ -22,9 +22,14 @@ export function SelectedParticipantProvider({ room, children }: SelectedParticip
 
   useEffect(() => {
     const onDisconnect = () => _setSelectedParticipant(null);
+    const handleParticipantDisconnected = (participant: Participant) =>
+      _setSelectedParticipant(prevParticipant => (prevParticipant === participant ? null : prevParticipant));
+
     room.on('disconnected', onDisconnect);
+    room.on('participantDisconnected', handleParticipantDisconnected);
     return () => {
       room.off('disconnected', onDisconnect);
+      room.off('participantDisconnected', handleParticipantDisconnected);
     };
   }, [room]);