From 3de278be96e07fc305bff8d30e36c8fda32f0f75 Mon Sep 17 00:00:00 2001 From: Yordan Neshkolov Date: Wed, 3 Jun 2020 13:32:42 +0300 Subject: [PATCH] NY-10562 [WEB]: Active speaker should not be shown on all feeds for same account --- .../AudioVideoFullScreenView.js | 35 ++++++++++--------- .../AudioVideoMember/AudioVideoMember.js | 2 +- .../audioVideo/sagas/AudioVideo.saga.js | 8 +++-- 3 files changed, 25 insertions(+), 20 deletions(-) diff --git a/src/componets/AudioVideo/AudioVideoFullScreenView/AudioVideoFullScreenView.js b/src/componets/AudioVideo/AudioVideoFullScreenView/AudioVideoFullScreenView.js index c0af20b50..619b7c466 100644 --- a/src/componets/AudioVideo/AudioVideoFullScreenView/AudioVideoFullScreenView.js +++ b/src/componets/AudioVideo/AudioVideoFullScreenView/AudioVideoFullScreenView.js @@ -51,15 +51,15 @@ class AudioVideoFullScreenView extends Component { componentDidUpdate(prevProps) { const { membersWithVideo } = this.props; const { feedData } = this.state; - const oldSpeekers = prevProps.callData.activeSpeakers ? prevProps.callData.activeSpeakers.join(', ') : ''; - const newSpeekers = this.props.callData.activeSpeakers ? this.props.callData.activeSpeakers.join(', ') : ''; + const oldSpeekers = JSON.stringify(prevProps.callData.activeSpeakers); + const newSpeekers = JSON.stringify(this.props.callData.activeSpeakers); const prevLen = prevProps.membersWithVideo.length; const newLen = membersWithVideo.length; const changed = []; membersWithVideo.forEach(m => { - const { phone_id, isAudioMuted } = m; - const memberInState = feedData.find(d => d.phone_id === phone_id); + const { participantId, isAudioMuted } = m; + const memberInState = feedData.find(d => d.participantId === participantId); if (memberInState && memberInState.isAudioMuted !== isAudioMuted) { changed.push(m); } @@ -68,7 +68,7 @@ class AudioVideoFullScreenView extends Component { if (changed.length > 0) { const result = feedData.map(item => ({ ...item, - ...changed.find(({ phone_id }) => phone_id === item.phone_id), + ...changed.find(({ participantId }) => participantId === item.participantId), })); this.setState({ feedData: result }); @@ -167,9 +167,9 @@ class AudioVideoFullScreenView extends Component { orderFeedsInit = () => { const { fullScreenData, membersWithVideo } = this.props; const { member } = fullScreenData; - const memberOnFullscreenId = member ? member.phone_id : ''; + const memberOnFullscreenId = member ? member.participantId : ''; - this.setState({ feedData: membersWithVideo.filter(m => m.phone_id !== memberOnFullscreenId) }); + this.setState({ feedData: membersWithVideo.filter(m => m.participantId !== memberOnFullscreenId) }); } reorderFeedsChangedActiveSpeakers = () => { @@ -178,15 +178,16 @@ class AudioVideoFullScreenView extends Component { const { member } = fullScreenData; const { activeSpeakers } = callData; const newSpeakers = activeSpeakers ? activeSpeakers : []; - const newTopSpeakerName = newSpeakers[newSpeakers.length - 1]; - const memberOnFullscreenName = member ? member.displayName : ''; + const newTopSpeakerObj = newSpeakers.length ? newSpeakers[newSpeakers.length - 1] : null; + const memberOnFullscreenPartId = member ? member.participantId : ''; - if (newTopSpeakerName) { + if (newTopSpeakerObj) { const currentTopSpeaker = feedData[0]; - if (currentTopSpeaker && currentTopSpeaker.displayName !== newTopSpeakerName && memberOnFullscreenName !== newTopSpeakerName) { - const newTopSpeaker = membersWithVideo.find(m => m.displayName === newTopSpeakerName); + if (currentTopSpeaker && currentTopSpeaker.participantId !== newTopSpeakerObj.participantId + && memberOnFullscreenPartId !== newTopSpeakerObj.participantId) { + const newTopSpeaker = membersWithVideo.find(m => m.participantId === newTopSpeakerObj.participantId); if (newTopSpeaker) { - const newFeedData = [newTopSpeaker, ...feedData.filter(d => d.displayName !== newTopSpeakerName)]; + const newFeedData = [newTopSpeaker, ...feedData.filter(d => d.participantId !== newTopSpeakerObj.participantId)]; this.throttleFunc(newFeedData); } } @@ -202,15 +203,15 @@ class AudioVideoFullScreenView extends Component { */ reorderFeedsChangedMembers = (oldList, newList, prevLen, newLen) => { const { member } = this.props; - const memberOnFullscreenId = member ? member.phone_id : ''; + const memberOnFullscreenId = member ? member.participantId : ''; if (newLen > prevLen) { this.setState({ feedData: [ ...differenceBy( - newList.filter(d => d.phone_id !== memberOnFullscreenId), + newList.filter(d => d.participantId !== memberOnFullscreenId), oldList, - 'phone_id', + 'participantId', ), ...oldList], }); @@ -302,7 +303,7 @@ class AudioVideoFullScreenView extends Component { } {feedData.map(data => { return ( -
+
diff --git a/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js b/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js index 15ce0201a..a891f0c6f 100644 --- a/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js +++ b/src/componets/AudioVideo/AudioVideoMember/AudioVideoMember.js @@ -106,7 +106,7 @@ class AudioVideoMember extends Component { const isScreenSharer = screenSharer && member && screenSharer.phone_id === member.phone_id; const isInactiveInConf = !isSelf && !p2p && (!member || (!member.isActive && !member.isRinging)); - const isActiveSpeaker = activeSpeakers && member && (activeSpeakers.indexOf(member.displayName) !== -1); + const isActiveSpeaker = activeSpeakers && member && (activeSpeakers.find(speaker => speaker.participantId === member.participantId)); return (
diff --git a/src/core/resource/audioVideo/sagas/AudioVideo.saga.js b/src/core/resource/audioVideo/sagas/AudioVideo.saga.js index 4f790ae55..85c7d7d1c 100644 --- a/src/core/resource/audioVideo/sagas/AudioVideo.saga.js +++ b/src/core/resource/audioVideo/sagas/AudioVideo.saga.js @@ -1148,9 +1148,13 @@ function* handleActiveSpeaker(action) { } let activeSpeakers = callData.activeSpeakers ? [...callData.activeSpeakers] : []; - activeSpeakers = activeSpeakers.filter(name => name !== payload.callParticipant.name); + activeSpeakers = activeSpeakers.filter(data => data.participantId !== payload.callParticipant.participantId); if (payload.isSpeaking) { - activeSpeakers.push(payload.callParticipant.name); + activeSpeakers.push({ + name: payload.callParticipant.name, + participantId: payload.callParticipant.participantId, + toString: () => payload.callParticipant.name + }); } yield put(audioVideoActions.updateCall({ conferenceId: payload.conferenceId, activeSpeakers })); } catch (e) { -- GitLab