diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 59e9c2a45..a3ed26d6f 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -373,6 +373,7 @@ export default class RemoteVideo extends SmallVideo { if (stream === this.videoStream) { this.videoStream = null; + this.videoType = undefined; } this.updateView(); @@ -481,7 +482,12 @@ export default class RemoteVideo extends SmallVideo { const isVideo = stream.isVideoTrack(); - isVideo ? this.videoStream = stream : this.audioStream = stream; + if (isVideo) { + this.videoStream = stream; + this.videoType = stream.videoType; + } else { + this.audioStream = stream; + } if (!stream.getOriginalStream()) { logger.debug('Remote video stream has no original stream'); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index e7e1146ca..1319fc245 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -88,6 +88,7 @@ export default class SmallVideo { this.audioStream = null; this.VideoLayout = VideoLayout; this.videoIsHovered = false; + this.videoType = undefined; /** * The current state of the user's bridge connection. The value should be @@ -243,6 +244,7 @@ export default class SmallVideo { */ setScreenSharing(isScreenSharing) { this.isScreenSharing = isScreenSharing; + this.updateView(); this.updateStatusBar(); } @@ -463,8 +465,10 @@ export default class SmallVideo { * or DISPLAY_BLACKNESS_WITH_NAME. */ selectDisplayMode(input) { - // Display name is always and only displayed when user is on the stage - if (input.isCurrentlyOnLargeVideo && !input.tileViewActive) { + if (!input.tileViewActive && input.isScreenSharing) { + return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR; + } else if (input.isCurrentlyOnLargeVideo && !input.tileViewActive) { + // Display name is always and only displayed when user is on the stage return input.isVideoPlayable && !input.isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME; } else if (input.isVideoPlayable && input.hasVideo && !input.isAudioOnly) { // check hovering and change state to video with name @@ -493,6 +497,7 @@ export default class SmallVideo { canPlayEventReceived: this._canPlayEventReceived, videoStream: Boolean(this.videoStream), isVideoMuted: this.isVideoMuted, + isScreenSharing: this.isScreenSharing, videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream' }; } diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 623a23963..386baccce 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -177,10 +177,7 @@ const VideoLayout = { this.onAudioMute(id, stream.isMuted()); } else { this.onVideoMute(id, stream.isMuted()); - - if (stream.videoType === 'desktop') { - remoteVideo.setScreenSharing(true); - } + remoteVideo.setScreenSharing(stream.videoType === 'desktop'); } }, @@ -192,10 +189,7 @@ const VideoLayout = { if (remoteVideo) { remoteVideo.removeRemoteStreamElement(stream); - - if (stream.videoType === 'desktop') { - remoteVideo.setScreenSharing(false); - } + remoteVideo.setScreenSharing(false); } this.updateMutedForNoTracks(id, stream.getType()); @@ -493,13 +487,14 @@ const VideoLayout = { }, onVideoTypeChanged(id, newVideoType) { - if (VideoLayout.getRemoteVideoType(id) === newVideoType) { + const remoteVideo = remoteVideos[id]; + + if (!remoteVideo || remoteVideo.videoType === newVideoType) { return; } logger.info('Peer video type changed: ', id, newVideoType); - - this._updateLargeVideoIfDisplayed(id, true); + remoteVideo.setScreenSharing(newVideoType === 'desktop'); }, /**