Separates display name and presence status. Triggers separate event for presence status.

app.js

         VideoLayout.ensurePeerContainerExists(jid);
         VideoLayout.setDisplayName(
                 'participant_' + Strophe.getResourceFromJid(jid),
-                info.displayName, info.status);
+                info.displayName);
     }
 
     if (focus !== null && info.displayName !== null) {
     }
 });
 
+$(document).bind('presence.status.muc', function (event, jid, info, pres) {
+
+    VideoLayout.setPresenceStatus(
+        'participant_' + Strophe.getResourceFromJid(jid), info.status);
+
+});
+
 $(document).bind('passwordrequired.muc', function (event, jid) {
     console.log('on password required', jid);
 

muc.js

         // Always trigger presence to update bindings
         console.log('presence change from', from);
         $(document).trigger('presence.muc', [from, member, pres]);
+
+        // Trigger status message update
+        if (member.status) {
+            $(document).trigger('presence.status.muc', [from, member, pres]);
+        }
+
         return true;
     },
     onPresenceUnavailable: function (pres) {

videolayout.js

     /**
      * Shows the display name for the given video.
      */
-    my.setDisplayName = function(videoSpanId, displayName, statusMsg) {
+    my.setDisplayName = function(videoSpanId, displayName) {
         var nameSpan = $('#' + videoSpanId + '>span.displayname');
         var defaultLocalDisplayName = "Me";
         var defaultRemoteDisplayName = "Speaker";
 
-        var statusSpan = $('#' + videoSpanId + '>span.status');
-        if (!statusSpan.length)
-        {
-            //Add status span
-            statusSpan = document.createElement('span');
-            statusSpan.className = 'status';
-            statusSpan.id = videoSpanId + '_status';
-            $('#' + videoSpanId)[0].appendChild(statusSpan);
-
-            statusSpan = $('#' + videoSpanId + '>span.status');
-        }
-
-        // Display status
-        if (statusMsg && statusMsg.length)
-        {
-            $('#' + videoSpanId + '_status').text(statusMsg);
-            statusSpan.get(0).setAttribute("style", "display:inline-block;");
-        }
-        else
-        {
-            // Hide
-            statusSpan.get(0).setAttribute("style", "display:none;");
-        }
-
         // If we already have a display name for this video.
         if (nameSpan.length > 0) {
             var nameSpanElement = nameSpan.get(0);
         }
     };
 
+    /**
+     * Shows the presence status message for the given video.
+     */
+    my.setPresenceStatus = function (videoSpanId, statusMsg) {
+
+        if (!$('#' + videoSpanId).length) {
+            // No container
+            return;
+        }
+
+        var nameSpan = $('#' + videoSpanId + '>span.displayname');
+
+        var statusSpan = $('#' + videoSpanId + '>span.status');
+        if (!statusSpan.length) {
+            //Add status span
+            statusSpan = document.createElement('span');
+            statusSpan.className = 'status';
+            statusSpan.id = videoSpanId + '_status';
+            $('#' + videoSpanId)[0].appendChild(statusSpan);
+
+            statusSpan = $('#' + videoSpanId + '>span.status');
+        }
+
+        // Display status
+        if (statusMsg && statusMsg.length) {
+            $('#' + videoSpanId + '_status').text(statusMsg);
+            statusSpan.get(0).setAttribute("style", "display:inline-block;");
+        }
+        else {
+            // Hide
+            statusSpan.get(0).setAttribute("style", "display:none;");
+        }
+    };
+
     /**
      * Shows a visual indicator for the focus of the conference.
      * Currently if we're not the owner of the conference we obtain the focus