Add full screen support

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 {

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