Created call window body

assets/css/components/calls/callWindow.css

@@ -13,23 +13,12 @@
 	right: 10px;
 	z-index: 100;
 	border: 1px black solid;
+	display: flex;
+	flex-direction: column;
 }
 
-
+.call.window.body {
-/**
+	flex: 1;
- * Loading message
- */
-.loading-message-container {
-	position: absolute;
-	height: inherit;
-	width: inherit;
-	display: flex;
-	background: 1px #0009;
-	flex-direction: column;
-	justify-content: space-around;
-	text-align: center;
-	font-size: 150%;
-	color: white;
 }
 
 
@@ -52,3 +41,20 @@
 .call-title {
 	flex: 1;
 }
+
+
+/**
+ * Loading message
+ */
+ .loading-message-container {
+	position: absolute;
+	min-height: 110px;
+	width: 100%;
+	display: flex;
+	background: 1px #0009;
+	flex-direction: column;
+	justify-content: space-around;
+	text-align: center;
+	font-size: 150%;
+	color: white;
+}

assets/js/components/calls/callWindow.js

@@ -47,41 +47,6 @@ ComunicWeb.components.calls.callWindow = {
 		call.window.container = callContainer;
 
 
-		//Create loading message area
-		call.window.loadingMessageContainer = createElem2({
-			appendTo: callContainer,
-			type: "div",
-			class: "loading-message-container",
-			innerHTML: "<i class='fa fa-clock-o'></i>"
-		});
-
-		call.window.loadingMessageContent = createElem2({
-			appendTo: call.window.loadingMessageContainer,
-			type: "div",
-			class: "message",
-			innerHTML: "Loading..."
-		});
-
-		/**
-		 * Set loading message visiblity
-		 * 
-		 * @param {Boolean} visible TRUE to make it visible / FALSE else
-		 */
-		call.setLoadingMessageVisibility = function(visible){
-			call.window.loadingMessageContainer.style.display = visible ? "flex" : "none";
-		}
-
-		/**
-		 * Update call loading message
-		 * 
-		 * @param {String} message The new message to show to the
-		 * users
-		 */
-		call.setLoadingMessage = function(message){
-			call.window.loadingMessageContent.innerHTML = message;
-		}
-
-
 		//Add toolbar
 		call.window.toolbar = createElem2({
 			appendTo: callContainer,
@@ -137,6 +102,56 @@ ComunicWeb.components.calls.callWindow = {
 
 		});
 
+
+		//Call box body
+		call.window.body = createElem2({
+			appendTo: callContainer,
+			type: "div",
+			class: "call-window-body"
+		});
+
+
+
+		
+		/**
+		 * Create loading message area
+		 */
+		call.window.loadingMessageContainer = createElem2({
+			appendTo: call.window.body,
+			type: "div",
+			class: "loading-message-container",
+			innerHTML: "<i class='fa fa-clock-o'></i>"
+		});
+
+		call.window.loadingMessageContent = createElem2({
+			appendTo: call.window.loadingMessageContainer,
+			type: "div",
+			class: "message",
+			innerHTML: "Loading..."
+		});
+
+		/**
+		 * Set loading message visiblity
+		 * 
+		 * @param {Boolean} visible TRUE to make it visible / FALSE else
+		 */
+		call.setLoadingMessageVisibility = function(visible){
+			call.window.loadingMessageContainer.style.display = visible ? "flex" : "none";
+		}
+
+		/**
+		 * Update call loading message
+		 * 
+		 * @param {String} message The new message to show to the
+		 * users
+		 */
+		call.setLoadingMessage = function(message){
+			call.window.loadingMessageContent.innerHTML = message;
+		}
+
+
+
+
 		//Load user media
 		call.setLoadingMessage("Waiting for your microphone and camera...");