Skip to content

Video 6578 display all camera tracks #585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timmydoza merged 7 commits into from
Sep 10, 2021
Merged

Video 6578 display all camera tracks #585

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5e81e47
Suppress test warnings
Sep 2, 2021
703a925
Log any conversations errors
Sep 2, 2021
83909d1
Show the correct participants network quality level in the MainPartic…
Sep 2, 2021
23d7f28
Update participant logic to be less strict about track names
Sep 2, 2021
f4a68ea
Log another chat error
Sep 8, 2021
5b92685
Remove all instances of trackName.includes('camera')
Sep 9, 2021
cd4563f
Update test data
Sep 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/components/ChatProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ export const ChatProvider: React.FC = ({ children }) => {
window.chatClient = client;
setChatClient(client);
})
.catch(() => {
.catch(e => {
console.error(e);
Copy link
Contributor

@olipyskoty olipyskoty Sep 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we will need to add another console.error(e) to line 76

onError(new Error("There was a problem connecting to Twilio's conversation service."));
});
},
Expand Down Expand Up @@ -71,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.'));
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainParticipantInfo/MainParticipantInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export default function MainParticipantInfo({ participant, children }: MainParti
{screenSharePublication && ' - Screen'}
</Typography>
</div>
<NetworkQualityLevel participant={localParticipant} />
<NetworkQualityLevel participant={participant} />
</div>
{isRecording && (
<Tooltip
Expand Down
10 changes: 5 additions & 5 deletions src/components/ParticipantTracks/ParticipantTracks.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<ParticipantTracks participant={'mockParticipant' as any} />);
expect(wrapper.find('Publication').length).toBe(1);
Expand All @@ -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(<ParticipantTracks participant={'mockParticipant' as any} enableScreenShare />);
expect(wrapper.find('Publication').length).toBe(1);
Expand All @@ -51,15 +51,15 @@ 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(<ParticipantTracks participant={'mockParticipant' as any} enableScreenShare />);
expect(wrapper.find('Publication').length).toBe(1);
expect(
wrapper
.find('Publication')
.at(0)
.prop('publication')
).toEqual({ trackName: 'camera-123456', trackSid: 1, kind: 'video' });
).toEqual({ trackName: '', trackSid: 1, kind: 'video' });
});
});
});
5 changes: 4 additions & 1 deletion src/components/ParticipantTracks/ParticipantTracks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
}

Expand Down
3 changes: 3 additions & 0 deletions src/setupTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => ({}));