Merge remote-tracking branch 'alain/sfu-update' into master

static/sfu.css

@@ -12,7 +12,7 @@
 
 .topnav {
     padding-left: 0;
-    height: 4rem;
+    height: 3.5rem;
     z-index: 1039;
 }
 
@@ -61,7 +61,7 @@
 }
 .navbar {
     position: relative;
-    padding: .5rem;
+    padding: .1rem;
 }
 
 .topnav .navbar-brand {
@@ -164,7 +164,7 @@
 }
 
 .app {
-    background-color: #f7f7f7;
+    background-color: #f4f4f4;
     overflow: hidden;
     margin: 0;
     padding: 0;
@@ -177,8 +177,13 @@
     margin: 0;
 }
 
+.coln-left-hide {
+  flex: 0;
+}
+
 .coln-right {
     flex: 70%;
+    position: relative;
 }
 
 /* Clear floats after the columns */
@@ -192,7 +197,7 @@
 
 .full-width {
     width: calc(100vw - 200px);
-    height: calc(var(--vh, 1vh) * 100 - 64px);
+    height: calc(var(--vh, 1vh) * 100 - 56px);
 }
 
 .full-width-active {
@@ -204,7 +209,7 @@
 }
 
 .users-header {
-    height: 4rem;
+    height: 3.5rem;
     padding: 10px;
     background: #610a86;
     font-size: .95rem;
@@ -221,7 +226,7 @@
 }
 
 .reply {
-    height: 60px;
+    height: 53px;
     width: 100%;
     background-color: #eae7e5;
     padding: 10px 5px 10px 5px;
@@ -242,7 +247,7 @@
 }
 
 textarea.form-reply {
-    height: 2.6em;
+    height: 2.1em;
     margin-right: .5em;
 }
 
