diff --git a/static/galene.css b/static/galene.css index ba91d35..035bb3f 100644 --- a/static/galene.css +++ b/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); diff --git a/static/galene.html b/static/galene.html index a8a99e9..ef7408d 100644 --- a/static/galene.html +++ b/static/galene.html @@ -242,6 +242,10 @@ +
+ + +
diff --git a/static/galene.js b/static/galene.js index 4514a44..1c8021e 100644 --- a/static/galene.js +++ b/static/galene.js @@ -41,6 +41,7 @@ let token = null; * @property {string} [send] * @property {string} [request] * @property {boolean} [activityDetection] + * @property {boolean} [displayAll] * @property {Array.} [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} 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.