When there are a lot of people, start muted. Fixes #224

html/demo.js

@@ -119,6 +119,9 @@ function updateCurrentUsers() {
       }
 
       updateCurrentUsersText(x_audio_metadata.n_connected_users);
+      if (x_audio_metadata.n_connected_users > 5 && micState == "on") {
+        micState = "onForMusic";
+      }
 
       if (x_audio_metadata.instance_name) {
         window.instanceName.innerText = x_audio_metadata.instance_name;
@@ -1577,6 +1580,17 @@ async function update_preview_camera() {
   }
 }
 
+function showMuteNotification() {
+  window.muteNotification.style.display = "block";
+  window.setTimeout(() => {
+    window.muteNotification.style.display = "none";
+  }, 30*1000);
+}
+
+window.hideMuteNotification.addEventListener("click", () => {
+  window.muteNotification.style.display = "none";
+});
+
 let video_forced_off = false;
 async function selected_camera(useCamera) {
   // We don't want them clicking any buttons while we wait for Twilio to start.
@@ -1609,6 +1623,9 @@ async function selected_camera(useCamera) {
   }
 
   switch_app_state(APP_RUNNING);
+  if (micState == "onForMusic") {
+    showMuteNotification();
+  }
   start_singing();
 }
 

html/index.html

@@ -639,6 +639,19 @@
 #hearMonitorDiv {
   display: none;
 }
+#muteNotification {
+  position: fixed;
+  background: white;
+  padding: 0.5em;
+  border-radius: 0 0 0.25em 0.25em;
+  top: 0;
+  max-width: 55em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: none;
+  border: 1px solid #aaa;
+  border-top: none;
+}
 </style>
 <link rel="stylesheet" href="local-style.css"></link>
 
@@ -694,6 +707,13 @@ <h1 id=instanceName>Bucket Brigade</h1>
 
 </div>
 
+<div id=muteNotification>
+
+There are enough people that your mic is muted for conversation.  You
+can unmute by changing "mic" to "on" in the lower left, or by holding
+the spacebar while you talk.  <button
+id=hideMuteNotification>dismiss</button> </div>
+
 <div id=advancedSettings class=middlePane>
 <div>
 <h4>Best to leave these alone, since they do affect everyone</h4>