diff --git a/assets/css/components/calls/window.css b/assets/css/components/calls/window.css index 74da525b..a275aee2 100644 --- a/assets/css/components/calls/window.css +++ b/assets/css/components/calls/window.css @@ -73,4 +73,37 @@ flex: 1; max-height: 100%; max-width: 100%; +} + +.call-window .window-bottom { + height: 40px; + display: flex; + justify-content: space-around; + align-items: center; +} + +.call-window .window-bottom div { + color: #fff6; + flex: 1; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.call-window .window-bottom div.selected { + color: white; +} + +.call-window .window-bottom div:hover { + background-color: #ffffff4d; +} + +.call-window .window-bottom div:active { + background-color: #fff3; +} + +.call-window .window-bottom div.hang-up-button { + color: #dd4b39; } \ No newline at end of file diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js index a8c6216d..452a8955 100644 --- a/assets/js/components/calls/window.js +++ b/assets/js/components/calls/window.js @@ -85,6 +85,60 @@ class CallWindow extends CustomEvents { class: "videos-area" }) + // Contruct bottom area + const bottomArea = createElem2({ + appendTo: this.rootEl, + type: "div", + class: "window-bottom" + }) + + // Display the list of buttons + const buttonsList = [ + + // Hang up button + { + icon: "fa-phone", + class: "hang-up-button", + selected: false, + onclick: () => { + this.Close(true) + } + } + ] + + /** + * @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) => { + + const buttonEl = createElem2({ + appendTo: bottomArea, + type: "div", + innerHTML: "" + }); + + //Add button optionnal class + if(button.class) + buttonEl.classList.add(button.class); + + buttonEl.addEventListener("click", () => { + button.onclick(buttonEl); + }); + + + setButtonSelected(buttonEl, button.selected) + + }); + // Join the call await ws("calls/join", {