Make clicking on a contact the same as clicking on their video.

contact_list.js

@@ -38,6 +38,18 @@ var ContactList = (function (my) {
 
         var newContact = document.createElement('li');
         newContact.id = resourceJid;
+        newContact.className = "clickable";
+        newContact.onclick = function(event) {
+            if(event.currentTarget.className === "clickable") {
+                var jid = event.currentTarget.id;
+                var videoContainer = $("#participant_" + jid);
+                if (videoContainer.length > 0) {
+                    videoContainer.click();
+                } else if (jid == Strophe.getResourceFromJid(connection.emuc.myroomjid)) {
+                    $("#localVideoContainer").click();
+                }
+            }
+        };
 
         newContact.appendChild(createAvatar());
         newContact.appendChild(createDisplayNameParagraph("Participant"));
@@ -194,5 +206,14 @@ var ContactList = (function (my) {
             contactName.html(displayName);
     });
 
+    my.setClickable = function(resourceJid, isClickable) {
+        var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
+        if(isClickable) {
+            contact.addClass('clickable');
+        } else {
+            contact.removeClass('clickable');
+        }
+    };
+
     return my;
 }(ContactList || {}));

css/contact_list.css

@@ -1,5 +1,6 @@
 #contactlist {
     background-color: black;
+    cursor: default;
 }
 
 #contactlist>ul {
@@ -12,7 +13,8 @@
     text-align: left;
     color: #FFF;
     font-size: 10pt;
-    padding: 8px 10px;
+    padding: 7px 10px;
+    margin: 2px;
 }
 
 #contactlist>ul>li>p {
@@ -32,4 +34,8 @@
     margin-right: 10px;
     vertical-align: middle;
     font-size: 22pt;
+}
+
+#contactlist .clickable {
+    cursor: pointer;
 }

css/main.css

@@ -1,3 +1,8 @@
+* {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
 html, body{
     margin:0px;
     height:100%;
@@ -30,6 +35,10 @@ html, body{
     border-left:1px solid #424242;
 }
 
+#chatspace * {
+    -webkit-user-select: text;
+    user-select: text;
+}
 #chatconversation {
     visibility: hidden;
     position: relative;

index.html

@@ -37,7 +37,7 @@
     <script src="app.js?v=13"></script><!-- application logic -->
     <script src="commands.js?v=1"></script><!-- application logic -->
     <script src="chat.js?v=11"></script><!-- chat logic -->
-    <script src="contact_list.js?v=3"></script><!-- contact list logic -->
+    <script src="contact_list.js?v=4"></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=11"></script><!-- video ui -->
+    <script src="videolayout.js?v=12"></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 -->
@@ -60,13 +60,13 @@
     <script src="message_handler.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">
     <link rel="stylesheet" href="css/popup_menu.css?v=4">
     <link rel="stylesheet" href="css/popover.css?v=2">
-    <link rel="stylesheet" href="css/contact_list.css?v=2">
+    <link rel="stylesheet" href="css/contact_list.css?v=3">
     <link rel="stylesheet" href="css/welcome_page.css?v=2">
     <!--
         Link used for inline installation of chrome desktop streaming extension,

videolayout.js

@@ -507,6 +507,8 @@ var VideoLayout = (function (my) {
 
         VideoLayout.resizeThumbnails();
 
+        ContactList.setClickable(resourceJid, isShow);
+
     };
 
     /**