1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-10 02:35:58 +01:00

allow to disable camera on videoElement

This commit is contained in:
Alain Takoudjou 2020-10-12 12:02:31 +02:00
parent 2e0b195964
commit 2388dfd351
3 changed files with 75 additions and 25 deletions

View file

@ -403,7 +403,7 @@ textarea.form-reply {
.top-video-controls { .top-video-controls {
text-align: right; text-align: right;
bottom: inherit; bottom: inherit;
top: 0; top: 5px;
} }
.peer:hover > .video-controls, .peer:hover > .top-video-controls { .peer:hover > .video-controls, .peer:hover > .top-video-controls {
@ -434,6 +434,11 @@ textarea.form-reply {
text-align: center; text-align: center;
} }
.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
opacity: .2;
color: #c8c8c8
}
.mobile-container { .mobile-container {
display: block !important; display: block !important;
} }
@ -1045,7 +1050,7 @@ header .collapse {
.collapse-video { .collapse-video {
left: inherit; left: inherit;
right: 10px; right: 60px;
} }
.close-chat { .close-chat {

View file

@ -201,20 +201,23 @@
<span class="volume" title="Volume"> <span class="volume" title="Volume">
<i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i> <i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
</span> </span>
<span class="camera" title="Camera">
<i class="fa fa-video-camera" data-type="bt-camera" aria-hidden="true"></i>
</span>
<span class="pip" title="Picture In Picture"> <span class="pip" title="Picture In Picture">
<i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i> <i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i>
</span> </span>
<span class="fullscreen" title="Fullscreen">
<i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i>
</span>
</div> </div>
</div> </div>
<div id="top-videocontrols-template" class="invisible"> <div id="top-videocontrols-template" class="invisible">
<div class="top-video-controls"> <div class="top-video-controls">
<span class="expand" title="Maximize"> <span class="expand invisible" title="Maximize">
<i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i> <i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i>
</span> </span>
<span class="fullscreen" title="Fullscreen">
<i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i>
</span>
</div> </div>
</div> </div>

View file

@ -239,6 +239,11 @@ function hideVideo(force) {
return; return;
let video_container = document.getElementById('video-container'); let video_container = document.getElementById('video-container');
video_container.classList.add('no-video'); 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() { function closeVideoControls() {
@ -743,15 +748,18 @@ async function setMaxVideoThroughput(c, bps) {
/** /**
* @param {string} [id] * @param {string} [id]
* @param {boolean} [disableVideo]
*/ */
async function addLocalMedia(id) { async function addLocalMedia(id, disableVideo) {
if(!getUserPass()) if(!getUserPass())
return; return;
let settings = getSettings(); let settings = getSettings();
let audio = settings.audio ? {deviceId: settings.audio} : false; 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(audio) {
if(settings.studioMode) { if(settings.studioMode) {
@ -937,6 +945,14 @@ function muteLocalTracks(mute) {
*/ */
function setMedia(c, isUp) { function setMedia(c, isUp) {
let peersdiv = document.getElementById('peers'); 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); let div = document.getElementById('peer-' + c.id);
if(!div) { if(!div) {
@ -974,24 +990,32 @@ function setMedia(c, isUp) {
let top_template = document.getElementById('top-videocontrols-template') let top_template = document.getElementById('top-videocontrols-template')
.firstElementChild; .firstElementChild;
let top_controls = document.getElementById('top-controls-' + c.id); let top_controls = document.getElementById('topcontrols-' + c.id);
if (template && !top_controls) { if (template && !top_controls) {
top_controls = top_template.cloneNode(true); top_controls = top_template.cloneNode(true);
top_controls.id = 'top-controls-' + c.id; top_controls.id = 'topcontrols-' + c.id;
div.appendChild(top_controls); div.appendChild(top_controls);
} }
let controls = document.getElementById('controls-' + c.id); let controls = document.getElementById('controls-' + c.id);
if (template && !controls) { if (template && !controls) {
controls = template.cloneNode(true); controls = template.cloneNode(true);
controls.id = 'controls-' + c.id; controls.id = 'controls-' + c.id;
div.appendChild(controls); div.appendChild(controls);
if(media.muted) { if(media.muted) {
let volume = controls.querySelector(".fa-volume-up"); let volume = controls.querySelector(".fa-volume-up");
if (volume) { if (volume) {
volume.classList.remove("fa-volume-up"); volume.classList.remove("fa-volume-up");
volume.classList.add("fa-volume-off"); 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; media.srcObject = c.stream;
@ -1020,9 +1044,9 @@ async function videoPIP(video) {
function getParentVideo(target) { function getParentVideo(target) {
// target is the <i> element, parent the div <div><span><i/></span></div> // target is the <i> element, parent the div <div><span><i/></span></div>
let control = target.parentElement.parentElement; let control = target.parentElement.parentElement;
let hash = control.id.split('-')[1]; let id = control.id.split('-')[1];
let media = /** @type {HTMLVideoElement} */ let media = /** @type {HTMLVideoElement} */
(document.getElementById('media-' + hash)); (document.getElementById('media-' + id));
if (!media) { if (!media) {
displayError("Cannot find media!"); displayError("Cannot find media!");
} }
@ -1033,9 +1057,11 @@ function getParentVideo(target) {
* @param {string} peerid * @param {string} peerid
*/ */
function registerControlEvent(peerid) { function registerControlEvent(peerid) {
let settings = getSettings();
let peer = document.getElementById(peerid); let peer = document.getElementById(peerid);
//Add event listener when a video component is added to the DOM //Add event listener when a video component is added to the DOM
peer.querySelector("span.volume").onclick = function(event) { peer.querySelector("span.volume").onclick = function(event) {
event.preventDefault();
let video = getParentVideo(event.target); let video = getParentVideo(event.target);
if (event.target.className.indexOf("fa-volume-off") !== -1) { if (event.target.className.indexOf("fa-volume-off") !== -1) {
event.target.classList.remove("fa-volume-off"); event.target.classList.remove("fa-volume-off");
@ -1050,11 +1076,13 @@ function registerControlEvent(peerid) {
}; };
peer.querySelector("span.pip").onclick = function(event) { peer.querySelector("span.pip").onclick = function(event) {
event.preventDefault();
let video = getParentVideo(event.target); let video = getParentVideo(event.target);
videoPIP(video); videoPIP(video);
}; };
peer.querySelector("span.fullscreen").onclick = function(event) { peer.querySelector("span.fullscreen").onclick = function(event) {
event.preventDefault();
let video = getParentVideo(event.target); let video = getParentVideo(event.target);
if (video.requestFullscreen) { if (video.requestFullscreen) {
video.requestFullscreen(); video.requestFullscreen();
@ -1063,8 +1091,21 @@ function registerControlEvent(peerid) {
} }
}; };
peer.querySelector("span.expand").onclick = function(event) { peer.querySelector("span.camera").onclick = function(event) {
console.log("Not implemented for now!!"); 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) { document.getElementById('close-chat').onclick = function(e) {
e.preventDefault(); e.preventDefault();
let left = document.getElementById("left");
left.style.display = "none"; left.style.display = "none";
document.getElementById('collapse-video').style.display = "block"; document.getElementById('collapse-video').style.display = "block";
}; };