Add full screen support

This commit is contained in:
Pierre HUBERT 2020-04-12 19:02:09 +02:00
parent 88aa8e52d5
commit 8263aacdf3
2 changed files with 33 additions and 12 deletions

View File

@ -64,8 +64,9 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
max-width: 100%; max-width: 100%;
height: 126px;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1;
justify-content: center;
} }
.call-window .videos-area video { .call-window .videos-area video {

View File

@ -85,6 +85,9 @@ class CallWindow extends CustomEvents {
class: "videos-area" class: "videos-area"
}) })
// Contruct bottom area // Contruct bottom area
const bottomArea = createElem2({ const bottomArea = createElem2({
appendTo: this.rootEl, appendTo: this.rootEl,
@ -92,6 +95,17 @@ class CallWindow extends CustomEvents {
class: "window-bottom" class: "window-bottom"
}) })
/**
* @param {HTMLElement} btn
* @param {boolean} selected
*/
const setButtonSelected = (btn, selected) => {
if(selected)
btn.classList.add("selected")
else
btn.classList.remove("selected")
}
// Display the list of buttons // Display the list of buttons
const buttonsList = [ const buttonsList = [
@ -103,20 +117,21 @@ class CallWindow extends CustomEvents {
onclick: () => { onclick: () => {
this.Close(true) this.Close(true)
} }
},
//Full screen button
{
icon: "fa-expand",
selected: false,
onclick: (btn) => {
RequestFullScreen(this.rootEl);
setTimeout(() => {
setButtonSelected(btn, IsFullScreen());
}, 1000);
}
} }
] ]
/**
* @param {HTMLElement} btn
* @param {boolean} selected
*/
const setButtonSelected = (btn, selected) => {
if(selected)
btn.classList.add("selected")
else
btn.classList.remove("selected")
}
//Add buttons //Add buttons
buttonsList.forEach((button) => { buttonsList.forEach((button) => {
@ -140,6 +155,11 @@ class CallWindow extends CustomEvents {
}); });
// Join the call // Join the call
await ws("calls/join", { await ws("calls/join", {
convID: this.conv.ID convID: this.conv.ID