@@ -277,7 +282,6 @@ textarea.form-reply {
 
 .select-inline {
     display: inline-block;
-    width: inherit;
 }
 
 .message {
@@ -290,11 +294,12 @@ textarea.form-reply {
     word-wrap: break-word;
     display: inline-block;
     margin: 1em 0 0;
-    max-width: 80%;
+    max-width: 90%;
+    text-align: left;
 }
 
 .message-sender {
-    background: #ececec;
+    background: #e6e6e6;
 }
 
 .message-private {
@@ -321,12 +326,13 @@ textarea.form-reply {
 }
 
 .message-content {
-    margin: 0 !important;
+    margin: 0;
-    padding: 5px !important;
+    padding: 0;
+    padding-left: 5px;
     word-wrap: break-word;
+    word-break: break-word;
     font-weight: 400;
     font-size: 14px;
-    padding-bottom: 0 !important;
     color: #202035;
 }
 
@@ -336,6 +342,14 @@ textarea.form-reply {
     text-shadow: none;
 }
 
+.message-footer {
+    margin: 0;
+    padding: 0;
+    margin-bottom: -5px;
+    line-height: .9;
+    text-align: right;
+}
+
 .message-time {
     margin-left: 1em;
 }
@@ -345,22 +359,21 @@ textarea.form-reply {
 }
 
 .video-container {
-    height: calc(var(--vh, 1vh) * 100 - 64px);
+    height: calc(var(--vh, 1vh) * 100 - 56px);
     position: relative;
     background: rgba(0, 0, 0, 0.91);
     /* Display only when showing video */
     display: block;
-    transition: all 1s ease-out;
-    opacity: 1;
 }
 
 .collapse-video {
-  display: none;
+    display: none;
-  /*on top of video peers*/
+    /*on top of video peers*/
-  z-index: 1002;
+    z-index: 1002;
-  position: fixed;
+    position: absolute;
-  top: 70px;
+    top: 5px;
-  right: 10px;
+    left: 10px;
+    cursor: pointer;
 }
 
 .collapse-video .open-chat {
@@ -368,20 +381,73 @@ textarea.form-reply {
     height: 60px;
     fill: #fff;
     padding: 10px;
+    fill: #b8b8b8;
 }
 
 .no-video {
     display: none;
-    transition: opacity 1s ease-out;
+}
+
+.video-controls, .top-video-controls {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 25px;
+    text-align: center;
+    color: #fff;
+    font-size: 1.5em;
+    transition: all .5s ease-out;
     opacity: 0;
 }
 
+.top-video-controls {
+  text-align: right;
+  bottom: inherit;
+  top: 5px;
+}
+
+.vc-overlay {
+  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 24%) 100%);
+}
+
+.peer:hover > .video-controls, .peer:hover > .top-video-controls {
+    opacity: 1;
+    transition: all .7s ease-out;
+}
+
+.video-controls span, .top-video-controls span {
+    margin-right: 10%;
+    transition: all .7s ease-out;
+    opacity: 1;
+    cursor: pointer;
+}
+
+.video-controls span:last-child {
+    margin-right: 0;
+}
+
+.video-controls span:hover, .top-video-controls span:hover {
+    opacity: .5;
+    transition: opacity .5s ease-out;
+}
+
+.video-controls .volume {
+    width: 25px;
+    display: inline-block;
+    text-align: center;
+}
+
+.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
+    opacity: .2;
+    color: #c8c8c8
+}
+
 .mobile-container {
     display: block !important;
 }
 
 .login-container {
-    height: calc(var(--vh, 1vh) * 100 - 64px);
+    height: calc(var(--vh, 1vh) * 100 - 56px);
     position: relative;
     display: block;
 }
@@ -410,7 +476,7 @@ textarea.form-reply {
     width: 100%;
     z-index: 1;
     text-align: center;
-    line-height: 25px;
+    line-height: 24px;
     color: #ffffff;
 }
 
@@ -553,19 +619,22 @@ h1 {
 
 #chatbox {
     height: 100%;
+    position: relative;
 }
 
 #chat {
     padding: 0;
     margin: 0;
-    background-color: #f9f9f9;
+    background-color: #f8f8f8;
     background-size: cover;
     overflow-y: scroll;
     border: none;
     border-right: 4px solid #e6e6e6;
     /* force to fill height */
     height: 100% !important;
+    width: 100%;
     min-width: 300px;
+    overflow: hidden;
 }
 
 #inputform {
