Add a timer in the navbar

public/css/vroom.css

@@ -173,6 +173,9 @@
 #chromeExtMessage {
   text-align: center;
 }
+#timeCounter {
+  display: none;
+}
 #navBarLogo {
   padding-top: 2px;
   float: left;

public/js/jquery.tinytimer.min.js

@@ -0,0 +1 @@
+/*! tinytimer 0.1.4 */ (function(t){t.tinyTimer=function(e){var n,a=this,i=(a.options=e).element,o=new Date(e.from||e.to).getTime(),r=!!e.from||-1,u=Math,s=function(){};a.interval=setInterval(n=function(){if(!a.paused){var n=u.max(u.round((Date.now()-o)*r/1e3),0),l={S:n,s:n%60,M:u.floor(n/=60),H:u.floor(n/=60),D:u.floor(n/=24)};l.m=l.M%60,l.h=l.H%24,l.d=l.D,l.text=(e.format||"%-H{:}%0m:%0s").replace(/%(-?)(0?)([dhms])(\s*)(?:\{(.+?)\})?/gi,e.replacer||function(t,e,n,a,i,o){var r=l[a];return(o=(o||"").split("|"))[2]=o[2]||(o[1]=o[1]||o[0]),!r&&e?"":(r>9?"":n)+r+i+o[+(1!=r)+(1!=r&&(2>r%10||r%10>4)||r>10&&20>r)]}),i?t(i).html(l.text):i=a,(e.onTick||s).call(i,a.val=l),0>r&&!n&&(clearInterval(a.interval),(e.onEnd||s).call(i,l))}},1e3),n(),a.pause=a.stop=function(){a.paused=Date.now()},a.resume=function(){o-=(a.paused-Date.now())*r,a.paused=0},a.start=function(){a.paused=0}},t.fn.tinyTimer=function(e){return this.each(function(){t(this).data("tinyTimer",new t.tinyTimer(t.extend(e,{element:t(this)})))})}})(jQuery);

public/js/vroom.js

@@ -1026,6 +1026,7 @@ function initVroom(room) {
     });
     checkMoh();
     $('#videoLocalContainer').show(200);
+    $('#timeCounter').tinyTimer({ from: new Date }).show(200);
   });
 
   // Handle new video stream added: someone joined the room

public/vroom.pl

@@ -36,6 +36,9 @@ our $components = {
   "jquery-browser-plugin" => {
     url => 'https://github.com/gabceb/jquery-browser-plugin'
   },
+  "jquery-tinytimer" => {
+    url => 'https://github.com/odyniec/jQuery-tinyTimer'
+  },
   "sprintf.js" => {
     url => 'http://hexmen.com/blog/2007/03/printf-sprintf/'
   },

templates/default/join.html.ep

@@ -177,13 +177,18 @@
             </li>
           </ul>
         </div>
-        <div class="btn-group navbar-form navbar-right" data-toggle="buttons" >
+        <div class="navbar-form navbar-right" data-toggle="buttons" >
+          <div class="btn-group">
+            <div id="timeCounter" class="btn btn-default disabled"></div>
+          </div>
+          <div class="btn-group">
             <button class="btn btn-default help" id="logoutButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'LOGOUT' %>">
               <span class="glyphicon glyphicon-log-out">
               </span>
             </button>
           </div>
         </div>
+      </div>
     </nav>
     <div class="modal fade" role="dialog" id="setDisplayName" aria-labelledby="setDisplayName" aria-hidden="true" data-keyboard="false" data-backdrop="static">
       <div class="modal-dialog">

templates/default/js_room.html.ep

@@ -1,5 +1,5 @@
     <%
-      foreach my $js (qw(simplewebrtc.bundle.js jquery.browser.min.js sprintf.js FileSaver.js)){
+      foreach my $js (qw(simplewebrtc.bundle.js jquery.browser.min.js sprintf.js FileSaver.js jquery.tinytimer.min.js)){
     %>
     <script type="text/javascript" src="<%= $self->get_url('/') %><%= $self->get_mtime("js/$js") %>/js/<%= $js %>"></script>
     <% } %>