diff --git a/modules/UI/videolayout/LargeContainer.js b/modules/UI/videolayout/LargeContainer.js index 73d6beeb6..e0a4a5f3b 100644 --- a/modules/UI/videolayout/LargeContainer.js +++ b/modules/UI/videolayout/LargeContainer.js @@ -42,10 +42,11 @@ export default class LargeContainer { /** * Update video stream. + * @param {string} userID * @param {JitsiTrack?} stream new stream * @param {string} videoType video type */ - setStream (stream, videoType) { // eslint-disable-line no-unused-vars + setStream (userID, stream, videoType) {// eslint-disable-line no-unused-vars } /** diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 08521c946..2ca754093 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -178,7 +178,7 @@ export default class LargeVideoManager { logger.info("hover in %s", id); this.state = videoType; const container = this.getContainer(this.state); - container.setStream(stream, videoType); + container.setStream(id, stream, videoType); // change the avatar url on large this.updateAvatar(Avatar.getAvatarUrl(id)); diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index 7bb98f9bc..4939f8028 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -112,8 +112,11 @@ LocalVideo.prototype.changeVideo = function (stream) { localVideoContainer.removeChild(localVideo); // when removing only the video element and we are on stage // update the stage - if(this.isCurrentlyOnLargeVideo()) - this.VideoLayout.updateLargeVideo(this.id); + if (this.isCurrentlyOnLargeVideo()) { + this.VideoLayout.updateLargeVideo( + this.id, + true /* force - stream removed for the same user ID */); + } stream.off(TrackEvents.LOCAL_TRACK_STOPPED, endedHandler); }; stream.on(TrackEvents.LOCAL_TRACK_STOPPED, endedHandler); diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index aa7d27828..0dbd8bcd8 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -431,11 +431,14 @@ RemoteVideo.prototype.removeRemoteStreamElement = function (stream) { // when removing only the video element and we are on stage // update the stage - if (isVideo && this.isCurrentlyOnLargeVideo()) - this.VideoLayout.updateLargeVideo(this.id); - else + if (isVideo && this.isCurrentlyOnLargeVideo()) { + this.VideoLayout.updateLargeVideo( + this.id, + true /* force - same user ID, but removed video stream */); + } else { // Missing video stream will affect display mode this.updateView(); + } }; /** diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index fba492416..432ba4470 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/modules/UI/videolayout/VideoContainer.js @@ -1,4 +1,4 @@ -/* global $, APP, interfaceConfig */ +/* global $, interfaceConfig */ /* jshint -W101 */ import Filmstrip from './Filmstrip'; @@ -11,22 +11,6 @@ export const VIDEO_CONTAINER_TYPE = "camera"; const FADE_DURATION_MS = 300; -/** - * Get stream id. - * @param {JitsiTrack?} stream - */ -function getStreamOwnerId(stream) { - if (!stream) { - return; - } - // local stream doesn't have method "getParticipantId" - if (stream.isLocal()) { - return APP.conference.getMyUserId(); - } else { - return stream.getParticipantId(); - } -} - /** * Returns an array of the video dimensions, so that it keeps it's aspect * ratio and fits available area with it's larger dimension. This method @@ -171,7 +155,7 @@ export class VideoContainer extends LargeContainer { } get id () { - return getStreamOwnerId(this.stream); + return this.userId; } /** @@ -184,6 +168,7 @@ export class VideoContainer extends LargeContainer { constructor (resizeContainer, emitter) { super(); this.stream = null; + this.userId = null; this.videoType = null; this.localFlipX = true; this.emitter = emitter; @@ -410,10 +395,12 @@ export class VideoContainer extends LargeContainer { /** * Update video stream. + * @param {string} userID * @param {JitsiTrack?} stream new stream * @param {string} videoType video type */ - setStream (stream, videoType) { + setStream (userID, stream, videoType) { + this.userId = userID; if (this.stream === stream) { // Handles the use case for the remote participants when the // videoType is received with delay after turning on/off the diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 8c212b1bf..e45f8dd86 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -761,7 +761,7 @@ var VideoLayout = { if (remoteVideo) { remoteVideo.updateView(); if (remoteVideo.isCurrentlyOnLargeVideo()) { - this.updateLargeVideo(id); + this.updateLargeVideo(id, true); } } },