From 5e81e479206e5d87b6482da3ea7fc2a4172458b4 Mon Sep 17 00:00:00 2001 From: Tim Mendoza Date: Thu, 2 Sep 2021 16:35:43 -0600 Subject: [PATCH 1/7] Suppress test warnings --- src/setupTests.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/setupTests.ts b/src/setupTests.ts index 63fa43b4e..a730e1056 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -24,3 +24,6 @@ class LocalStorage { } Object.defineProperty(window, 'localStorage', { value: new LocalStorage() }); + +// This is to suppress the "Platform browser has already been set." warnings from the video-processors library +jest.mock('@twilio/video-processors', () => ({})); From 703a9253a5897e84107dc4c3d5647f668d5c75f3 Mon Sep 17 00:00:00 2001 From: Tim Mendoza Date: Thu, 2 Sep 2021 16:36:00 -0600 Subject: [PATCH 2/7] Log any conversations errors --- src/components/ChatProvider/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ChatProvider/index.tsx b/src/components/ChatProvider/index.tsx index 2870a1c6a..5eb534445 100644 --- a/src/components/ChatProvider/index.tsx +++ b/src/components/ChatProvider/index.tsx @@ -32,7 +32,8 @@ export const ChatProvider: React.FC = ({ children }) => { window.chatClient = client; setChatClient(client); }) - .catch(() => { + .catch(e => { + console.error(e); onError(new Error("There was a problem connecting to Twilio's conversation service.")); }); }, From 83909d1a7f93f6a17360e411ea1fd4e9564ef15c Mon Sep 17 00:00:00 2001 From: Tim Mendoza Date: Thu, 2 Sep 2021 16:36:29 -0600 Subject: [PATCH 3/7] Show the correct participants network quality level in the MainParticipantInfo component --- src/components/MainParticipantInfo/MainParticipantInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index d9dc3bfff..2a62eb05d 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -157,7 +157,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti {screenSharePublication && ' - Screen'} - + {isRecording && ( Date: Thu, 2 Sep 2021 16:37:12 -0600 Subject: [PATCH 4/7] Update participant logic to be less strict about track names --- .../ParticipantTracks/ParticipantTracks.test.tsx | 10 +++++----- src/components/ParticipantTracks/ParticipantTracks.tsx | 5 ++++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/ParticipantTracks/ParticipantTracks.test.tsx b/src/components/ParticipantTracks/ParticipantTracks.test.tsx index 26696b9fb..13776695d 100644 --- a/src/components/ParticipantTracks/ParticipantTracks.test.tsx +++ b/src/components/ParticipantTracks/ParticipantTracks.test.tsx @@ -22,7 +22,7 @@ describe('the ParticipantTracks component', () => { it('should filter out any screen share publications', () => { mockUsePublications.mockImplementation(() => [ { trackName: 'screen', trackSid: 0, kind: 'video' }, - { trackName: 'camera-123456', trackSid: 1, kind: 'video' }, + { trackName: '', trackSid: 1, kind: 'video' }, ]); const wrapper = shallow(); expect(wrapper.find('Publication').length).toBe(1); @@ -31,14 +31,14 @@ describe('the ParticipantTracks component', () => { .find('Publication') .at(0) .prop('publication') - ).toEqual({ trackName: 'camera-123456', trackSid: 1, kind: 'video' }); + ).toEqual({ trackName: '', trackSid: 1, kind: 'video' }); }); describe('with enableScreenShare prop', () => { it('should filter out camera publications when a screen share publication is present', () => { mockUsePublications.mockImplementation(() => [ { trackName: 'screen', trackSid: 0, kind: 'video' }, - { trackName: 'camera-123456', trackSid: 1, kind: 'video' }, + { trackName: '', trackSid: 1, kind: 'video' }, ]); const wrapper = shallow(); expect(wrapper.find('Publication').length).toBe(1); @@ -51,7 +51,7 @@ describe('the ParticipantTracks component', () => { }); it('should render camera publications when a screen share publication is absent', () => { - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456', trackSid: 1, kind: 'video' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', trackSid: 1, kind: 'video' }]); const wrapper = shallow(); expect(wrapper.find('Publication').length).toBe(1); expect( @@ -59,7 +59,7 @@ describe('the ParticipantTracks component', () => { .find('Publication') .at(0) .prop('publication') - ).toEqual({ trackName: 'camera-123456', trackSid: 1, kind: 'video' }); + ).toEqual({ trackName: '', trackSid: 1, kind: 'video' }); }); }); }); diff --git a/src/components/ParticipantTracks/ParticipantTracks.tsx b/src/components/ParticipantTracks/ParticipantTracks.tsx index 267c20fdd..88c499a6e 100644 --- a/src/components/ParticipantTracks/ParticipantTracks.tsx +++ b/src/components/ParticipantTracks/ParticipantTracks.tsx @@ -31,8 +31,11 @@ export default function ParticipantTracks({ let filteredPublications; if (enableScreenShare && publications.some(p => p.trackName.includes('screen'))) { - filteredPublications = publications.filter(p => !p.trackName.includes('camera')); + // When displaying a screenshare track is allowed, and a screen share track exists, + // remove all video tracks without the name 'screen'. + filteredPublications = publications.filter(p => p.trackName.includes('screen') || p.kind !== 'video'); } else { + // Else, remove all screenshare tracks filteredPublications = publications.filter(p => !p.trackName.includes('screen')); } From f4a68ead14bdd64ccf41ed79837626c9ea67783a Mon Sep 17 00:00:00 2001 From: Tim Mendoza Date: Wed, 8 Sep 2021 11:58:54 -0600 Subject: [PATCH 5/7] Log another chat error --- src/components/ChatProvider/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ChatProvider/index.tsx b/src/components/ChatProvider/index.tsx index 5eb534445..f37d2fd6d 100644 --- a/src/components/ChatProvider/index.tsx +++ b/src/components/ChatProvider/index.tsx @@ -72,7 +72,8 @@ export const ChatProvider: React.FC = ({ children }) => { window.chatConversation = newConversation; setConversation(newConversation); }) - .catch(() => { + .catch(e => { + console.error(e); onError(new Error('There was a problem getting the Conversation associated with this room.')); }); } From 5b92685347e1ba9a7466510477166824d44dc0f6 Mon Sep 17 00:00:00 2001 From: Tim Mendoza Date: Thu, 9 Sep 2021 11:42:33 -0600 Subject: [PATCH 6/7] Remove all instances of trackName.includes('camera') --- .../MainParticipantInfo.test.tsx | 16 ++++---- .../MainParticipantInfo.tsx | 2 +- .../ParticipantInfo/ParticipantInfo.test.tsx | 37 +++++++++++++++---- .../ParticipantInfo/ParticipantInfo.tsx | 2 +- .../LocalVideoPreview.test.tsx | 3 +- .../LocalVideoPreview/LocalVideoPreview.tsx | 4 +- .../Publication/Publication.test.tsx | 8 ++-- src/components/Publication/Publication.tsx | 2 +- src/components/VideoProvider/index.tsx | 4 +- .../useFlipCameraToggle.test.tsx | 3 +- .../useFlipCameraToggle.tsx | 4 +- .../useLocalVideoToggle.test.tsx | 13 ++++--- .../useLocalVideoToggle.tsx | 4 +- 13 files changed, 67 insertions(+), 35 deletions(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx index f1f34921a..de0e309e8 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx @@ -31,7 +31,7 @@ describe('the MainParticipantInfo component', () => { beforeEach(() => { mockUseVideoContext.mockImplementation(() => ({ room: { localParticipant: {} } })); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); mockUseTrack.mockImplementation((track: any) => track); mockUseIsTrackSwitchedOff.mockImplementation(() => false); }); @@ -45,7 +45,7 @@ describe('the MainParticipantInfo component', () => { }); it('should not render the AvatarIcon component when video tracks are published', () => { - mockUsePublications.mockImplementationOnce(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementationOnce(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( mock children ); @@ -70,7 +70,7 @@ describe('the MainParticipantInfo component', () => { it('should not render the reconnecting UI when the user is connected', () => { mockUseParticipantIsReconnecting.mockImplementationOnce(() => false); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( mock children ); @@ -79,7 +79,7 @@ describe('the MainParticipantInfo component', () => { it('should render the reconnecting UI when the user is reconnecting', () => { mockUseParticipantIsReconnecting.mockImplementationOnce(() => true); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( mock children ); @@ -87,15 +87,15 @@ describe('the MainParticipantInfo component', () => { }); it('should use the switchOff status of the screen share track when it is available', () => { - mockUsePublications.mockImplementationOnce(() => [{ trackName: 'screen' }, { trackName: 'camera-123456' }]); + mockUsePublications.mockImplementationOnce(() => [{ trackName: 'screen' }, { trackName: '', kind: 'video' }]); shallow(mock children); expect(mockUseTrack).toHaveBeenCalledWith({ trackName: 'screen' }); }); it('should use the switchOff status of the camera track when the screen share track is not available', () => { - mockUsePublications.mockImplementationOnce(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementationOnce(() => [{ trackName: '', kind: 'video' }]); shallow(mock children); - expect(mockUseTrack).toHaveBeenCalledWith({ trackName: 'camera-123456' }); + expect(mockUseTrack).toHaveBeenCalledWith({ trackName: '', kind: 'video' }); }); it('should add "(You)" to the participants identity when they are the localParticipant', () => { @@ -113,7 +113,7 @@ describe('the MainParticipantInfo component', () => { }); it('should add "- Screen" to the participants identity when they are screen sharing', () => { - mockUsePublications.mockImplementationOnce(() => [{ trackName: 'screen' }, { trackName: 'camera-123456' }]); + mockUsePublications.mockImplementationOnce(() => [{ trackName: 'screen' }, { trackName: '', kind: 'video' }]); const wrapper = shallow( mock children ); diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.tsx index 2a62eb05d..cf70c46a9 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.tsx @@ -125,7 +125,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti const isRemoteParticipantScreenSharing = screenShareParticipant && screenShareParticipant !== localParticipant; const publications = usePublications(participant); - const videoPublication = publications.find(p => p.trackName.includes('camera')); + const videoPublication = publications.find(p => !p.trackName.includes('screen') && p.kind === 'video'); const screenSharePublication = publications.find(p => p.trackName.includes('screen')); const videoTrack = useTrack(screenSharePublication || videoPublication); diff --git a/src/components/ParticipantInfo/ParticipantInfo.test.tsx b/src/components/ParticipantInfo/ParticipantInfo.test.tsx index 5626948db..f314de2b0 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.test.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.test.tsx @@ -6,6 +6,7 @@ import { shallow } from 'enzyme'; import useIsTrackSwitchedOff from '../../hooks/useIsTrackSwitchedOff/useIsTrackSwitchedOff'; import useParticipantIsReconnecting from '../../hooks/useParticipantIsReconnecting/useParticipantIsReconnecting'; import usePublications from '../../hooks/usePublications/usePublications'; +import ScreenShareIcon from '../../icons/ScreenShareIcon'; jest.mock('../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel', () => () => 4); jest.mock('../../hooks/usePublications/usePublications'); @@ -28,7 +29,7 @@ describe('the ParticipantInfo component', () => { }); it('should not display the AvatarIcon component when a video track is published', () => { - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> mock children @@ -39,7 +40,7 @@ describe('the ParticipantInfo component', () => { it('should render the AvatarIcon component when the video track is switchedOff', () => { mockUseIsTrackSwitchedOff.mockImplementation(() => true); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> mock children @@ -50,7 +51,7 @@ describe('the ParticipantInfo component', () => { it('should not render the reconnecting UI when the user is connected', () => { mockUseParticipantIsReconnecting.mockImplementationOnce(() => false); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> mock children @@ -61,7 +62,7 @@ describe('the ParticipantInfo component', () => { it('should render the reconnecting UI when the user is reconnecting', () => { mockUseParticipantIsReconnecting.mockImplementationOnce(() => true); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> mock children @@ -117,7 +118,7 @@ describe('the ParticipantInfo component', () => { }); it('should render the PinIcon component when the participant is selected', () => { - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={true} participant={{ identity: 'mockIdentity' } as any}> mock children @@ -127,7 +128,7 @@ describe('the ParticipantInfo component', () => { }); it('should not render the PinIcon component when the participant is not selected', () => { - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> mock children @@ -136,9 +137,29 @@ describe('the ParticipantInfo component', () => { expect(wrapper.exists(PinIcon)).toBe(false); }); + it('should render the ScreenShareIcon component when the participant is sharing their screen', () => { + mockUsePublications.mockImplementation(() => [{ trackName: 'screen', kind: 'video' }]); + const wrapper = shallow( + {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> + mock children + + ); + expect(wrapper.exists(ScreenShareIcon)).toBe(true); + }); + + it('should not render the ScreenShareIcon component when the participant is not sharing their screen', () => { + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); + const wrapper = shallow( + {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> + mock children + + ); + expect(wrapper.exists(ScreenShareIcon)).toBe(false); + }); + it('should add "(You)" to the participants identity when they are the localParticipant', () => { mockUseIsTrackSwitchedOff.mockImplementation(() => false); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} @@ -154,7 +175,7 @@ describe('the ParticipantInfo component', () => { it('should not add "(You)" to the participants identity when they are the localParticipant', () => { mockUseIsTrackSwitchedOff.mockImplementation(() => false); - mockUsePublications.mockImplementation(() => [{ trackName: 'camera-123456' }]); + mockUsePublications.mockImplementation(() => [{ trackName: '', kind: 'video' }]); const wrapper = shallow( {}} isSelected={false} participant={{ identity: 'mockIdentity' } as any}> mock children diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx index 804a8c476..557129a7e 100644 --- a/src/components/ParticipantInfo/ParticipantInfo.tsx +++ b/src/components/ParticipantInfo/ParticipantInfo.tsx @@ -147,7 +147,7 @@ export default function ParticipantInfo({ const publications = usePublications(participant); const audioPublication = publications.find(p => p.kind === 'audio'); - const videoPublication = publications.find(p => p.trackName.includes('camera')); + const videoPublication = publications.find(p => !p.trackName.includes('screen') && p.kind === 'video'); const isVideoEnabled = Boolean(videoPublication); const isScreenShareEnabled = publications.find(p => p.trackName.includes('screen')); diff --git a/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.test.tsx b/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.test.tsx index 79b237b1b..51aa02d3b 100644 --- a/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.test.tsx +++ b/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.test.tsx @@ -16,7 +16,8 @@ describe('the LocalVideoPreview component', () => { return { localTracks: [ { - name: 'camera-123456', + name: '', + kind: 'video', attach: jest.fn(), detach: jest.fn(), mediaStreamTrack: { getSettings: () => ({}) }, diff --git a/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.tsx b/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.tsx index 1f65f2137..ef60751f8 100644 --- a/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.tsx +++ b/src/components/PreJoinScreens/DeviceSelectionScreen/LocalVideoPreview/LocalVideoPreview.tsx @@ -57,7 +57,9 @@ export default function LocalVideoPreview({ identity }: { identity: string }) { const classes = useStyles(); const { localTracks } = useVideoContext(); - const videoTrack = localTracks.find(track => track.name.includes('camera')) as LocalVideoTrack; + const videoTrack = localTracks.find( + track => !track.name.includes('screen') && track.kind === 'video' + ) as LocalVideoTrack; return (
diff --git a/src/components/Publication/Publication.test.tsx b/src/components/Publication/Publication.test.tsx index 4f234464c..0cd4fdb85 100644 --- a/src/components/Publication/Publication.test.tsx +++ b/src/components/Publication/Publication.test.tsx @@ -9,7 +9,7 @@ const mockUseTrack = useTrack as jest.Mock; describe('the Publication component', () => { describe('when track.kind is "video"', () => { it('should render a VideoTrack', () => { - mockUseTrack.mockImplementation(() => ({ kind: 'video', name: 'camera-123456' })); + mockUseTrack.mockImplementation(() => ({ kind: 'video', name: '' })); const wrapper = shallow( ); @@ -17,7 +17,7 @@ describe('the Publication component', () => { expect(wrapper.find('VideoTrack').length).toBe(1); }); - it('should ignore the "isLocalParticipant" prop when track.name is not "camera"', () => { + it('should ignore the "isLocalParticipant" prop when track.name contains "screen"', () => { mockUseTrack.mockImplementation(() => ({ kind: 'video', name: 'screen-123456' })); const wrapper = shallow( @@ -26,8 +26,8 @@ describe('the Publication component', () => { expect(wrapper.find({ isLocal: false }).length).toBe(1); }); - it('should use the "isLocalParticipant" prop when track.name is "camera"', () => { - mockUseTrack.mockImplementation(() => ({ kind: 'video', name: 'camera-123456' })); + it('should use the "isLocalParticipant" prop when track.name does not contain "screen" and track.kind is "video"', () => { + mockUseTrack.mockImplementation(() => ({ kind: 'video', name: '' })); const wrapper = shallow( ); diff --git a/src/components/Publication/Publication.tsx b/src/components/Publication/Publication.tsx index 54cfce28a..654475845 100644 --- a/src/components/Publication/Publication.tsx +++ b/src/components/Publication/Publication.tsx @@ -31,7 +31,7 @@ export default function Publication({ publication, isLocalParticipant, videoOnly ); case 'audio': diff --git a/src/components/VideoProvider/index.tsx b/src/components/VideoProvider/index.tsx index 99d8a7218..4f3921a4e 100644 --- a/src/components/VideoProvider/index.tsx +++ b/src/components/VideoProvider/index.tsx @@ -81,7 +81,9 @@ export function VideoProvider({ options, children, onError = () => {} }: VideoPr useRestartAudioTrackOnDeviceChange(localTracks); const [isBackgroundSelectionOpen, setIsBackgroundSelectionOpen] = useState(false); - const videoTrack = localTracks.find(track => track.name.includes('camera')) as LocalVideoTrack | undefined; + const videoTrack = localTracks.find(track => !track.name.includes('screen') && track.kind === 'video') as + | LocalVideoTrack + | undefined; const [backgroundSettings, setBackgroundSettings] = useBackgroundSettings(videoTrack, room); return ( diff --git a/src/hooks/useFlipCameraToggle/useFlipCameraToggle.test.tsx b/src/hooks/useFlipCameraToggle/useFlipCameraToggle.test.tsx index 564ddf3f9..cba0328fd 100644 --- a/src/hooks/useFlipCameraToggle/useFlipCameraToggle.test.tsx +++ b/src/hooks/useFlipCameraToggle/useFlipCameraToggle.test.tsx @@ -13,7 +13,8 @@ const mockUseDevices = useDevices as jest.Mock; const mockStreamSettings = { facingMode: 'user' }; const mockVideoTrack = { - name: 'camera', + name: '', + kind: 'video', mediaStreamTrack: { getSettings: () => mockStreamSettings, }, diff --git a/src/hooks/useFlipCameraToggle/useFlipCameraToggle.tsx b/src/hooks/useFlipCameraToggle/useFlipCameraToggle.tsx index b97215fb1..7352adfe8 100644 --- a/src/hooks/useFlipCameraToggle/useFlipCameraToggle.tsx +++ b/src/hooks/useFlipCameraToggle/useFlipCameraToggle.tsx @@ -8,7 +8,9 @@ import useVideoContext from '../useVideoContext/useVideoContext'; export default function useFlipCameraToggle() { const { localTracks } = useVideoContext(); const [supportsFacingMode, setSupportsFacingMode] = useState(false); - const videoTrack = localTracks.find(track => track.name.includes('camera')) as LocalVideoTrack | undefined; + const videoTrack = localTracks.find(track => !track.name.includes('screen') && track.kind === 'video') as + | LocalVideoTrack + | undefined; const mediaStreamTrack = useMediaStreamTrack(videoTrack); const { videoInputDevices } = useDevices(); diff --git a/src/hooks/useLocalVideoToggle/useLocalVideoToggle.test.tsx b/src/hooks/useLocalVideoToggle/useLocalVideoToggle.test.tsx index 52b2de06f..7e968baec 100644 --- a/src/hooks/useLocalVideoToggle/useLocalVideoToggle.test.tsx +++ b/src/hooks/useLocalVideoToggle/useLocalVideoToggle.test.tsx @@ -7,9 +7,10 @@ import { LocalParticipant } from 'twilio-video'; jest.mock('../useVideoContext/useVideoContext'); const mockUseVideoContext = useVideoContext as jest.Mock; -function getMockTrack(name: string, deviceId?: string) { +function getMockTrack(kind: string, deviceId?: string) { return { - name, + name: '', + kind, mediaStreamTrack: { getSettings: () => ({ deviceId, @@ -21,7 +22,7 @@ function getMockTrack(name: string, deviceId?: string) { describe('the useLocalVideoToggle hook', () => { it('should return true when a localVideoTrack exists', () => { mockUseVideoContext.mockImplementation(() => ({ - localTracks: [getMockTrack('camera-123456')], + localTracks: [getMockTrack('video')], room: { localParticipant: {} }, })); @@ -31,7 +32,7 @@ describe('the useLocalVideoToggle hook', () => { it('should return false when a localVideoTrack does not exist', () => { mockUseVideoContext.mockImplementation(() => ({ - localTracks: [getMockTrack('microphone')], + localTracks: [getMockTrack('audio')], room: { localParticipant: {} }, })); @@ -44,7 +45,7 @@ describe('the useLocalVideoToggle hook', () => { const mockRemoveLocalVideoTrack = jest.fn(); mockUseVideoContext.mockImplementation(() => ({ - localTracks: [getMockTrack('camera')], + localTracks: [getMockTrack('video')], room: { localParticipant: null }, removeLocalVideoTrack: mockRemoveLocalVideoTrack, })); @@ -56,7 +57,7 @@ describe('the useLocalVideoToggle hook', () => { it('should call localParticipant.unpublishTrack when a localVideoTrack and localParticipant exists', () => { const mockLocalTrack = { - ...getMockTrack('camera-123456'), + ...getMockTrack('video'), stop: jest.fn(), }; diff --git a/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx b/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx index e9b4b53c8..9f533543e 100644 --- a/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx +++ b/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx @@ -5,7 +5,9 @@ import useVideoContext from '../useVideoContext/useVideoContext'; export default function useLocalVideoToggle() { const { room, localTracks, getLocalVideoTrack, removeLocalVideoTrack, onError } = useVideoContext(); const localParticipant = room?.localParticipant; - const videoTrack = localTracks.find(track => track.name.includes('camera')) as LocalVideoTrack; + const videoTrack = localTracks.find( + track => !track.name.includes('screen') && track.kind === 'video' + ) as LocalVideoTrack; const [isPublishing, setIspublishing] = useState(false); const toggleVideoEnabled = useCallback(() => { From cd4563f3e7087e269ccb5c33f532515604398faa Mon Sep 17 00:00:00 2001 From: Tim Mendoza Date: Thu, 9 Sep 2021 11:45:27 -0600 Subject: [PATCH 7/7] Update test data --- .../MainParticipantInfo/MainParticipantInfo.test.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx b/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx index de0e309e8..d77866a70 100644 --- a/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx +++ b/src/components/MainParticipantInfo/MainParticipantInfo.test.tsx @@ -113,7 +113,10 @@ describe('the MainParticipantInfo component', () => { }); it('should add "- Screen" to the participants identity when they are screen sharing', () => { - mockUsePublications.mockImplementationOnce(() => [{ trackName: 'screen' }, { trackName: '', kind: 'video' }]); + mockUsePublications.mockImplementationOnce(() => [ + { trackName: 'screen', kind: 'video' }, + { trackName: '', kind: 'video' }, + ]); const wrapper = shallow( mock children );