mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-22 16:45:58 +01:00
Code Activity

Use default controls for streamed video.

Browse source
This commit is contained in:
Juliusz Chroboczek 2020-11-24 23:05:43 +01:00
parent 58ba37d8da
commit 6a9ab96902
1 changed files with 57 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
static/sfu.js
View file

@ -892,6 +892,7 @@ async function addFileMedia(file) {
let url = URL.createObjectURL(file); let url = URL.createObjectURL(file);
let video = document.createElement('video'); let video = document.createElement('video');
video.src = url; video.src = url;
video.controls = true;
/** @ts-ignore */ /** @ts-ignore */
let stream = video.captureStream(); let stream = video.captureStream();
@ -1042,42 +1043,43 @@ function setMedia(c, isUp, video) {
div.appendChild(label); div.appendChild(label);
} }
let template = document.getElementById('videocontrols-template') if(!video) {
.firstElementChild; let template = document.getElementById('videocontrols-template')
let top_template = document.getElementById('top-videocontrols-template') .firstElementChild;
.firstElementChild; let top_template = document.getElementById('top-videocontrols-template')
.firstElementChild;
let top_controls = document.getElementById('topcontrols-' + c.id); let top_controls = document.getElementById('topcontrols-' + c.id);
if(template && !top_controls) { if(template && !top_controls) {
top_controls = /** @type{HTMLElement} */(top_template.cloneNode(true)); top_controls = /** @type{HTMLElement} */(top_template.cloneNode(true));
top_controls.id = 'topcontrols-' + c.id; top_controls.id = 'topcontrols-' + c.id;
div.appendChild(top_controls); div.appendChild(top_controls);
}
let controls = document.getElementById('controls-' + c.id);
if(template && !controls) {
controls = /** @type{HTMLElement} */(template.cloneNode(true));
controls.id = 'controls-' + c.id;
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");
}
} }
let camera = controls.querySelector("span.camera"); let controls = document.getElementById('controls-' + c.id);
if (local_media && local_media.kind === "local") { if(template && !controls) {
if (!settings.video) { controls = /** @type{HTMLElement} */(template.cloneNode(true));
if (camera) controls.id = 'controls-' + c.id;
camera.classList.add("camera-off"); 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");
}
} }
volume.parentElement.remove(); let camera = controls.querySelector("span.camera");
} else if (local_media && local_media.kind === "local") {
camera.remove(); if (!settings.video) {
} if (camera)
camera.classList.add("camera-off");
}
volume.parentElement.remove();
} else
camera.remove();
}
if(!video)
media.srcObject = c.stream; media.srcObject = c.stream;
}
setLabel(c); setLabel(c);
setMediaStatus(c); setMediaStatus(c);
@ -1142,29 +1144,33 @@ function registerControlEvent(peerid) {
} }
let pip = /** @type {HTMLElement} */(peer.querySelector("span.pip")); let pip = /** @type {HTMLElement} */(peer.querySelector("span.pip"));
/** @ts-ignore */ if(pip) {
if(HTMLVideoElement.prototype.requestPictureInPicture) { /** @ts-ignore */
pip.onclick = function(event) { if(HTMLVideoElement.prototype.requestPictureInPicture) {
event.preventDefault(); pip.onclick = function(event) {
let pip = /** @type{HTMLElement} */(event.target); event.preventDefault();
let video = getParentVideo(pip); let pip = /** @type{HTMLElement} */(event.target);
videoPIP(video); let video = getParentVideo(pip);
}; videoPIP(video);
} else { };
pip.style.display = 'none'; } else {
pip.style.display = 'none';
}
} }
let fs = /** @type {HTMLElement} */(peer.querySelector("span.fullscreen")); let fs = /** @type {HTMLElement} */(peer.querySelector("span.fullscreen"));
fs.onclick = function(event) { if(fs) {
event.preventDefault(); fs.onclick = function(event) {
let fs = /** @type {HTMLElement} */(event.target); event.preventDefault();
let video = getParentVideo(fs); let fs = /** @type {HTMLElement} */(event.target);
if(video.requestFullscreen) { let video = getParentVideo(fs);
video.requestFullscreen(); if(video.requestFullscreen) {
} else { video.requestFullscreen();
displayWarning("Video Fullscreen not supported!"); } else {
} displayWarning("Video Fullscreen not supported!");
}; }
};
}
let camera = /** @type {HTMLElement} */(peer.querySelector("span.camera")); let camera = /** @type {HTMLElement} */(peer.querySelector("span.camera"));
if(camera) { if(camera) {