From 78cf9d0dbcec0bec1f5a5d847ddf0bf7202b5e62 Mon Sep 17 00:00:00 2001
From: Juliusz Chroboczek <jch@irif.fr>
Date: Fri, 1 May 2020 01:22:17 +0200
Subject: [PATCH] Resize videos automatically.

---
 static/sfu.css | 20 ++++++--------------
 static/sfu.js  | 11 +++++++++++
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/static/sfu.css b/static/sfu.css
index 45f6b6e..4c1a88c 100644
--- a/static/sfu.css
+++ b/static/sfu.css
@@ -144,26 +144,18 @@ h1 {
 
 #peers {
     margin-left: 1%;
-    margin-right: 1%;
-    white-space: nowrap;
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 4px;
+    display: grid;
+    grid-template-columns: 1fr;
+    column-gap: 0.5%;
+    align-content: start;
 }
 
 .peer {
-    display: flex;
-    flex-direction: column;
-    margin-right: 5px;
-    margin-left: 5px;
-    margin-bottom: 10px;
-    max-height: 50%;
+    margin-top: auto;
 }
 
 .media {
-    height: 400px;
-    margin: auto;
-    min-width: 4em;
+    width: 100%;
 }
 
 .label {
diff --git a/static/sfu.js b/static/sfu.js
index c585519..8e932bf 100644
--- a/static/sfu.js
+++ b/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');