If the room is full, don't allow anyone in. Fixes #166

jeffkaufman · Jan 8, 2021 · f40d495 · f40d495
1 parent 3f92a5e
commit f40d495
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/html/demo.js b/html/demo.js
@@ -3,6 +3,7 @@
 import * as bb from './app.js';
 
 const APP_TUTORIAL = "tutorial";
+const APP_ROOM_FULL = "roomfull";
 const APP_CHOOSE_CAMERA = "choose_camera";
 const APP_INITIALIZING = "initializing";
 const APP_STOPPED = "stopped";
@@ -97,6 +98,11 @@ function updateCurrentUsers() {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       const x_audio_metadata = JSON.parse(this.getResponseHeader(
         "X-Audio-Metadata"));
+
+      if (x_audio_metadata.n_connected_users >= x_audio_metadata.max_users) {
+        switch_app_state(APP_ROOM_FULL);
+      }
+
       let roomText = "The room is currently empty.";
       if (x_audio_metadata.n_connected_users) {
         if (x_audio_metadata.n_connected_users == 1) {
@@ -455,6 +461,8 @@ function set_controls() {
 
   setVisibleIn(startButton, allStatesExcept([APP_TUTORIAL, APP_CHOOSE_CAMERA]));
 
+  setVisibleIn(window.roomfull, [APP_ROOM_FULL]);
+
   setVisibleIn(window.tutorial, [APP_TUTORIAL]);
   setVisibleIn(window.chooseCamera, [APP_CHOOSE_CAMERA]);
 
@@ -558,7 +566,8 @@ function resetInactivityTimer() {
   }
 }
 setInterval(() => {
-  if (app_state != APP_TUTORIAL && app_state != APP_CHOOSE_CAMERA) {
+  if (app_state != APP_TUTORIAL && app_state != APP_CHOOSE_CAMERA &&
+      app_state != APP_ROOM_FULL) {
     // App is at least partially running.
     const inactive_time_s = (Date.now() - last_active_ts) / 1000;
     if (inactive_time_s > INACTIVITY_TIMEOUT_S) {

diff --git a/html/index.html b/html/index.html
@@ -414,6 +414,9 @@
   display: none;
   color: red;
 }
+#roomfull, #tutorial {
+  display: none;
+}
 </style>
 
 <link rel="icon"
@@ -645,6 +648,10 @@ <h3>Settings that affect everyone</h3>
 
 <div id=middle class=middlePane>
 
+<div id="roomfull">
+  We're sorry, the room is currently full.  Please try again later!
+</div>
+
 <div id=tutorial>
   <div id=tutorial_questions>
     Welcome!  This is a program for singing with people over the
@@ -707,7 +714,7 @@ <h3>Settings that affect everyone</h3>
     <p>
     <button class=dismiss_tutorial>Get Started</button>
   </div>
-  </div>
+</div>
 
 <div id=chooseCamera>
 Last step!  We just need to sort out cameras.
@@ -937,12 +944,12 @@ <h2>Then refresh the page and try again.</h2>
     window.noAudioWorklet.style.display = "none";
     window.middle.style.display = "block";
 
-   // We only need to check for Android, because no other mobile
-   // device supports audio worklet.
-   if (navigator.userAgent.match(/Android/i)) {
-     window.isMobile.style.display = "block";
-     window.middle.style.display = "none";
-   }
+    // We only need to check for Android, because no other mobile
+    // device supports audio worklet.
+    if (navigator.userAgent.match(/Android/i)) {
+      window.isMobile.style.display = "block";
+      window.middle.style.display = "none";
+    }
   }
 
   const middlePanes = [