From 640fbb8107d933c10617683ca2e9f70e9d114e5c Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <alain.takoudjou@nexedi.com>
Date: Wed, 9 Sep 2020 20:26:19 +0200
Subject: [PATCH] more improvement on design

---
 static/sfu.css  | 69 ++++++++++++++++++++++++++------------
 static/sfu.html | 10 +++++-
 static/sfu.js   | 89 +++++++++++++++++++++++++++++++------------------
 3 files changed, 113 insertions(+), 55 deletions(-)

diff --git a/static/sfu.css b/static/sfu.css
index e0d0ea2..b405490 100644
--- a/static/sfu.css
+++ b/static/sfu.css
@@ -187,12 +187,12 @@
 }
 
 .full-height {
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
 }
 
 .full-width {
     width: calc(100vw - 200px);
-    height: calc(100vh - 64px);
+    height: calc(var(--vh, 1vh) * 100 - 64px);
 }
 
 .full-width-active {
@@ -322,15 +322,31 @@ textarea.form-reply {
 }
 
 .video-container {
-    height: calc(100vh - 64px);
+    height: calc(var(--vh, 1vh) * 100 - 64px);
     position: relative;
-    background: rgba(0, 0, 0, 0.61);
+    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;
+}
+
+.collapse-video .open-chat {
+    color: #fff;
+    height: 60px;
+    fill: #fff;
+    padding: 10px;
+}
+
 .no-video {
     display: none;
     transition: opacity 1s ease-out;
@@ -342,14 +358,14 @@ textarea.form-reply {
 }
 
 .login-container {
-    height: calc(100vh - 64px);
+    height: calc(var(--vh, 1vh) * 100 - 64px);
     position: relative;
     display: block;
 }
 
 .login-box {
     position: absolute;
-    top: 90px;
+    top: 15%;
     left: 25%;
     width: 21em;
     padding: 2em;
@@ -422,7 +438,7 @@ textarea.form-reply {
     margin: 0;
     font-size: 1rem;
     font-weight: 700;
-    color: #cecece;
+    color: #ebebeb;
     line-height: 2em;
 }
 
@@ -578,7 +594,7 @@ h1 {
     grid-template-columns: repeat(1, 1fr);
     grid-template-rows: repeat(1, auto);
     row-gap: 0;
-    column-gap: 20px;
+    column-gap: 10px;
     position: absolute;
     top: 0;
     right: 0; 
@@ -594,13 +610,15 @@ h1 {
 
 .peer {
     margin-top: auto;
+    margin-bottom: auto;
     position: relative;
 }
 
 .media {
     width: 100%;
-    max-height: calc(100vh - 84px);
+    max-height: calc(var(--vh, 1vh) * 100 - 84px);
     padding-bottom: 20px;
+    object-fit: contain;
 }
 
 .media-failed {
@@ -622,10 +640,9 @@ h1 {
     z-index: 2999;
     top: 0;
     right: 0;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     overflow-x: hidden;
     overflow-y: hidden;
-    padding-top: 64px;
 }
 
 .sidenav a {
@@ -635,6 +652,7 @@ h1 {
     color: #dbd9d9;
     display: block;
     transition: 0.3s;
+    line-height: 1.4;
 }
 
 .sidenav a:hover {
@@ -645,8 +663,7 @@ h1 {
     cursor: pointer;
     position: absolute;
     top: 0;
-    right: 25px;
-    margin-left: 50px;
+    right: 5px;
 }
 
 .sidenav label{
@@ -654,9 +671,12 @@ h1 {
     margin-top: 15px;
 }
 
-.sidenav-header {
-    border-bottom: 1px solid #e6e6e6;
-    background: #eee;
+.sidenav-header h2{
+    color: #fff;
+    padding: 10px;
+    margin: 0;
+    max-width: 70%;
+    line-height: 44px;
 }
 
 .sidenav-content {
@@ -671,6 +691,7 @@ h1 {
 
 .nav-menu {
     margin: 0;
+    padding: 0;
 }
 
 .nav-menu li {
@@ -881,7 +902,6 @@ header .colapse {
     }
 
     .video-container {
-        height: calc(100vh - 64px);
         position: fixed;
         top: 64px;
         right: 0;
@@ -890,7 +910,6 @@ header .colapse {
     }
 
     .login-container {
-        height: calc(100vh - 64px);
         position: fixed;
         top: 64px;
         right: 0;
@@ -945,15 +964,23 @@ header .colapse {
     }
 
     #peers {
-      padding: 3px;
+        padding: 3px;
     }
 
     #resizer {
-      display: none;
+        display: none;
+    }
+
+    #chat {
+        border-right: none;
     }
 
     #sharebutton {
-      display: none;
+        display: none;
+    }
+
+    .dropdown-content {
+        margin-top: 14px;
     }
 
 }
diff --git a/static/sfu.html b/static/sfu.html
index e99aba8..df51623 100644
--- a/static/sfu.html
+++ b/static/sfu.html
@@ -105,6 +105,14 @@
             <div id="resizer"></div>
             <div class="coln-right" id="right">
               <span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span>
+              <div class="collapse-video" id="collapse-video">
+                  <svg viewBox="-21 -47 682.66669 682" xmlns="http://www.w3.org/2000/svg" class="open-chat">
+                    <path d="m552.011719-1.332031h-464.023438c-48.515625 0-87.988281 39.464843-87.988281 87.988281v283.972656c0 48.414063 39.300781 87.816406 87.675781 87.988282v128.863281l185.191407-128.863281h279.144531c48.515625 0 87.988281-39.472657 87.988281-87.988282v-283.972656c0-48.523438-39.472656-87.988281-87.988281-87.988281zm50.488281 371.960937c0 27.835938-22.648438 50.488282-50.488281 50.488282h-290.910157l-135.925781 94.585937v-94.585937h-37.1875c-27.839843 0-50.488281-22.652344-50.488281-50.488282v-283.972656c0-27.84375 22.648438-50.488281 50.488281-50.488281h464.023438c27.839843 0 50.488281 22.644531 50.488281 50.488281zm0 0"/>
+                    <path d="m171.292969 131.171875h297.414062v37.5h-297.414062zm0 0"/>
+                    <path d="m171.292969 211.171875h297.414062v37.5h-297.414062zm0 0"/>
+                    <path d="m171.292969 291.171875h297.414062v37.5h-297.414062zm0 0"/>
+                  </svg>
+                </div>
               <div class="video-container no-video" id="video-container">
                 <div id="peers"></div>
               </div>
@@ -131,10 +139,10 @@
 
     <div id="sidebarnav" class="sidenav">
       <div class="sidenav-header">
+        <h2>Settings</h2>
         <a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
       </div>
       <div class="sidenav-content" id="optionsdiv">
-        <h2>Configurations</h2>
         <div id="mediaoptions">
           <label for="videoselect">Camera:</label>
           <select id="videoselect" class="select select-inline">
diff --git a/static/sfu.js b/static/sfu.js
index 661aa06..85e07e8 100644
--- a/static/sfu.js
+++ b/static/sfu.js
@@ -46,8 +46,11 @@ function getUsername() {
 }
 
 function showVideo() {
+    let width = window.innerWidth;
     let video_container = document.getElementById('video-container');
     video_container.classList.remove('no-video');
+    if (width <= 768)
+        document.getElementById('collapse-video').style.display = "block";
 }
 
 function hideVideo(force) {
@@ -60,7 +63,12 @@ function hideVideo(force) {
     }
     let video_container = document.getElementById('video-container');
     video_container.classList.add('no-video');
+}
+
+function closeVideoControls() {
+    // hide all video buttons used to switch video on mobile layout
     document.getElementById('switch-video').style.display = "";
+    document.getElementById('collapse-video').style.display = "";
 }
 
 /**
@@ -95,6 +103,8 @@ function setConnected(connected) {
         connectionbox.classList.remove('invisible');
         clearUsername();
         displayError("Disconnected!", "error");
+        hideVideo();
+        closeVideoControls();
     }
 }
 
@@ -136,6 +146,16 @@ function gotDownStream(c) {
     }
 }
 
+// Store current browser viewport height in css variable
+function setViewportHeight() {
+    document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
+};
+setViewportHeight();
+
+// On resize and orientation change, we update viewport height
+addEventListener('resize', setViewportHeight);
+addEventListener('orientationchange', setViewportHeight);
+
 document.getElementById('presentbutton').onclick = function(e) {
     e.preventDefault();
     addLocalMedia();
@@ -647,20 +667,21 @@ function resizePeers() {
     if (!count)
         // No video, nothing to resize.
         return;
-    let rows = "";
     let size = 100 / columns;
+    let container = document.getElementById("video-container")
     // Peers div has total padding of 30px, we remove 30 on offsetHeight
     let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
-    for(let i = 0; i < columns; i++){
-      rows += size + "% ";
-    }
-    peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
-    peers.style['grid-template-rows'] = rows;
 
     let media_list = document.getElementsByClassName("media");
     [].forEach.call(media_list, function (element) {
-      element.style['max-height'] = max_video_height + "px";
+        element.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)`;
+    }
 }
 
 /** @type{Object.<string,string>} */
@@ -1079,6 +1100,34 @@ document.getElementById('user').onclick = function(e) {
     document.getElementById("userDropdown").classList.toggle("show");
 };
 
+
+document.getElementById('clodeside').onclick = function(e) {
+    e.preventDefault();
+    closeNav();
+};
+
+document.getElementById('collapse-video').onclick = function(e) {
+    e.preventDefault();
+    let width = window.innerWidth;
+    if (width <= 768) {
+      let user_box = document.getElementById('userDropdown');
+      if (user_box.classList.contains("show")) {
+        return;
+      }
+      // fixed div for small screen
+      this.style.display = "";
+      hideVideo(true);
+      document.getElementById('switch-video').style.display = "block";
+    }
+};
+
+document.getElementById('switch-video').onclick = function(e) {
+    e.preventDefault();
+    showVideo();
+    this.style.display = "";
+    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") {
@@ -1093,32 +1142,6 @@ window.onclick = function(event) {
   }
 };
 
-
-document.getElementById('clodeside').onclick = function(e) {
-    e.preventDefault();
-    closeNav();
-};
-
-document.getElementById('video-container').onclick = function(e) {
-    e.preventDefault();
-    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-    if (width <= 768) {
-      let user_box = document.getElementById('userDropdown');
-      if (user_box.classList.contains("show")) {
-        return;
-      }
-      // fixed div for small screen
-      hideVideo(true);
-      document.getElementById('switch-video').style.display = "block";
-    }
-};
-
-document.getElementById('switch-video').onclick = function(e) {
-    e.preventDefault();
-    showVideo();
-    this.style.display = "";
-};
-
 function serverConnect() {
     serverConnection = new ServerConnection();
     serverConnection.onconnected = gotConnected;