Split setting the user ID and the participant name

The user ID was set when a new participant was found in the list of
participants and then cached to be used elsewhere. The only exception
was the handling of the "nick" event, in which the user ID is sent with
the event if the MCU is used (if the MCU is not used the event is only
triggered for guests so no user ID is set).

With this change the user ID is now set after the VideoView was shown.
Due to this "imageplaceholder()" now gets the height from the element
instead of using the given one, so it needs to be overriden in the CSS
rules to ensure that the right size is used.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

3 files changed, 39 insertions, 21 deletions

diff --git a/css/video.scss b/css/video.scss
index a234cfe6c..e91bc9e64 100644
--- a/css/video.scss
+++ b/css/video.scss
@@ -95,6 +95,20 @@
 		left: 0;
 		width: 100%;
 	}
+
+	/* Text avatars need to be forced to 128px, as imageplaceholder() overrides
+	 * the given size with the actual height of the element it was called on, so
+	 * the text avatar may have any hardcoded height. Note that this does not
+	 * apply to regular image avatars, as in that case they are always requested
+	 * with a size of 128px. */
+	.videoContainer .avatar-container .avatar {
+		width: 128px !important;
+		height: 128px !important;
+		line-height: 128px !important;
+		/* imageplaceholder() sets font-size to "height * 0.55" */
+		font-size: 70.4px !important;
+	}
+
 	.videoContainer .avatar-container .avatar {
 		margin-left: auto;
 		margin-right: auto;
diff --git a/js/views/videoview.js b/js/views/videoview.js
index ab545e928..4a9da46ba 100644
--- a/js/views/videoview.js
+++ b/js/views/videoview.js
@@ -66,8 +66,8 @@
 		modelEvents: {
 			'change:connectionState': function(model, connectionState) {
 				this._setConnectionState(connectionState);
-				// "setParticipant" depends on "connectionState"
-				this.setParticipant(this._userId, this._rawParticipantName);
+				// "_setParticipant" depends on "connectionState"
+				this._setParticipant(this._userId, this._rawParticipantName);
 			}
 		},
 
@@ -90,8 +90,8 @@
 
 			// Match current model state.
 			this._setConnectionState(this.model.get('connectionState'));
-			// "setParticipant" depends on "connectionState"
-			this.setParticipant(this._userId, this._rawParticipantName);
+			// "_setParticipant" depends on "connectionState"
+			this._setParticipant(this._userId, this._rawParticipantName);
 
 			this.getUI('hideRemoteVideoButton').tooltip({
 				placement: 'top',
@@ -104,7 +104,19 @@
 			});
 		},
 
