diff --git a/static/sfu.css b/static/sfu.css index e811ef7..0d5df13 100644 --- a/static/sfu.css +++ b/static/sfu.css @@ -403,7 +403,7 @@ textarea.form-reply { .top-video-controls { text-align: right; bottom: inherit; - top: 0; + top: 5px; } .peer:hover > .video-controls, .peer:hover > .top-video-controls { @@ -434,6 +434,11 @@ textarea.form-reply { text-align: center; } +.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{ + opacity: .2; + color: #c8c8c8 +} + .mobile-container { display: block !important; } @@ -1045,7 +1050,7 @@ header .collapse { .collapse-video { left: inherit; - right: 10px; + right: 60px; } .close-chat { diff --git a/static/sfu.html b/static/sfu.html index 529c1dd..56d34b1 100644 --- a/static/sfu.html +++ b/static/sfu.html @@ -201,20 +201,23 @@ + + + - - - diff --git a/static/sfu.js b/static/sfu.js index 0b7838d..8c9e8fd 100644 --- a/static/sfu.js +++ b/static/sfu.js @@ -239,6 +239,11 @@ function hideVideo(force) { return; let video_container = document.getElementById('video-container'); video_container.classList.add('no-video'); + let left = document.getElementById("left"); + if (left.style.display !== "none") { + // hide all video buttons used to switch video on mobile layout + closeVideoControls(); + } } function closeVideoControls() { @@ -743,15 +748,18 @@ async function setMaxVideoThroughput(c, bps) { /** * @param {string} [id] + * @param {boolean} [disableVideo] */ -async function addLocalMedia(id) { +async function addLocalMedia(id, disableVideo) { if(!getUserPass()) return; let settings = getSettings(); let audio = settings.audio ? {deviceId: settings.audio} : false; - let video = settings.video ? {deviceId: settings.video} : false; + let video = false; + if (!disableVideo) + video = settings.video ? {deviceId: settings.video} : false; if(audio) { if(settings.studioMode) { @@ -937,6 +945,14 @@ function muteLocalTracks(mute) { */ function setMedia(c, isUp) { let peersdiv = document.getElementById('peers'); + let settings = getSettings(); + let local_media; + + for(let id in serverConnection.up) { + if (id === c.id) { + local_media = serverConnection.up[id]; + } + } let div = document.getElementById('peer-' + c.id); if(!div) { @@ -974,24 +990,32 @@ function setMedia(c, isUp) { let top_template = document.getElementById('top-videocontrols-template') .firstElementChild; - let top_controls = document.getElementById('top-controls-' + c.id); + let top_controls = document.getElementById('topcontrols-' + c.id); if (template && !top_controls) { - top_controls = top_template.cloneNode(true); - top_controls.id = 'top-controls-' + c.id; - div.appendChild(top_controls); + top_controls = top_template.cloneNode(true); + top_controls.id = 'topcontrols-' + c.id; + div.appendChild(top_controls); } 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"); + 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"); + } } - } + let camera = controls.querySelector("span.camera"); + if (local_media && local_media.kind === "local") { + if (!settings.video) { + if (camera) + camera.classList.add("camera-off"); + } + } else + camera.remove(); } media.srcObject = c.stream; @@ -1020,9 +1044,9 @@ async function videoPIP(video) { function getParentVideo(target) { // target is the element, parent the div
let control = target.parentElement.parentElement; - let hash = control.id.split('-')[1]; + let id = control.id.split('-')[1]; let media = /** @type {HTMLVideoElement} */ - (document.getElementById('media-' + hash)); + (document.getElementById('media-' + id)); if (!media) { displayError("Cannot find media!"); } @@ -1033,9 +1057,11 @@ function getParentVideo(target) { * @param {string} peerid */ function registerControlEvent(peerid) { + let settings = getSettings(); let peer = document.getElementById(peerid); //Add event listener when a video component is added to the DOM peer.querySelector("span.volume").onclick = function(event) { + event.preventDefault(); let video = getParentVideo(event.target); if (event.target.className.indexOf("fa-volume-off") !== -1) { event.target.classList.remove("fa-volume-off"); @@ -1050,11 +1076,13 @@ function registerControlEvent(peerid) { }; peer.querySelector("span.pip").onclick = function(event) { + event.preventDefault(); let video = getParentVideo(event.target); videoPIP(video); }; peer.querySelector("span.fullscreen").onclick = function(event) { + event.preventDefault(); let video = getParentVideo(event.target); if (video.requestFullscreen) { video.requestFullscreen(); @@ -1063,8 +1091,21 @@ function registerControlEvent(peerid) { } }; - peer.querySelector("span.expand").onclick = function(event) { - console.log("Not implemented for now!!"); + peer.querySelector("span.camera").onclick = function(event) { + event.preventDefault(); + let video = getParentVideo(event.target); + let id = video.id.split("-")[1]; + if (!settings.video) + return; + if (event.target.getAttribute("data-type") === "bt-camera") { + addLocalMedia(id, true); + event.target.setAttribute("data-type", "bt-camera-off"); + event.target.parentElement.classList.add("disabled"); + } else { + event.target.setAttribute("data-type", "bt-camera"); + event.target.parentElement.classList.remove("disabled"); + addLocalMedia(id); + } }; } @@ -1797,6 +1838,7 @@ document.getElementById('switch-video').onclick = function(e) { document.getElementById('close-chat').onclick = function(e) { e.preventDefault(); + let left = document.getElementById("left"); left.style.display = "none"; document.getElementById('collapse-video').style.display = "block"; };