From 751f27644f90aa99c42b4ce4e45ad24a14892812 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Thu, 15 Jun 2017 10:01:32 -0500 Subject: [PATCH] fix(VideoLayout): store userID in container The container needs to store user's ID in order for the 'isOnLargeVideo' logic to work correctly when user has no stream (previously it was obtained from stream which can be null/undefined). --- modules/UI/videolayout/LargeContainer.js | 3 ++- modules/UI/videolayout/LargeVideoManager.js | 2 +- modules/UI/videolayout/LocalVideo.js | 7 ++++-- modules/UI/videolayout/RemoteVideo.js | 9 +++++--- modules/UI/videolayout/VideoContainer.js | 25 +++++---------------- modules/UI/videolayout/VideoLayout.js | 2 +- 6 files changed, 21 insertions(+), 27 deletions(-) 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); } } },