@@ -574,10 +643,28 @@ h1 {
 
 #box {
     overflow: auto;
-    height: calc(100% - 60px);
+    height: calc(100% - 53px);
     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;
@@ -613,7 +700,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;
@@ -626,6 +713,7 @@ h1 {
     z-index: 1000;
     background-size: cover;
     overflow: hidden;
+    vertical-align: top!important;
 }
 
 .peer {
@@ -633,6 +721,7 @@ h1 {
     margin-bottom: auto;
     position: relative;
     border: 2px solid rgba(0,0,0,0);
+    background: #80808014;
 }
 
 .peer-active {
@@ -641,7 +730,7 @@ h1 {
 
 .media {
     width: 100%;
-    max-height: calc(var(--vh, 1vh) * 100 - 84px);
+    max-height: calc(var(--vh, 1vh) * 100 - 76px);
     padding-bottom: 20px;
     object-fit: contain;
 }
@@ -672,13 +761,13 @@ h1 {
 }
 
 .sidenav a {
-    padding: 10px;
+    padding: 10px 20px;
     text-decoration: none;
     font-size: 30px;
     color: #dbd9d9;
     display: block;
     transition: 0.3s;
-    line-height: 1.2;
+    line-height: 1.0;
 }
 
 .sidenav a:hover {
@@ -689,7 +778,8 @@ h1 {
     cursor: pointer;
     position: absolute;
     top: 0;
-    right: 5px;
+    right: 0;
+    height: 56px;
 }
 
 .sidenav label{
@@ -697,21 +787,29 @@ h1 {
     margin-top: 15px;
 }
 
+.sidenav .label-first {
+    margin-top: 0;
+}
+
 .sidenav form{
     display: block;
     margin-top: 15px;
 }
 
+.sidenav-header {
+    height: 56px;
+}
+
 .sidenav-header h2{
     color: #fff;
     padding: 10px;
     margin: 0;
     max-width: 70%;
-    line-height: 44px;
+    line-height: 36px;
 }
 
 .sidenav-content {
-    padding: 20px;
+    padding: 10px;
     background: #fff;
     height: 100%;
 }
@@ -720,6 +818,18 @@ h1 {
     margin: 0;
 }
 
+fieldset {
+    margin: 0;
+    margin-top: 20px;
+    border: 1px solid #e9e8e8;
+    padding: 8px;
+    border-radius: 4px;
+}
+legend {
+    padding: 2px;
+    color: #4d4f51;
+}
+
 .nav-menu {
     margin: 0;
     padding: 0;
@@ -781,7 +891,7 @@ h1 {
     background-color: #fff;
     max-width: 300px;
     min-width: 200px;
-    margin-top: 11px;
+    margin-top: 7px;
     overflow: auto;
     right: 7px;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
@@ -841,13 +951,14 @@ header .collapse {
     cursor: pointer;
     padding-top: 5px;
     margin-right: 20px;
+    margin-left: 5px;
 }
 
 .sfu-header {
     font-size: 1.3rem;
     font-weight: 900;
     color: #dbd9d9;
-    line-height: 44px;
+    line-height: 34px;
 }
 
 .header-sep {
@@ -912,15 +1023,16 @@ header .collapse {
     margin-right: 5px;
 }
 
-/* END Sidebar Left */
+.close-icon {
-
+    font: normal 1em/1 Arial, sans-serif;
-@media screen and (max-height: 450px) {
+    display: inline-block;
-    .sidenav-content {padding: 10px;}
-    .sidenav a {font-size: 18px;}
 }
 
-/*@media only screen and (max-width: 768px) {*/
+.close-icon:before{ content: "\2715"; }
-@media only screen and (max-device-width: 768px) {
+
+/* END Sidebar Left */
+
+@media only screen and (max-device-width: 1024px) {
     .nav-link {
         margin: 0;
         line-height: 1.5;
@@ -934,18 +1046,19 @@ header .collapse {
         display: none;
     }
 
-    .topnav {
-        height: 3.5rem;
-    }
-
-    .users-header {
-        height: 3.5rem;
-    }
-
     .full-width {
         height: calc(var(--vh, 1vh) * 100 - 56px);
     }
 
+    .collapse-video {
+        left: inherit;
+        right: 60px;
+    }
+
+    .close-chat {
+        display: none;
+    }
+
     .video-container {
         position: fixed;
         height: calc(var(--vh, 1vh) * 100 - 56px);
@@ -975,6 +1088,7 @@ header .collapse {
 
     .coln-right {
         flex: none;
+        position: relative;
     }
 
     .full-width {
@@ -1010,6 +1124,8 @@ header .collapse {
         display: block;
     }
 
+    .sidenav a {padding: 10px 5px;}
+
     .sidenav-header h2 {
         line-height: 36px;
     }

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">
@@ -114,7 +117,9 @@
                   </svg>
                 </div>
               <div class="video-container no-video" id="video-container">
-                <div id="peers"></div>
+                <div id="expand-video" class="expand-video">
+                  <div id="peers"></div>
+                </div>
               </div>
               <div class="login-container invisible" id="login-container">
                 <div class="login-box">
@@ -143,46 +148,76 @@
         <a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
       </div>
       <div class="sidenav-content" id="optionsdiv">
-        <div id="mediaoptions">
+        <div id="mediaoptions" class="invisible">
-          <label for="videoselect">Camera:</label>
+          <fieldset>
-          <select id="videoselect" class="select select-inline">
+            <legend>Media Options</legend>
-            <option value="">off</option>
+            <label for="videoselect" class="label-first">Camera:</label>
-          </select>
+            <select id="videoselect" class="select select-inline">
-
+              <option value="">off</option>
-          <label for="audioselect">Microphone:</label>
+            </select>
-          <select id="audioselect" class="select select-inline">
+  
-            <option value="">off</option>
+            <label for="audioselect">Microphone:</label>
-          </select>
+            <select id="audioselect" class="select select-inline">
-
+              <option value="">off</option>
-          <form>
+            </select>
-            <input id="blackboardbox" type="checkbox">Blackboard mode</input>
+  
-          </form>
+            <form>
-
+              <input id="blackboardbox" type="checkbox">Blackboard mode</input>
-          <form>
+            </form>
-            <input id="studiobox" type="checkbox">Studio mode</input>
+  
-          </form>
+            <form>
-
+              <input id="studiobox" type="checkbox">Studio mode</input>
+            </form>
+          </fieldset>
         </div>
 
-        <label for="sendselect">Send:</label>
+        <fieldset>
-        <select id="sendselect" class="select select-inline">
+          <legend>Others Settings</legend>
-          <option value="lowest">lowest</option>
+          <label for="sendselect" class="label-first">Send:</label>
-          <option value="low">low</option>
+          <select id="sendselect" class="select select-inline">
-          <option value="normal" selected>normal</option>
+            <option value="lowest">lowest</option>
-          <option value="unlimited">unlimited</option>
+            <option value="low">low</option>
-        </select>
+            <option value="normal" selected>normal</option>
+            <option value="unlimited">unlimited</option>
+          </select>
+  
+          <label for="requestselect">Receive:</label>
+          <select id="requestselect" class="select select-inline">
+            <option value="">nothing</option>
+            <option value="audio">audio only</option>
+            <option value="screenshare">screen share</option>
+            <option value="everything" selected>everything</option>
+          </select>
+  
+          <form>
+            <input id="activitybox" type="checkbox">Activity detection</input>
+          </form>
+        </fieldset>
+      </div>
+    </div>
 
-        <label for="requestselect">Receive:</label>
+    <div id="videocontrols-template" class="invisible">
-        <select id="requestselect" class="select select-inline">
+      <div class="video-controls vc-overlay">
-          <option value="">nothing</option>
+        <span class="volume" title="Volume">
-          <option value="audio">audio only</option>
+          <i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
-          <option value="screenshare">screen share</option>
+        </span>
-          <option value="everything" selected>everything</option>
+        <span class="camera" title="Camera">
-        </select>
+          <i class="fa fa-video-camera"  data-type="bt-camera" 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>
 
-        <form>
+    <div id="top-videocontrols-template" class="invisible">
-          <input id="activitybox" type="checkbox">Activity detection</input>
+      <div class="top-video-controls">
-        </form>
+        <span class="expand invisible" title="Maximize">
+          <i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i>
+        </span>
       </div>
     </div>
 

static/sfu.js

@@ -239,6 +239,11 @@ function hideVideo(force) {
         return;
     let video_container = document.getElementById('video-container');
     video_container.classList.add('no-video');
+    let left = document.getElementById("left");
+    if (left.style.display !== "none") {
+        // hide all video buttons used to switch video on mobile layout
+        closeVideoControls();
+    }
 }
 
 function closeVideoControls() {
@@ -335,7 +340,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 +382,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 +390,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);
@@ -455,6 +462,7 @@ document.getElementById('sharebutton').onclick = function(e) {
 document.getElementById('unsharebutton').onclick = function(e) {
     e.preventDefault();
     delUpMediaKind('screenshare');
+    resizePeers();
 }
 
 /** @returns {number} */
@@ -741,15 +749,18 @@ async function setMaxVideoThroughput(c, bps) {
 
 /**
  * @param {string} [id]
+ * @param {boolean} [disableVideo]
  */
-async function addLocalMedia(id) {
+async function addLocalMedia(id, disableVideo) {
     if(!getUserPass())
         return;
 
     let settings = getSettings();
 
     let audio = settings.audio ? {deviceId: settings.audio} : false;
-    let video = settings.video ? {deviceId: settings.video} : false;
+    let video = false;
+    if (!disableVideo)
+        video = settings.video ? {deviceId: settings.video} : false;
 
     if(audio) {
         if(settings.studioMode) {
@@ -946,6 +957,14 @@ function muteLocalTracks(mute) {
  */
 function setMedia(c, isUp) {
     let peersdiv = document.getElementById('peers');
+    let settings = getSettings();
+    let local_media;
+
+    for(let id in serverConnection.up) {
+        if (id === c.id) {
+          local_media = serverConnection.up[id];
+        }
+    }
 
     let div = document.getElementById('peer-' + c.id);
     if(!div) {
@@ -964,7 +983,7 @@ function setMedia(c, isUp) {
         media.autoplay = true;
         /** @ts-ignore */
         media.playsinline = true;
-        media.controls = true;
+        media.controls = false;
         if(isUp)
             media.muted = true;
         div.appendChild(media);
@@ -978,14 +997,134 @@ function setMedia(c, isUp) {
         div.appendChild(label);
     }
 
+    let template = document.getElementById('videocontrols-template')
+        .firstElementChild;
+    let top_template = document.getElementById('top-videocontrols-template')
+        .firstElementChild;
+
+    let top_controls = document.getElementById('topcontrols-' + c.id);
+    if (template && !top_controls) {
+        top_controls = top_template.cloneNode(true);
+        top_controls.id = 'topcontrols-' + c.id;
+        div.appendChild(top_controls);
+    }
+    let controls = document.getElementById('controls-' + c.id);
+    if (template && !controls) {
+        controls = template.cloneNode(true);
+        controls.id = 'controls-' + c.id;
+        div.appendChild(controls);
+        if(media.muted) {
+            let volume = controls.querySelector(".fa-volume-up");
+            if (volume) {
+                volume.classList.remove("fa-volume-up");
+                volume.classList.add("fa-volume-off");
+            }
+        }
+        let camera = controls.querySelector("span.camera");
+        if (local_media && local_media.kind === "local") {
+            if (!settings.video) {
+                if (camera)
+                    camera.classList.add("camera-off");
+            }
+        } else
+            camera.remove();
+    }
+
     media.srcObject = c.stream;
     setLabel(c);
     setMediaStatus(c);
 
     showVideo();
     resizePeers();
+    registerControlEvent(div.id);
 }
 
+/**
+ * @param {HTMLVideoElement} video
+ */
+async function videoPIP(video) {
+    if (video.requestPictureInPicture) {
+        await video.requestPictureInPicture();
+    } else {
+        displayWarning("Video PIP Mode not supported!");
+    }
+}
+
+/**
+ * @param {HTMLElement} target
+ */
+function getParentVideo(target) {
+    // target is the <i> element, parent the div <div><span><i/></span></div>
+    let control = target.parentElement.parentElement;
+    let id = control.id.split('-')[1];
+    let media = /** @type {HTMLVideoElement} */
+        (document.getElementById('media-' + id));
+    if (!media) {
+        displayError("Cannot find media!");
+    }
+    return media;
+}
+
+/**
+ * @param {string} peerid
+ */
+function registerControlEvent(peerid) {
+  let settings = getSettings();
+  let peer = document.getElementById(peerid);
+  //Add event listener when a video component is added to the DOM
+  peer.querySelector("span.volume").onclick = function(event) {
+      event.preventDefault();
+      let video = getParentVideo(event.target);
+      if (event.target.className.indexOf("fa-volume-off") !== -1) {
+          event.target.classList.remove("fa-volume-off");
+          event.target.classList.add("fa-volume-up");
+          video.muted = false;
+      } else {
+          event.target.classList.remove("fa-volume-up");
+          event.target.classList.add("fa-volume-off");
+          // mute video sound
+          video.muted = true;
+      }
+  };
+
+  peer.querySelector("span.pip").onclick = function(event) {
+      event.preventDefault();
+      let video = getParentVideo(event.target);
+      videoPIP(video);
+  };
+
+  peer.querySelector("span.fullscreen").onclick = function(event) {
+      event.preventDefault();
+      let video = getParentVideo(event.target);
+      if (video.requestFullscreen) {
+          video.requestFullscreen();
+      } else {
+          displayWarning("Video Fullscreen not supported!");
+      }
+  };
+
+  let camera = peer.querySelector("span.camera");
+  if (camera) {
+      peer.querySelector("span.camera").onclick = function(event) {
+          event.preventDefault();
+          let video = getParentVideo(event.target);
+          let id = video.id.split("-")[1];
+          if (!settings.video)
+              return;
+          if (event.target.getAttribute("data-type") === "bt-camera") {
+              addLocalMedia(id, true);
+              event.target.setAttribute("data-type", "bt-camera-off");
+              event.target.parentElement.classList.add("disabled");
+          } else {
+              event.target.setAttribute("data-type", "bt-camera");
+              event.target.parentElement.classList.remove("disabled");
+              addLocalMedia(id);
+          }
+      };
+  }
+}
+
+
 /**
  * @param {string} id
  */
@@ -1046,6 +1185,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;
@@ -1054,24 +1196,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 rows = Math.ceil(count / columns);
+    let margins = (rows - 1) * 5 + 40;
 
-    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 (count === 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)`;
     }
 }
 
@@ -1248,8 +1395,9 @@ function formatLines(lines) {
 function formatTime(time) {
     let delta = Date.now() - time;
     let date = new Date(time);
+    let m = date.getMinutes();
     if(delta > -30000)
-        return date.toTimeString().slice(null, 8);
+        return date.getHours() + ':' + ((m < 10) ? '0' : '') + m;
     return date.toLocaleString();
 }
 
@@ -1277,6 +1425,8 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
     let container = document.createElement('div');
     container.classList.add('message');
     row.appendChild(container);
+    let footer = document.createElement('p');
+    footer.classList.add('message-footer');
     if(!peerId)
         container.classList.add('message-system');
     if(userpass.username === nick)
@@ -1296,20 +1446,21 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
                 (nick || '(anon)');
             user.classList.add('message-user');
             header.appendChild(user);
+            header.classList.add('message-header');
+            container.appendChild(header);
             if(time) {
                 let tm = document.createElement('span');
                 tm.textContent = formatTime(time);
                 tm.classList.add('message-time');
                 header.appendChild(tm);
             }
-            header.classList.add('message-header');
-            container.appendChild(header);
         }
         p.classList.add('message-content');
         container.appendChild(p);
         lastMessage.nick = (nick || null);
         lastMessage.peerId = peerId;
         lastMessage.dest = (dest || null);
+        container.appendChild(footer);
     } else {
         let asterisk = document.createElement('span');
         asterisk.textContent = '*';
@@ -1540,6 +1691,11 @@ function chatResizer(e) {
 
     function start_drag(e) {
         let left_width = (start_width + e.clientX - start_x) * 100 / full_width;
+        // set min chat width to 300px
+        let min_left_width = 300 * 100 / full_width;
+        if (left_width < min_left_width) {
+          return;
+        }
         left.style.flex = left_width.toString();
         right.style.flex = (100 - left_width).toString();
     }
@@ -1667,6 +1823,12 @@ document.getElementById('collapse-video').onclick = function(e) {
     if(!(this instanceof HTMLElement))
         throw new Error('Unexpected type for this');
     let width = window.innerWidth;
+    let left = document.getElementById("left");
+    if (left.style.display === "" || left.style.display === "none") {
+      //left chat is hidden, we show the chat and hide collapse button
+      left.style.display = "block";
+      this.style.display = "";
+    }
     if (width <= 768) {
       let user_box = document.getElementById('userDropdown');
       if (user_box.classList.contains("show")) {
@@ -1688,6 +1850,13 @@ document.getElementById('switch-video').onclick = function(e) {
     document.getElementById('collapse-video').style.display = "block";
 };
 
+document.getElementById('close-chat').onclick = function(e) {
+  e.preventDefault();
+  let left = document.getElementById("left");
+  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") {