Pinned participant fix (#717)

twilio · Jul 1, 2022 · 00afa5e · 00afa5e
1 parent e4cd381
commit 00afa5e
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 27 deletions.
diff --git a/src/components/GalleryView/__snapshots__/GalleryView.test.tsx.snap b/src/components/GalleryView/__snapshots__/GalleryView.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`the GalleryView component should render correctly 1`] = `
         }
       }
     >
-      <Participant
+      <Memo(Participant)
         isDominantSpeaker={false}
         isLocalParticipant={true}
         participant={
@@ -73,7 +73,7 @@ exports[`the GalleryView component should render correctly 1`] = `
         }
       }
     >
-      <Participant
+      <Memo(Participant)
         isDominantSpeaker={false}
         isLocalParticipant={false}
         participant={
@@ -94,7 +94,7 @@ exports[`the GalleryView component should render correctly 1`] = `
         }
       }
     >
-      <Participant
+      <Memo(Participant)
         isDominantSpeaker={false}
         isLocalParticipant={false}
         participant={
@@ -115,7 +115,7 @@ exports[`the GalleryView component should render correctly 1`] = `
         }
       }
     >
-      <Participant
+      <Memo(Participant)
         isDominantSpeaker={false}
         isLocalParticipant={false}
         participant={
@@ -136,7 +136,7 @@ exports[`the GalleryView component should render correctly 1`] = `
         }
       }
     >
-      <Participant
+      <Memo(Participant)
         isDominantSpeaker={false}
         isLocalParticipant={false}
         participant={

diff --git a/src/components/MobileGalleryView/__snapshots__/MobileGalleryView.test.tsx.snap b/src/components/MobileGalleryView/__snapshots__/MobileGalleryView.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={true}
           participant={
@@ -50,7 +50,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -72,7 +72,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -94,7 +94,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -116,7 +116,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -160,7 +160,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={true}
           participant={
@@ -182,7 +182,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -204,7 +204,7 @@ exports[`the MobileGalleryView component should render correctly when there are
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -248,7 +248,7 @@ exports[`the MobileGalleryView component should render correctly when there is o
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={true}
           participant={
@@ -270,7 +270,7 @@ exports[`the MobileGalleryView component should render correctly when there is o
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={false}
           participant={
@@ -314,7 +314,7 @@ exports[`the MobileGalleryView component should render correctly when there is o
           }
         }
       >
-        <Participant
+        <Memo(Participant)
           isDominantSpeaker={false}
           isLocalParticipant={true}
           participant={

diff --git a/src/components/Participant/Participant.tsx b/src/components/Participant/Participant.tsx
@@ -14,7 +14,7 @@ interface ParticipantProps {
   isDominantSpeaker?: boolean;
 }
 
-export default function Participant({
+export function Participant({
   participant,
   videoOnly,
   enableScreenShare,
@@ -42,3 +42,5 @@ export default function Participant({
     </ParticipantInfo>
   );
 }
+
+export default React.memo(Participant);
diff --git a/src/components/ParticipantList/ParticipantList.test.tsx b/src/components/ParticipantList/ParticipantList.test.tsx
@@ -52,7 +52,7 @@ describe('the ParticipantList component', () => {
     const wrapper = shallow(<ParticipantList />);
     expect(
       wrapper
-        .find('Participant')
+        .find('Memo(Participant)')
         .at(1)
         .prop('isSelected')
     ).toBe(true);
@@ -79,14 +79,14 @@ describe('the ParticipantList component', () => {
     const wrapper = shallow(<ParticipantList />);
     expect(
       wrapper
-        .find('Participant')
+        .find('Memo(Participant)')
         .at(1)
         .prop('hideParticipant')
     ).toBe(true);
 
     expect(
       wrapper
-        .find('Participant')
+        .find('Memo(Participant)')
         .at(2)
         .prop('hideParticipant')
     ).toBe(false);
@@ -104,7 +104,7 @@ describe('the ParticipantList component', () => {
     const wrapper = shallow(<ParticipantList />);
     expect(
       wrapper
-        .find('Participant')
+        .find('Memo(Participant)')
         .at(1)
         .prop('hideParticipant')
     ).toBe(false);
@@ -122,7 +122,7 @@ describe('the ParticipantList component', () => {
     const wrapper = shallow(<ParticipantList />);
     expect(
       wrapper
-        .find('Participant')
+        .find('Memo(Participant)')
         .at(1)
         .prop('hideParticipant')
     ).toBe(false);

diff --git a/src/components/ParticipantList/__snapshots__/ParticipantList.test.tsx.snap b/src/components/ParticipantList/__snapshots__/ParticipantList.test.tsx.snap
@@ -10,11 +10,11 @@ exports[`the ParticipantList component should correctly render Participant compo
     <div
       className="makeStyles-innerScrollContainer-4"
     >
-      <Participant
+      <Memo(Participant)
         isLocalParticipant={true}
         participant="localParticipant"
       />
-      <Participant
+      <Memo(Participant)
         hideParticipant={false}
         isSelected={false}
         key="0"
@@ -25,7 +25,7 @@ exports[`the ParticipantList component should correctly render Participant compo
           }
         }
       />
-      <Participant
+      <Memo(Participant)
         hideParticipant={false}
         isSelected={false}
         key="1"
@@ -36,7 +36,7 @@ exports[`the ParticipantList component should correctly render Participant compo
           }
         }
       />
-      <Participant
+      <Memo(Participant)
         hideParticipant={false}
         isSelected={true}
         key="2"

diff --git a/src/components/VideoProvider/index.test.tsx b/src/components/VideoProvider/index.test.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { Room, TwilioError } from 'twilio-video';
 import { VideoProvider } from './index';
+import { useAppState } from '../../state';
 import useLocalTracks from './useLocalTracks/useLocalTracks';
 import useRestartAudioTrackOnDeviceChange from './useRestartAudioTrackOnDeviceChange/useRestartAudioTrackOnDeviceChange';
 import useRoom from './useRoom/useRoom';
@@ -11,6 +12,7 @@ import useHandleTrackPublicationFailed from './useHandleTrackPublicationFailed/u
 import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
 
 const mockRoom = new EventEmitter() as Room;
+
 jest.mock('./useRoom/useRoom', () => jest.fn(() => ({ room: mockRoom, isConnecting: false, connect: () => {} })));
 jest.mock('./useLocalTracks/useLocalTracks', () =>
   jest.fn(() => ({
@@ -22,6 +24,7 @@ jest.mock('./useLocalTracks/useLocalTracks', () =>
     removeLocalVideoTrack: () => {},
   }))
 );
+jest.mock('../../state');
 jest.mock('./useHandleRoomDisconnection/useHandleRoomDisconnection');
 jest.mock('./useHandleTrackPublicationFailed/useHandleTrackPublicationFailed');
 jest.mock('./useRestartAudioTrackOnDeviceChange/useRestartAudioTrackOnDeviceChange');
@@ -35,6 +38,10 @@ jest.mock('@twilio/video-processors', () => {
   };
 });
 
+const mockUseAppState = useAppState as jest.Mock<any>;
+
+mockUseAppState.mockImplementation(() => ({ isGalleryViewActive: false }));
+
 describe('the VideoProvider component', () => {
   it('should correctly return the Video Context object', () => {
     const wrapper: React.FC = ({ children }) => (

diff --git a/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx b/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.test.tsx
@@ -1,8 +1,14 @@
 import { act, HookResult, renderHook } from '@testing-library/react-hooks';
 import { EventEmitter } from 'events';
-import React from 'react';
 import { Participant, Room } from 'twilio-video';
 import useSelectedParticipant, { SelectedParticipantProvider } from './useSelectedParticipant';
+import { useAppState } from '../../../state';
+
+jest.mock('../../../state');
+
+const mockUseAppState = useAppState as jest.Mock<any>;
+
+mockUseAppState.mockImplementation(() => ({ isGalleryViewActive: false }));
 
 describe('the useSelectedParticipant hook', () => {
   let mockRoom: Room;
@@ -56,4 +62,14 @@ describe('the useSelectedParticipant hook', () => {
     });
     expect(result.current[0]).toBe('mockParticipant');
   });
+
+  it('should set "null" as the selected participant when gallery view is active', () => {
+    act(() => result.current[1]('mockParticipant' as any));
+    expect(result.current[0]).toBe('mockParticipant');
+
+    mockUseAppState.mockImplementationOnce(() => ({ isGalleryViewActive: true }));
+    act(() => result.current[1]('mockParticipant' as any));
+
+    expect(result.current[0]).toBe(null);
+  });
 });
diff --git a/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx b/src/components/VideoProvider/useSelectedParticipant/useSelectedParticipant.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { Participant, Room } from 'twilio-video';
+import { useAppState } from '../../../state';
 
 type selectedParticipantContextType = [Participant | null, (participant: Participant) => void];
 
@@ -16,10 +17,17 @@ type SelectedParticipantProviderProps = {
 };
 
 export function SelectedParticipantProvider({ room, children }: SelectedParticipantProviderProps) {
+  const { isGalleryViewActive } = useAppState();
   const [selectedParticipant, _setSelectedParticipant] = useState<Participant | null>(null);
   const setSelectedParticipant = (participant: Participant) =>
     _setSelectedParticipant(prevParticipant => (prevParticipant === participant ? null : participant));
 
+  useEffect(() => {
+    if (isGalleryViewActive) {
+      _setSelectedParticipant(null);
+    }
+  }, [isGalleryViewActive]);
+
   useEffect(() => {
     if (room) {
       const onDisconnect = () => _setSelectedParticipant(null);