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);