allow to hide chat, improve settings bar and others

static/sfu.css

@@ -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 */
@@ -277,7 +282,6 @@ textarea.form-reply {
 
 .select-inline {
     display: inline-block;
-    width: inherit;
 }
 
 .message {
@@ -291,10 +295,11 @@ textarea.form-reply {
     display: inline-block;
     margin: 1em 0 0;
     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;
-    padding: 5px !important;
+    margin: 0;
+    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;
 }
@@ -350,17 +364,16 @@ textarea.form-reply {
     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;
   /*on top of video peers*/
   z-index: 1002;
-  position: fixed;
-  top: 70px;
-  right: 10px;
+  position: absolute;
+  top: 5px;
+  left: 10px;
+  cursor: pointer;
 }
 
 .collapse-video .open-chat {
@@ -368,12 +381,11 @@ textarea.form-reply {
     height: 60px;
     fill: #fff;
     padding: 10px;
+    fill: #b8b8b8;
 }
 
 .no-video {
     display: none;
-    transition: opacity 1s ease-out;
-    opacity: 0;
 }
 
 .video-controls {
@@ -381,9 +393,9 @@ textarea.form-reply {
     width: 100%;
     left: 0;
     bottom: 40px;
-    text-align: center;
+    text-align: right;
     color: #e1e1e1;
-    font-size: 2.3em;
+    font-size: 1.8em;
     transition: all .5s ease-out;
     opacity: 0;
 }
@@ -394,7 +406,7 @@ textarea.form-reply {
 }
 
 .video-controls span {
-    margin-right: 30px;
+    margin-right: 20px;
     transition: all .5s ease-out;
     opacity: .5;
     cursor: pointer;
@@ -402,7 +414,7 @@ textarea.form-reply {
 }
 
 .video-controls span:last-child {
-    margin-right: 0;
+    /*margin-right: 0;*/
 }
 
 .video-controls span:hover {
@@ -411,7 +423,7 @@ textarea.form-reply {
 }
 
 .video-controls .volume {
-    width: 44px;
+    width: 25px;
     display: inline-block;
     text-align: center;
 }
@@ -598,14 +610,15 @@ h1 {
 #chat {
     padding: 0;
     margin: 0;
-    background-color: #f9f9f9;
+    background-color: #f4f4f4;
     background-size: cover;
     overflow-y: scroll;
     border: none;
     border-right: 4px solid #e6e6e6;
     /* force to fill height */
     height: 100% !important;
-    min-width: 300px;
+    width: 100%;
+    min-width: 200px;
     overflow: hidden;
 }
 
@@ -740,6 +753,10 @@ h1 {
     margin-top: 15px;
 }
 
+.sidenav .label-first {
+    margin-top: 0;
+}
+
 .sidenav form{
     display: block;
     margin-top: 15px;
@@ -758,7 +775,7 @@ h1 {
 }
 
 .sidenav-content {
-    padding: 20px;
+    padding: 10px;
     background: #fff;
     height: 100%;
 }
@@ -767,6 +784,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;
@@ -828,7 +857,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);
@@ -962,11 +991,6 @@ header .collapse {
 
 /* END Sidebar Left */
 
-@media screen and (max-height: 450px) {
-    .sidenav-content {padding: 10px;}
-    .sidenav a {font-size: 18px;}
-}
-
 /*@media only screen and (max-width: 768px) {*/
 @media only screen and (max-device-width: 768px) {
     .nav-link {
@@ -1019,6 +1043,7 @@ header .collapse {
 
     .coln-right {
         flex: none;
+        position: relative;
     }
 
     .full-width {

static/sfu.html

@@ -114,7 +114,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 +145,51 @@
         <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">
-          <label for="videoselect">Camera:</label>
-          <select id="videoselect" class="select select-inline">
-            <option value="">off</option>
-          </select>
+        <div id="mediaoptions" class="invisible">
+          <fieldset>
+            <legend>Media Options</legend>
+            <label for="videoselect" class="label-first">Camera:</label>
+            <select id="videoselect" class="select select-inline">
+              <option value="">off</option>
+            </select>
+  
+            <label for="audioselect">Microphone:</label>
+            <select id="audioselect" class="select select-inline">
+              <option value="">off</option>
+            </select>
+  
+            <form>
+              <input id="blackboardbox" type="checkbox">Blackboard mode</input>
+            </form>
+  
+            <form>
+              <input id="studiobox" type="checkbox">Studio mode</input>
+            </form>
+          </fieldset>
+        </div>
 
-          <label for="audioselect">Microphone:</label>
-          <select id="audioselect" class="select select-inline">
-            <option value="">off</option>
+        <fieldset>
+          <legend>Others Settings</legend>
+          <label for="sendselect" class="label-first">Send:</label>
+          <select id="sendselect" class="select select-inline">
+            <option value="lowest">lowest</option>
+            <option value="low">low</option>
+            <option value="normal" selected>normal</option>
+            <option value="unlimited">unlimited</option>
           </select>
-
-          <form>
-            <input id="blackboardbox" type="checkbox">Blackboard mode</input>
-          </form>
-
+  
+          <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="studiobox" type="checkbox">Studio mode</input>
+            <input id="activitybox" type="checkbox">Activity detection</input>
           </form>
-
-        </div>
-
-        <label for="sendselect">Send:</label>
-        <select id="sendselect" class="select select-inline">
-          <option value="lowest">lowest</option>
-          <option value="low">low</option>
-          <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>
 
@@ -190,7 +197,8 @@
       <div class="video-controls">
         <span class="volume"><i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i></span>
         <span class="pip"><i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i></span>
-        <span class="fullscreen"><i class="fa fa-arrows-alt" data-type="bt-fullscreen" aria-hidden="true"></i></span>
+        <span class="expand"><i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i></span>
+        <span class="fullscreen"><i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i></span>
       </div>
     </div>
 

static/sfu.js

@@ -1012,7 +1012,7 @@ function getParentVideo(target) {
     let media = /** @type {HTMLVideoElement} */
         (document.getElementById('media-' + hash));
     if (!media) {
-        displayWarning("Cannot find media!");
+        displayError("Cannot find media!");
     }
     return media;
 }
@@ -1022,41 +1022,38 @@ function getParentVideo(target) {
  */
 function registerControlEvent(peerid) {
   let peer = document.getElementById(peerid);
-  let control_list = peer.querySelectorAll("span");
+  //Add event listener when a video component is added to the DOM
+  peer.querySelector("span.volume").onclick = function(event) {
+      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) {
+      let video = getParentVideo(event.target);
+      videoPIP(video);
+  };
 
-  function control_event(event) {
-      event.preventDefault();
-      let control_type = event.target.getAttribute("data-type");
+  peer.querySelector("span.fullscreen").onclick = function(event) {
       let video = getParentVideo(event.target);
-      switch (control_type) {
-          case "bt-volume":
-              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;
-              }
-              break;
-          case "bt-pip":
-              videoPIP(video);
-              break;
-          case "bt-fullscreen":
-              if (video.requestFullscreen) {
-                  video.requestFullscreen();
-              } else {
-                  displayWarning("Video Fullscreen not supported!");
-              }
-              break;
+      if (video.requestFullscreen) {
+          video.requestFullscreen();
+      } else {
+          displayWarning("Video Fullscreen not supported!");
       }
-  }
+  };
 
-  for (let i = 0; i < control_list.length; i += 1) {
-    control_list[i].onclick = control_event;
-  }
+  peer.querySelector("span.expand").onclick = function(event) {
+      console.log("Not implemented for now!!");
+  };
 }
 
 
@@ -1370,12 +1367,6 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
                 (nick || '(anon)');
             user.classList.add('message-user');
             header.appendChild(user);
-            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);
         }
@@ -1403,6 +1394,17 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
         lastMessage = {};
     }
 
+    if(time) {
+        let tm = document.createElement('span');
+        let datetime = new Date(time);
+        tm.textContent = datetime.getHours() + ':' + datetime.getMinutes();
+        tm.classList.add('message-time');
+        let footer = document.createElement('p');
+        footer.classList.add('message-footer');
+        footer.appendChild(tm);
+        container.appendChild(footer);
+    }
+
     let box = document.getElementById('box');
     box.appendChild(row);
     if(box.scrollHeight > box.clientHeight) {
@@ -1614,6 +1616,13 @@ 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
+        let min_left_width = 200 * 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();
         right.style.flex = (100 - left_width).toString();
     }
@@ -1741,6 +1750,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")) {