From bbbe5587f695b4a34b76f242a7450c15c081eb96 Mon Sep 17 00:00:00 2001 From: Bogdan Duduman Date: Wed, 22 Feb 2023 17:01:11 +0200 Subject: [PATCH 1/3] Remove tint from owner screenshare participants --- react/features/base/participants/functions.ts | 16 ++++++++++++++++ .../filmstrip/components/web/Thumbnail.tsx | 7 ++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts index e693b074a..e958188ff 100644 --- a/react/features/base/participants/functions.ts +++ b/react/features/base/participants/functions.ts @@ -267,6 +267,22 @@ export function getVirtualScreenshareParticipantOwnerId(id: string) { return id.split('-')[0]; } +/** + * Returns owner participant IDs of the virtual screenshares participant. + * + * @param {(Function|Object)} stateful - The (whole) redux state, or redux's. + * @returns {(string[])} + */ +export function getVirtualScreenshareParticipantOwnerIds(stateful: IStateful) { + const virtualScreenshareParticipants = toState(stateful)['features/base/participants'] + .sortedRemoteVirtualScreenshareParticipants; + + const virtualScreenshareParticipantIds = Array.from(virtualScreenshareParticipants.keys()) + .map(id => getVirtualScreenshareParticipantOwnerId(id)); + + return virtualScreenshareParticipantIds; +} + /** * Returns the Map with fake participants. * diff --git a/react/features/filmstrip/components/web/Thumbnail.tsx b/react/features/filmstrip/components/web/Thumbnail.tsx index dccc9d8e1..ebb67553e 100644 --- a/react/features/filmstrip/components/web/Thumbnail.tsx +++ b/react/features/filmstrip/components/web/Thumbnail.tsx @@ -20,6 +20,7 @@ import { pinParticipant } from '../../../base/participants/actions'; import { getLocalParticipant, getParticipantByIdOrUndefined, + getVirtualScreenshareParticipantOwnerIds, hasRaisedHand, isLocalScreenshareParticipant, isScreenShareParticipant, @@ -1287,9 +1288,13 @@ function _mapStateToProps(state: IReduxState, ownProps: any): Object { const participantId = isLocal ? getLocalParticipant(state)?.id : participantID; const isActiveParticipant = activeParticipants.find((pId: string) => pId === participantId); const participantCurrentlyOnLargeVideo = state['features/large-video']?.participantId === id; + const virtualScreenshareParticipantOwnerIds = getVirtualScreenshareParticipantOwnerIds(state); const shouldDisplayTintBackground = _currentLayout !== LAYOUTS.TILE_VIEW && filmstripType === FILMSTRIP_TYPE.MAIN - && (isActiveParticipant || participantCurrentlyOnLargeVideo); + && (isActiveParticipant || participantCurrentlyOnLargeVideo) + + // skip showing tint for owner participants that are screensharing. + && !virtualScreenshareParticipantOwnerIds.includes(id); return { _audioTrack, From 19f8c252b54407d444786b5e3019cdfc954e0a77 Mon Sep 17 00:00:00 2001 From: Bogdan Duduman Date: Thu, 23 Feb 2023 09:42:50 +0200 Subject: [PATCH 2/3] Include local screen share participant and null checks --- react/features/base/participants/functions.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts index e958188ff..8462e404e 100644 --- a/react/features/base/participants/functions.ts +++ b/react/features/base/participants/functions.ts @@ -275,10 +275,17 @@ export function getVirtualScreenshareParticipantOwnerId(id: string) { */ export function getVirtualScreenshareParticipantOwnerIds(stateful: IStateful) { const virtualScreenshareParticipants = toState(stateful)['features/base/participants'] - .sortedRemoteVirtualScreenshareParticipants; + .sortedRemoteVirtualScreenshareParticipants ?? new Map(); const virtualScreenshareParticipantIds = Array.from(virtualScreenshareParticipants.keys()) .map(id => getVirtualScreenshareParticipantOwnerId(id)); + const localScreenShareParticipantId = getLocalScreenShareParticipant(stateful)?.id; + + if (localScreenShareParticipantId) { + return [ + ...virtualScreenshareParticipantIds, + getVirtualScreenshareParticipantOwnerId(localScreenShareParticipantId) ]; + } return virtualScreenshareParticipantIds; } From 6b67924dbd756602044fc75a38356d03a1d7af71 Mon Sep 17 00:00:00 2001 From: Bogdan Duduman Date: Tue, 7 Mar 2023 14:19:33 +0200 Subject: [PATCH 3/3] Review fixes: use existing method --- react/features/base/participants/functions.ts | 23 ------------------- .../filmstrip/components/web/Thumbnail.tsx | 7 +++--- 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts index 8462e404e..e693b074a 100644 --- a/react/features/base/participants/functions.ts +++ b/react/features/base/participants/functions.ts @@ -267,29 +267,6 @@ export function getVirtualScreenshareParticipantOwnerId(id: string) { return id.split('-')[0]; } -/** - * Returns owner participant IDs of the virtual screenshares participant. - * - * @param {(Function|Object)} stateful - The (whole) redux state, or redux's. - * @returns {(string[])} - */ -export function getVirtualScreenshareParticipantOwnerIds(stateful: IStateful) { - const virtualScreenshareParticipants = toState(stateful)['features/base/participants'] - .sortedRemoteVirtualScreenshareParticipants ?? new Map(); - - const virtualScreenshareParticipantIds = Array.from(virtualScreenshareParticipants.keys()) - .map(id => getVirtualScreenshareParticipantOwnerId(id)); - const localScreenShareParticipantId = getLocalScreenShareParticipant(stateful)?.id; - - if (localScreenShareParticipantId) { - return [ - ...virtualScreenshareParticipantIds, - getVirtualScreenshareParticipantOwnerId(localScreenShareParticipantId) ]; - } - - return virtualScreenshareParticipantIds; -} - /** * Returns the Map with fake participants. * diff --git a/react/features/filmstrip/components/web/Thumbnail.tsx b/react/features/filmstrip/components/web/Thumbnail.tsx index ebb67553e..d9aa52452 100644 --- a/react/features/filmstrip/components/web/Thumbnail.tsx +++ b/react/features/filmstrip/components/web/Thumbnail.tsx @@ -20,7 +20,7 @@ import { pinParticipant } from '../../../base/participants/actions'; import { getLocalParticipant, getParticipantByIdOrUndefined, - getVirtualScreenshareParticipantOwnerIds, + getScreenshareParticipantIds, hasRaisedHand, isLocalScreenshareParticipant, isScreenShareParticipant, @@ -1288,13 +1288,14 @@ function _mapStateToProps(state: IReduxState, ownProps: any): Object { const participantId = isLocal ? getLocalParticipant(state)?.id : participantID; const isActiveParticipant = activeParticipants.find((pId: string) => pId === participantId); const participantCurrentlyOnLargeVideo = state['features/large-video']?.participantId === id; - const virtualScreenshareParticipantOwnerIds = getVirtualScreenshareParticipantOwnerIds(state); + const screenshareParticipantIds = getScreenshareParticipantIds(state); + const shouldDisplayTintBackground = _currentLayout !== LAYOUTS.TILE_VIEW && filmstripType === FILMSTRIP_TYPE.MAIN && (isActiveParticipant || participantCurrentlyOnLargeVideo) // skip showing tint for owner participants that are screensharing. - && !virtualScreenshareParticipantOwnerIds.includes(id); + && !screenshareParticipantIds.includes(id); return { _audioTrack,