Add MoH when you are alone in the room

You can pause/resume music
Stops when someone joins, and resume when the last peer leaves
Also prints a message
Fix #42

lib/Vroom/I18N/en.pm

@@ -140,6 +140,8 @@ our %Lexicon = (
   "SCREEN_SHARING_CANCELLED"             => "Screen sharing has been cancelled",
   "EXTENSION_REQUIRED"                   => "An extension is required",
   "VROOM_CHROME_EXTENSION"               => "To enable screen sharing, you need to install an extension. Click on the following link and refresh this page",
+  "PAUSE_MOH"                            => "Pause music",
+  "ALONE_IN_ROOM"                        => "Please wait a moment while nobody is here yet",
   "EVERYONE_CAN_SEE_YOUR_SCREEN"         => "All other participants can see your screen now",
   "SCREEN_UNSHARED"                      => "You do no longer share your screen",
   "ERROR_MAIL_INVALID"                   => "Please enter a valid email address",
@@ -243,6 +245,8 @@ our %Lexicon = (
                                             "</ol>",
   "THANKS"                               => "Thanks",
   "ABOUT_THANKS"                         => "VROOM uses the following components, so, thanks to their respective authors :-)",
+  "ABOUT_MUSICS"                         => "Also thanks to the authors of songs used",
+  "FROM_AUTHOR"                          => "from"
 
 
 ); 

lib/Vroom/I18N/fr.pm

@@ -150,6 +150,8 @@ our %Lexicon = (
     "EXTENSION_REQUIRED"                        => "Une extension est nécessaire",
     "VROOM_CHROME_EXTENSION"                    => "Pour activer le partage d'écran, vous devez installer une extension, cliquez sur le " .
                                                    "lien ci-dessous, puis raffraîchissez cette page",
+    "PAUSE_MOH"                                 => "Mettre la musique en pause",
+    "ALONE_IN_ROOM"                             => "Patientez quelques instants le temps que d'autres personnes vous rejoignent",
     "EVERYONE_CAN_SEE_YOUR_SCREEN"              => "Tous les autres participants peuvent voir votre écran",
     "SCREEN_UNSHARED"                           => "Vous ne partagez plus votre écran",
     "ERROR_MAIL_INVALID"                        => "Veuillez saisir une adresse email valide",
@@ -278,6 +280,8 @@ our %Lexicon = (
                                                    "</ol>",
     "THANKS"                                    => "Remerciements",
     "ABOUT_THANKS"                              => "VROOM utilise les composants suivants, merci donc aux auteurs respectifs :-)",
+    "ABOUT_MUSICS"                              => "Merci également aux auteurs des morceaux de musique utilisés",
+    "FROM_AUTHOR"                               => "de"
 
 );
 

public/css/vroom.css

@@ -109,6 +109,9 @@
   top: 0px;  
   display: none;
 }
+.aloneEl {
+  display: none;
+}
 #unreadMsg {
   display: none;
 }

public/js/vroom.js

@@ -225,7 +225,8 @@ function initVroom(room) {
   var mainVid = false,
       chatHistory = {},
       chatIndex = 0,
-      maxVol = -100;
+      maxVol = -100,
+      moh = false;
 
   $('#name_local').css('background-color', peers.local.color);
 
@@ -412,6 +413,10 @@ function initVroom(room) {
         // Get the role of this peer
         getPeerRole(peer.id);
       }, 3500);
+      // Stop moh
+      $('#mohPlayer')[0].pause();
+      $('.aloneEl').hide(200);
+      moh = false;
     }
     $(div).attr('id', 'peer_' + id);
     // Disable context menu on the video
@@ -891,6 +896,14 @@ function initVroom(room) {
         }
       }
     });
+    // We will check if moh is needed
+    setInterval(function(){
+      if (!moh && Object.keys(peers).length < 2){
+        $('#mohPlayer')[0].play();
+        moh = true;
+        $('.aloneEl').show(200);
+      }
+    }, 2000);
   });
 
   // Handle new video stream added: someone joined the room
@@ -1378,6 +1391,18 @@ function initVroom(room) {
     downloadContent('VROOM Tchat (' + room + ').html', $('#chatHistory').html());
   });
 
