fix video resizing, add a button to close chat

static/sfu.css

@@ -388,24 +388,30 @@ textarea.form-reply {
     display: none;
 }
 
-.video-controls {
+.video-controls, .top-video-controls {
     position: absolute;
     width: 100%;
     left: 0;
-    bottom: 40px;
+    bottom: 25px;
-    text-align: right;
+    text-align: center;
     color: #e1e1e1;
-    font-size: 1.8em;
+    font-size: 1.5em;
     transition: all .5s ease-out;
     opacity: 0;
 }
 
-.peer:hover > .video-controls {
+.top-video-controls {
+  text-align: right;
+  bottom: inherit;
+  top: 0;
+}
+
+.peer:hover > .video-controls, .peer:hover > .top-video-controls {
     opacity: 1;
     transition: all .7s ease-out;
 }
 
-.video-controls span {
+.video-controls span, .top-video-controls span {
     margin-right: 20px;
     transition: all .5s ease-out;
     opacity: .5;
@@ -417,7 +423,7 @@ textarea.form-reply {
     /*margin-right: 0;*/
 }
 
-.video-controls span:hover {
+.video-controls span:hover, .top-video-controls span:hover {
     opacity: 1;
     transition: opacity .5s ease-out;
 }
@@ -462,7 +468,7 @@ textarea.form-reply {
     width: 100%;
     z-index: 1;
     text-align: center;
-    line-height: 25px;
+    line-height: 24px;
     color: #ffffff;
 }
 
@@ -605,12 +611,13 @@ h1 {
 
 #chatbox {
     height: 100%;
+    position: relative;
 }
 
 #chat {
     padding: 0;
     margin: 0;
-    background-color: #f4f4f4;
+    background-color: #f8f8f8;
     background-size: cover;
     overflow-y: scroll;
     border: none;
@@ -618,7 +625,7 @@ h1 {
     /* force to fill height */
     height: 100% !important;
     width: 100%;
-    min-width: 200px;
+    min-width: 300px;
     overflow: hidden;
 }
 
@@ -632,6 +639,24 @@ h1 {
     padding: 10px;
 }
 
+.close-chat {
+    position: absolute;
+    top: 2px;
+    right: 14px;
+    width: 25px;
+    font-size: 1em;
+    text-align: center;
+    font-weight: 700;
+    color: #8f8f8f;
+    cursor: pointer;
+    border: 1px solid transparent;
+}
+
+.close-chat:hover, .close-chat:active {
+    border: 1px solid #dfdfdf;
+    border-radius: 4px;
+}
+
 #disconnectbutton, #connectbutton {
     margin-left: 80px;
     margin-top: 15px;
@@ -667,7 +692,7 @@ h1 {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-template-rows: repeat(1, auto);
-    row-gap: 0;
+    row-gap: 5px;
     column-gap: 10px;
     position: absolute;
     top: 0;
@@ -680,6 +705,7 @@ h1 {
     z-index: 1000;
     background-size: cover;
     overflow: hidden;
+    vertical-align: top!important;
 }
 
 .peer {
@@ -687,6 +713,7 @@ h1 {
     margin-bottom: auto;
     position: relative;
     border: 2px solid rgba(0,0,0,0);
+    background: #80808014;
 }
 
 .peer-active {
@@ -695,7 +722,6 @@ h1 {
 
 .media {
     width: 100%;
-    min-width: 220px; /* min-size for controls buttons */
     max-height: calc(var(--vh, 1vh) * 100 - 76px);
     padding-bottom: 20px;
     object-fit: contain;
@@ -989,6 +1015,13 @@ header .collapse {
     margin-right: 5px;
 }
 
+.close-icon {
+    font: normal 1em/1 Arial, sans-serif;
+    display: inline-block;
+}
+
+.close-icon:before{ content: "\2715"; }
+
 /* END Sidebar Left */
 
 /*@media only screen and (max-width: 768px) {*/
@@ -1010,6 +1043,15 @@ header .collapse {
         height: calc(var(--vh, 1vh) * 100 - 56px);
     }
 
+    .collapse-video {
+        left: inherit;
+        right: 10px;
+    }
+
+    .close-chat {
+        display: none;
+    }
+
     .video-container {
         position: fixed;
         height: calc(var(--vh, 1vh) * 100 - 56px);

static/sfu.html

@@ -92,6 +92,9 @@
             <div class="coln-left" id="left">
               <div id="chat">
                 <div id="chatbox">
+                  <div class="close-chat" id="close-chat">
+                    <span class="close-icon"></span>
+                  </div>
                   <div id="box"></div>
                   <div class="reply">
                     <form id="inputform">
@@ -195,10 +198,23 @@
 
     <div id="videocontrols-template" class="invisible">
       <div class="video-controls">
-        <span class="volume"><i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i></span>
+        <span class="volume" title="Volume">
-        <span class="pip"><i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i></span>
+          <i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
-        <span class="expand"><i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i></span>
+        </span>
-        <span class="fullscreen"><i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i></span>
+        <span class="pip" title="Picture In Picture">
+          <i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i>
+        </span>
+        <span class="fullscreen" title="Fullscreen">
+          <i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i>
+        </span>
+      </div>
+    </div>
+
+    <div id="top-videocontrols-template" class="invisible">
+      <div class="top-video-controls">
+        <span class="expand" title="Maximize">
+          <i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i>
+        </span>
       </div>
     </div>
 

static/sfu.js

@@ -335,7 +335,9 @@ function setViewportHeight() {
     document.documentElement.style.setProperty(
         '--vh', `${window.innerHeight/100}px`,
     );
-};
+    // Ajust video component size
+    resizePeers();
+}
 setViewportHeight();
 
 // On resize and orientation change, we update viewport height
@@ -375,7 +377,7 @@ function setVisibility(id, visible) {
 function setButtonsVisibility() {
     let permissions = serverConnection.permissions;
     let local = !!findUpMedia('local');
-    let share = !!findUpMedia('screenshare')
+    let share = !!findUpMedia('screenshare');
 
     // don't allow multiple presentations
     setVisibility('presentbutton', permissions.present && !local);
@@ -383,7 +385,7 @@ function setButtonsVisibility() {
 
     // allow multiple shared documents
     setVisibility('sharebutton', permissions.present &&
-                  ('getDisplayMedia' in navigator.mediaDevices))
+                  ('getDisplayMedia' in navigator.mediaDevices));
     setVisibility('unsharebutton', share);
 
     setVisibility('mediaoptions', permissions.present);
@@ -967,7 +969,17 @@ function setMedia(c, isUp) {
         div.appendChild(label);
     }
 
-    let template = document.getElementById('videocontrols-template').firstElementChild;
+    let template = document.getElementById('videocontrols-template')
+        .firstElementChild;
+    let top_template = document.getElementById('top-videocontrols-template')
+        .firstElementChild;
+
+    let top_controls = document.getElementById('top-controls-' + c.id);
+    if (template && !top_controls) {
+      top_controls = top_template.cloneNode(true);
+      top_controls.id = 'top-controls-' + c.id;
+      div.appendChild(top_controls);
+    }
     let controls = document.getElementById('controls-' + c.id);
     if (template && !controls) {
       controls = template.cloneNode(true);
@@ -1117,6 +1129,9 @@ function setLabel(c, fallback) {
 }
 
 function resizePeers() {
+    // Window resize can call this method too early
+    if (!serverConnection)
+        return;
     let count =
         Object.keys(serverConnection.up).length +
         Object.keys(serverConnection.down).length;
@@ -1125,24 +1140,29 @@ function resizePeers() {
     if (!count)
         // No video, nothing to resize.
         return;
-    let container = document.getElementById("video-container")
+    let container = document.getElementById("video-container");
-    // Peers div has total padding of 30px, we remove 30 on offsetHeight
+    // Peers div has total padding of 40px, we remove 40 on offsetHeight
-    let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
+    // Grid has row-gap of 5px
+    let margins = (columns - 1) * 5 + 40;
+    let rows = Math.ceil(count / columns);
 
-    let media_list = document.getElementsByClassName("media");
+    if (count <= 2 && container.offsetHeight > container.offsetWidth) {
+        peers.style['grid-template-columns'] = "repeat(1, 1fr)";
+        rows = count;
+    } else {
+        peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+    }
+    if (rows === 1)
+        return;
+    let max_video_height = (peers.offsetHeight - margins) / rows;
+    let media_list = peers.querySelectorAll(".media");
     for(let i = 0; i < media_list.length; i++) {
         let media = media_list[i];
         if(!(media instanceof HTMLMediaElement)) {
             console.warn('Unexpected media');
             continue;
         }
-        media.style['max_height'] = max_video_height + "px";
+        media.style['max-height'] = max_video_height + "px";
-    }
-
-    if (count <= 2 && container.offsetHeight > container.offsetWidth) {
-        peers.style['grid-template-columns'] = "repeat(1, 1fr)";
-    } else {
-        peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
     }
 }
 
@@ -1616,11 +1636,9 @@ function chatResizer(e) {
 
     function start_drag(e) {
         let left_width = (start_width + e.clientX - start_x) * 100 / full_width;
-        // set min chat width to 200px
+        // set min chat width to 300px
-        let min_left_width = 200 * 100 / full_width;
+        let min_left_width = 300 * 100 / full_width;
         if (left_width < min_left_width) {
-          left.style.display = "none";
-          document.getElementById('collapse-video').style.display = "block";
           return;
         }
         left.style.flex = left_width.toString();
@@ -1777,6 +1795,12 @@ document.getElementById('switch-video').onclick = function(e) {
     document.getElementById('collapse-video').style.display = "block";
 };
 
+document.getElementById('close-chat').onclick = function(e) {
+  e.preventDefault();
+  left.style.display = "none";
+  document.getElementById('collapse-video').style.display = "block";
+};
+
 window.onclick = function(event) {
   let user_box = document.getElementById('userDropdown');
   if (user_box.classList.contains("show") && event.target.id != "user") {