Enable etherpad access in the interface

lib/Vroom/I18N/en.pm

@@ -90,6 +90,7 @@ our %Lexicon = (
   "NAME_WONT_BE_ASKED"                   => "Participant won't have to type their name before they can join the room",
   "CHANGE_COLOR"                         => "Change your color",
   "CLICK_TO_CHAT"                        => "Click to access the chat",
+  "OPEN_ETHERPAD"                        => "Collaborative notetaking",
   "PREVENT_TO_JOIN"                      => "Prevent other participants to join this room",
   "MUTE_MIC"                             => "Turn off your microphone",
   "NO_SOUND_DETECTED"                    => "No sound detected, please check your microphone (input level might be too low)",

lib/Vroom/I18N/fr.pm

@@ -96,6 +96,7 @@ our %Lexicon = (
     "NAME_WONT_BE_ASKED"                        => "La saisie du nom ne sera plus obligatoire pour rejoindre ce salon",
     "CHANGE_COLOR"                              => "Changer de couleur",
     "CLICK_TO_CHAT"                             => "Accéder au tchat",
+    "OPEN_ETHERPAD"                             => "Prise de notes collaborative",
     "PREVENT_TO_JOIN"                           => "Empêcher d'autres participants de rejoindre ce salon",
     "MUTE_MIC"                                  => "Couper le micro",
     "NO_SOUND_DETECTED"                         => "Aucun son n'a été détecté. Vérifiez votre micro (son volume est peut-être trop faible)",

public/css/vroom.css

@@ -160,6 +160,10 @@
   padding-right: 12px;
   padding-left: 12px;
 }
+#etherpadContainer {
+  display: none;
+  height: auto;
+}
 #chatBox {
   max-height:300px;
   resize:none;

public/js/vroom.js

@@ -1931,6 +1931,29 @@ function initVroom(room) {
     $('#helpButton').removeClass('active');
   });
 
+  if (etherpad.enabled){
+    $('#etherpadContainer').pad({
+      host: etherpad.uri,
+      padId: etherpad.group + '$' + room,
+      showControls: true,
+      showLineNumbers: true,
+      height: maxHeight() + 'px',
+      border: 2,
+      userColor: peers.local.color
+    });
+    $('#etherpadButton').change(function(){
+      var action = ($(this).is(':checked')) ? 'show':'hide';
+      if (action == 'show'){
+        $('#etherpadLabel').addClass('btn-danger');
+        $('#etherpadContainer').slideDown('200');
+      }
+      else{
+        $('#etherpadLabel').removeClass('btn-danger');
+        $('#etherpadContainer').slideUp('200');
+      }
+    });
+  }
+
   // Ping the room every minutes
   // Used to detect inactive rooms
   setInterval(function pingRoom(){
@@ -1968,6 +1991,7 @@ function initVroom(room) {
   window.onresize = function (){
     $('#webRTCVideo').css('max-height', maxHeight());
     $('#mainVideo>video').css('max-height', maxHeight());
+    $('#epframetherpadContainer').css('max-height', maxHeight());
   };  
   // Preview heigh is limited to the windows heigh, minus the navbar, minus 25px
   $('#webRTCVideo').css('max-height', maxHeight());

public/vroom.pl

@@ -875,6 +875,7 @@ get '/(*room)' => sub {
     turnPassword  => $data->{token},
     video         => $video,
     etherpad      => ($ec) ? 'true' : 'false',
+    etherpadGroup => $data->{etherpad_group},
     ua            => $self->req->headers->user_agent
   );
 };

templates/default/join.html.ep

@@ -24,6 +24,7 @@
           </div>
         </div>
         <div class="btn-group navbar-form navbar-left">
+          <div class="btn-group">
             <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>
@@ -31,11 +32,16 @@
                 0
               </span>
             </button>
+          </div>
           <% if ($etherpad eq 'true'){ %>
-          <button id="etherpad" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
+          <div class="btn-group" data-toggle="buttons">
+            <label class="btn btn-default help" id="etherpadLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
+              <input type = "checkbox" id="etherpadButton">
                 <span class="glyphicon glyphicon-pencil">
                 </span>
               </button>
+            </label>
+          </div>
           <% } %>
         </div>
         <div class="btn-group navbar-form navbar-left" data-toggle="buttons">
@@ -771,6 +777,9 @@
           </div>
         </div>
         <div id="mainView" class="col-sm-8 hidden-xs">
+          <% if ($etherpad eq 'true'){ %>
+          <div id="etherpadContainer"></div>
+          <% } %>
           <div id="mainVideo">
           </div>
           <div id="aloneMsg" class="aloneEl">
@@ -789,7 +798,11 @@
       var roomName = '<%= $room %>';
       $( document ).ready(function() {
         setTimeout(function(){
-          etherpad = <%= $etherpad %>;
+          etherpad = {
+            enabled: <%= $etherpad %>,
+            uri: "<%= $config->{etherpadUri} %>",
+            group: "<%= $etherpadGroup %>"
+          };
           <% if ($video eq 'false'){ %>
           videoConstraints = false;
           <% } else{ %>