diff --git a/html/demo.js b/html/demo.js index 1791b7c..055e747 100644 --- 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 index 743ed3c..18407c1 100644 --- 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 index 70a4e69..83424b2 100755 --- 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