Improved video appearance

assets/css/components/calls/callWindow.css

@@ -7,7 +7,6 @@
 .call-window {
 	background-color: white;
 	width: 300px;
-	height: 300px;
 	position: fixed;
 	top: 100px;
 	right: 10px;
@@ -46,7 +45,7 @@
 /**
  * Loading message
  */
- .loading-message-container {
+.loading-message-container {
 	position: absolute;
 	min-height: 110px;
 	width: 100%;
@@ -58,3 +57,17 @@
 	font-size: 150%;
 	color: white;
 }
+
+
+/**
+ * Stream target
+ */
+.call-window .streams-target {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+}
+
+.call-window .streams-target video {
+	width: 149px;
+}

assets/js/components/calls/callWindow.js

@@ -151,7 +151,7 @@ ComunicWeb.components.calls.callWindow = {
 		 * Create loading message area
 		 */
 		call.window.loadingMessageContainer = createElem2({
-			appendTo: call.window.body,
+			insertBefore: call.window.body.firstChild,
 			type: "div",
 			class: "loading-message-container",
 			innerHTML: "<i class='fa fa-clock-o'></i>"
@@ -196,14 +196,17 @@ ComunicWeb.components.calls.callWindow = {
 			if(!call.open)
 				return;
 
-			//Mark as connecting
-			call.setLoadingMessage("Connecting...");
-
 			call.localStream = stream;
 
 			//Initialize signaling server connection
 			ComunicWeb.components.calls.callWindow.initializeConnectionToSignalingServer(call);
 
+			//Add local stream to the list of visible stream
+			ComunicWeb.components.calls.callWindow.addVideoStream(call, true, stream);
+
+			//Mark as connecting
+			call.setLoadingMessage("Connecting...");
+
 			return true;
 
 		}).catch(function(e){