ref(RemoteVideo): store JitsiParticipant instead of id

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

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

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(

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 <tt>RemoteVideo</tt>.
+ * @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;

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 <tt>RemoteVideo</tt> 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 <tt>SmallVideo</tt>.
+     *
+     * @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);