diff --git a/assets/css/components/calls/callWindow.css b/assets/css/components/calls/callWindow.css
index 013edba7..f9415f84 100644
--- a/assets/css/components/calls/callWindow.css
+++ b/assets/css/components/calls/callWindow.css
@@ -13,23 +13,12 @@
right: 10px;
z-index: 100;
border: 1px black solid;
+ display: flex;
+ flex-direction: column;
}
-
-/**
- * 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;
+.call.window.body {
+ flex: 1;
}
@@ -51,4 +40,21 @@
.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;
}
\ No newline at end of file
diff --git a/assets/js/components/calls/callWindow.js b/assets/js/components/calls/callWindow.js
index 7db7b2c3..98013e0b 100644
--- a/assets/js/components/calls/callWindow.js
+++ b/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: ""
- });
-
- 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: ""
+ });
+
+ 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...");