+  // Suspend MoH
+  $('#pauseMohButton').change(function(){
+    if ($(this).is(":checked")){
+      $('#mohPlayer')[0].pause();
+      $('#pauseMohLabel').addClass('btn-danger');
+    }
+    else{
+      $('#mohPlayer')[0].play();
+      $('#pauseMohLabel').removeClass('btn-danger');
+    }
+  });
+
   // Handle hangup/close window
   $('#logoutButton').click(function() {
     hangupCall;

public/vroom.pl

@@ -16,6 +16,7 @@ use MIME::Base64;
 use Email::Sender::Transport::Sendmail;
 use Encode;
 use File::stat;
+use File::Basename;
 
 # List The different components we rely on.
 # Used to generate thanks on the about template
@@ -61,6 +62,40 @@ our $components = {
   }
 };
 
+# MOH authors for credits
+our $musics = {
+  "Papel Secante" => {
+    author      => "Angel Gaitan",
+    author_url  => "http://angelgaitan.bandcamp.com/",
+    licence     => "Creative Commons BY-SA",
+    licence_url => "http://creativecommons.org/licenses/by-sa/3.0"
+  },
+  "Overjazz" => {
+    author      => "Funkyproject",
+    author_url  => "http://www.funkyproject.fr",
+    licence     => "Creative Commons BY-SA",
+    licence_url => "http://creativecommons.org/licenses/by-sa/3.0"
+  },
+  "Polar Express" => {
+    author      => "Koteen",
+    author_url  => "http://?.?",
+    licence     => "Creative Commons BY-SA",
+    licence_url => "http://creativecommons.org/licenses/by-sa/3.0"
+  },
+  "Funky Goose" => {
+    author      => "Pepe Frias",
+    author_url  => "http://www.pepefrias.tk/",
+    licence     => "Creative Commons BY-SA",
+    licence_url => "http://creativecommons.org/licenses/by-sa/3.0"
+  },
+  "I got my own" => {
+    author      => "Reole",
+    author_url  => "http://www.reolemusic.com/",
+    licence     => "Creative Commons BY-SA",
+    licence_url => "http://creativecommons.org/licenses/by-sa/3.0"
+  }
+};
+
 app->log->level('info');
 # Read conf file, and set default values
 our $config = plugin Config => {
@@ -399,13 +434,22 @@ helper ask_for_name => sub {
   return 1;
 };
 
+# Randomly choose a music on hold
+helper choose_moh => sub {
+  my $self = shift;
+  my @files = (<snd/moh/*.*>);
+  return basename($files[rand @files]);
+};
+
 # Route / to the index page
 any '/' => 'index';
 
 # Route for the about page
 get '/about' => sub {
   my $self = shift;
-  $self->stash( components => $components );
+  $self->stash( components => $components,
+                musics     => $musics
+  );
 } => 'about';
 
 # Route for the help page
@@ -614,7 +658,7 @@ get '/(*room)' => sub {
   }
   # Now display the room page
   $self->render('join',
-    format => 'html',
+    moh => $self->choose_moh(),
     turnPassword => $data->{token}
   );
 };

templates/default/about.html.ep

@@ -55,6 +55,15 @@
           <% } %>
         </ul>
       </p>
+      <p>
+        <%=l 'ABOUT_MUSICS' %>
+        <ul>
+          <% foreach my $music (sort keys %{$musics}) { %>
+            <li>
+              <%= $music %> <%=l 'FROM_AUTHOR' %> <a href="<%= $musics->{$music}->{author_url} %>"><%= $musics->{$music}->{author} %></a> (<a href="<%= $musics->{$music}->{licence_url} %>"><%= $musics->{$music}->{licence} %></a>)
+            </li>
+          <% } %>
+      </p>
     </div>
   </div>
 </div>

templates/default/join.html.ep

@@ -203,6 +203,13 @@
             </li>
           </ul>
         </div>
+        <div class="btn-group navbar-form navbar-left" data-toggle="buttons">
+          <label class="btn btn-default help aloneEl" id="pauseMohLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PAUSE_MOH' %>">
+            <input type="checkbox" id="pauseMohButton">
+            <span class="glyphicon glyphicon-music">
+            </span>
+          </label>
+        </div>
         <div class="btn-group navbar-form navbar-right" data-toggle="buttons" >
           <button class="btn btn-default help" id="logoutButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'LOGOUT' %>">
             <span class="glyphicon glyphicon-log-out">
@@ -324,6 +331,7 @@
           </div>
         </form>
       </div>
+      <audio id="mohPlayer" src="/snd/moh/<%= $moh %>" loop></audio>
       <div id="view" class="view row-fluid">
         <div id="webRTCVideo" class="col-xs-12 col-sm-4">
           <div class="col-xs-6 col-sm-12 col-lg-6 previewContainer">
@@ -335,7 +343,16 @@
             </div>
           </div>
         </div>
-        <div id="mainVideo" class="col-sm-8 hidden-xs">
+        <div id="mainView" class="col-sm-8 hidden-xs">
+          <div id="mainVideo">
+          </div>
+          <div id="aloneMsg" class="aloneEl">
+            <center>
+              <h2>
+                <%=l 'ALONE_IN_ROOM' %>
+              </h2>
+            </center>
+          </div>
         </div>
       </div>
     </div>