wait for moderator with action cable

app/assets/javascripts/application.js

@@ -14,4 +14,5 @@
 //= require jquery-ui
 //= require bootstrap-sprockets
 //= require turbolinks
+//= require_self
 //= require_tree .

app/assets/javascripts/channels/moderator_joins.js

@@ -0,0 +1,27 @@
+(function() {
+
+  var initRooms = function() {
+    App.messages = App.cable.subscriptions.create({
+      channel: 'ModeratorJoinsChannel',
+      username: window.location.pathname.split('/').pop()
+    },
+    {
+      received: function(data) {
+        if (!Meeting.getInstance().getModJoined()) {
+          Meeting.getInstance().setModJoined(true);
+          if (Meeting.getInstance().getWaitingForMod()) {
+            loopJoin();
+          }
+        }
+      }
+    });
+  };
+
+  $(document).on("turbolinks:load", function() {
+    if ($("body[data-controller=landing]").get(0)) {
+      if ($("body[data-action=rooms]").get(0)) {
+        initRooms();
+      }
+    }
+  });
+}).call(this);

app/assets/javascripts/landing.js

@@ -1,21 +1,35 @@
 (function() {
+  var waitForModerator = function(url) {
+    $.get(url + "/wait", function(html) {
+      $(".center-panel-wrapper").html(html);
+    });
+    if (!Meeting.getInstance().getWaitingForMod()) {
+      Meeting.getInstance().setWaitingForMod(true);
+      if (Meeting.getInstance().getModJoined()) {
+        loopJoin();
+      }
+    }
+  };
+
   var init = function() {
 
     $('.meeting-join').click (function (event) {
       var url = $('.meeting-url').val();
       var name = $('.meeting-user-name').val();
-      $.ajax({
-        url : url + "/join?name=" + name,
-        dataType : "json",
-        type : 'GET',
-        success : function(data) {
+      Meeting.getInstance().setURL(url);
+      Meeting.getInstance().setName(name);
+      var jqxhr = Meeting.getInstance().getjoinMeetingURL();
+
+      jqxhr.done(function(data) {
+        if (data.messageKey === 'wait_for_moderator') {
+          waitForModerator(url);
+        } else {
           $(location).attr("href", data.response.join_url);
-        },
-        error : function(xhr, status, error) {
-        },
-        complete : function(xhr, status) {
         }
       });
+      jqxhr.fail(function(xhr, status, error) {
+        console.info("meeting join failed");
+      });
     });
 
     $('.meeting-url-copy').click (function (e) {

app/assets/javascripts/shared.js

@@ -0,0 +1,55 @@
+var meetingInstance = null;
+class Meeting {
+  constructor(url, name) {
+    this.url = url;
+    this.name = name;
+  }
+
+  static getInstance() {
+    if (meetingInstance) {
+      return meetingInstance;
+    }
+    var url = $('.meeting-url').val();
+    var name = $('.meeting-user-name').val();
+    meetingInstance = new Meeting(url, name);
+    return meetingInstance;
+  }
+
+  getjoinMeetingURL() {
+    return $.get(this.url + "/join?name=" + this.name, function() {
+    });
+  };
+
+  setURL(url) {
+    this.url = url;
+  }
+  setName(name) {
+    this.name = name;
+  }
+  setModJoined(modJoined) {
+    this.modJoined = modJoined;
+  }
+  getModJoined() {
+    return this.modJoined;
+  }
+  setWaitingForMod(wMod) {
+    this.waitingForMod = wMod;
+  }
+  getWaitingForMod() {
+    return this.waitingForMod;
+  }
+}
+
+var loopJoin = function() {
+  var jqxhr = Meeting.getInstance().getjoinMeetingURL();
+  jqxhr.done(function(data) {
+    if (data.messageKey === 'wait_for_moderator') {
+      setTimeout(loopJoin, 5000);
+    } else {
+      $(location).attr("href", data.response.join_url);
+    }
+  });
+  jqxhr.fail(function(xhr, status, error) {
+    console.info("meeting join failed");
+  });
+}