Add hang up button

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;
 }

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: "<i class='fa " + button.icon + "'></i>"
+				});
+
+				//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", {