diff --git a/.changeset/dirty-cameras-join.md b/.changeset/dirty-cameras-join.md new file mode 100644 index 000000000..78e76de80 --- /dev/null +++ b/.changeset/dirty-cameras-join.md @@ -0,0 +1,5 @@ +--- +"@whereby.com/core": minor +--- + +Add missing `breakoutGroup` property to all in-room screenshares diff --git a/packages/core/src/RoomParticipant.ts b/packages/core/src/RoomParticipant.ts index eeba4ded9..baed05348 100644 --- a/packages/core/src/RoomParticipant.ts +++ b/packages/core/src/RoomParticipant.ts @@ -110,6 +110,7 @@ export interface Screenshare { participantId: string; id: string; hasAudioTrack: boolean; + breakoutGroup: string | null; stream?: MediaStream; isLocal: boolean; } diff --git a/packages/core/src/redux/slices/__tests__/room.unit.ts b/packages/core/src/redux/slices/__tests__/room.unit.ts index ba78e7b34..44402e778 100644 --- a/packages/core/src/redux/slices/__tests__/room.unit.ts +++ b/packages/core/src/redux/slices/__tests__/room.unit.ts @@ -1,6 +1,6 @@ import { roomSlice, selectScreenshares } from "../room"; import { signalEvents } from "../signalConnection/actions"; -import { randomRemoteParticipant, randomMediaStream } from "../../../__mocks__/appMocks"; +import { randomRemoteParticipant, randomMediaStream, randomLocalParticipant } from "../../../__mocks__/appMocks"; describe("roomSlice", () => { describe("reducers", () => { @@ -35,21 +35,30 @@ describe("roomSlice", () => { }); const client3 = randomRemoteParticipant({ presentationStream: randomMediaStream(), + breakoutGroup: "a", }); describe("selectScreenshares", () => { + const breakoutGroup = "b"; + const localParticipant = randomLocalParticipant({ + roleName: "viewer", + breakoutGroup, + }); + const localScreenshareStream = randomMediaStream(); it.each` localScreenshareStream | remoteParticipants | expected ${null} | ${[]} | ${[]} - ${null} | ${[client1, client2]} | ${[{ id: `pres-${client2.id}`, hasAudioTrack: false, isLocal: false, participantId: client2.id, stream: client2.presentationStream }]} - ${localScreenshareStream} | ${[]} | ${[{ id: "local-screenshare", hasAudioTrack: false, isLocal: true, participantId: "local", stream: localScreenshareStream }]} - ${localScreenshareStream} | ${[client3]} | ${[{ id: "local-screenshare", hasAudioTrack: false, isLocal: true, participantId: "local", stream: localScreenshareStream }, { id: `pres-${client3.id}`, hasAudioTrack: false, isLocal: false, participantId: client3.id, stream: client3.presentationStream }]} + ${null} | ${[client1, client2]} | ${[{ id: `pres-${client2.id}`, hasAudioTrack: false, breakoutGroup: null, isLocal: false, participantId: client2.id, stream: client2.presentationStream }]} + ${localScreenshareStream} | ${[]} | ${[{ id: "local-screenshare", hasAudioTrack: false, breakoutGroup, isLocal: true, participantId: "local", stream: localScreenshareStream }]} + ${localScreenshareStream} | ${[client3]} | ${[{ id: "local-screenshare", hasAudioTrack: false, breakoutGroup, isLocal: true, participantId: "local", stream: localScreenshareStream }, { id: `pres-${client3.id}`, hasAudioTrack: false, breakoutGroup: "a", isLocal: false, participantId: client3.id, stream: client3.presentationStream }]} `( "should return $expected when localScreenshareStream=$localScreenshareStream, remoteParticipants=$remoteParticipants", ({ localScreenshareStream, remoteParticipants, expected }) => { - expect(selectScreenshares.resultFunc(localScreenshareStream, remoteParticipants)).toEqual(expected); + expect( + selectScreenshares.resultFunc(localScreenshareStream, localParticipant, remoteParticipants), + ).toEqual(expected); }, ); }); diff --git a/packages/core/src/redux/slices/room.ts b/packages/core/src/redux/slices/room.ts index e210ab668..48c334305 100644 --- a/packages/core/src/redux/slices/room.ts +++ b/packages/core/src/redux/slices/room.ts @@ -115,8 +115,9 @@ export const selectRoomIsLocked = (state: RootState) => state.room.isLocked; export const selectScreenshares = createSelector( selectLocalScreenshareStream, + selectLocalParticipantRaw, selectRemoteParticipants, - (localScreenshareStream, remoteParticipants) => { + (localScreenshareStream, localParticipant, remoteParticipants) => { const screenshares: Screenshare[] = []; if (localScreenshareStream) { @@ -124,6 +125,7 @@ export const selectScreenshares = createSelector( id: localScreenshareStream.id || "local-screenshare", participantId: "local", hasAudioTrack: localScreenshareStream.getTracks().some((track) => track.kind === "audio"), + breakoutGroup: localParticipant.breakoutGroup, stream: localScreenshareStream, isLocal: true, }); @@ -135,6 +137,7 @@ export const selectScreenshares = createSelector( id: participant.presentationStream.id || `pres-${participant.id}`, participantId: participant.id, hasAudioTrack: participant.presentationStream.getTracks().some((track) => track.kind === "audio"), + breakoutGroup: participant.breakoutGroup, stream: participant.presentationStream, isLocal: false, });