Update video peer component when no video is streamed

This is to support audio only feature.
If user disable camera, we show the caller username in the video screen.
If down stream has no video, we also update video area with caller username.

static/sfu.css

@@ -400,6 +400,10 @@ textarea.form-reply {
     opacity: 0;
 }
 
+.video-controls-audio {
+    bottom: 0;
+}
+
 .top-video-controls {
   text-align: right;
   bottom: inherit;
@@ -438,8 +442,24 @@ textarea.form-reply {
 }
 
 .video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
-    opacity: .2;
-    color: #c8c8c8
+    opacity: .5;
+    color: #e1e1e2;
+    pointer-events: none;
+}
+
+
+.video-user {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50% , -50%);
+}
+
+.video-user h2 {
+    color: #b1b9c6;
+    font-size: 2em;
+    text-align: center;
+    vertical-align: middle;
 }
 
 .mobile-container {
@@ -720,7 +740,7 @@ h1 {
     margin-top: auto;
     margin-bottom: auto;
     position: relative;
-    border: 2px solid rgba(0,0,0,0);
+    border: 2px solid rgb(22 21 21);
     background: #80808014;
 }
 

static/sfu.js

@@ -1008,12 +1008,20 @@ function muteLocalTracks(mute) {
 function setMedia(c, isUp, video) {
     let peersdiv = document.getElementById('peers');
     let local_media;
+    let down_media;
+    let audioMode = false;
 
     for(let id in serverConnection.up) {
         if (id === c.id) {
           local_media = serverConnection.up[id];
+          audioMode = !local_media.stream.getVideoTracks().length;
         }
     }
+    if(!isUp) {
+        down_media = serverConnection.down[c.id];
+        if(down_media)
+            audioMode = !down_media.stream.getVideoTracks().length;
+    }
 
     let div = document.getElementById('peer-' + c.id);
     if(!div) {
@@ -1067,29 +1075,34 @@ function setMedia(c, isUp, video) {
             controls = /** @type{HTMLElement} */(template.cloneNode(true));
             controls.id = 'controls-' + c.id;
             div.appendChild(controls);
-            let volume = controls.querySelector(".fa-volume-up");
-            if(media.muted) {
-                if (volume) {
-                    volume.classList.remove("fa-volume-up");
-                    volume.classList.add("fa-volume-off");
-                }
-            }
-            if(local_media)
-                if(local_media.kind === "local")
-                    volume.parentElement.remove();
-                else if (local_media.kind === "screenshare") {
-                    let stop = controls.querySelector(".stopsharing");
-                    stop.classList.remove('invisible');
-                    volume.parentElement.remove();
-                }
         }
 
+        // If there is no video, make this div visible
+        let audiodiv = document.getElementById('audio-' + c.id);
+        if(!audiodiv) {
+            audiodiv = document.createElement('div');
+            let h2 = document.createElement('h2');
+            audiodiv.id = 'audio-' + c.id;
+            audiodiv.classList.add('video-user');
+            h2.innerText = (local_media) ? getUsername() :
+                (down_media) ? down_media.label : "Audio";
+            audiodiv.appendChild(h2);
+            div.appendChild(audiodiv);
+        }
+
+        // update video controls button when parameters changes.
+        updateControlStatus(
+            c.id,
+            isUp,
+            (local_media && local_media.kind === "screenshare"),
+            audioMode,
+            media.muted);
+
         media.srcObject = c.stream;
     }
 
     setLabel(c);
     setMediaStatus(c);
-
     showVideo();
     resizePeers();
     registerControlEvent(div.id);
@@ -1123,6 +1136,55 @@ function getParentVideo(target) {
     return media;
 }
 
+/**
+ * @param {string} id
+ * @param {boolean} isLocal
+ * @param {boolean} shared
+ * @param {boolean} audioMode
+ * @param {boolean} muted
+ */
+function updateControlStatus(id, isLocal, shared, audioMode, muted) {
+    let peer = document.getElementById('peer-' + id);
+    let volume = peer.querySelector("span.volume");
+    let pip = peer.querySelector("span.pip");
+    let fullscreen = peer.querySelector("span.fullscreen");
+    let stopsharing = peer.querySelector(".stopsharing");
+    let audiodiv = document.getElementById('audio-' + id);
+
+    if(muted) {
+        if(volume) {
+            let volume_i = volume.querySelector(".fa-volume-up");
+            volume_i.classList.remove("fa-volume-up");
+            volume_i.classList.add("fa-volume-off");
+        }
+    }
+
+    if(isLocal) {
+        if(volume)
+            volume.remove();
+        if(shared)
+            // make stop shared button visible
+            stopsharing.classList.remove('invisible');
+    }
+    let label = document.getElementById('label-' + id);
+    if(audioMode) {
+        // No video is streamed
+        pip.classList.add('disabled');
+        fullscreen.classList.add('disabled');
+        audiodiv.classList.remove('invisible');
+        if(!isLocal) {
+            // label will be displayed elsewhere in audiodiv
+            label.classList.add('invisible');
+        }
+    } else {
+      // make sure button will be visbile when video is enabled
+      pip.classList.remove('disabled');
+      fullscreen.classList.remove('disabled');
+      audiodiv.classList.add('invisible');
+      label.classList.remove('invisible');
+    }
+}
+
 /**
  * @param {string} peerid
  */
@@ -1197,7 +1259,6 @@ function registerControlEvent(peerid) {
     }
 }
 
-
 /**
  * @param {string} id
  */