Adds user ids and avatars in the contact list.

app.js

@@ -104,6 +104,8 @@ function connect(jid, password) {
         connection.emuc.addDisplayNameToPresence(nickname);
     }
 
+    connection.emuc.addUserIdToPresence(UserId.getUID());
+
     if (connection.disco) {
         // for chrome, add multistream cap
     }
@@ -685,7 +687,7 @@ $(document).bind('joined.muc', function (event, jid, info) {
     VideoLayout.showFocusIndicator();
 
     // Add myself to the contact list.
-    ContactList.addContact(jid);
+    ContactList.addContact(jid, UserId.getUID());
 
     // Once we've joined the muc show the toolbar
     ToolbarToggler.showToolbar();
@@ -701,7 +703,8 @@ $(document).bind('entered.muc', function (event, jid, info, pres) {
     console.log('is focus? ' + (focus ? 'true' : 'false'));
 
     // Add Peer's container
-    VideoLayout.ensurePeerContainerExists(jid);
+    var userId = $(pres).find(">userID").text();
+    VideoLayout.ensurePeerContainerExists(jid, userId);
 
     if (focus !== null) {
         // FIXME: this should prepare the video
@@ -1566,3 +1569,8 @@ function hangup() {
     );
 
 }
+
+$(document).on('videomuted.muc', function(event, who, value) {
+    var videoTag = $("#participant_" + Strophe.getResourceFromJid(who)).find('>video');
+    videoTag.css("display", value === "false" ? 'inline-block' : 'none');
+});

contact_list.js

@@ -17,13 +17,13 @@ var ContactList = (function (my) {
      *
      * @param peerJid the peerJid corresponding to the contact
      */
-    my.ensureAddContact = function(peerJid) {
+    my.ensureAddContact = function(peerJid, userId) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
         var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
 
         if (!contact || contact.length <= 0)
-            ContactList.addContact(peerJid);
+            ContactList.addContact(peerJid, userId);
     };
 
     /**
@@ -31,7 +31,7 @@ var ContactList = (function (my) {
      *
      * @param peerJid the jid of the contact to add
      */
-    my.addContact = function(peerJid) {
+    my.addContact = function(peerJid, userId) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
         var contactlist = $('#contactlist>ul');
@@ -39,7 +39,7 @@ var ContactList = (function (my) {
         var newContact = document.createElement('li');
         newContact.id = resourceJid;
 
-        newContact.appendChild(createAvatar());
+        newContact.appendChild(createAvatar(userId));
         newContact.appendChild(createDisplayNameParagraph("Participant"));
 
         var clElement = contactlist.get(0);
@@ -196,12 +196,13 @@ var ContactList = (function (my) {
      * 
      * @return the newly created avatar element
      */
-    function createAvatar() {
-        var avatar = document.createElement('i');
+    function createAvatar(userId) {
+        var avatar = document.createElement('img');
         avatar.className = "icon-avatar avatar";
+        avatar.src = "https://www.gravatar.com/avatar/" + userId + "?d=retro&size=30";
 
         return avatar;
-    };
+    }
 
     /**
      * Creates the display name paragraph.

css/videolayout_default.css

@@ -34,7 +34,9 @@
 
 #remoteVideos .videocontainer {
     display: inline-block;
-    background-image:url(../images/avatar1.png);
+    background-color: black;
+    background-repeat: no-repeat;
+    background-position: 45;
     background-size: contain;
     border-radius:8px;
     border: 2px solid #212425;
@@ -113,10 +115,6 @@
     height: 100%;
 }
 
-.dominantspeaker {
-    background: #000 !important;
-}
-
 #etherpad,
 #presentation {
     text-align: center;

index.html

@@ -30,14 +30,14 @@
     <script src="config.js?v=5"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
     <script src="interface_config.js?v=2"></script>
     <script src="brand.js?v=1"></script>
-    <script src="muc.js?v=14"></script><!-- simple MUC library -->
+    <script src="muc.js?v=15"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
     <script src="desktopsharing.js?v=3"></script><!-- desktop sharing -->
     <script src="data_channels.js?v=3"></script><!-- data channels -->
     <script src="app.js?v=13"></script><!-- application logic -->
     <script src="commands.js?v=1"></script><!-- application logic -->
     <script src="chat.js?v=10"></script><!-- chat logic -->
-    <script src="contact_list.js?v=2"></script><!-- contact list logic -->
+    <script src="contact_list.js?v=3"></script><!-- contact list logic -->
     <script src="util.js?v=6"></script><!-- utility functions -->
     <script src="etherpad.js?v=9"></script><!-- etherpad plugin -->
     <script src="prezi.js?v=6"></script><!-- prezi plugin -->
@@ -47,7 +47,7 @@
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_sts.js?v=1"></script><!-- RTP stats processing -->
     <script src="local_sts.js?v=1"></script><!-- Local stats processing -->
-    <script src="videolayout.js?v=10"></script><!-- video ui -->
+    <script src="videolayout.js?v=11"></script><!-- video ui -->
     <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
     <script src="toolbar_toggler.js?v=2"></script>
     <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
@@ -58,9 +58,10 @@
     <script src="keyboard_shortcut.js?v=2"></script>
     <script src="tracking.js?v=1"></script><!-- tracking -->
     <script src="message_handler.js?v=1"></script>
+    <script src="user_id.js?v=1"></script>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css?v=4"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=25"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=26"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=12" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">

muc.js

@@ -301,6 +301,10 @@ Strophe.addConnectionPlugin('emuc', {
             pres.c('bridgeIsDown').up();
         }
 
+        if(this.presMap['userId']) {
+            pres.c('userId').t(this.presMap['userId']).up();
+        }
+
         if (this.presMap['displayName']) {
             // XEP-0172
             pres.c('nick', {xmlns: 'http://jabber.org/protocol/nick'})
@@ -409,5 +413,8 @@ Strophe.addConnectionPlugin('emuc', {
     },
     addBridgeIsDownToPresence: function() {
         this.presMap['bridgeIsDown'] = true;
+    },
+    addUserIdToPresence: function(userId) {
+        this.presMap['userId'] = userId;
     }
 });

user_id.js

@@ -0,0 +1,37 @@
+var UserId = (function(my) {
+    var userId;
+
+    function supportsLocalStorage() {
+        try {
+            return 'localStorage' in window && window.localStorage !== null;
+        } catch (e) {
+            console.log("localstorage is not supported");
+            return false;
+        }
+    }
+
+    function generateUniqueId() {
+        function _p8() {
+            var p = (Math.random().toString(16)+"000000000").substr(2,8);
+            return p.substr(0,4) + p.substr(4,4);
+        }
+        return _p8() + _p8() + _p8() + _p8();
+    }
+
+    if(supportsLocalStorage()) {
+        if(!window.localStorage.meetJitsiId) {
+            window.localStorage.meetJitsiId = generateUniqueId();
+            console.log("generated id", window.localStorage.meetJitsiId);
+        }
+        userId = window.localStorage.meetJitsiId;
+    } else {
+        console.log("local storage is not supported");
+        userId = generateUniqueId();
+    }
+
+    my.getUID = function() {
+        return userId;
+    };
+
+    return my;
+})(UserId || {});

videolayout.js

@@ -301,8 +301,8 @@ var VideoLayout = (function (my) {
      * @return Returns <tt>true</tt> if the peer container exists,
      * <tt>false</tt> - otherwise
      */
-    my.ensurePeerContainerExists = function(peerJid) {
-        ContactList.ensureAddContact(peerJid);
+    my.ensurePeerContainerExists = function(peerJid, userId) {
+        ContactList.ensureAddContact(peerJid, userId);
 
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
@@ -311,14 +311,17 @@ var VideoLayout = (function (my) {
         if ($('#' + videoSpanId).length > 0) {
             // If there's been a focus change, make sure we add focus related
             // interface!!
-            if (focus && $('#remote_popupmenu_' + resourceJid).length <= 0)
-                addRemoteVideoMenu( peerJid,
-                                    document.getElementById(videoSpanId));
+            if (focus && $('#remote_popupmenu_' + resourceJid).length <= 0) {
+                addRemoteVideoMenu(peerJid,
+                    document.getElementById(videoSpanId));
+            }
         }
         else {
-            var container
-                = VideoLayout.addRemoteVideoContainer(peerJid, videoSpanId);
-
+            var container =
+                VideoLayout.addRemoteVideoContainer(peerJid, videoSpanId, userId);
+            $(container).css('background-image',
+                    "url('https://www.gravatar.com/avatar/" + userId +
+                        "?d=retro&size=100')");
             // Set default display name.
             setDisplayName(videoSpanId);