diff --git a/assets/css/components/calls/window.css b/assets/css/components/calls/window.css index 8545a71c..92482843 100644 --- a/assets/css/components/calls/window.css +++ b/assets/css/components/calls/window.css @@ -64,8 +64,9 @@ display: flex; flex-direction: row; max-width: 100%; - height: 126px; flex-wrap: wrap; + flex: 1; + justify-content: center; } .call-window .videos-area video { diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js index 452a8955..ab087a9a 100644 --- a/assets/js/components/calls/window.js +++ b/assets/js/components/calls/window.js @@ -85,6 +85,9 @@ class CallWindow extends CustomEvents { class: "videos-area" }) + + + // Contruct bottom area const bottomArea = createElem2({ appendTo: this.rootEl, @@ -92,6 +95,17 @@ class CallWindow extends CustomEvents { 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 const buttonsList = [ @@ -103,20 +117,21 @@ class CallWindow extends CustomEvents { onclick: () => { 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 buttonsList.forEach((button) => { @@ -140,6 +155,11 @@ class CallWindow extends CustomEvents { }); + + + + + // Join the call await ws("calls/join", { convID: this.conv.ID