From f1873c34613d9165f38833261d76ccd2d4469af3 Mon Sep 17 00:00:00 2001
From: Jeff Kaufman <jeff.t.kaufman@gmail.com>
Date: Tue, 5 Jan 2021 02:00:11 +0000
Subject: [PATCH] Add a setting for disabling video during songs, which we
 might want for bandwidth reasons

---
 html/demo.js    | 85 ++++++++++++++++++++++++++++++++++---------------
 html/index.html |  3 ++
 server.py       |  8 +++++
 3 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/html/demo.js b/html/demo.js
index 3934b07..985b104 100644
--- 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,6 +1029,12 @@ 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);
@@ -1015,6 +1042,7 @@ 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
index b9071c7..cd757c2 100644
--- 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
index bfcfd89..febead5 100755
--- 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.