Finish implementing presentation mode. Fixes #222

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

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/html/demo.js b/html/demo.js
@@ -1125,6 +1125,9 @@ function update_active_users(
     const is_monitored = user_summary[i][6];
 
     let est_bucket = estimateBucket(offset_s);
+    if (window.presentationMode.checked) {
+      est_bucket = 0;
+    }
     if (!showBuckets) {
       est_bucket = -1;
     }
@@ -1178,6 +1181,15 @@ function update_active_users(
     for (const userid in participantDivs) {
       participantDivs[userid].style.display =
         userids.has(userid) ? "inline-block" : "none";
+      if (!userids.has(userid) && user_bucket_index[userid] != -1) {
+        if (user_bucket_index[userid] != null) {
+          bucket_divs[user_bucket_index[userid]].removeChild(
+            participantDivs[userid]);
+        }
+        window.unbucketedUsers.appendChild(
+          participantDivs[userid]);
+        user_bucket_index[userid] = -1;
+      }
     }
   }
 
@@ -1432,6 +1444,7 @@ let twilio_tracks = null;
 let camera_devices = null;
 let chosen_camera_index = 0;
 
+let mockVideos = false;
 function ensureParticipantDiv(userid) {
   let div = participantDivs[userid];
   if (!div) {
@@ -1443,11 +1456,11 @@ function ensureParticipantDiv(userid) {
     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);
-    */
+    if (mockVideos) {
+      const mockVideo =  document.createElement("img");
+      mockVideo.src = "https://www.jefftk.com/bucket-brigade-logo.png";
+      div.appendChild(mockVideo);
+    }
   }
 }
 

diff --git a/html/index.html b/html/index.html
@@ -507,52 +507,60 @@
 #buckets.fullscreen .participant > video, #buckets.fullscreen .participant > img {
   width: 100%;
 }
-#buckets.fullscreen .participant {
-  width: 100%;
-  background-color: black;
-}
-
 #buckets.fullscreen .bucket {
-  width: 16.666666vw;
+  width: 100vw;
   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) {
+#buckets.fullscreen .participant {
+  width: 160px;
+  background-color: black;
+}
+#buckets.fullscreen .participant:only-child {
   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 {
+#buckets.fullscreen .participant:first-child:nth-last-child(2),
+#buckets.fullscreen .participant:first-child:nth-last-child(2) ~ .participant {
   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 {
+#buckets.fullscreen .participant:first-child:nth-last-child(3),
+#buckets.fullscreen .participant:first-child:nth-last-child(3) ~ .participant {
   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 {
+#buckets.fullscreen .participant:first-child:nth-last-child(4),
+#buckets.fullscreen .participant:first-child:nth-last-child(4) ~ .participant {
   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 {
+#buckets.fullscreen .participant:first-child:nth-last-child(5),
+#buckets.fullscreen .participant:first-child:nth-last-child(5) ~ .participant,
+#buckets.fullscreen .participant:first-child:nth-last-child(6),
+#buckets.fullscreen .participant:first-child:nth-last-child(6) ~ .participant {
   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;
+#buckets.fullscreen .participant:first-child:nth-last-child(7),
+#buckets.fullscreen .participant:first-child:nth-last-child(7) ~ .participant,
+#buckets.fullscreen .participant:first-child:nth-last-child(8),
+#buckets.fullscreen .participant:first-child:nth-last-child(8) ~ .participant {
+  width: 25vw;
   height: 50vh;
 }
+#buckets.fullscreen .participant:first-child:nth-last-child(9),
+#buckets.fullscreen .participant:first-child:nth-last-child(9) ~ .participant {
+  width: 33.33333vw;
+  height: 33.33333vh;
+}
 
 #buckets.fullscreen #leavePresentationMode {
   display: block;
   position: fixed;
   right: 0.5em;
   bottom: 0.5em;
+  z-index: 1;
 }
 
 #needName, #wrongPassword {

diff --git a/server.py b/server.py
@@ -38,7 +38,7 @@
 
 FRAME_SIZE = 128
 
-N_IMAGINARY_USERS = 3  # for debugging user summary + mixing console performance
+N_IMAGINARY_USERS = 0  # for debugging user summary + mixing console performance
 
 SUPPORT_SERVER_CONTROL = False