From 194b6c60dea939a9398807ffbf470db451a06949 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 26 Jan 2019 10:57:58 +0100
Subject: [PATCH] Can switch to full screen

---
 assets/css/components/calls/callWindow.css |  8 +++-
 assets/js/common/utils.js                  | 53 ++++++++++++++++++++++
 assets/js/components/calls/callWindow.js   | 13 ++++++
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/assets/css/components/calls/callWindow.css b/assets/css/components/calls/callWindow.css
index 27d71128..6b905e5b 100644
--- a/assets/css/components/calls/callWindow.css
+++ b/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;
 }
 
 
diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js
index f1e713f1..8620c2e8 100644
--- a/assets/js/common/utils.js
+++ b/assets/js/common/utils.js
@@ -700,4 +700,57 @@ 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;
 }
\ No newline at end of file
diff --git a/assets/js/components/calls/callWindow.js b/assets/js/components/calls/callWindow.js
index 49d82ca1..9a0baf4e 100644
--- a/assets/js/components/calls/callWindow.js
+++ b/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);
+				}
 			}
 		];