fix(video-layout):Screenshares not updated on time

This commit is contained in:
Hristo Terezov 2022-03-04 17:17:46 -06:00
parent d718d9d8fb
commit 74384bfa66
3 changed files with 34 additions and 2 deletions

View File

@ -1021,7 +1021,7 @@ function _mapStateToProps(state, ownProps): Object {
_localFlipX: Boolean(localFlipX),
_participant: participant,
_raisedHand: hasRaisedHand(participant),
_videoObjectPosition: getVideoObjectPosition(state, participant.id),
_videoObjectPosition: getVideoObjectPosition(state, participant?.id),
_videoTrack,
...size
};

View File

@ -1,6 +1,7 @@
// @flow
import { getCurrentConference } from '../base/conference';
import { VIDEO_TYPE } from '../base/media';
import {
PARTICIPANT_LEFT,
PIN_PARTICIPANT,
@ -9,11 +10,12 @@ import {
getPinnedParticipant
} from '../base/participants';
import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
import { TRACK_REMOVED } from '../base/tracks';
import { SET_DOCUMENT_EDITING_STATUS } from '../etherpad';
import { isFollowMeActive } from '../follow-me';
import { SET_TILE_VIEW } from './actionTypes';
import { setTileView } from './actions';
import { setRemoteParticipantsWithScreenShare, setTileView } from './actions';
import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
import './subscriber';
@ -70,6 +72,32 @@ MiddlewareRegistry.register(store => next => action => {
if (action.enabled && getPinnedParticipant(store)) {
store.dispatch(pinParticipant(null));
}
break;
// Update the remoteScreenShares.
// Because of the debounce in the subscriber which updates the remoteScreenShares we need to handle
// removal of screen shares separatelly here. Otherwise it is possible to have screen sharing
// participant that has already left in the remoteScreenShares array. This can lead to rendering
// a thumbnails for already left participants since the remoteScreenShares array is used for
// building the ordered list of remote participants.
case TRACK_REMOVED: {
const { jitsiTrack } = action.track;
if (jitsiTrack && jitsiTrack.isVideoTrack() && jitsiTrack.getVideoType() === VIDEO_TYPE.DESKTOP) {
const participantId = jitsiTrack.getParticipantId();
const oldScreenShares = store.getState()['features/video-layout'].remoteScreenShares || [];
const newScreenShares = oldScreenShares.filter(id => id !== participantId);
if (oldScreenShares.length !== newScreenShares.length) { // the participant was removed
store.dispatch(setRemoteParticipantsWithScreenShare(newScreenShares));
updateAutoPinnedParticipant(oldScreenShares, store);
}
}
break;
}
}
if (shouldUpdateAutoPin) {

View File

@ -16,6 +16,10 @@ import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
StateListenerRegistry.register(
/* selector */ state => state['features/base/tracks'],
/* listener */ debounce((tracks, store) => {
// Because of the debounce we need to handle removal of screen shares in the middleware. Otherwise it is
// possible to have screen sharing participant that has already left in the remoteScreenShares array.
// This can lead to rendering a thumbnails for already left participants since the remoteScreenShares
// array is used for building the ordered list of remote participants.
if (!getAutoPinSetting() || isFollowMeActive(store)) {
return;
}