Commit 3f10b89b authored by Alain Takoudjou's avatar Alain Takoudjou

Update video peer component when no video is streamed

This is to support audio only feature.
If user disable camera, we show the caller username in the video screen.
If down stream has no video, we also update video area with caller username.
parent 29fb5dfc
...@@ -400,6 +400,10 @@ textarea.form-reply { ...@@ -400,6 +400,10 @@ textarea.form-reply {
opacity: 0; opacity: 0;
} }
.video-controls-audio {
bottom: 0;
}
.top-video-controls { .top-video-controls {
text-align: right; text-align: right;
bottom: inherit; bottom: inherit;
...@@ -438,8 +442,24 @@ textarea.form-reply { ...@@ -438,8 +442,24 @@ textarea.form-reply {
} }
.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{ .video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
opacity: .2; opacity: .5;
color: #c8c8c8 color: #e1e1e2;
pointer-events: none;
}
.video-user {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.video-user h2 {
color: #b1b9c6;
font-size: 2em;
text-align: center;
vertical-align: middle;
} }
.mobile-container { .mobile-container {
...@@ -720,7 +740,7 @@ h1 { ...@@ -720,7 +740,7 @@ h1 {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
position: relative; position: relative;
border: 2px solid rgba(0,0,0,0); border: 2px solid rgb(22 21 21);
background: #80808014; background: #80808014;
} }
......
...@@ -1008,12 +1008,20 @@ function muteLocalTracks(mute) { ...@@ -1008,12 +1008,20 @@ function muteLocalTracks(mute) {
function setMedia(c, isUp, video) { function setMedia(c, isUp, video) {
let peersdiv = document.getElementById('peers'); let peersdiv = document.getElementById('peers');
let local_media; let local_media;
let down_media;
let audioMode = false;
for(let id in serverConnection.up) { for(let id in serverConnection.up) {
if (id === c.id) { if (id === c.id) {
local_media = serverConnection.up[id]; local_media = serverConnection.up[id];
audioMode = !local_media.stream.getVideoTracks().length;
} }
} }
if(!isUp) {
down_media = serverConnection.down[c.id];
if(down_media)
audioMode = !down_media.stream.getVideoTracks().length;
}
let div = document.getElementById('peer-' + c.id); let div = document.getElementById('peer-' + c.id);
if(!div) { if(!div) {
...@@ -1067,29 +1075,34 @@ function setMedia(c, isUp, video) { ...@@ -1067,29 +1075,34 @@ function setMedia(c, isUp, video) {
controls = /** @type{HTMLElement} */(template.cloneNode(true)); controls = /** @type{HTMLElement} */(template.cloneNode(true));
controls.id = 'controls-' + c.id; controls.id = 'controls-' + c.id;
div.appendChild(controls); div.appendChild(controls);
let volume = controls.querySelector(".fa-volume-up");
if(media.muted) {
if (volume) {
volume.classList.remove("fa-volume-up");
volume.classList.add("fa-volume-off");
}
}
if(local_media)
if(local_media.kind === "local")
volume.parentElement.remove();
else if (local_media.kind === "screenshare") {
let stop = controls.querySelector(".stopsharing");
stop.classList.remove('invisible');
volume.parentElement.remove();
}
} }
// If there is no video, make this div visible
let audiodiv = document.getElementById('audio-' + c.id);
if(!audiodiv) {
audiodiv = document.createElement('div');
let h2 = document.createElement('h2');
audiodiv.id = 'audio-' + c.id;
audiodiv.classList.add('video-user');
h2.innerText = (local_media) ? getUsername() :
(down_media) ? down_media.label : "Audio";
audiodiv.appendChild(h2);
div.appendChild(audiodiv);
}
// update video controls button when parameters changes.
updateControlStatus(
c.id,
isUp,
(local_media && local_media.kind === "screenshare"),
audioMode,
media.muted);
media.srcObject = c.stream; media.srcObject = c.stream;
} }
setLabel(c); setLabel(c);
setMediaStatus(c); setMediaStatus(c);
showVideo(); showVideo();
resizePeers(); resizePeers();
registerControlEvent(div.id); registerControlEvent(div.id);
...@@ -1123,6 +1136,55 @@ function getParentVideo(target) { ...@@ -1123,6 +1136,55 @@ function getParentVideo(target) {
return media; return media;
} }
/**
* @param {string} id
* @param {boolean} isLocal
* @param {boolean} shared
* @param {boolean} audioMode
* @param {boolean} muted
*/
function updateControlStatus(id, isLocal, shared, audioMode, muted) {
let peer = document.getElementById('peer-' + id);
let volume = peer.querySelector("span.volume");
let pip = peer.querySelector("span.pip");
let fullscreen = peer.querySelector("span.fullscreen");
let stopsharing = peer.querySelector(".stopsharing");
let audiodiv = document.getElementById('audio-' + id);
if(muted) {
if(volume) {
let volume_i = volume.querySelector(".fa-volume-up");
volume_i.classList.remove("fa-volume-up");
volume_i.classList.add("fa-volume-off");
}
}
if(isLocal) {
if(volume)
volume.remove();
if(shared)
// make stop shared button visible
stopsharing.classList.remove('invisible');
}
let label = document.getElementById('label-' + id);
if(audioMode) {
// No video is streamed
pip.classList.add('disabled');
fullscreen.classList.add('disabled');
audiodiv.classList.remove('invisible');
if(!isLocal) {
// label will be displayed elsewhere in audiodiv
label.classList.add('invisible');
}
} else {
// make sure button will be visbile when video is enabled
pip.classList.remove('disabled');
fullscreen.classList.remove('disabled');
audiodiv.classList.add('invisible');
label.classList.remove('invisible');
}
}
/** /**
* @param {string} peerid * @param {string} peerid
*/ */
...@@ -1197,7 +1259,6 @@ function registerControlEvent(peerid) { ...@@ -1197,7 +1259,6 @@ function registerControlEvent(peerid) {
} }
} }
/** /**
* @param {string} id * @param {string} id
*/ */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment