start implementing presentation mode

jeffkaufman · Feb 13, 2021 · ac99482 · ac99482
1 parent 88a43a1
commit ac99482
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 12 deletions.
diff --git a/html/demo.js b/html/demo.js
@@ -81,7 +81,7 @@ function prettyTime(ms) {
 
 function joinBucket(i) {
   return () => {
-    window.buckets.children[i].children[0].children[1].disabled = true;
+    window.buckets.children[i+1].children[0].children[1].disabled = true;
     audioOffset.value = first_bucket_s + DELAY_INTERVAL * i;
     audio_offset_change();
   }
@@ -581,6 +581,7 @@ function persist_checkbox(checkboxId) {
 persist("userName");
 persist_checkbox("disableTutorial");
 persist_checkbox("disableLatencyMeasurement");
+persist_checkbox("presentationMode");
 // Don't persist "disable auto gain" because it's an experimental feature
 
 // Persisting select boxes is harder, so we do it manually for inSelect.
@@ -668,7 +669,7 @@ function set_controls() {
 
   setVisibleIn(window.advancedSettingsTab, [APP_RUNNING], 'inline-block');
   setVisibleIn(window.debugTab, [APP_RUNNING], 'inline-block');
-  
+
   setVisibleIn(window.mainApp, allStatesExcept([APP_RUNNING]));
   setVisibleIn(window.topbar, allStatesExcept([APP_RUNNING]));
   setVisibleIn(window.tabbarLogo, [APP_RUNNING]);
@@ -720,8 +721,21 @@ function set_controls() {
   window.backingTrackUploader.style.display = "none";
   window.backingTrackUploadOk.style.display = "none";
   window.backingTrackUploadError.style.display = "none";
+
+  window.buckets.classList.toggle(
+    "fullscreen", window.presentationMode.checked);
 }
 
+window.presentationMode.addEventListener("change", () => {
+  window.buckets.classList.toggle(
+    "fullscreen", window.presentationMode.checked);
+});
+
+window.leavePresentationMode.addEventListener("click", () => {
+  window.presentationMode.checked = false;
+  window.buckets.classList.remove("fullscreen");
+});
+
 function in_select_change() {
   window.localStorage.setItem("inSelect", inSelect.value);
   reset_if_running();
@@ -896,6 +910,7 @@ async function enable_video() {
   myVideoDiv = localVideoTrack.attach();
   myVideoDiv.style.transform = 'scale(-1, 1)';
   ensureParticipantDiv(myUserid);
+  removeMockVideo(participantDivs[myUserid]);
   participantDivs[myUserid].appendChild(myVideoDiv);
 }
 
@@ -1116,7 +1131,7 @@ function update_active_users(
 
     if (userid == myUserid) {
       for (var j = 0 ; j < N_BUCKETS; j++) {
-        window.buckets.children[j].children[0].children[1].disabled =
+        window.buckets.children[j+1].children[0].children[1].disabled =
           (j == 0 && !backingTrackOn && !imLeading) || est_bucket === j;
       }
     }
@@ -1427,9 +1442,23 @@ function ensureParticipantDiv(userid) {
     const info = document.createElement("div");
     info.classList.add("participantInfo");
     div.appendChild(info);
+
+    /*
+    const mockVideo =  document.createElement("img");
+    mockVideo.src = "https://www.jefftk.com/bucket-brigade-logo.png";
+    div.appendChild(mockVideo);
+    */
   }
 }
 
+function removeMockVideo(participantDiv) {
+  const imgs = participantDiv.getElementsByTagName("img");
+  for (let i = 0 ; i < imgs.length; i++) {
+    participantDiv.removeChild(imgs[i]);
+  }
+}
+
+
 async function connect_camera() {
   switch_app_state(APP_CHOOSE_CAMERA);
   window.nextCamera.disabled = true;
@@ -1509,6 +1538,7 @@ async function selected_camera(useCamera) {
     localStorage.setItem("camera_device_id",
                          camera_devices[chosen_camera_index].deviceId);
     ensureParticipantDiv(myUserid);
+    removeMockVideo(participantDivs[myUserid]);
     participantDivs[myUserid].appendChild(myVideoDiv);
     user_bucket_index[myUserid] = 0;
     bucket_divs[0].appendChild(participantDivs[myUserid]);
@@ -1621,6 +1651,7 @@ function connect_twilio() {
       }
 
       ensureParticipantDiv(participant.identity);
+      removeMockVideo(participantDivs[myUserid]);
 
       participant.tracks.forEach(
         addPublicationOrTrack(participant.identity));
@@ -1854,7 +1885,8 @@ async function start_singing() {
       }
 
       const showBuckets = hasLeader || song_active();
-      window.buckets.style.display = showBuckets ? "flex" : "none";
+      window.buckets.style.display = showBuckets ? (
+        window.presentationMode.checked ? "block" : "flex") : "none";
       window.unbucketedUsers.style.display = showBuckets ? "none" : "block";
 
       if (!showBuckets) {

diff --git a/html/index.html b/html/index.html
@@ -216,6 +216,17 @@
   flex-wrap: wrap;
   margin: 0.5em;
 }
+#buckets.fullscreen {
+  position: fixed;
+  margin: 0;
+  top: 0;
+  left: 0;
+  background-color: black;
+  width: 100vw;
+  height: 100vw;
+  padding: 0;
+}
+
 #unbucketedUsers {
   flex-grow: 1;
   text-align: center;
@@ -232,6 +243,9 @@
 .bucket > * {
   margin : 0.5em;
 }
+#buckets.fullscreen .bucket > * {
+  margin : 0;
+}
 .bucketTitle {
   width: 100%;
   border-radius: 0.25em 0.25em 0 0;
@@ -241,6 +255,23 @@
   flex-direction: row;
   justify-content: space-between;
 }
+#buckets.fullscreen .bucket {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  flex-grow: unset;
+  width: unset;
+}
+#buckets.fullscreen .bucketTitle {
+  display: none;
+}
+#buckets.fullscreen .participantInfo {
+  display: none;
+}
+#buckets.fullscreen .participant {
+  border-radius: 0;
+  border: none;
+}
 .bucketTitle > button {
   margin: 0.25em;
   margin-right: 0.5em;
@@ -464,12 +495,65 @@
 .muted {
   border: 1px solid #d00;
 }
+#leavePresentationMode {
+  display: none;
+}
 .participantInfo {
   margin: 0.25em;
 }
-.participant > video {
+.participant > video, .participant > img {
   width: 160px;
 }
+#buckets.fullscreen .participant > video, #buckets.fullscreen .participant > img {
+  width: 100%;
+}
+#buckets.fullscreen .participant {
+  width: 100%;
+  background-color: black;
+}
+
+#buckets.fullscreen .bucket {
+  width: 16.666666vw;
+  height: 100vh;
+  background-color: black;
+}
+/* none of this is actualy hooked up, since today there are alwas six */
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(1) {
+  width: 100vw;
+  height: 100vh;
+}
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(2),
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(2) ~ .bucket {
+  width: 50vw;
+  height: 100vh;
+}
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(3),
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(3) ~ .bucket {
+  width: 33.33333vw;
+  height: 100vh;
+}
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(4),
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(4) ~ .bucket {
+  width: 50vw;
+  height: 50vh;
+}
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(5),
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(5) ~ .bucket {
+  width: 33.333333vw;
+  height: 50vh;
+}
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(6),
+#buckets.fullscreen .bucket:first-of-type:nth-last-of-type(6) ~ .bucket {
+  width: 33.333333vw;
+  height: 50vh;
+}
+
+#buckets.fullscreen #leavePresentationMode {
+  display: block;
+  position: fixed;
+  right: 0.5em;
+  bottom: 0.5em;
+}
 
 #needName, #wrongPassword {
   display: none;
@@ -645,6 +729,11 @@ <h3>Settings that only affect you</h3>
       <option value=main>In main app thread</option>
       <option value=server>Server-side</option>
     </select>
+  <p>
+    Presentation mode:
+    <input type="checkbox" id="presentationMode">
+
+
   <h3>Settings that affect everyone</h3>
   <i>Leave these alone unless you know what you're doing</i>
 
@@ -1186,9 +1275,10 @@ <h3>Something else weird is going on</h3>
   </div>
 </div>
 
+<div id=buckets>
+  <button id=leavePresentationMode>x</button>
+</div>
 
-
-<div id=buckets></div>
 <div id=unbucketedUsers></div>
 
 </div> <!-- remainderWindow -->

diff --git a/server.py b/server.py
@@ -38,7 +38,7 @@
 
 FRAME_SIZE = 128
 
-N_IMAGINARY_USERS = 0  # for debugging user summary + mixing console performance
+N_IMAGINARY_USERS = 3  # for debugging user summary + mixing console performance
 
 SUPPORT_SERVER_CONTROL = False
 
@@ -538,15 +538,18 @@ def update_users(userid, username, server_clock, client_read_clock) -> None:
             server_clock,
             SAMPLE_RATE * 7)
         imaginary_users.append(imaginary_user)
+        #imaginary_user.delay_samples = (
+        #    SAMPLE_RATE *
+        #    DELAY_INTERVAL *
+        #    random.randint(1,LAYERING_DEPTH))
+        imaginary_user.delay_samples = (
+            SAMPLE_RATE *
+            DELAY_INTERVAL * (len(imaginary_users) + 1))
         users[imaginary_user.userid] = imaginary_user
 
     for user in imaginary_users:
         user.last_heard_server_clock = server_clock
         user.rms_volume = random.random() / 10
-        user.delay_samples = (
-            SAMPLE_RATE *
-            DELAY_INTERVAL *
-            random.randint(1,LAYERING_DEPTH))
 
     # Delete expired users BEFORE adding us to the list, so that our session
     #   will correctly reset if we are the next customer after we've been gone