Add a simple modal dialog when connection is lost

Fix #65

lib/Vroom/I18N/en.pm

@@ -229,6 +229,8 @@ our %Lexicon = (
   "CANT_ACCESS_WEBCAM"                   => "We couldn't access your webcam. Please check it's connected, powered on, and that you've ".
                                             "allowed the browser to access it, then reload this page",
   "CLICK_IF_NO_WEBCAM"                   => "If you don't have a webcam, click the following link, you'll be able to join the room with audio only",
+  "CONNECTION_LOST"                      => "You have been disconnected",
+  "CHECK_INTERNET_ACCESS"                => "Please, check your Internet connection, then refresh this page",
   "HOME"                                 => "Home",
   "HELP"                                 => "Help",
   "ABOUT"                                => "About",

lib/Vroom/I18N/fr.pm

@@ -254,6 +254,8 @@ our %Lexicon = (
                                                    "vous avez autorisé le navigateur à y accéder, puis raffraichissez cette page",
     "CLICK_IF_NO_WEBCAM"                        => "Si vous n'avez pas de webcam, cliquez sur le lien ci-dessous, vous pourrez rejoindre la conférence " .
                                                    "en audio uniquement",
+    "CONNECTION_LOST"                           => "Vous avez été déconnecté",
+    "CHECK_INTERNET_ACCESS"                     => "Vérifiez votre connexion, et raffraîchissez cette page ensuite",
     "HOME"                                      => "Accueil",
     "HELP"                                      => "Aide",
     "ABOUT"                                     => "À propos",

public/js/vroom.js

@@ -1292,6 +1292,11 @@ function initVroom(room) {
     }
   });
 
+  // Detect connection lost
+  webrtc.connection.socket.on('disconnect', function(){
+    $('#disconnected').modal('show');
+  });
+
   // Do not close the dropdown menus (invite/conf) when filling fields
   $('.dropdown-menu').on('click', 'li', function(e){
     e.stopPropagation();

templates/default/join.html.ep

@@ -625,6 +625,25 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" role="dialog" id="disconnected" aria-labelledby="disconnected" aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title"><%=l 'CONNECTION_LOST' %></h4>
+          </div>
+          <div class="modal-body">
+            <center>
+              <img src="<%= $self->get_url('/') %>img/flash.png" alt="<%=l 'CONNECTION_LOST' %>"/>
+              <br>
+              <p>
+                <%=l 'CHECK_INTERNET_ACCESS' %>
+              </p>
+            </center>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="modal fade" role="dialog" id="persistentModal" aria-labelledby="persistentModal" aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">