Add a setting for disabling video during songs, which we might want f…

…or bandwidth reasons
jeffkaufman · Jan 5, 2021 · f1873c3 · f1873c3
1 parent 3984794
commit f1873c3
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 26 deletions.
diff --git a/html/demo.js b/html/demo.js
@@ -572,6 +572,7 @@ function updateTwilioMute() {
       }
     });
   }
+  update_video();
 }
 
 var speakerPaused = false;
@@ -584,38 +585,58 @@ function toggle_speaker() {
   }
 }
 
+var disableSongVideo = false;
 var videoPaused = false;
+var videoOn = false;
+
+function disable_video() {
+  if (!videoOn) return;
+  videoOn = false;
+
+  twilio_room.localParticipant.videoTracks.forEach(publication => {
+    publication.track.stop();
+    publication.unpublish();
+  });
+  if (myVideoDiv) {
+    try {
+      participantDivs[myUserid].removeChild(myVideoDiv);
+    } catch {}
+    myVideoDiv = null;
+  }
+}
+
+async function enable_video() {
+  if (videoOn) return;
+  videoOn = true;
+
+  const localVideoTrack = await Twilio.Video.createLocalVideoTrack({
+    deviceId: {exact: camera_devices[chosen_camera_index].deviceId},
+    width: 160
+  });
+  twilio_room.localParticipant.publishTrack(localVideoTrack);
+  myVideoDiv = localVideoTrack.attach();
+  myVideoDiv.style.transform = 'scale(-1, 1)';
+  ensureParticipantDiv(myUserid);
+  participantDivs[myUserid].appendChild(myVideoDiv);
+}
+
+function update_video() {
+  if (twilio_room) {
+    if (videoPaused || (disableSongVideo && (
+          in_beforesong || in_song || in_aftersong))) {
+      disable_video();
+    } else {
+      enable_video();
+    }
+  }
+}
+
 function toggle_video() {
   if (twilio_room) {
     videoPaused = !videoPaused;
     window.videoToggleButton.innerText =
       videoPaused ? "enable video" : "disable video";
-
-    if (videoPaused) {
-      twilio_room.localParticipant.videoTracks.forEach(publication => {
-        publication.track.stop();
-        publication.unpublish();
-      });
-      if (myVideoDiv) {
-        try {
-          participantDivs[myUserid].removeChild(myVideoDiv);
-        } catch {}
-        myVideoDiv = null;
-      }
-    } else {
-      Twilio.Video.createLocalVideoTrack({
-        deviceId: {exact: camera_devices[chosen_camera_index].deviceId},
-        width: 160
-      }).then(localVideoTrack => {
-        twilio_room.localParticipant.publishTrack(localVideoTrack);
-        myVideoDiv = localVideoTrack.attach();
-        myVideoDiv.style.transform = 'scale(-1, 1)';
-        ensureParticipantDiv(myUserid);
-        participantDivs[myUserid].appendChild(myVideoDiv);
-      }).then(publication => {
-        console.log('Successfully unmuted your video:', publication);
-      });
-    }
+    update_video();
   }
 }
 
@@ -1008,13 +1029,20 @@ function disable_auto_gain_change() {
   }
 }
 
+function disable_song_video_change() {
+  if (singer_client) {
+    singer_client.x_send_metadata("disableSongVideo", window.disableSongVideo.checked? 1: 0);
+  }
+}
+
 startButton.addEventListener("click", start_stop);
 window.micToggleButton.addEventListener("click", toggle_mic);
 window.speakerToggleButton.addEventListener("click", toggle_speaker);
 window.videoToggleButton.addEventListener("click", toggle_video);
 clickVolumeSlider.addEventListener("change", click_volume_change);
 audioOffset.addEventListener("change", audio_offset_change);
 window.disableAutoGain.addEventListener("change", disable_auto_gain_change);
+window.disableSongVideo.addEventListener("change", disable_song_video_change);
 window.recalibrate.addEventListener("click", () => {
   window.sessionStorage.clear();
   window.location.reload();
@@ -1154,6 +1182,7 @@ async function selected_camera(useCamera) {
     participantDivs[myUserid].appendChild(myVideoDiv);
     user_bucket_index[myUserid] = 0;
     bucket_divs[0].appendChild(participantDivs[myUserid]);
+    videoOn = true;
   } else {
     videoToggleButton.style.display = "none";
     myVideoDiv = null;
@@ -1336,6 +1365,10 @@ async function start_singing() {
     var server_repeats = metadata["repeats"];
     var server_bpr = metadata["bpr"];
     var n_connected_users = metadata["n_connected_users"] || 0;
+    if (metadata["disableSongVideo"] != null){
+      disableSongVideo = metadata["disableSongVideo"];
+      update_video();
+    }
 
     first_bucket_s = metadata["first_bucket"] || first_bucket_s;
 

diff --git a/html/index.html b/html/index.html
@@ -489,6 +489,9 @@ <h3>Settings that affect everyone</h3>
 
     Disable auto gain:
   <input type="checkbox" id="disableAutoGain">
+  <p>
+    Disable video during songs:
+  <input type="checkbox" id="disableSongVideo">
   <br>
     <div id=clickParams>(Clicks BPM if selected: <input type=text id=clickBPM value=60>)</div>
     <div id=eventTest>

diff --git a/server.py b/server.py
@@ -96,6 +96,7 @@ def reset(self):
         self.last_status_ts = 0.0
 
         self.disable_auto_gain = False
+        self.disable_song_video = False
 
         if recorder:
             recorder.reset()
@@ -326,6 +327,8 @@ def __init__(self, userid, name, last_heard_server_clock, delay_samples) -> None
         self.send("repeats", state.repeats)
         self.send("bpr", state.bpr)
         self.send("tracks", tracks)
+        if state.disable_song_video:
+            self.send("disableSongVideo", state.disable_song_video)
 
     def allocate_twilio_token(self):
         token = AccessToken(secrets["twilio"]["account_sid"],
@@ -805,6 +808,11 @@ def handle_special(query_params, server_clock, user=None, client_read_clock=None
     if disableAutoGain:
         state.disable_auto_gain = disableAutoGain == "1"
 
+    disableSongVideo = query_params.get("disableSongVideo", None)
+    if disableSongVideo:
+        state.disable_song_video = disableSongVideo == "1"
+        sendall("disableSongVideo", state.disable_song_video)
+
     # If we are running under Ritual Engine, disable functionality that is  not
     #   required in that setting, and would be disruptive if triggered by
     #   accident.