Show a browser notification when a user is waiting to join a room

The owner of a room receives a browser notification if he has the page open
and another person tries to join his room.

app/assets/javascripts/channels/meeting_updates.js

@@ -21,7 +21,7 @@
       $(".center-panel-wrapper").html(html);
       displayRoomURL();
     });
-  }
+  };
 
   var initRooms = function() {
     App.messages = App.cable.subscriptions.create({
@@ -43,6 +43,13 @@
         } else if (data.action === 'meeting_ended') {
           sessionStatusRefresh($('.meeting-url').val());
           showAlert(I18n.meeting_ended, 4000);
+        } else if (data.action === 'user_waiting') {
+          // show a browser notification only to the owner
+          if (GreenLight.user.roomOwner) {
+            showNotification(I18n.user_waiting_title, {
+              body: I18n.user_waiting_body.replace(/%{user}/, data.user)
+            });
+          }
         }
       }
     });

app/assets/javascripts/shared.js.erb

@@ -32,7 +32,7 @@ var loopJoin = function() {
   jqxhr.fail(function(xhr, status, error) {
     console.info("meeting join failed");
   });
-}
+};
 
 var alertTimeout = null;
 var showAlert = function(html, timeout_delay) {
@@ -54,3 +54,19 @@ var showAlert = function(html, timeout_delay) {
 var displayRoomURL = function() {
   $('.meeting-url').val(Meeting.getInstance().getURL());
 };
+
+var showNotification = function(title, options) {
+  if (Notification.permission === "granted") {
+    var icon = '<%= asset_path("bbb-logo.png") %>';
+    options = $.extend(options, {
+      icon: icon
+    });
+    var notification = new Notification(title, options);
+    notification.onclick = function() {
+      window.focus();
+    };
+  }
+};
+
+// TODO: only need permissions if the user is signed in
+Notification.requestPermission();