1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-26 02:25: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 {
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 {

View file

@ -201,20 +201,23 @@
<span class="volume" title="Volume">
<i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
</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">
<i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
<i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i>
</span>
</div>
</div>
<div id="top-videocontrols-template" class="invisible">
<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>
</span>
<span class="fullscreen" title="Fullscreen">
<i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i>
</span>
</div>
</div>

View file

@ -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,10 +990,10 @@ 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;
top_controls.id = 'topcontrols-' + c.id;
div.appendChild(top_controls);
}
let controls = document.getElementById('controls-' + c.id);
@ -992,6 +1008,14 @@ function setMedia(c, isUp) {
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 <i> element, parent the div <div><span><i/></span></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";
};