improve html interface, add custom controls for video

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 {
@@ -192,7 +192,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 +204,7 @@
 }
 
 .users-header {
-    height: 4rem;
+    height: 3.5rem;
     padding: 10px;
     background: #610a86;
     font-size: .95rem;
@@ -221,7 +221,7 @@
 }
 
 .reply {
-    height: 60px;
+    height: 53px;
     width: 100%;
     background-color: #eae7e5;
     padding: 10px 5px 10px 5px;
@@ -242,7 +242,7 @@
 }
 
 textarea.form-reply {
-    height: 2.6em;
+    height: 2.1em;
     margin-right: .5em;
 }
 
@@ -290,7 +290,7 @@ textarea.form-reply {
     word-wrap: break-word;
     display: inline-block;
     margin: 1em 0 0;
-    max-width: 80%;
+    max-width: 90%;
 }
 
 .message-sender {
@@ -345,7 +345,7 @@ 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 */
@@ -376,12 +376,52 @@ textarea.form-reply {
     opacity: 0;
 }
 
+.video-controls {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 40px;
+    text-align: center;
+    color: #e1e1e1;
+    font-size: 2.3em;
+    transition: all .5s ease-out;
+    opacity: 0;
+}
+
+.peer:hover > .video-controls {
+    opacity: 1;
+    transition: all .7s ease-out;
+}
+
+.video-controls span {
+    margin-right: 30px;
+    transition: all .5s ease-out;
+    opacity: .5;
+    cursor: pointer;
+    text-shadow: 2px 2px 4px rgba(123, 123, 123, 0.65);
+}
+
+.video-controls span:last-child {
+    margin-right: 0;
+}
+
+.video-controls span:hover {
+    opacity: 1;
+    transition: opacity .5s ease-out;
+}
+
+.video-controls .volume {
+    width: 44px;
+    display: inline-block;
+    text-align: center;
+}
+
 .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;
 }
@@ -566,6 +606,7 @@ h1 {
     /* force to fill height */
     height: 100% !important;
     min-width: 300px;
+    overflow: hidden;
 }
 
 #inputform {
@@ -574,7 +615,7 @@ h1 {
 
 #box {
     overflow: auto;
-    height: calc(100% - 60px);
+    height: calc(100% - 53px);
     padding: 10px;
 }
 
@@ -641,7 +682,8 @@ h1 {
 
 .media {
     width: 100%;
-    max-height: calc(var(--vh, 1vh) * 100 - 84px);
+    min-width: 220px; /* min-size for controls buttons */
+    max-height: calc(var(--vh, 1vh) * 100 - 76px);
     padding-bottom: 20px;
     object-fit: contain;
 }
@@ -672,13 +714,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 +731,8 @@ h1 {
     cursor: pointer;
     position: absolute;
     top: 0;
-    right: 5px;
+    right: 0;
+    height: 56px;
 }
 
 .sidenav label{
@@ -702,12 +745,16 @@ h1 {
     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 {
@@ -841,13 +888,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 {
@@ -934,14 +982,6 @@ header .collapse {
         display: none;
     }
 
-    .topnav {
-        height: 3.5rem;
-    }
-
-    .users-header {
-        height: 3.5rem;
-    }
-
     .full-width {
         height: calc(var(--vh, 1vh) * 100 - 56px);
     }
@@ -955,6 +995,10 @@ header .collapse {
         margin-bottom: 60px;
     }
 
+    .video-controls {
+        opacity: 1;
+    }
+
     .login-container {
         position: fixed;
         height: calc(var(--vh, 1vh) * 100 - 56px);
@@ -1010,6 +1054,8 @@ header .collapse {
         display: block;
     }
 
+    .sidenav a {padding: 10px 5px;}
+
     .sidenav-header h2 {
         line-height: 36px;
     }

static/sfu.html

@@ -186,6 +186,14 @@
       </div>
     </div>
 
+    <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="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>
+      </div>
+    </div>
+
     <script src="/protocol.js" defer></script>
     <script src="/scripts/toastify.js" defer></script>
     <script src="/sfu.js" defer></script>

static/sfu.js

@@ -953,7 +953,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);
@@ -967,14 +967,99 @@ function setMedia(c, isUp) {
         div.appendChild(label);
     }
 
+    let template = document.getElementById('videocontrols-template').firstElementChild;
+    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");
+        }
+      }
+    }
+
     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 hash = control.id.split('-')[1];
+    let media = /** @type {HTMLVideoElement} */
+        (document.getElementById('media-' + hash));
+    if (!media) {
+        displayWarning("Cannot find media!");
+    }
+    return media;
+}
+
+/**
+ * @param {string} peerid
+ */
+function registerControlEvent(peerid) {
+  let peer = document.getElementById(peerid);
+  let control_list = peer.querySelectorAll("span");
+
+  function control_event(event) {
+      event.preventDefault();
+      let control_type = event.target.getAttribute("data-type");
+      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;
+      }
+  }
+
+  for (let i = 0; i < control_list.length; i += 1) {
+    control_list[i].onclick = control_event;
+  }
+}
+
+
 /**
  * @param {string} id
  */