Hide peers with no video by default.

Now that we have an indicator in the users list, it is reasonable
to hide audio-ony peers by default.

static/galene.css

@@ -905,6 +905,10 @@ h1 {
     border: 2px solid #610a86;
 }
 
+.peer-hidden {
+    display: none;
+}
+
 .media {
     width: 100%;
     max-height: calc(var(--vh, 1vh) * 100 - 76px);

static/galene.html

@@ -242,6 +242,10 @@
             <label for="activitybox">Activity detection</label>
           </form>
 
+          <form>
+            <input id="displayallbox" type="checkbox"/>
+            <label for="displayallbox">Display audio-only users</label>
+          </form>
         </fieldset>
       </div>
     </div>

static/galene.js

@@ -41,6 +41,7 @@ let token = null;
  * @property {string} [send]
  * @property {string} [request]
  * @property {boolean} [activityDetection]
+ * @property {boolean} [displayAll]
  * @property {Array.<number>} [resolution]
  * @property {boolean} [mirrorView]
  * @property {boolean} [blackboardMode]
@@ -219,6 +220,13 @@ function reflectSettings() {
         store = true;
     }
 
+    if(settings.hasOwnProperty('displayAll')) {
+        getInputElement('displayallbox').checked = settings.displayAll;
+    } else {
+        settings.displayAll = getInputElement('displayallbox').checked;
+        store = true;
+    }
+
     if(settings.hasOwnProperty('preprocessing')) {
         getInputElement('preprocessingbox').checked = settings.preprocessing;
     } else {
@@ -659,6 +667,18 @@ getInputElement('activitybox').onchange = function(e) {
     }
 };
 
+getInputElement('displayallbox').onchange = function(e) {
+    if(!(this instanceof HTMLInputElement))
+        throw new Error('Unexpected type for this');
+    updateSettings({displayAll: this.checked});
+    for(let id in serverConnection.down) {
+        let c = serverConnection.down[id];
+        let elt = document.getElementById('peer-' + c.localId);
+        showHideMedia(c, elt);
+    }
+};
+
+
 /**
  * @this {Stream}
  * @param {Object<string,any>} stats
@@ -1678,16 +1698,17 @@ function scheduleReconsiderDownRate() {
  *       controls will be created.
  */
 async function setMedia(c, mirror, video) {
-    let peersdiv = document.getElementById('peers');
-
     let div = document.getElementById('peer-' + c.localId);
     if(!div) {
         div = document.createElement('div');
         div.id = 'peer-' + c.localId;
         div.classList.add('peer');
+        let peersdiv = document.getElementById('peers');
         peersdiv.appendChild(div);
     }
 
+    showHideMedia(c, div)
+
     let media = /** @type {HTMLVideoElement} */
         (document.getElementById('media-' + c.localId));
     if(!media) {
@@ -1745,6 +1766,29 @@ async function setMedia(c, mirror, video) {
     }
 }
 
+
+/**
+ * @param {Stream} c
+ * @param {HTMLElement} elt
+ */
+function showHideMedia(c, elt) {
+    let display = c.up || getSettings().displayAll;
+    if(!display && c.stream) {
+        let tracks = c.stream.getTracks();
+        for(let i = 0; i < tracks.length; i++) {
+            let t = tracks[i];
+            if(t.kind === 'video') {
+                display = true;
+                break;
+            }
+        }
+    }
+    if(display)
+        elt.classList.remove('peer-hidden');
+    else
+        elt.classList.add('peer-hidden');
+}
+
 /**
  * resetMedia resets the source stream of the media element associated
  * with c.  This has the side-effect of resetting any frozen frames.