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:
parent
2e0b195964
commit
2388dfd351
3 changed files with 75 additions and 25 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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";
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue