Can switch to full screen

assets/css/components/calls/callWindow.css

@@ -27,8 +27,9 @@
 	visibility: visible;
 }
 
-.call.window.body {
+.call-window .call-window-body{
 	flex: 1;
+	display: flex;
 }
 
 
@@ -74,13 +75,16 @@
  * Stream target
  */
 .call-window .streams-target {
+	flex: 1;
 	display: flex;
 	flex-wrap: wrap;
 	flex-direction: row;
+	max-width: 100%;
 }
 
 .call-window .streams-target video {
-	width: 149px;
+	flex: 1;
+	flex-shrink: 1;
 }
 
 

assets/js/common/utils.js

@@ -701,3 +701,56 @@ function SendEvent(name, details){
 	document.dispatchEvent(event);
 
 }
+
+/**
+ * Request full screen for an HTML element
+ * 
+ * Note : this function must be called inside of an event of
+ * the user like a click, otherwise it will not work
+ * 
+ * This function source code is based on this StackOverFlow Answer
+ *     https://stackoverflow.com/a/32100295/3781411
+ * 
+ * @param {HTMLElement} elem The element for which we want
+ * full screen
+ */
+function RequestFullScreen(element){
+	if (
+		document.fullscreenElement ||
+		document.webkitFullscreenElement ||
+		document.mozFullScreenElement ||
+		document.msFullscreenElement
+	) {
+		if (document.exitFullscreen) {
+			document.exitFullscreen();
+		} else if (document.mozCancelFullScreen) {
+			document.mozCancelFullScreen();
+		} else if (document.webkitExitFullscreen) {
+			document.webkitExitFullscreen();
+		} else if (document.msExitFullscreen) {
+			document.msExitFullscreen();
+		}
+	} else {
+		if (element.requestFullscreen) {
+			element.requestFullscreen();
+		} else if (element.mozRequestFullScreen) {
+			element.mozRequestFullScreen();
+		} else if (element.webkitRequestFullscreen) {
+			element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+		} else if (element.msRequestFullscreen) {
+			element.msRequestFullscreen();
+		}
+	}
+}
+
+/**
+ * Check out whether Comunic has grabbed full screen or not
+ * 
+ * @return {Boolean} TRUE if the window is in full screen / FALSE else
+ */
+function IsFullScreen(){
+	return document.fullscreenElement ||
+		document.webkitFullscreenElement ||
+		document.mozFullScreenElement ||
+		document.msFullscreenElement;
+}

assets/js/components/calls/callWindow.js

@@ -303,6 +303,19 @@ ComunicWeb.components.calls.callWindow = {
 					togglButtonSelectedStatus(btn, call.isLocalVideoEnabled());
 					console.log(call);
 				}
+			},
+
+
+			//Full screen button
+			{
+				icon: "fa-expand",
+				selected: false,
+				onclick: function(btn){
+					RequestFullScreen(callContainer);
+					setTimeout(function(){
+						togglButtonSelectedStatus(btn, IsFullScreen());
+					}, 1000);
+				}
 			}
 		];