Add a counter of unread message for the text chat

public/js/vroom.js

@@ -702,6 +702,7 @@ function initVroom(room) {
       if ($('#chatDropdown').hasClass('collapsed')){
         $('#chatDropdown').addClass('btn-danger');
         playSound('newmsg.mp3');
+        $('#unreadMsg').text(parseInt($('#unreadMsg').text())+1);
       }
       newChatMessage(peer.id,data.payload);
     }
@@ -1407,8 +1408,10 @@ function initVroom(room) {
   });
 
   // On click, remove the red label on the button
+  // and reset the unread msg counter
   $('#chatDropdown').click(function (){
     $('#chatDropdown').removeClass('btn-danger');
+    $('#unreadMsg').text('0');
   });
   // The input is a textarea, trigger a submit
   // when the user hit enter, unless shift is pressed

templates/default/join.html.ep

@@ -24,9 +24,12 @@
           </div>
         </div>
         <div class="btn-group navbar-form navbar-left">
-          <button id="chatDropdown" class="form-control collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>">
+          <button id="chatDropdown" class="btn btn-default collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>">
             <span class="glyphicon glyphicon-comment">
             </span>
+            <span class="badge" id="unreadMsg">
+              0
+            </span>
           </button>
         </div>
         <div class="btn-group navbar-form navbar-left" data-toggle="buttons">