diff --git a/conference.js b/conference.js index ed346eca2..a715ca552 100644 --- a/conference.js +++ b/conference.js @@ -1085,7 +1085,7 @@ export default { console.log('USER %s connnected', id, user); APP.API.notifyUserJoined(id); - APP.UI.addUser(id, user.getDisplayName()); + APP.UI.addUser(user); // check the roles for the new user and reflect them APP.UI.updateUserRole(user); diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 22802db3d..558e4b2f6 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -602,10 +602,11 @@ UI.getSharedDocumentManager = function () { /** * Show user on UI. - * @param {string} id user id - * @param {string} displayName user nickname + * @param {JitsiParticipant} user */ -UI.addUser = function (id, displayName) { +UI.addUser = function (user) { + var id = user.getId(); + var displayName = user.getDisplayName(); UI.hideRingOverLay(); ContactList.addContact(id); @@ -618,7 +619,7 @@ UI.addUser = function (id, displayName) { UIUtil.playSoundNotification('userJoined'); // Add Peer's container - VideoLayout.addParticipantContainer(id); + VideoLayout.addParticipantContainer(user); // Configure avatar UI.setUserEmail(id); diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index 92e153190..3d777c6ed 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -243,7 +243,7 @@ export default class SharedVideoManager { let thumb = new SharedVideoThumb(self.url); thumb.setDisplayName(player.getVideoData().title); - VideoLayout.addParticipantContainer(self.url, thumb); + VideoLayout.addRemoteVideoContainer(self.url, thumb); let iframe = player.getIframe(); self.sharedVideo = new SharedVideoContainer( diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 6d577765a..382ed5c6c 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -8,14 +8,24 @@ import UIUtils from "../util/UIUtil"; import UIEvents from '../../../service/UI/UIEvents'; import JitsiPopover from "../util/JitsiPopover"; -function RemoteVideo(id, VideoLayout, emitter) { - this.id = id; +/** + * Creates new instance of the RemoteVideo. + * @param user {JitsiParticipant} the user for whom remote video instance will + * be created. + * @param {VideoLayout} VideoLayout the video layout instance. + * @param {EventEmitter} emitter the event emitter which will be used by + * the new instance to emit events. + * @constructor + */ +function RemoteVideo(user, VideoLayout, emitter) { + this.user = user; + this.id = user.getId(); this.emitter = emitter; - this.videoSpanId = `participant_${id}`; + this.videoSpanId = `participant_${this.id}`; SmallVideo.call(this, VideoLayout); this.hasRemoteVideoMenu = false; this.addRemoteVideoContainer(); - this.connectionIndicator = new ConnectionIndicator(this, id); + this.connectionIndicator = new ConnectionIndicator(this, this.id); this.setDisplayName(); this.flipX = false; this.isLocal = false; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 0b3b68375..e20a122b2 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -382,18 +382,30 @@ var VideoLayout = { }, /** - * Creates a participant container for the given id and smallVideo. + * Creates or adds a participant container for the given id and smallVideo. * - * @param id the id of the participant to add + * @param {JitsiParticipant} user the participant to add * @param {SmallVideo} smallVideo optional small video instance to add as a - * remote video, if undefined RemoteVideo will be created + * remote video, if undefined RemoteVideo will be created */ - addParticipantContainer (id, smallVideo) { + addParticipantContainer (user, smallVideo) { + let id = user.getId(); let remoteVideo; if(smallVideo) remoteVideo = smallVideo; else - remoteVideo = new RemoteVideo(id, VideoLayout, eventEmitter); + remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter); + this.addRemoteVideoContainer(id, remoteVideo); + }, + + /** + * Adds remote video container for the given id and SmallVideo. + * + * @param {string} the id of the video to add + * @param {SmallVideo} smallVideo the small video instance to add as a + * remote video + */ + addRemoteVideoContainer (id, remoteVideo) { remoteVideos[id] = remoteVideo; let videoType = VideoLayout.getRemoteVideoType(id);