-		setParticipant: function(userId, participantName) {
+		getUserId: function() {
+			return this._userId;
+		},
+
+		setUserId: function(userId) {
+			this._setParticipant(userId, this._rawParticipantName);
+		},
+
+		setParticipantName: function(participantName) {
+			this._setParticipant(this._userId, participantName);
+		},
+
+		_setParticipant: function(userId, participantName) {
 			// Needed for guest avatars, as if no name is given the avatar
 			// should show "?" instead of the first letter of the "Guest"
 			// placeholder.
diff --git a/js/webrtc.js b/js/webrtc.js
index e31ee9824..5408e112c 100644
--- a/js/webrtc.js
+++ b/js/webrtc.js
@@ -3,7 +3,6 @@
 
 var webrtc;
 var guestNamesTable = {};
-var spreedMappingTable = {};
 var spreedPeerConnectionTable = [];
 
 (function(OCA, OC) {
@@ -118,7 +117,6 @@ var spreedPeerConnectionTable = [];
 			OCA.SpreedMe.webrtc.removePeers(ownPeer.id);
 			OCA.SpreedMe.speakers.remove(ownPeer.id, true);
 			OCA.SpreedMe.videos.remove(ownPeer.id);
-			delete spreedMappingTable[ownPeer.id];
 			ownPeer.end();
 		}
 
@@ -172,7 +170,7 @@ var spreedPeerConnectionTable = [];
 			// Use null to differentiate between guest (null) and not known yet
 			// (undefined).
 			// TODO(fancycode): Adjust property name of internal PHP backend to be all lowercase.
-			spreedMappingTable[sessionId] = user.userId || user.userid || null;
+			var userId = user.userId || user.userid || null;
 
 			var callParticipantModel = OCA.SpreedMe.callParticipantModels[sessionId];
 			if (!callParticipantModel) {
@@ -184,8 +182,9 @@ var spreedPeerConnectionTable = [];
 
 			var videoView = OCA.SpreedMe.videos.videoViews[sessionId];
 			if (!videoView) {
-				OCA.SpreedMe.videos.add(sessionId);
+				videoView = OCA.SpreedMe.videos.add(sessionId);
 			}
+			videoView.setUserId(userId);
 
 			var createPeer = function() {
 				var peer = webrtc.webrtc.createPeer({
@@ -255,7 +254,6 @@ var spreedPeerConnectionTable = [];
 			OCA.SpreedMe.speakers.remove(sessionId, true);
 			OCA.SpreedMe.videos.remove(sessionId);
 			delete OCA.SpreedMe.callParticipantModels[sessionId];
-			delete spreedMappingTable[sessionId];
 			delete guestNamesTable[sessionId];
 			if (delayedConnectionToPeer[sessionId]) {
 				clearInterval(delayedConnectionToPeer[sessionId]);
@@ -481,8 +479,6 @@ var spreedPeerConnectionTable = [];
 					console.log("User has no stream", id);
 				}
 
-				var userId = spreedMappingTable[id];
-
 				var callParticipantModel = OCA.SpreedMe.callParticipantModels[id];
 
 				var videoView = new OCA.Talk.Views.VideoView({
@@ -501,7 +497,6 @@ var spreedPeerConnectionTable = [];
 					videoView.setVideoAvailable(false);
 				}
 
-				videoView.setParticipant(userId);
 				videoView.setScreenAvailable(!!spreedListofSharedScreens[id]);
 
 				OCA.SpreedMe.videos.videoViews[id] = videoView;
@@ -540,8 +535,6 @@ var spreedPeerConnectionTable = [];
 				spreedPeerConnectionTable[peer.id] = 0;
 
 				peer.pc.addEventListener('iceconnectionstatechange', function () {
-					var userId = spreedMappingTable[peer.id];
-
 					peer.emit('extendedIceConnectionStateChange', peer.pc.iceConnectionState);
 
 					switch (peer.pc.iceConnectionState) {
@@ -556,8 +549,8 @@ var spreedPeerConnectionTable = [];
 							// Ensure that the peer name is shown, as the name
 							// indicator for registered users without microphone
 							// nor camera will not be updated later.
-							if (userId && userId.length) {
-								videoView.setParticipant(userId, peer.nick);
+							if (videoView.getUserId() && videoView.getUserId().length) {
+								videoView.setParticipantName(peer.nick);
 							}
 
 							// Send the current information about the video and microphone state
@@ -1018,7 +1011,6 @@ var spreedPeerConnectionTable = [];
 				OCA.SpreedMe.webrtc.removePeers(ownPeer.id);
 				OCA.SpreedMe.speakers.remove(ownPeer.id, true);
 				OCA.SpreedMe.videos.remove(ownPeer.id);
-				delete spreedMappingTable[ownPeer.id];
 				ownPeer.end();
 				ownPeer = null;
 			}
@@ -1185,11 +1177,10 @@ var spreedPeerConnectionTable = [];
 
 			var videoView = OCA.SpreedMe.videos.videoViews[peer.id];
 			if (videoView) {
-				var userId = spreedMappingTable[peer.id];
 				var guestName = guestNamesTable[peer.id];
 
 				var participantName = peer.nick || guestName;
-				videoView.setParticipant(userId, participantName);
+				videoView.setParticipantName(participantName);
 
 				videoView.setVideoElement(video);
 				videoView.setAudioElement(audio);
@@ -1351,9 +1342,10 @@ var spreedPeerConnectionTable = [];
 			if (videoView) {
 				// Use null to differentiate between guest (null) and not known
 				// yet (undefined).
+				videoView.setUserId(data.userid || null);
 				// Use null to differentiate between empty (null) and not known
 				// yet (undefined).
-				videoView.setParticipant(data.userid || null, data.name || null);
+				videoView.setParticipantName(data.name || null);
 			}
 
 			//Screen