Resize videos automatically.

static/sfu.css

@@ -144,26 +144,18 @@ h1 {
 
 #peers {
     margin-left: 1%;
-    margin-right: 1%;
+    display: grid;
-    white-space: nowrap;
+    grid-template-columns: 1fr;
-    display: flex;
+    column-gap: 0.5%;
-    flex-wrap: wrap;
+    align-content: start;
-    margin-bottom: 4px;
 }
 
 .peer {
-    display: flex;
+    margin-top: auto;
-    flex-direction: column;
-    margin-right: 5px;
-    margin-left: 5px;
-    margin-bottom: 10px;
-    max-height: 50%;
 }
 
 .media {
-    height: 400px;
+    width: 100%;
-    margin: auto;
-    min-width: 4em;
 }
 
 .label {

static/sfu.js

@@ -325,6 +325,8 @@ function setMedia(id) {
 
     media.srcObject = c.stream;
     setLabel(id);
+
+    resizePeers();
 }
 
 function delMedia(id) {
@@ -334,6 +336,8 @@ function delMedia(id) {
 
     media.srcObject = null;
     mediadiv.removeChild(peer);
+
+    resizePeers();
 }
 
 function setLabel(id, fallback) {
@@ -353,6 +357,13 @@ function setLabel(id, fallback) {
     }
 }
 
+function resizePeers() {
+    let count = Object.keys(up).length + Object.keys(down).length;
+    let columns = Math.ceil(Math.sqrt(count));
+    document.getElementById('peers').style['grid-template-columns'] =
+        `repeat(${columns}, 1fr)`;
+}
+
 function serverConnect() {
     if(socket) {
         socket.close(1000, 'Reconnecting');